Skip to content

Commit 318e0ee

Browse files
thenaveensaggamthenaveensaggam
committed
added
1 parent e48b4c2 commit 318e0ee

File tree

3 files changed

+291
-0
lines changed

3 files changed

+291
-0
lines changed

‎JS_Starter_Template/18_Mini_Project_Typing_Tester_App/18_Mini_Project.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Mini Project</title>
6+
<link rel="stylesheet" href="styles.css">
7+
</head>
8+
<body>
9+
<!-- MAIN HEADER -->
10+
<header class="main-header">
11+
<h1>UI Brains Typing Tester App</h1>
12+
</header>
13+
14+
<section class="intro-section">
15+
<div>
16+
<p>This is a typing test.
17+
Your goal is to duplicate the provided text,
18+
EXACTLY, in the field below.
19+
The timer starts when you start typing,
20+
and only stops when you match this
21+
text exactly. Good Luck!</p>
22+
</div>
23+
</section>
24+
<br>
25+
<section class="text-section">
26+
<div class="text-section-div">
27+
<p>Thanks for Learning UI Technologies.</p>
28+
</div>
29+
</section>
30+
31+
<br>
32+
<section class="text-area-section">
33+
<div class="text-area-div">
34+
<textarea onpaste="return false" id="text-area" rows="4" cols="53" placeholder="The Clock starts when you starts typing.."></textarea>
35+
</div>
36+
</section>
37+
38+
<br>
39+
<section class="result-section">
40+
<div class="result-section-div">
41+
<span class="timer">00:00:00</span>
42+
<span>
43+
<button type="button" id="reset">Reset</button>
44+
</span>
45+
</div>
46+
</section>
47+
48+
<!-- Congratulations Section -->
49+
<section class="cong-section">
50+
<div class="cong-section-div">
51+
<p>Congratulations !!</p>
52+
</div>
53+
</section>
54+
55+
<footer>
56+
<h3>Copyright &copy; 2018 UIBrains.com</h3>
57+
<p>All Rights Reserved</p>
58+
<small>Developed & Maintained by Naveen Saggam</small>
59+
</footer>
60+
61+
<script src="script.js"></script>
62+
</body>
63+
</html>

‎JS_Starter_Template/18_Mini_Project_Typing_Tester_App/script.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
var textAreaBorder = document.querySelector("#text-area");
2+
var textArea = document.querySelector("#text-area");
3+
var originalText = document.querySelector(".text-section-div p").innerHTML;
4+
var resetButton = document.querySelector("#reset");
5+
var theTimer = document.querySelector(".timer");
6+
var greetSection = document.querySelector('.cong-section');
7+
8+
var timer = 0;
9+
var minutes = 0;
10+
var seconds = 0;
11+
var milliSeconds = 0;
12+
var currentTime = '';
13+
var interval = 0;
14+
var timerRunning = false;
15+
16+
// Add leading zero to numbers 9 or below:
17+
function leadingZero(time) {
18+
if(time <= 9){
19+
return '0' + time;
20+
}
21+
else{
22+
return time;
23+
}
24+
}
25+
26+
27+
// Run a standard minute/second/hundredths timer:
28+
function startTimer() {
29+
minutes = Math.floor((timer/100)/60);
30+
seconds = Math.floor((timer/100) - (minutes * 60));
31+
milliSeconds = Math.floor(timer- (seconds * 100) - (minutes * 6000));
32+
33+
minutes = leadingZero(minutes);
34+
seconds = leadingZero(seconds);
35+
milliSeconds = leadingZero(milliSeconds);
36+
37+
currentTime = minutes + ':' + seconds + ":" + milliSeconds;
38+
39+
theTimer.textContent = currentTime;
40+
timer++;
41+
}
42+
43+
44+
// Match the text entered with the provided text on the page:
45+
function spellCheck() {
46+
var textEntered = textArea.value;
47+
var partialText = originalText.substring(0,textEntered.length);
48+
if(textEntered === ''){
49+
textAreaBorder.style.borderColor = 'gray';
50+
}
51+
else{
52+
if(textEntered === originalText){
53+
// green
54+
textAreaBorder.style.borderColor = 'forestgreen';
55+
// to stop timer
56+
clearInterval(interval);
57+
// Greetings Msg
58+
greetSection.style.display = 'block';
59+
}
60+
else{
61+
if(textEntered === partialText){
62+
// blue
63+
textAreaBorder.style.borderColor = 'lightblue';
64+
}
65+
else{
66+
// red
67+
textAreaBorder.style.borderColor = 'orangered';
68+
}
69+
}
70+
}
71+
72+
}
73+
74+
75+
76+
// Start the timer:
77+
function start() {
78+
var textEnteredLength = textArea.value.length;
79+
if(textEnteredLength === 0 && !timerRunning){
80+
// start the timer
81+
interval = setInterval(startTimer,10);
82+
timerRunning = true;
83+
}
84+
}
85+
86+
87+
// Reset everything:
88+
function reset() {
89+
clearInterval(interval);
90+
timer = 0;
91+
minutes = 0;
92+
seconds = 0;
93+
milliSeconds = 0;
94+
currentTime = '';
95+
interval = 0;
96+
timerRunning = false;
97+
theTimer.textContent = "00:00:00";
98+
textAreaBorder.style.borderColor = 'gray';
99+
textArea.value = '';
100+
greetSection.style.display = 'none';
101+
}
102+
103+
// Event listeners for keyboard input and the reset button:
104+
textArea.addEventListener('keypress',start);
105+
textArea.addEventListener('keyup',spellCheck);
106+
resetButton.addEventListener('click',reset);

