Typing Game Using HTML, CSS and JavaScript

HuXn-WebDev · HuXn-WebDev · commit be82cdb7cab9 · 2022-10-23T01:10:44.000-07:00
diff --git a/86. Typing Game/app.js b/86. Typing Game/app.js
@@ -0,0 +1,73 @@
+const main = document.querySelector(".main");
+const typeArea = document.querySelector(".typingArea");
+const btn = document.querySelector(".btn");
+
+const words = [
+ "A day in the life of programmer",
+ "What is JavaScript?",
+ "What is React?",
+ "What is Programming Language?",
+ "What's your name?",
+ "Where are you from?",
+ "This is just random word",
+ "What is Remix.js?",
+ "New Technologies",
+ "Is programming hard?",
+ "Why do you wanna become a programmer?",
+ "Which programming language you like the most?",
+ "What is Golang? and why do you wanna learn it?",
+ "What is CSS",
+];
+
+const game ={
+ start: 0,
+ end: 0,
+ user: "",
+ arrText: "",
+};
+
+btn.addEventListener("click", () =>{
+ if (btn.textContent === "Start"){
+ play();
+ typeArea.value = "";
+ typeArea.disabled = false;
+ } else if (btn.textContent === "Done"){
+ typeArea.disabled = true;
+ main.style.borderColor = "white";
+ end();
+ }
+});
+
+function play(){
+ let randText = Math.floor(Math.random() * words.length);
+ main.textContent = words[randText];
+ game.arrText = words[randText];
+ main.style.borderColor = "#c8c8c8";
+ btn.textContent = "Done";
+ const duration = new Date();
+ game.start = duration.getTime(); // unix timestamp
+}
+
+function end(){
+ const duration = new Date();
+ game.end = duration.getTime();
+ const totalTime = (game.end - game.start) / 1000;
+ game.user = typeArea.value;
+ const correct = results();
+ main.style.borderColor = "white";
+ main.innerHTML = `Time: ${totalTime} Score: ${correct.score} out of ${correct.total}`;
+ btn.textContent = "Start";
+}
+
+function results(){
+ let valueOne = game.arrText.split(" ");
+ let valueTwo = game.user.split(" ");
+ let score = 0;
+ valueOne.forEach((word, idx) =>{
+ if (word === valueTwo[idx]){
+ score++;
+ }
+ });
+
+ return{score, total: valueOne.length };
+}
diff --git a/86. Typing Game/index.html b/86. Typing Game/index.html
@@ -0,0 +1,18 @@
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Typing Challenge</title>
+ <link rel="stylesheet" href="style.css" />
+ </head>
+ <body>
+ <div class="container">
+ <div class="main"></div>
+ <textarea name="words" class="typingArea"></textarea>
+ <br />
+ <button class="btn">Start</button>
+ </div>
+ <script src="app.js"></script>
+ </body>
+</html>
diff --git a/86. Typing Game/style.css b/86. Typing Game/style.css
@@ -0,0 +1,35 @@
+body{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+
+.container{
+ width: 70%;
+ padding: 10px;
+}
+
+.main{
+ text-align: center;
+ padding: 10px;
+ font-size: 2em;
+ border: 3px solid white;
+}
+
+.typingArea{
+ width: 100%;
+ height: 350px;
+ margin-top: 20px;
+}
+
+.btn{
+ width: 20%;
+ outline: none;
+ border: none;
+ font-size: 2em;
+ padding: 10px;
+ color: white;
+ background-color: blueviolet;
+ margin-top: 20px;
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,73 @@ @@
 +constmain=document.querySelector(".main");
 +consttypeArea=document.querySelector(".typingArea");
 +constbtn=document.querySelector(".btn");
++
 +constwords=[
 +"A day in the life of programmer",
 +"What is JavaScript?",
 +"What is React?",
 +"What is Programming Language?",
 +"What's your name?",
 +"Where are you from?",
 +"This is just random word",
 +"What is Remix.js?",
 +"New Technologies",
 +"Is programming hard?",
 +"Why do you wanna become a programmer?",
 +"Which programming language you like the most?",
 +"What is Golang? and why do you wanna learn it?",
 +"What is CSS",
 +];
++
 +constgame={
 +start: 0,
 +end: 0,
 +user: "",
 +arrText: "",
 +};
++
 +btn.addEventListener("click",()=>{
 +if(btn.textContent==="Start"){
 +play();
 +typeArea.value="";
 +typeArea.disabled=false;
 +}elseif(btn.textContent==="Done"){
 +typeArea.disabled=true;
 +main.style.borderColor="white";
 +end();
 +}
 +});
++
 +functionplay(){
 +letrandText=Math.floor(Math.random()*words.length);
 +main.textContent=words[randText];
 +game.arrText=words[randText];
 +main.style.borderColor="#c8c8c8";
 +btn.textContent="Done";
 +constduration=newDate();
 +game.start=duration.getTime();// unix timestamp
 +}
++
 +functionend(){
 +constduration=newDate();
 +game.end=duration.getTime();
 +consttotalTime=(game.end-game.start)/1000;
 +game.user=typeArea.value;
 +constcorrect=results();
 +main.style.borderColor="white";
 +main.innerHTML=`Time: ${totalTime} Score: ${correct.score} out of ${correct.total}`;
 +btn.textContent="Start";
 +}
++
 +functionresults(){
 +letvalueOne=game.arrText.split(" ");
 +letvalueTwo=game.user.split(" ");
 +letscore=0;
 +valueOne.forEach((word,idx)=>{
 +if(word===valueTwo[idx]){
 +score++;
 +}
 +});
++
 +return{ score,total: valueOne.length};
 +}
-Original file line number
+Diff line change
@@ @@ -0,0 +1,18 @@ @@
 +<htmllang="en">
 +<head>
 +<metacharset="UTF-8" />
 +<metahttp-equiv="X-UA-Compatible" content="IE=edge" />
 +<metaname="viewport" content="width=device-width, initial-scale=1.0" />
 +<title>Typing Challenge</title>
 +<linkrel="stylesheet" href="style.css" />
 +</head>
 +<body>
 +<divclass="container">
 +<divclass="main"></div>
 +<textareaname="words" class="typingArea"></textarea>
 +<br/>
 +<buttonclass="btn">Start</button>
 +</div>
 +<scriptsrc="app.js"></script>
 +</body>
 +</html>