From b40f1fa9dc12782a34c0d660b5bd24d03602c2a0 Mon Sep 17 00:00:00 2001
From: Karan <50290386+Sonawane-Karan26@users.noreply.github.com>
Date: Wed, 24 Nov 2021 22:52:21 +0530
Subject: [PATCH] Project 4

---
 Chapter 11/Project 4 | 74 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 Chapter 11/Project 4
diff --git a/Chapter 11/Project 4 b/Chapter 11/Project 4
new file mode 100644
index 0000000..956c516
--- /dev/null
+++ b/Chapter 11/Project 4	
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Click Me Game</title>
+    <style>
+        .output {
+            width: 500px;
+            height: 500px;
+            border: 1px solid black;
+            margin: auto;
+            text-align: center;
+        }
+
+        .box {
+            width: 50px;
+            height: 50px;
+            position: relative;
+            top: 50px;
+            left: 20%;
+            background-color: red;
+        }
+
+        .message {
+            text-align: center;
+            padding: 10px;
+            font-size: 1.3em;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="output"></div>
+    <div class="message"></div>
+    <script>
+        const output = document.querySelector('.output');
+        const message = document.querySelector('.message');
+        message.textContent = "Press to Start";
+        const box = document.createElement('div');
+        const game = {
+            timer: 0,
+            start: null
+        };
+        box.classList.add('box');
+        output.append(box);
+
+        box.addEventListener('click', (e) => {
+            box.textContent = "";
+            box.style.display = 'none';
+            game.timer = setTimeout(addBox, ranNum(3000));
+            if (!game.start) {
+                message.textContent = 'Loading....';
+            } else {
+                const cur = new Date().getTime();
+                const dur = (cur - game.start) / 1000;
+                message.textContent = `It took ${dur} seconds to click`;
+            }
+        })
+
+        function addBox() {
+            message.textContent = 'Click it...';
+            game.start = new Date().getTime();
+            box.style.display = 'block';
+            box.style.left = ranNum(450) + 'px';
+            box.style.top = ranNum(450) + 'px';
+        }
+
+        function ranNum(max) {
+            return Math.floor(Math.random() * max);
+        }
+    </script>
+
+</body>
+</html>
