diff --git a/ColorMatch/index.html b/ColorMatch/index.html new file mode 100644 index 0000000..255c064 --- /dev/null +++ b/ColorMatch/index.html @@ -0,0 +1,25 @@ + + + + + + + Color Matching Game + + + +
+

Color Matching Game

+
+
+ + + +
+
+ +
+ + + + diff --git a/ColorMatch/script.js b/ColorMatch/script.js new file mode 100644 index 0000000..eff3a70 --- /dev/null +++ b/ColorMatch/script.js @@ -0,0 +1,43 @@ +const colors = ['Red', 'Green', 'Blue', 'Yellow', 'Orange', 'Purple', 'Pink']; +let correctAnswer; + +function startGame() { + const randomColorIndex = Math.floor(Math.random() * colors.length); + const correctColor = colors[randomColorIndex]; + + document.getElementById('colorBox').style.backgroundColor = correctColor.toLowerCase(); + + // Shuffle options and place one correct answer randomly + let options = shuffleArray([correctColor, getRandomColor(), getRandomColor()]); + + for (let i = 0; i < 3; i++) { + document.getElementById(`option${i}`).textContent = options[i]; + } + + correctAnswer = options.indexOf(correctColor); + document.getElementById('result').textContent = ""; +} + +function checkAnswer(selectedOption) { + if (selectedOption === correctAnswer) { + document.getElementById('result').textContent = "Correct!"; + document.getElementById('result').style.color = "green"; + } else { + document.getElementById('result').textContent = "Wrong! Try again."; + document.getElementById('result').style.color = "red"; + } +} + +function getRandomColor() { + return colors[Math.floor(Math.random() * colors.length)]; +} + +function shuffleArray(array) { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; +} + +startGame(); diff --git a/ColorMatch/styles.css b/ColorMatch/styles.css new file mode 100644 index 0000000..85482e7 --- /dev/null +++ b/ColorMatch/styles.css @@ -0,0 +1,71 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f7f7f7; +} + +.game-container { + text-align: center; + background-color: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +h1 { + font-size: 2rem; + margin-bottom: 20px; +} + +.color-box { + width: 150px; + height: 150px; + margin: 20px auto; + background-color: #333; + border-radius: 10px; +} + +.options { + display: flex; + justify-content: center; + gap: 15px; + margin: 20px 0; +} + +.option-btn { + padding: 10px 20px; + border: none; + background-color: #007bff; + color: white; + font-size: 1rem; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.option-btn:hover { + background-color: #0056b3; +} + +#result { + margin-top: 20px; + font-size: 1.2rem; +} + +button { + padding: 10px 20px; + background-color: #28a745; + color: white; + border: none; + border-radius: 5px; + font-size: 1rem; + cursor: pointer; +} + +button:hover { + background-color: #218838; +}