Skip to content

Commit 0b0cdb4

Browse files
thenaveensaggamthenaveensaggam
committed
added
1 parent 27ce156 commit 0b0cdb4

File tree

3 files changed

+266
-0
lines changed

3 files changed

+266
-0
lines changed

‎6PM_Batch/18_Mini_Project.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Mini Project</title>
6+
<script src="script.js" async></script>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<!-- MAIN HEADER -->
11+
<header class="main-header">
12+
<h1>UI Brains Typing Tester App</h1>
13+
</header>
14+
15+
<section class="intro-section">
16+
<div>
17+
<p>This is a typing test.
18+
Your goal is to duplicate the provided text,
19+
EXACTLY, in the field below.
20+
The timer starts when you start typing,
21+
and only stops when you match this
22+
text exactly. Good Luck!</p>
23+
</div>
24+
</section>
25+
<br>
26+
<section class="text-section">
27+
<div class="text-section-div">
28+
<p>Thanks for Learning UI Technologies.</p>
29+
</div>
30+
</section>
31+
32+
<br>
33+
<section class="text-area-section">
34+
<div class="text-area-div">
35+
<textarea id="text-area" rows="6" cols="56" placeholder="The Clock starts when you starts typing.."></textarea>
36+
</div>
37+
</section>
38+
39+
<br>
40+
<section class="result-section">
41+
<div class="result-section-div">
42+
<span class="timer">00:00:00</span>
43+
<span>
44+
<button type="button" id="reset">Reset</button>
45+
</span>
46+
</div>
47+
</section>
48+
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+
</body>
61+
</html>

‎6PM_Batch/script.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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 congSection = 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+
19+
if(time <= 9){
20+
return "0"+time;
21+
}
22+
else{
23+
return time;
24+
}
25+
}
26+
27+
// Run a standard minute/second/hundredths timer:
28+
//minutes = Math.floor((timer/100)/60);
29+
//seconds = Math.floor((timer/100) - (minutes * 60));
30+
//milliSeconds = Math.floor(timer- (seconds * 100) - (minutes * 6000));
31+
function startTimer() {
32+
minutes = Math.floor((timer/100)/60);
33+
seconds = Math.floor((timer/100) - (minutes * 60));
34+
milliSeconds = Math.floor(timer - (seconds * 100) - (minutes * 6000));
35+
36+
minutes = leadingZero(minutes);
37+
seconds = leadingZero(seconds);
38+
milliSeconds = leadingZero(milliSeconds);
39+
40+
currentTime = minutes + ":" + seconds + ":" + milliSeconds;
41+
42+
theTimer.innerHTML = currentTime;
43+
timer++;
44+
}
45+
46+
47+
// Match the text entered with the provided text on the page:
48+
function spellCheck() {
49+
var textEntered = textArea.value;
50+
var partialText = originalText.substring(0,textEntered.length);
51+
52+
if(textEntered === originalText){
53+
textAreaBorder.style.borderColor = 'green';
54+
clearInterval(interval); // stop timer
55+
congSection.style.display = 'block'; // display the congratulation message
56+
}
57+
else{
58+
if(textEntered === partialText){
59+
textAreaBorder.style.borderColor = 'lightblue';
60+
}
61+
else{
62+
textAreaBorder.style.borderColor = 'red';
63+
}
64+
}
65+
}
66+
67+
// Start the timer:
68+
function start() {
69+
var textEnteredLength = textArea.value.length;
70+
if(textEnteredLength === 0 && !timerRunning){
71+
//Start The Timer
72+
interval = setInterval(startTimer,10);
73+
timerRunning = true;
74+
}
75+
}
76+
77+
// Reset everything:
78+
function reset() {
79+
clearInterval(interval);
80+
timer = 0;
81+
minutes = 0;
82+
seconds = 0;
83+
milliSeconds = 0;
84+
currentTime = "";
85+
interval = 0;
86+
timerRunning = false;
87+
theTimer.innerHTML = "00:00:00";
88+
textArea.value = "";
89+
textAreaBorder.style.borderColor = 'gray';
90+
congSection.style.display = 'none'; // hide the congratulations message
91+
}
92+
93+
// Event listeners for keyboard input and the reset button:
94+
textArea.addEventListener('keypress',start);
95+
textArea.addEventListener('keyup',spellCheck);
96+
resetButton.addEventListener('click',reset);

‎6PM_Batch/styles.css‎

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

0 commit comments

Comments
 (0)