-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
78 lines (73 loc) · 3.05 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<title>Typingify</title>
</head>
<body>
<div class="home-container">
<div class="header">
<div class="header-links" id="rulesLink">Rules and Tips</div>
<div class="header-name">Typingify</div>
<div class="header-links" id="scoresLink">Your Scores</div>
</div>
<div class="parent-container">
<div class="stats-container"> <ul>
<li><div class="stats-label">Words</div><div class="stats-value" id="totalwords">0</div></li>
<li><div class="stats-label">Errors</div><div class="stats-value" id="errors">0</div></li>
<li><div class="stats-label">Accuracy</div><div class="stats-value" id="accuracy">0</div></li>
</ul></div>
<div class="main-container">
<div class="quote-display" id="quoteDisplay"></div>
<textarea id="quoteInput" class="quote-input" autofocus></textarea>
<div style="text-align: end;">
<button class="mode-button" id="mode">Mode: Difficult</button>
</div>
</div>
<div class="stats-container" >
<ul>
<li><div class="stats-label">Timer</div><div class="stats-value" id="timer">0</div></li>
<li><div class="stats-label">CPM</div><div class="stats-value" id="cpm">0</div></li>
<li><div class="stats-label">WPM</div><div class="stats-value" id="wpm">0</div></li>
</ul>
</div>
</div>
</div>
<div class="stats-table" id="scoresContainer">
<div class="header-name">Your Scores</div>
<table id="stats-list">
<tr>
<th>CPM</th>
<th>WPM</th>
<th>Accuracy</th>
<th>Errors</th>
<th>Words</th>
<th>Duration</th>
</tr>
</table>
</div>
<div class="about-container" id="rulesContainer">
<div class="header-name">Rules and tips</div>
<div class="rules-container">
<p>1) The timer starts as soon as you start typing in the text area.</p>
<p>2) To stop the current recording, press 'Enter' and the score will be recored in the table.</p>
<p>3) To restart the recording, press 'Escape' and the parameters will be set back to inital values.</p>
<p>4) There are two modes. </p>
<p>a) Easy - Sentences without punctations with all characters in lower case.</p>
<p>b) Difficult - Sentences with punctations and following the basic rules of grammar. </p>
</div>
<div class="formula-container">
<p><strong>Words</strong> = Total Characters Typed / 5</p>
<p><strong>Errors</strong> = No. of Incorrect Characters Typed</p>
<p><strong>Accuracy</strong> = ( Correct Characters Typed / Total Characters Typed ) * 100 %</p>
<p><strong>CPM</strong> = ( Correct Characters Typed / Duration ) * 60</p>
<p><strong>WPM</strong> = CPM/5</p>
</div>
</div>
</body>
</html>