kunjgit · nadarmega · Jul 12, 2024 · Jul 17, 2024 · Jul 17, 2024
diff --git a/Games/capital-game/README.md b/Games/capital-game/README.md
diff --git a/Games/capital-game/assets/Australia.jpeg b/Games/capital-game/assets/Australia.jpeg
diff --git a/Games/capital-game/assets/Bhutan.jpeg b/Games/capital-game/assets/Bhutan.jpeg
diff --git a/Games/capital-game/assets/Brazil.jpeg b/Games/capital-game/assets/Brazil.jpeg
diff --git a/Games/capital-game/assets/Canada.jpeg b/Games/capital-game/assets/Canada.jpeg
diff --git a/Games/capital-game/assets/France.jpeg b/Games/capital-game/assets/France.jpeg
diff --git a/Games/capital-game/assets/Germany.jpeg b/Games/capital-game/assets/Germany.jpeg
diff --git a/Games/capital-game/assets/India.jpeg b/Games/capital-game/assets/India.jpeg
diff --git a/Games/capital-game/assets/Japan.jpeg b/Games/capital-game/assets/Japan.jpeg
diff --git a/Games/capital-game/assets/Nepal.jpeg b/Games/capital-game/assets/Nepal.jpeg
diff --git a/Games/capital-game/assets/Screenshot 2024-07-12 170758.png b/Games/capital-game/assets/Screenshot 2024-07-12 170758.png
diff --git a/Games/capital-game/assets/Screenshot 2024-07-12 170920.png b/Games/capital-game/assets/Screenshot 2024-07-12 170920.png
diff --git a/Games/capital-game/assets/Wallpaper.jpeg b/Games/capital-game/assets/Wallpaper.jpeg
diff --git a/Games/capital-game/index.html b/Games/capital-game/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <title>Capital_Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="container">
+        <div id="main">
+            <div id="heading">
+                <h2>Guess the Capital!</h2>
+            </div>
+            <div id="Flag">
+                <img id="flag" src="">
+            </div>
+            <div id="Country">
+                <p><span id="country"></span></p>
+            </div>
+            <div id="answer">
+                <input type="text" id="input">
+
+            </div>
+            <div id="button">
+                <button id="submit">Submit</button>
+                <button id="next">Next</button>
+            </div>
+            <div id="result"></div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/Games/capital-game/script.js b/Games/capital-game/script.js
@@ -0,0 +1,105 @@
+let selectedFlag = {};
+let attemptCount = 0;
+const maxAttempts = 8; // You can change this value to set a different maximum number of attempts
+
+const flagDisplay = document.getElementById("flag");
+const countryDisplay = document.getElementById("country");
+const guessInput = document.getElementById("input");
+const submitBtn = document.getElementById("submit");
+const nextBtn = document.getElementById("next");
+const resultDiv = document.getElementById("result");
+
+const flags = [
+    { capital: "Canberra", country: "Australia", flag: "assets/Australia.jpeg" },
+    { capital: "Brasilia", country: "Brazil", flag: "assets/Brazil.jpeg" },
+    { capital: "Ottawa", country: "Canada", flag: "assets/Canada.jpeg" },
+    { capital: "Paris", country: "France", flag: "assets/France.jpeg" },
+    { capital: "Berlin", country: "Germany", flag: "assets/Germany.jpeg" },
+    { capital: "Tokyo", country: "Japan", flag: "assets/Japan.jpeg" },
+    { capital: "Thimphu", country: "Bhutan", flag: "assets/Bhutan.jpeg" },
+    { capital: "New Delhi", country: "India", flag: "assets/India.jpeg" }, 
+    { capital: "Kathmandu", country: "Nepal", flag: "assets/Nepal.jpeg" }
+];
+
+let availableFlags = [...flags];
+
+function initializeGame() {
+    // Reset attempt count and available flags at the beginning of the game
+    attemptCount = 0;
+    availableFlags = [...flags];
+    startNewRound();
+}
+
+function startNewRound() {
+    if (attemptCount >= maxAttempts || availableFlags.length === 0) {
+        endGame();
+        return;
+    }
+    // Select a random flag from the available list
+    const randomIndex = Math.floor(Math.random() * availableFlags.length);
+    selectedFlag = availableFlags.splice(randomIndex, 1)[0];
+
+    // Display the flag image
+    flagDisplay.src = selectedFlag.flag;
+    // Display country name
+    countryDisplay.innerText = selectedFlag.country;
+
+    // Clear input field and result
+    guessInput.value = "";
+    resultDiv.textContent = "";
+
+    toggleButtons(false);
+}
+
+function checkGuess() {
+    const guess = guessInput.value.trim();
+
+    // Validate the guess
+    if (!guess) {
+        alert("Please enter an answer.");
+        return;
+    }
+
+    // Convert both guess and selected capital to lowercase for comparison
+    const guessLowerCase = guess.toLowerCase();
+    const capitalLowerCase = selectedFlag.capital.toLowerCase();
+
+    // Check if the guess is correct
+    if (guessLowerCase === capitalLowerCase) {
+        alert("Congratulations! You guessed correctly.");
+    } else {
+        alert(`Incorrect. The capital city is ${selectedFlag.capital}.`);
+    }
+
+
+    guessInput.value = "";
+    attemptCount++;
+    toggleButtons(true);
+    startNewRound();
+}
+
+function handleNext() {
+    startNewRound();
+}
+
+function endGame() {
+    // Disable input and buttons
+    guessInput.disabled = true;
+    submitBtn.disabled = true;
+    nextBtn.disabled = true;
+
+    // Show final message
+    alert("Game Over! Thanks for playing.");
+}
+
+function toggleButtons(enableNext) {
+    submitBtn.disabled = enableNext;
+    nextBtn.disabled = !enableNext;
+}
+
+// Initialize the game
+initializeGame();
+
+// Event listeners
+submitBtn.addEventListener("click", checkGuess);
+nextBtn.addEventListener("click", handleNext);
diff --git a/Games/capital-game/style.css b/Games/capital-game/style.css
@@ -0,0 +1,112 @@
+
+#container{
+    width: 100%;
+    height: 110vh;
+    background-image: url("assets/Wallpaper.jpeg");
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#main {
+    background-color: rgba(255, 255, 255, 0.9);
+    width: 54%;
+    height: 56%;
+    border: 2px solid rgb(6, 3, 18);
+    border-radius: 15px;
+    border-width: 3px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+#heading {
+
+    color: rgb(6, 3, 18);
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 0.05vmax;
+    margin-bottom: 0.05vmax;
+}
+/*Flag*/
+#Flag{
+
+ text-align: center;
+display: flex;
+justify-content: space-evenly;
+
+}
+#Flag img{
+    height: 10vmax;
+    max-width: 50%;
+}
+/*Country*/
+#Country{
+    text-align: center;
+
+    display: flex;
+
+    justify-content: space-evenly;
+    font-size: 1.5vmax;
+    text-align: center;
+    height: 3vmax;
+    color: rgb(6, 3, 18);
+
+
+}
+/*ANSWER*/
+#answer{
+    color: rgb(6, 3, 18);
+    font-size: 1.75vmax;
+    text-align: center;
+    border-radius: 0.5vmax;
+    height: 2.5vmax;
+    padding: 0.5vmax;
+}
+/*BUTTON*/
+#button{
+    padding: 0.5vmax;
+    text-align: center;
+}
+
+#button button{
+    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    height: 3vmax;
+    width: 5.1vmax;
+    font-size: 1.15vmax;
+    text-align: center;
+    border-radius: 0.5vmax;
+    border: none;
+    background-color:rgb(6, 3, 18);
+    color:white;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+#button button:hover {
+    background-color:rgb(49,43,75);
+}
+#result {
+
+    text-align: center;
+    font-weight: 600;
+    color: #333;
+    padding: 0.5vm;
+    margin-bottom: 25px;
+  }
+@media (max-width: 576px) {
+    #main {
+        padding: 20px;
+    }
+
+    #heading h1 {
+        font-size: 1.2em;
+    }
+
+    #output{
+        font-size: 1.5vmax;
+    }
+
+    #picture img{
+        height: 25vmax;
+    }
+}
+