Skip to content

Commit f771872

Browse files
thenaveensaggamthenaveensaggam
committed
modified
1 parent 87a9009 commit f771872

File tree

2 files changed

+180
-0
lines changed

2 files changed

+180
-0
lines changed

‎JS_Starter_Template/18_Mini_Project_Typing_Tester_App/18_Mini_Project.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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+
<!-- Congratulations Section -->
50+
<section class="cong-section">
51+
<div class="cong-section-div">
52+
<p>Congratulations !!</p>
53+
</div>
54+
</section>
55+
56+
<footer>
57+
<h3>Copyright &copy; 2018 UIBrains.com</h3>
58+
<p>All Rights Reserved</p>
59+
<small>Developed & Maintained by Naveen Saggam</small>
60+
</footer>
61+
</body>
62+
</html>

‎JS_Starter_Template/18_Mini_Project_Typing_Tester_App/styles.css‎

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

0 commit comments

Comments
 (0)