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

Question

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.

https://assets.ccbp.in/frontend/content/dynamic-webapps/speed-typing-test-output.gif

The Url will show you the required output to be generated.

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.

Resources

Clock Image:

• https://assets.ccbp.in/frontend/dynamic-webapps/clock-img.png

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

• When the text in the HTML paragraph element with id quoteDisplay and the value entered in HTML textarea element with id quoteInput are not the same, and the HTML button element with id submitBtn is clicked an error message should be shown in the HTML paragraph element with id result

• Page should consist of HTML textarea element with id quoteInput

• Page should consist of HTML button element with id resetBtn

• When the text in the HTML paragraph element with id quoteDisplay and the value entered in HTML textarea element with id quoteInput are not the same, and the HTML button element with id submitBtn is clicked the timer should be running

• When the text in HTML paragraph element with id quoteDisplay is entered in HTML textarea element, and the HTML button element with id submitBtn is clicked a success message should be shown in HTML paragraph element with id result

• Page should consist of HTML paragraph element with id timer

• The HTML paragraph element with id timer should always have numbers greater than or equals to 0

• Page should be using the Bootstrap component Spinner

• When the text in HTML paragraph element with id quoteDisplay is entered in HTML textarea element, and the HTML button element with id submitBtn is clicked the timer should stop

• Paee should consist of HTML paragraph element with id quoteDisplay

• Page should consist of HTML button element with id submitBtn

• Page should consist of HTML paragraph element with id result

• Page should consist of HTML container element with id speedTypingTest

• JS code implementation should use classList.add and classList.remove to show and hide bootstrap spinner element

• JS code implementation should use setInterval and clearInterval to implement timer

• When the reset button is clicked, an HTTP request should be made to get a random quotation from the given URL and the value in the HTML paragraph element with id quoteDisplay should be replaced with quotation received in the response

• When page is opened, an HTTP request should be made to get a random quotation from the given URL and the HTML paragraph element with id quoteDisplay should have the quotation received in the response.

Answer 1

<!DOCTYPE html>
<html lang="en-US">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Typing Speed Test</title>
    <script src="script.js" async></script>
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i,900,900i"
    type="text/css" media="all">
    <style>
        /*--------------------------------------------------------------
        Typography
    --------------------------------------------------------------*/


        body, button, input, select, textarea {
            font-family: 'Source Sans Pro', 'Helvetica', Arial, sans-serif;
            font-size: 18px;
            line-height: 1.5;
        }


        h1, h2, h3, h4, h5, h6 {
            clear: both;
        }


        p {
            margin-bottom: 1.5em;
        }


        b, strong {
            font-weight: bold;
        }


        dfn, cite, em, i {
            font-style: italic;
        }


        blockquote {
            margin: 0 1.5em;
        }


        address {
            margin: 0 0 1.5em;
        }


        pre {
            background: #eee;
            font-family: "Courier 10 Pitch", Courier, monospace;
            font-size: 15px;
            font-size: 1.5rem;
            line-height: 1.6;
            margin-bottom: 1.6em;
            max-width: 100%;
            overflow: auto;
            padding: 1.6em;
        }


        code, kbd, tt, var {
            font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
        }


        abbr, acronym {
            border-bottom: 1px dotted #666;
            cursor: help;
        }


        mark, ins {
            background: #fff9c0;
            text-decoration: none;
        }


        sup, sub {
            font-size: 75%;
            height: 0;
            line-height: 0;
            position: relative;
            vertical-align: baseline;
        }


        sup {
            bottom: 1ex;
        }


        sub {
            top: .5ex;
        }


        small {
            font-size: 75%;
        }


        big {
            font-size: 125%;
        }


        /*--------------------------------------------------------------
        Layout
        --------------------------------------------------------------*/


        body {
            margin: 0;
            padding: 0;
        }


        .masthead {
            padding: 1em 2em;
            background-color: #0D1B2E;
            color: white;
        }


        .masthead h1 {
            text-align: center;
        }


        .intro {
            padding: 2em 2em;
            color: #ffffff;
            background: #429890;
        }


        .intro p, .test-area {
            margin: 0 auto;
            max-width: 550px;
        }


        .test-area {
            margin-bottom: 4em;
            padding: 0 2em;
        }


        .test-wrapper {
            border: 10px solid grey;
            border-radius: 10px;
        }


        #origin-text {
            margin: 1em 0;
            padding: 1em 1em 0;
            background-color: #ededed;
        }


        #origin-text p {
            margin: 0;
            padding-bottom: 1em;
        }


        .test-wrapper {
            display: flex;
        }


        .test-wrapper textarea {
            flex: 1;
        }


        .meta {
            margin-top: 1em;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }


        .timer {
            font-size: 3em;
            font-weight: bold;
        }


        #reset {
            padding: .5em 1em;
            font-size: 1.2em;
            font-weight: bold;
            color: #E95D0F;
            background: white;
            border: 10px solid #E95D0F;
        }


        #reset:hover {
            color: white;
            background-color: #E95D0F;
        }


        .errors {
            font-size: 14px;
        }
    </style>
</head>


