Project 3

2021-11-25 19:29:58 +05:30 · 2021-11-25 19:29:58 +05:30 · 78d398bfbb
commit 78d398bfbb
parent fe20151ce1
1 changed files with 45 additions and 0 deletions
--- a/12/Project
+++ b/12/Project
@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<head>
+    <title>Complete JavaScript Course</title>
+</head>
+<body>
+    <span class="val1"></span> <span>+</span> <span class="val2"></span> = <span>
+        <input type="text" name="answer"></span><button>Check</button>
+    <div class="output"></div>
+    <script>
+        const app = function () {
+            const game = {};
+            const val1 = document.querySelector(".val1");
+            const val2 = document.querySelector(".val2");
+            const output = document.querySelector(".output");
+            const answer = document.querySelector("input");
+            function init() {
+                document.querySelector("button").addEventListener("click", checker);
+                loadQuestion();
+            }
+            function ranValue(min, max) {
+                return Math.floor(Math.random() * (max - min + 1) + min);
+            }
+            function loadQuestion() {
+                game.val1 = ranValue(1, 100);
+                game.val2 = ranValue(1, 100);
+                game.answer = game.val1 + game.val2;
+                val1.textContent = game.val1;
+                val2.textContent = game.val2;
+            }
+            function checker() {
+                let bg = answer.value == game.answer ? "green" : "red";
+                output.innerHTML +=
+                    `<div style="color:${bg}">${game.val1} + ${game.val2} = ${game.answer} (${answer.value})</div>`;
+                answer.value = "";
+                loadQuestion();
+            }
+            return {
+                init: init
+            };
+        }();
+        document.addEventListener('DOMContentLoaded', app.init);
+    </script>
+</body>
+</html>