Answer to Question #172519 in HTML/JavaScript Web Application for hemanth

Question

Answer to Question #172519 in HTML/JavaScript Web Application for hemanth

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #172519

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

Expert's answer

****************HTML CODE (index.html)*****************
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>


<body>
    <div class="container">
        <div class="title ">Speed typing test </div>


        <div>
            <p>On your fingers lets set Go!</p>
            <table>
                <tr>
                    <td><img src="alarm clock.PNG"></td>
                    <td>
                        <table>
                            <tr>
                                <td class="seconds">
                                    <div id="seccounter">0</div>
                                </td>
                                <td><sub>Seconds</sub></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>


            <div class="showscreen">
                <p style="font-size: 2vw;">Do not give your attention to what others do or fail to do give it to what
                    you do or fail to do</p>
                <form>
                    <textarea class="input" id="txtfield" rows="8" cols="30" name="text" placeholder="Type here!!"
                        oninput="processCurrentText()"></textarea>
                    <br />
                </form>
            </div>
            <br>
            <div id="completionfeedbck">


            </div>
            <div>
                <table>
                    <tr>
                        <td><input class="btn purple " type="button" value="submit" onclick="stop()" /></td>
                        <td>&nbsp;&nbsp;</td>
                        <td><input class=" btn" type="button" value="Reset" onclick="location.reload()" /></td>
                    </tr>
                </table>


            </div>
            <br>


        </div>



    </div>
</body>
<script type="text/javascript" src="game.js"></script>


</html>

*****************CSS File (style.css)**************************
body {
    background-color: #000000;
    color: black;
    text-align: center;
}


.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35vw;
    padding: 5px;
    margin-top: 10vw;
    margin-right: auto;
    margin-left: auto;
    background-color: #DCC1F8;
}


.title {
    margin-bottom: 20px;
    font-size: 3.5rem;
    font-weight: 1000;
    color: #6200A4;
}


sub {
    vertical-align: sub;
    font-size: small;
}


.seconds {
    font-size: 24px;
}


.showscreen {
    background-color: #EEEAF9;
    padding: 10px;
    border: solid 1px black;
    border-radius: 10px;
    width: 30vw;
}


.input {
    background-color: #ffffff;
    height: 80px;
    width: 90%;
    font-size: 1.1rem;
    font-weight: 200;
    margin: 15px;
    padding: 0px;
    border: solid 0.2px black;
    border-radius: 3px;
}


input:focus {
    border: solid 1.2px #BB976D;
}


.purple {
    background-color: #6200A4;
    color: white;


}


.btn {
    border: none;
    border-radius: 3px;
    ;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

******************Javascript File (process.js)
var seconds = 0;
var el = document.getElementById('seccounter');
var feedback = document.getElementById('completionfeedbck');


var str = "";
function incrementSeconds() {
    seconds += 1;
    el.innerText = seconds;
}




var cancel = setInterval(incrementSeconds, 1000);




function getAllValues() {
    var inputs = document.getElementsByTagName('textarea');
    for (i = 0; i < inputs.length; i++) {
        str += inputs[i].value + "  ";
    }


}


function stop() {


    getAllValues();
    var string_a = "Do not give your attention to what others do or fail to do; give it to what you do or fail to do";
    var string_b = str;
    var n = string_a.localeCompare(string_b);
    var textVal = document.getElementById('txtfield').value;
    if (n == 1 && !textVal == "") {
        clearInterval(cancel);
        feedback.innerText = "You typed in " + seconds + " seconds";
    } else if (n == -1 || textVal == "") {
        feedback.innerText = "You typed incorrect sentence";
    } else { }
}

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

Comments

No comments. Be the first!

Answer to Question #172519 in HTML/JavaScript Web Application for hemanth

Comments

Leave a comment

Related Questions