Answer to Question #256907 in HTML/JavaScript Web Application for prime

Question

Answer to Question #256907 in HTML/JavaScript Web Application for prime

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #256907

Speed Typing Test

In this assignment, let's build a Speed Typing Test using Html,Css, Javascript

Refer to the below image.

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

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

Resources

Clock Image:

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

Expert's answer

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

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;
}

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 #256907 in HTML/JavaScript Web Application for prime

Resources

Comments

Leave a comment

Related Questions