Cool_WebDev_Projects/Typing Test/index.html at main · swati-gwc/Cool_WebDev_Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS 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">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="masthead">
        <h1>Check Your Typing Speed</h1>
    </header>
    <main class="main">
        <article class="intro">
            <p>This is a typing test to check your speed and accuracy to type. Your goal is to duplicate the provided text, EXACTLY, in the field below. If you type anything wrong the borders will turn red and if you are going correct they will be blue. When you write the whole text correctly they will turn green. 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>This is a 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>
                </section>

                <button id="reset">Start over</button>
            </div><!-- .meta -->
        </section><!-- .test-area -->
    </main>

</body>

</html>