Added Alphabet and Vowel game extension

Nikhil11200 · Nikhil11200 · commit 546e89b495c8 · 2024-06-19T09:10:08.000+05:30
diff --git a/Alphabet and Vowel Game/app.js b/Alphabet and Vowel Game/app.js
@@ -0,0 +1,56 @@
+const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+const vowels = 'AEIOU';
+let score = 0;
+let target = 'vowel';
+
+document.addEventListener('DOMContentLoaded', () => {
+    const alphabetGrid = document.getElementById('alphabetGrid');
+    const feedback = document.getElementById('feedback');
+    const instruction = document.getElementById('instruction');
+    const resetButton = document.getElementById('resetButton');
+
+    const shuffleArray = array => array.sort(() => Math.random() - 0.5);
+
+    const generateButtons = () => {
+        shuffleArray(alphabet).forEach(letter => {
+            const button = document.createElement('button');
+            button.textContent = letter;
+            button.addEventListener('click', () => checkLetter(letter, button));
+            alphabetGrid.appendChild(button);
+        });
+    };
+
+    const checkLetter = (letter, button) => {
+        if ((target === 'vowel' && vowels.includes(letter)) || 
+            (target === 'consonant' && !vowels.includes(letter))) {
+            button.classList.add('correct');
+            score++;
+            feedback.textContent = 'Correct!';
+        } else {
+            button.classList.add('wrong');
+            feedback.textContent = 'Try again!';
+        }
+
+        button.disabled = true;
+        
+        if (score === 5) {
+            target = 'consonant';
+            instruction.textContent = 'Now click on all the consonants!';
+            score = 0;
+            feedback.textContent = '';
+        }
+    };
+
+    const resetGame = () => {
+        alphabetGrid.innerHTML = '';
+        feedback.textContent = '';
+        instruction.textContent = 'Click on all the vowels!';
+        score = 0;
+        target = 'vowel';
+        generateButtons();
+    };
+
+    resetButton.addEventListener('click', resetGame);
+
+    generateButtons();
+});
diff --git a/Alphabet and Vowel Game/index.html b/Alphabet and Vowel Game/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alphabet and Vowel Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Alphabet and Vowel Game</h1>
+        <p id="instruction">Click on all the vowels!</p>
+        <div class="alphabet-grid" id="alphabetGrid"></div>
+        <p id="feedback"></p>
+        <button id="resetButton">Reset Game</button>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Alphabet and Vowel Game/manifest.json b/Alphabet and Vowel Game/manifest.json
@@ -0,0 +1,10 @@
+{
+    "manifest_version": 3,
+    "name": "Alphabet and Vowel ",
+    "version": "1.0",
+    "description": "An Alphabet and Vowel game a Chrome extension.",
+    "action": {
+      "default_popup": "index.html"
+    },
+    "permissions":[]
+}
diff --git a/Alphabet and Vowel Game/style.css b/Alphabet and Vowel Game/style.css
@@ -0,0 +1,69 @@
+body {
+  font-family: 'Arial', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #16d1e2;
+}
+
+.container {
+  text-align: center;
+  background: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  color: #333;
+}
+
+.alphabet-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 50px);
+  gap: 10px;
+  justify-content: center;
+  margin: 20px 0;
+}
+
+.alphabet-grid button {
+  background-color: #008cba;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  width: 50px;
+  height: 50px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.alphabet-grid button.correct {
+  background-color: #4caf50;
+}
+
+.alphabet-grid button.wrong {
+  background-color: #f44336;
+}
+
+#feedback {
+  margin-top: 20px;
+  font-size: 20px;
+}
+
+#resetButton {
+  background-color: #ff9800;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+#resetButton:hover {
+  background-color: #e68900;
+}
