From 3f693eed443360fcf31175bf76338f72f176878f Mon Sep 17 00:00:00 2001 From: SHANKAR2012 Date: Mon, 15 Apr 2024 15:48:45 +0530 Subject: [PATCH] shankar-math --- index.html | 28 +++++++++++++++++++++ script.js | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 59 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 160 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..42adcfc --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + +Math Brain Game + + + + + +
+

Math Brain Game

+ +
+ + + +
Time: 10s
+
Score: 0
+ + +
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..2625865 --- /dev/null +++ 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 new file mode 100644 index 0000000..976c5e8 --- /dev/null +++ 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 */ +}