amfoss · tejasai2007 · Mar 5, 2025
diff --git a/3-typing-game/solution.md b/3-typing-game/solution.md
@@ -0,0 +1,2 @@
+#Assignment
+> I have used resources gave in the directory of the project to get random numbers.Then i have added imaages on my own.dependingon number the image is being displayed and made a list of answers respective to image and verifies input with the answer in the solution list when submitted.
diff --git a/3-typing-game/ty-game/.vscode/settings.json b/3-typing-game/ty-game/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/3-typing-game/ty-game/bas.png b/3-typing-game/ty-game/bas.png
diff --git a/3-typing-game/ty-game/index.html b/3-typing-game/ty-game/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Find The Pattern</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h id="h" style="font-size: 250%;">Reference Image</h>
+    <div id="back"></div>
+
+    <div class="questions">
+        <div> <img id="m" src="bas.png"></div>
+    </div>
+
+    <div>
+        <input type="number" aria-label="current word" id="typed-value" 
+         /> 
+    <button type="button" id="start" >Start</button> 
+    <button type="button" id ="check">Check</button>
+    </div>
+
+    <script src="script.js"></script>
+
+
+
+</body>
+</html>
diff --git a/3-typing-game/ty-game/m1.png b/3-typing-game/ty-game/m1.png
diff --git a/3-typing-game/ty-game/m2.png b/3-typing-game/ty-game/m2.png
diff --git a/3-typing-game/ty-game/m3.png b/3-typing-game/ty-game/m3.png
diff --git a/3-typing-game/ty-game/m4.png b/3-typing-game/ty-game/m4.png
diff --git a/3-typing-game/ty-game/m5.png b/3-typing-game/ty-game/m5.png
diff --git a/3-typing-game/ty-game/script.js b/3-typing-game/ty-game/script.js
@@ -0,0 +1,40 @@
+const l=[147896325,7426985321,789654123,753215986,412365789]
+const start=document.getElementById('start');
+const check=document.getElementById('check');
+
+start.addEventListener("click",fun);
+
+function fun(){
+    document.getElementById('typed-value').disabled=false;
+    const ind = Math.floor(Math.random() * l.length);
+    const ans=l[ind];
+    switch(ind){
+        case 0:
+            document.getElementById('m').src="./m1.png";
+            break;
+        case 1:
+            document.getElementById('m').src="./m2.png";
+            break;
+        case 2:
+            document.getElementById('m').src="./m3.png";
+            break;
+        case 3:  
+            document.getElementById('m').src="./m4.png";
+            break;
+        case 4:
+            document.getElementById('m').src="./m5.png";
+            break;
+
+        }       
+        check.addEventListener("click",funs);
+        function funs(){
+        if(ans==document.getElementById('typed-value').value){
+            alert('congrats')
+            document.getElementById('typed-value').disabled=true;
+        }
+        else{
+            console.log(5);
+            alert('wrong');
+        }
+    }
+    }
diff --git a/3-typing-game/ty-game/style.css b/3-typing-game/ty-game/style.css
@@ -0,0 +1,31 @@
+#h{
+    font-weight: 545;
+    position: absolute;
+    right:100px;
+}
+
+#back{
+    width: 50%;
+    height: 100;
+    background-color: rgb(207, 23, 23);
+    position: absolute;
+    left:50;
+    top:50;
+    z-index: 10;;
+}
+#ref{
+    width:30%;
+    height: 30;
+    position: absolute;
+    right:100px;
+    top:100px;
+}
+#m{
+    width:40%;
+    height: 30;
+    position: absolute;
+    left: 40px;
+    top: 40px;
+    z-index:3
+}
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		#Assignment
		> I have used resources gave in the directory of the project to get random numbers.Then i have added imaages on my own.dependingon number the image is being displayed and made a list of answers respective to image and verifies input with the answer in the solution list when submitted.