Answer to Question #202272 in HTML/JavaScript Web Application for teja

Question

Answer to Question #202272 in HTML/JavaScript Web Application for teja

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #202272

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:

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

Expert's answer

<!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>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #202272 in HTML/JavaScript Web Application for teja

Comments

Leave a comment

Related Questions