SyedImtiyaz-1 · nadarmega · Jul 24, 2024 · Jul 24, 2024
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Aquarius.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Aquarius.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Aries.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Aries.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Cancer.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Cancer.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Capricorn.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Capricorn.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Gemini.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Gemini.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Leo.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Leo.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Libra.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Libra.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Pisces.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Pisces.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Sagittarius.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Sagittarius.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Scorpio.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Scorpio.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Taurus.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Taurus.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Virgo.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Virgo.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Wallpaper.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Wallpaper.jpeg
diff --git a/Projects/Zodiac-Sign_Calculator/assets/Zodiac Calculator.png b/Projects/Zodiac-Sign_Calculator/assets/Zodiac Calculator.png
diff --git a/Projects/Zodiac-Sign_Calculator/index.html b/Projects/Zodiac-Sign_Calculator/index.html
@@ -0,0 +1,45 @@
+<!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:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <title>Zodiac Calculator</title>
+</head>
+<body>
+    <div class="container-fluid d-flex justify-content-center align-items-center vh-100" id="container">
+        <div class="card shadow-sm border-primary rounded" id="main">
+            <div class="card-header text-center" id="heading">
+                <h1>Zodiac Sign Calculator</h1>
+            </div>
+            <div class="card-body" id="input-section">
+                <div class="form-group text-center">
+                    <label for="input1" id="ip">Date Of Birth</label>
+                    <input type="date" class="form-control mx-auto" id="input1">
+                </div>
+                <div class="text-center mb-3" id="input2">
+                    <button class="btn btn-primary" id="calcbutton">Calculate</button>
+                </div>
+                <div id="output" class="text-center">
+                    <div id="picture">
+                        <img id="photo" src="" >
+                    </div>
+                    <div id="output1">
+                        <h2><span id="zodiacSign"></span></h2>
+                        <p><span id="zodiacDesc"></span></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Projects/Zodiac-Sign_Calculator/logo.jpg b/Projects/Zodiac-Sign_Calculator/logo.jpg
diff --git a/Projects/Zodiac-Sign_Calculator/script.js b/Projects/Zodiac-Sign_Calculator/script.js
@@ -0,0 +1,84 @@
+document.getElementById("calcbutton").addEventListener("click", calculateZodiac);
+
+function calculateZodiac() {
+    let dateInput = document.getElementById("input1").value;
+    let date = new Date(dateInput);
+    let day = date.getDate();
+    let month = date.getMonth(); // Note: JavaScript months are 0-based (0 = January, 1 = February, etc.)
+    ZodiacSign(day, month);
+}
+
+function ZodiacSign(day, month) {
+    for (let i = 0; i < zodiacSigns.length; i++) {
+        let zodiac = zodiacSigns[i];
+        if ((month === zodiac.startDate.month && day >= zodiac.startDate.day) || (month === zodiac.endDate.month && day <= zodiac.endDate.day)) {
+            document.getElementById("zodiacSign").innerText = zodiac.sign;
+            document.getElementById("zodiacDesc").innerText = zodiac.desc;
+            image(zodiac.sign);
+            return;
+        }
+    }
+    // If no zodiac sign is found (which shouldn't happen with valid dates)
+    document.getElementById("zodiacSign").innerText = "You have entered an invalid date";
+    document.getElementById("zodiacDesc").innerText = "";
+    document.getElementById("photo").src = "";
+}
+
+function image(sign) {
+    const photoElement = document.getElementById("photo");
+    switch (sign) {
+        case "Aries":
+            photoElement.src = 'assets/Aries.jpeg';
+            break;
+        case "Taurus":
+            photoElement.src = 'assets/Taurus.jpeg';
+            break;
+        case "Gemini":
+            photoElement.src = 'assets/Gemini.jpeg';
+            break;
+        case "Cancer":
+            photoElement.src = 'assets/Cancer.jpeg';
+            break;
+        case "Leo":
+            photoElement.src = 'assets/Leo.jpeg';
+            break;
+        case "Virgo":
+            photoElement.src = 'assets/Virgo.jpeg';
+            break;
+        case "Libra":
+            photoElement.src = 'assets/Libra.jpeg';
+            break;
+        case "Scorpio":
+            photoElement.src = 'assets/Scorpio.jpeg';
+            break;
+        case "Sagittarius":
+            photoElement.src = 'assets/Sagittarius.jpeg';
+            break;
+        case "Capricorn":
+            photoElement.src = 'assets/Capricorn.jpeg';
+            break;
+        case "Aquarius":
+            photoElement.src = 'assets/Aquarius.jpeg';
+            break;
+        case "Pisces":
+            photoElement.src = 'assets/Pisces.jpeg';
+            break;
+        default:
+            photoElement.src = ''; // Clear image if no sign matches
+    }
+}
+
+const zodiacSigns = [
+    { sign: "Capricorn", desc: "You are the ambitious go-getter with a plan for everything, driven by success and discipline.", startDate: { month: 11, day: 22 }, endDate: { month: 0, day: 19 } },
+    { sign: "Aquarius", desc: "You are the quirky innovator who marches to the beat of your own drum, with a love for unconventional ideas.", startDate: { month: 0, day: 20 }, endDate: { month: 1, day: 18 } },
+    { sign: "Pisces", desc: "You are the dreamy artist with a compassionate and intuitive soul, attuned to the emotions of others.", startDate: { month: 1, day: 19 }, endDate: { month: 2, day: 20 } },
+    { sign: "Aries", desc: "You are the energetic trailblazer who’s always up for an adventure and loves to take the lead.", startDate: { month: 2, day: 21 }, endDate: { month: 3, day: 19 } },
+    { sign: "Taurus", desc: "You are the loyal foodie who appreciates the finer things in life and finds comfort in stability.", startDate: { month: 3, day: 20 }, endDate: { month: 4, day: 20 } },
+    { sign: "Gemini", desc: "You are the social butterfly with a million interests and stories, always buzzing with excitement.", startDate: { month: 4, day: 21 }, endDate: { month: 5, day: 20 } },
+    { sign: "Cancer", desc: "You are the nurturing homebody with a heart full of love, always ready to lend a sympathetic ear.", startDate: { month: 5, day: 21 }, endDate: { month: 6, day: 22 } },
+    { sign: "Leo", desc: " You are the charismatic star who loves to shine and be admired, exuding confidence and warmth. ", startDate: { month: 6, day: 23 }, endDate: { month: 7, day: 22 } },
+    { sign: "Virgo", desc: "You are the meticulous perfectionist who’s always there to help, finding joy in organization and efficiency.", startDate: { month: 7, day: 23 }, endDate: { month: 8, day: 22 } },
+    { sign: "Libra", desc: "You are the charming diplomat who seeks harmony and beauty, with an innate sense of fairness.", startDate: { month: 8, day: 23 }, endDate: { month: 9, day: 22 } },
+    { sign: "Scorpio", desc: "You are the intense mystery with a passionate and magnetic aura, drawing people into your depth.", startDate: { month: 9, day: 23 }, endDate: { month: 10, day: 21 } },
+    { sign: "Sagittarius", desc: "You are the adventurous philosopher who loves freedom and exploration, always seeking the next thrill.", startDate: { month: 10, day: 22 }, endDate: { month: 11, day: 21 } },
+];
diff --git a/Projects/Zodiac-Sign_Calculator/style.css b/Projects/Zodiac-Sign_Calculator/style.css
@@ -0,0 +1,99 @@
+/* Reset some basic styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+}
+
+#container {
+    background-image: url("assets/Wallpaper.jpeg");
+    background-size: cover; /* Ensure background covers the container */
+    background-position: center; /* Center background image */
+    height: 50%; 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#main {
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 3px solid rgb(6, 3, 18);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
+    width: 55%; /* Adjust width for laptop screens */
+    max-width: 500px; /* Smaller maximum width for laptops */
+    padding: 1.5rem; /* Padding inside the box */
+    border-radius: 15px;
+}
+
+#heading {
+    color: rgb(6, 3, 18);
+    margin-bottom: 1rem;
+}
+
+#ip {
+    color: rgb(6, 3, 18);
+    font-size: 1.25rem;
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+#input2 button {
+    font-family: Poppins, sans-serif;
+    background-color: rgb(6, 3, 18);
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    transition: background-color 0.3s;
+}
+
+#input2 button:hover {
+    background-color: rgb(49, 43, 75);
+}
+
+#output {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#output1 {
+    font-size: 1rem;
+    color: rgb(6, 3, 18);
+    text-align: center;
+    margin-bottom: 0.20rem;
+}
+
+#picture {
+    width: 100%; /* Ensure the picture container is full width */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+#picture img {
+    max-width: 80%; /* Image scales with its container */
+    height: auto;    /* Maintain aspect ratio */
+    max-height: 140px; /* Maximum height for the image */
+}
+
+@media (max-width: 576px) {
+    #heading h1 {
+        font-size: 1.2em;
+    }
+    #output {
+        font-size: 1rem;
+    }
+    #picture img {
+        max-height: 150px;
+    }
+}
diff --git a/Projects/capital-game/README.md b/Projects/capital-game/README.md
diff --git a/Projects/capital-game/assets/Australia.jpeg b/Projects/capital-game/assets/Australia.jpeg
diff --git a/Projects/capital-game/assets/Bhutan.jpeg b/Projects/capital-game/assets/Bhutan.jpeg
diff --git a/Projects/capital-game/assets/Brazil.jpeg b/Projects/capital-game/assets/Brazil.jpeg
diff --git a/Projects/capital-game/assets/Canada.jpeg b/Projects/capital-game/assets/Canada.jpeg
diff --git a/Projects/capital-game/assets/France.jpeg b/Projects/capital-game/assets/France.jpeg
diff --git a/Projects/capital-game/assets/Germany.jpeg b/Projects/capital-game/assets/Germany.jpeg
diff --git a/Projects/capital-game/assets/India.jpeg b/Projects/capital-game/assets/India.jpeg
diff --git a/Projects/capital-game/assets/Japan.jpeg b/Projects/capital-game/assets/Japan.jpeg
diff --git a/Projects/capital-game/assets/Nepal.jpeg b/Projects/capital-game/assets/Nepal.jpeg
diff --git a/Projects/capital-game/assets/Wallpaper.jpeg b/Projects/capital-game/assets/Wallpaper.jpeg
diff --git a/Projects/capital-game/assets/capital-game-screenshot (1).png b/Projects/capital-game/assets/capital-game-screenshot (1).png
diff --git a/Projects/capital-game/assets/capital-game-screenshot (2).png b/Projects/capital-game/assets/capital-game-screenshot (2).png
diff --git a/Projects/capital-game/index.html b/Projects/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/Projects/capital-game/logo.jpeg.jpeg b/Projects/capital-game/logo.jpeg.jpeg
diff --git a/Projects/capital-game/script.js b/Projects/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);