Answer to Question #204970 in HTML/JavaScript Web Application for Hari nadh babu

Question

Answer to Question #204970 in HTML/JavaScript Web Application for Hari nadh babu

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #204970

Bookmark Maker

Write a HTML, CSS, JavaScript Dynamic Web Application Program for Bookmark Maker

The below Url is the Question and procedure of Bookmark Maker

https://drive.google.com/file/d/13KC5acqLGj61aayVab137d8s9rPArIfs/view?usp=sharing

Expert's answer

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

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

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

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

Comments

No comments. Be the first!

Answer to Question #204970 in HTML/JavaScript Web Application for Hari nadh babu

Comments

Leave a comment

Related Questions