‎JS_Starter_Template/18_Mini_Project_Typing_Tester_App/styles.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
body{
2+
font-family: 'Comic Sans MS', sans-serif;
3+
margin: 0;
4+
}
5+
6+
.main-header{
7+
background-color:#0E0C0A;
8+
color: white;
9+
text-align: center;
10+
padding: 15px;
11+
font-size: 20px;
12+
}
13+
14+
.intro-section{
15+
background-color: #5B5349;
16+
padding: 15px;
17+
color: white;
18+
text-align: center;
19+
font-size: 18px;
20+
}
21+
22+
.intro-section div{
23+
margin: 0 auto; /* place center */
24+
max-width: 750px;
25+
}
26+
27+
.text-section{
28+
margin: 0 auto; /* place center */
29+
max-width: 750px;
30+
background-color: #E1DFDD;
31+
padding: 15px;
32+
text-align: center;
33+
font-size: 25px;
34+
border-radius: 5px;
35+
}
36+
.text-section p{
37+
margin: 0;
38+
}
39+
40+
.text-area-div{
41+
margin: auto; /* place center */
42+
max-width: 750px;
43+
}
44+
45+
#text-area{
46+
margin-left: 10px;
47+
border: 10px solid gray;
48+
border-radius: 5px;
49+
font-size: 25px;
50+
font-family: 'Roboto', sans-serif;
51+
}
52+
53+
#text-area:focus{
54+
outline: none;
55+
}
56+
57+
.result-section {
58+
margin-bottom: 20px;
59+
}
60+
61+
.result-section-div{
62+
margin: 0 auto; /* place center */
63+
max-width: 750px;
64+
}
65+
66+
.result-section-div span{
67+
font-size: 50px;
68+
}
69+
70+
.result-section-div button{
71+
background-color: orangered;
72+
color: white;
73+
padding: 10px 20px;
74+
text-decoration: none;
75+
border: none;
76+
text-align: center;
77+
display: inline-block;
78+
font-size: 30px;
79+
cursor: pointer;
80+
border-radius: 4px;
81+
float: right;
82+
}
83+
84+
.result-section-div button:hover{
85+
background-color: red;
86+
}
87+
88+
.cong-section{
89+
margin: auto; /* place center */
90+
max-width: 750px;
91+
background-color: forestgreen;
92+
color: white;
93+
padding: 10px;
94+
text-align: center;
95+
font-size: 35px;
96+
border-radius: 5px;
97+
display: none;
98+
}
99+
100+
.cong-section-div p{
101+
margin: 0;
102+
}
103+
104+
.cong-section-div{
105+
margin: 0 auto; /* place center */
106+
max-width: 750px;
107+
}
108+
109+
footer{
110+
background-color: #0E0C0A;
111+
color: white;
112+
text-align: center;
113+
padding: 10px;
114+
font-size: 20px;
115+
margin-top: 20px;
116+
line-height: 10px;
117+
}
118+
119+
footer small{
120+
color: orangered;
121+
}
122+

0 commit comments

Comments
 (0)