Answer to Question #167096 in HTML/JavaScript Web Application for Chandra sena reddy

Question

Answer to Question #167096 in HTML/JavaScript Web Application for Chandra sena reddy

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #167096

Speed Typing Test:

Instructions:

Add HTML container element with id speedTypingTest
Add HTML paragraph elements with id timer, quoteDisplay and result
Add HTML textarea element with id quoteInput
Add HTML button elements with id submitBtn and resetBtn
Add the Bootstrap component spinner

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.

Expert's answer

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
</head>
<body>
<div id="speedTypingTest" class="spinner-border spinner-border-sm">
<span class="sr-only">Loading...</span>
</div>
<p id="timer"></p>
<p id="quoteDisplay"></p>
<p id="result"></p>
<textarea id="quoteInput" onclick="start()"></textarea>
<button type="button" name="submitBtn" onclick="verify()">submit</button>
<button type="button" name="resetBtn" onclick="reset()">reset</button>

<script type="text/javascript">
window.onload=getReq();
var s;
function getReq(){
var theUrl="https://apis.ccbp.in/random-quote";
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
var obj=JSON.parse(xmlHttp.responseText);
s=obj.content;
if(s!=""){
hideSpinner();
}
document.getElementById("quoteDisplay").innerHTML=s;
}

function changeValue() {
document.getElementById("timer").innerHTML = ++value;
}
var timerInterval = null;
function start() {
stop();
value = 0;
timerInterval = setInterval(changeValue, 1000);
}
var stop = function() {
clearInterval(timerInterval);
}
function verify(){
if(document.getElementById("quoteInput").value===s){
stop();
document.getElementById("result").innerHTML="Success";
}else{
document.getElementById("result").innerHTML="Error the text is not same";
}
}
function reset(){
getReq();
start();
document.getElementById("quoteInput").value=" ";
}
function hideSpinner() {
document.getElementById('speedTypingTest')
.style.display = 'none';
}

</script>
</body>
</html>

Explaination.

1.A http request is made to the URL given to fetch a random quote which the user will type.

2.the http request returns the quote in a JSON format which is then parsed to get the quote from the content field.

3.the quote fetched is then displayed in <p> with id="quoteDisplay" for the user to type.

4.when the user clicks on the text area with id="quoteInput" the timer automatically starts by a call to the start() function

5.the start() function starts the timer with the help of setInterval() function.

6.when the user clicks the submit button after typing the text.

7.verify() method is called which checks if the text entered by the user is matches with given quote or not.

8.if the text doesn't matches the an error message is shown and the timer keeps on going.

9.otherwise the timer stops by calling the stop() function and a success message is printed.

Answer to Question #167096 in HTML/JavaScript Web Application for Chandra sena reddy

Comments

Leave a comment

Related Questions