IMGIITRoorkee · SHANKAR2012 · Apr 15, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Math Brain Game</title>
+<link rel="stylesheet" href="styles.css">
+    <script src="script.js"></script>
+</head>
+<body>
+
+<div class="container">
+    <h1>Math Brain Game</h1>
+
+    <div id="problem"></div>
+
+    <input type="text" id="input" placeholder="Your answer" autofocus>
+
+    <div id="timer">Time: <span id="time">10</span>s</div>
+    <div id="score">Score: <span id="points">0</span></div>
+
+    <button id="start">Start Game</button>
+</div>
+
+
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,73 @@
+let intervalId;
+let timeLeft;
+let score = 0;
+let highScore = localStorage.getItem('highScore') || 0;
+
+document.addEventListener("DOMContentLoaded", function() {
+    const problemElement = document.getElementById('problem');
+    const inputElement = document.getElementById('input');
+    const timeElement = document.getElementById('time');
+    const pointsElement = document.getElementById('points');
+    const startButton = document.getElementById('start');
+
+    startButton.addEventListener('click', startGame);
+
+    function startGame() {
+        score = 0;
+        timeLeft = 10;
+        pointsElement.textContent = score;
+        timeElement.textContent = timeLeft;
+        startButton.disabled = true;
+        generateProblem();
+        intervalId = setInterval(updateTime, 1000);
+    }
+
+    function updateTime() {
+        timeLeft--;
+        timeElement.textContent = timeLeft;
+
+        if (timeLeft === 0) {
+            clearInterval(intervalId);
+            startButton.disabled = false;
+            alert('Time\'s up! Your final score is: ' + score);
+            if (score > highScore) {
+                highScore = score;
+                localStorage.setItem('highScore', highScore);
+            }
+            return;
+        }
+    }
+
+    function generateProblem() {
+        const num1 = Math.floor(Math.random() * 10);
+        const num2 = Math.floor(Math.random() * 10);
+        const operator = Math.random() < 0.5 ? '+' : '-';
+
+        let answer;
+        if (operator === '+') {
+            problemElement.textContent = `${num1} + ${num2}`;
+            answer = num1 + num2;
+        } else {
+            problemElement.textContent = `${num1} - ${num2}`;
+            answer = num1 - num2;
+        }
+
+        inputElement.value = '';
+        inputElement.focus();
+
+        inputElement.addEventListener('keydown', function(event) {
+            if (event.key === 'Enter') {
+                checkAnswer(answer);
+            }
+        });
+    }
+
+    function checkAnswer(correctAnswer) {
+        const userAnswer = parseInt(inputElement.value, 10);
+        if (userAnswer === correctAnswer) {
+            score++;
+            pointsElement.textContent = score;
+            generateProblem();
+        }
+    }
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,59 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-color: #bfe3ff; /* Light blue background */
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    max-width: 400px;
+    margin: 100px auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    margin-bottom: 20px;
+    color: #333; /* Dark text color */
+}
+
+#problem {
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #333; /* Dark text color */
+}
+
+#input {
+    width: 80px;
+    padding: 8px;
+    font-size: 16px;
+}
+
+#timer {
+    font-size: 18px;
+    margin-bottom: 20px;
+    color: #555; /* Medium text color */
+}
+
+#score {
+    font-size: 18px;
+    margin-bottom: 20px;
+    color: #555; /* Medium text color */
+}
+
+#start {
+    padding: 10px 20px;
+    background-color: #4CAF50; /* Green button */
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease; /* Smooth transition */
+}
+
+#start:hover {
+    background-color: #45a049; /* Darker green on hover */
+}