<body>
    <header class="masthead">
        <h1>Test Your Typing Speed</h1>
    </header>
    <main class="main">
        <article class="intro">
            <p>This is a typing test. Your goal is to duplicate the provided text, EXACTLY, in the field below. The
                timer starts when you start typing, and only stops when you match this text exactly. Good Luck!</p>
        </article><!-- .intro -->
        <section class="test-area">
            <div id="origin-text">
                <p>The text to test.</p>
            </div><!-- #origin-text -->


            <div class="test-wrapper">
                <textarea id="test-area" name="textarea" rows="6"
                    placeholder="The clock starts when you start typing."></textarea>
            </div><!-- .test-wrapper -->


            <div class="meta">
                <section id="clock">
                    <div class="timer">00:00:00</div>
                    <div class="errors">Errors: 0</div>
                </section>


                <button id="reset">Start over</button>
            </div><!-- .meta -->
        </section><!-- .test-area -->
    </main>
    <script>
        const testWrapper = document.querySelector(".test-wrapper");
        const testArea = document.querySelector("#test-area");
        const resetButton = document.querySelector("#reset");
        const theTimer = document.querySelector(".timer");


        //Choose random sentence from the list
        var wordsList = [
            "The mailbox was bent and broken and looked like someone had knocked it over on purpose.",
            "I was so thirsty I couldn't wait to get a drink of water.",
            "I found a gold coin on the playground after school today.",
            "The chocolate chip cookies smelled so good that I ate one without asking.",
            "My bandaid wasn't sticky any more so it fell off on the way to school.",
            "He had a sore throat so I gave him my bottle of water and told him to keep it.",
            "The church was white and brown and looked very old.",
            "I was so scared to go to a monster movie but my dad said he would sit with me so we went last night.",
            "Your mom is so nice she gave me a ride home today.",
            "I fell in the mud when I was walking home from school today.",
            "This dinner is so delicious I can't stop eating.",
            "The school principal was so mean that all the children were scared of him.",
            "I went to the dentist the other day and he let me pick a prize out of the prize box.",
            "The box was small and wrapped in paper with tiny silver and red glitter dots.",
            "My dad is so funny that he told us jokes all night long and we never fell asleep.",
            "How did you know that I was going to have a peanut butter sandwich for lunch?",
            "That boy is so mean that he doesn't care if a door slams in your face or if he cuts in line."
        ];
        var randomWordNumber = Math.floor((Math.random() * 16) + 0);
        document.querySelector("#origin-text p").innerHTML = wordsList[randomWordNumber];
        var originText = document.querySelector("#origin-text p").innerHTML;



        var timer = [0, 0, 0, 0];
        var interval;
        var timerRunning = false;
        var errors = 0;
        // Add leading zero to numbers 9 or below (purely for aesthetics):
        function leadingZero(time) {
            if (time <= 9) {
                time = "0" + time;
            }
            return time;
        }


        // Run a standard minute/second/hundredths timer:
        function runTimer() {
            let currentTime = leadingZero(timer[0]) + ":" + leadingZero(timer[1]) + ":" + leadingZero(timer[2]);
            theTimer.innerHTML = currentTime;
            timer[3]++;
        
            timer[0] = Math.floor((timer[3] / 100) / 60);
            timer[1] = Math.floor((timer[3] / 100) - (timer[0] * 60));
            timer[2] = Math.floor(timer[3] - (timer[1] * 100) - (timer[0] * 6000));
        }


        // Match the text entered with the provided text on the page:
        function spellCheck() {
            let textEnterd = testArea.value;
            let originTextMatch = originText.substring(0, textEnterd.length);
        
            if (textEnterd == originText) {
                clearInterval(interval);
                testWrapper.style.borderColor = "#429890";
                theTimer.style.color = "#429890";
            } else {
                if (textEnterd == originTextMatch) {
                    testWrapper.style.borderColor = "#65CCf3";
                }
                else {
                    testWrapper.style.borderColor = "#E95D0F";
                    errors++;
                    document.querySelector(".errors").innerHTML = "Errors: " + errors;
                }
            }
        }


        // Start the timer:
        function start() {
            let textEnterdLen = testArea.value.length;
            if (textEnterdLen === 0 && !timerRunning) {
                timerRunning = true;
                interval = setInterval(runTimer, 10);
            }
        
        }


        // Reset everything:
        function reset() {
            clearInterval(interval);
            interval = null;
            timer = [0, 0, 0, 0];
            timerRunning = false;
            errors = 0;
        
            testArea.value = "";
            theTimer.innerHTML = "00:00:00";
            testWrapper.style.borderColor = "grey";
            theTimer.style.color = "black";
        
            randomWordNumber = Math.floor((Math.random() * 16) + 0);
            document.querySelector("#origin-text p").innerHTML = wordsList[randomWordNumber];
            originText = document.querySelector("#origin-text p").innerHTML;
        
            document.querySelector(".errors").innerHTML = "Errors: 0";
        }


        // Event listeners for keyboard input and the reset button:
        testArea.addEventListener("keypress", start, false);
        testArea.addEventListener("keyup", spellCheck, false);
        resetButton.addEventListener("click", reset, false);
    </script>
</body>
</html>