speed_type/index.html at main · juuce79/speed_type · 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>

<!-- Frank Lloyd Curwen -->
<!-- frcu2200 -->
<!-- frcu2200@student.miun.se -->

<!-- document head including language, viewport for responsive design,
     title and links to css stylesheet and JavaScript -->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Speed Typer</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/texts.js" defer></script>
        <script src="js/main.js" defer></script>
    </head>
    <body>
        <!-- header image -->
        <header>
            <img id="speedtyper" src="img/speedtyper.svg" alt="Speed Typer">
        </header>
        <main>
            <section class="wrapper">
                <table>
                    <tr>
                        <!-- dropdown menu for settings -->
                        <td id="settingsBox">
                            <label id="settingsLabel" for="settings">Settings:</label>
                            <select name="settings" id="settings">
                                <option value="">Please select option:</option>
                                <option value="level1">Easy: No Punctuation</option>
                                <option value="level2">Difficult: Punctuation</option>
                            </select>
                        </td>
                        <!-- text title, author and statistics, this is populated from JavaScript according to text dropdown -->
                        <td id="titleBox">
                            <h3 id="textTitle"></h3>
                            <h4 id="textAuthor"></h4>
                            <p id="textStats"></p>
                        </td>
                        <!-- dropdown menu for the texts -->
                        <td id="textBox">
                            <label id="textLabel" for="texts">Choose a text:</label>
                            <select name="texts" id="texts" disabled>
                                <option value="">Please select option:</option>
                                <option value="stardust">English: Stardust</option>
                                <option value="love">English: Love</option>
                                <option value="everlasting">English: Everlasting</option>
                                <option value="njuta">Svenska: Njuta</option>
                                <option value="ändring">Svenska: Ändring</option>
                                <option value="världen">Svenska: Världen</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <br>
                <table class="content-box">
                    <tr>
                        <!-- the main text box. this is populated from JavaScript according to which text is chosen -->
                        <td class="typing-text">
                            <input type="text" id="paragraph-text" name="paragraph-text" class="input-field"><p></p>
                        </td>
                    </tr>
                </table><br>
                <table class="tableCopy">
                    <tr>
                        <!-- this is where you type -->
                        <td class="typing-text2">
                            <input type="text" id="copy" name="copy" placeholder="type here to begin...">
                        </td>
                    </tr>
                </table><br>
                <!-- this is an evenly spaced table for all statistics and restart button -->
                <table class="table">
                    <tr class="result-details">
                        <td id="r1c1" class="time">Time:</td>
                        <td id="r1c2" class="gwpm">Gross WPM:</td>
                        <td id="r1c3" class="wpm">Net WPM:</td>
                        <td id="r1c4" class="gcpm">Gross CPM:</td>
                    </tr>
                    <tr class="result-details">
                        <td id="r2c1" class="time"><span><b>60</b>s</span></td>
                        <td id="r2c2" class="gwpm"><span>0</span></td>
                        <td id="r2c3" class="wpm"><span>0</span></td>
                        <td id="r2c4" class="gcpm"><span>0</span></td>
                    </tr>
                    <tr class="result-details">
                        <td id="r3c1" class="cpm">Net CPM:</td>
                        <td id="r3c2" class="mistake">Errors:</td>
                        <td id="r3c3" class="accuracy">Accuracy:</td>
                        <td id="r4c4" rowspan="2"><input type="button" id="startStopButton" value="Start"></td>
                    </tr>
                    <tr class="result-details">
                        <td id="r4c1" class="cpm"><span>0</span></td>
                        <td id="r4c2" class="mistake"><span>0</span></td>
                        <td id="r4c3" class="accuracy"><span>100%</span></td>
                    </tr>
                </table>
            </section>
        </main>
        <footer>
            <hr>
            <!-- footer text -->
            <p id="copytext"><s>No copyright ©</s> Frank Curwen<br>
                you are free to use, reuse, copy, and do whatever you would<br>
                like with the code, text or any part of the website ❤️</p>
        </footer>
    </body>
</html>