How to make Speed Typing Test using HTML CSS and JavaScript Project

Speed Typing Test

In this assignment, let's build a Speed Typing Test by applying the concepts we learned till now.

Refer to the below image.

Instructions:

By following the above instructions, achieve the given functionality.

When the page is opened
- Make a HTTP request to get a random quotation
  - URL:
    https://apis.ccbp.in/random-quote
- Display the random quotation in the HTML paragraph element with id
  quoteDisplay
- Start the timer and display the time in seconds in the HTML paragraph element with id
  timer
When a value is entered in the HTML textarea element with id
quoteInput
and the HTML button element with id
submitBtn
is clicked
- If the value entered in the HTML textarea element with id
  quoteInput
  is same as the quotation in the HTML paragraph element with id
  quoteDisplay
  - The timer should be stopped and a success message should be shown in the HTML paragraph element with id
    result
- If the value entered in the HTML textarea element with id
  quoteInput
  does not match the quotation in the HTML paragraph element with id
  quoteDisplay
  - The timer should be running and an error message should be shown in the HTML paragraph element with id
    result
When the HTML button with id
resetBtn
is clicked
- Make a HTTP request to get a new random quotation
- Display the new random quotation in the HTML paragraph element with id
  quoteDisplay
- Reset the timer to
  0
  seconds and display the time in seconds in the HTML paragraph element with id
  timer
- Empty the HTML textarea element with id
  quoteInput
Add
loading
status with Bootstrap component
spinner
while making an HTTP request.

Clock Image:

CSS Colors Used:

Background Color Hex Codes Used:

#690cb0

#dac0ff

#f3eaff

#f2ebfe

#ffffff

Border Color Hex Codes Used:

#9aa5b1

Text Color Hex Codes Used:

#690cb0

#3e4c59

#ffffff

#323f4b