Skip to content

Commit cc1b383

Browse files
FaizaAbdullah-codeFaizaAbdullah-code
committed
Typing champ
1 parent 8f1f442 commit cc1b383

File tree

3 files changed

+196
-0
lines changed

3 files changed

+196
-0
lines changed

‎Typing-champ/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" type="text/css" href="style.css">
4+
<title> Build your skills</title>
5+
</head>
6+
<body>
7+
<header> <h1 id="head"> I Can. I will. End of Story. </h1></header>
8+
<div id="container">
9+
<div id="para">
10+
<p> </p>
11+
<p> Type The Given Sentence within <span id="number">10 </span> Seconds: </p>
12+
<h2 id="currentword" >sdsgdfnsd</h2>
13+
<input type="text" id="label" placeholder="Start Typing..." autofocus>
14+
<h3 id="message"></h3>
15+
</div>
16+
<div id="timer">
17+
<h4> Time Left: <span id="time"> 0</span></h4>
18+
<h5 id="sc"> Score: <span id="score"> 0</span></h5>
19+
</div>
20+
<div class="instruction">
21+
<p id="ins"> Instruction</p>
22+
<p id='p'> Type each sentence in the given amount of time to score.
23+
To <br> play again , just refresh the current page. Your score
24+
will reset.
25+
26+
</p>
27+
28+
</div>
29+
<script src="script.js"> </script>
30+
</div>
31+
</body>
32+
</html>

‎Typing-champ/script.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
window.addEventListener('load' ,init);
2+
3+
let time=10;
4+
let score=0;
5+
let isplaying;
6+
7+
8+
9+
const WordInput=document.querySelector('#label');
10+
const Currentword=document.querySelector('#currentword');
11+
const seconds=document.querySelector('#number');
12+
const message=document.querySelector('#message');
13+
const TimeDisplay=document.querySelector('#time');
14+
const ScoreDispaly =document.querySelector('#score');
15+
16+
17+
18+
const words=[
19+
'jacob stood on his tiptoes',
20+
'the car turned the corner',
21+
'kelly twirled in circles',
22+
'aaron made a picture',
23+
'the staff performed well',
24+
'white shirt always looks sharp',
25+
'the cat and the dog yowled',
26+
'open the jar carefully',
27+
'make the best of things',
28+
'the cat and dog ate',
29+
'i opened all the gift',
30+
'when i go to the beach',
31+
'i went to the beach',
32+
'i will shop at the store',
33+
'wolf ate steak at the zoo',
34+
'they have to be short',
35+
'they have to be long'
36+
37+
];
38+
function init(){
39+
showWords(words);
40+
WordInput.addEventListener('input',Startmatch)
41+
setInterval(countdown, 1000);
42+
setInterval(checkstatus, 50)
43+
44+
}
45+
46+
function Startmatch(){
47+
if(match()){
48+
isplaying= true;
49+
time=11;
50+
showWords(words);
51+
WordInput.value='';
52+
score++;
53+
}
54+
if(score==-1){
55+
ScoreDispaly.innerHTML=0
56+
57+
}else{
58+
ScoreDispaly.innerHTML=score
59+
}
60+
61+
}
62+
63+
64+
function match(){
65+
if (WordInput.value==Currentword.innerHTML){
66+
message.innerHTML='Correct!!'
67+
return true;
68+
}else {
69+
message.innerHTML='';
70+
return false;
71+
}
72+
73+
}
74+
function showWords(words){
75+
const randIndex=Math.floor(Math.random()*words.length);
76+
Currentword.innerHTML=words[randIndex];
77+
}
78+
79+
function countdown(){
80+
if(time>0){
81+
time--;
82+
83+
} else if(time==0){
84+
isplaying= false;
85+
}
86+
TimeDisplay.innerHTML=time;
87+
}
88+
function checkstatus(){
89+
if (!isplaying && time==0){
90+
message.innerHTML="Game over!!! Better Luck Next Time";
91+
score=-1;
92+
}
93+
}

‎Typing-champ/style.css

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body{
2+
background-color: black;
3+
}
4+
5+
#head{
6+
text-align: center;
7+
background-color:crimson;
8+
color:black;
9+
}
10+
#label{
11+
height: 35px;
12+
width: 500px;
13+
}
14+
15+
16+
17+
#para{
18+
font-size: 25px;
19+
text-align: center;
20+
color: white;
21+
}
22+
#number{
23+
font-size: 30px;
24+
color: crimson;
25+
}
26+
#currentword{
27+
font-size: 50px;
28+
text-align: center;
29+
color: white;
30+
}
31+
#label{
32+
margin: o auto;
33+
}
34+
#timer{
35+
36+
font-size: 30px;
37+
color:white;
38+
text-align: center;
39+
}
40+
#sc{
41+
42+
font-size: 30px;
43+
color: white;
44+
45+
text-align: center;
46+
}
47+
#ins{
48+
color:black;
49+
text-align: center;
50+
font-size: large;
51+
}
52+
#p{
53+
color:black;
54+
text-align: center;
55+
}
56+
.instruction{
57+
margin: auto;
58+
text-align: center;
59+
width: 420px;
60+
height: 100px;
61+
background-color: gray;
62+
}
63+
#message{
64+
color: red;
65+
}
66+
#time{
67+
color: crimson;
68+
}
69+
#score{
70+
color: crimson;
71+
}

0 commit comments

Comments
 (0)