Zodiac Sign Calculator added

SyedImtiyaz-1 · Jul 24, 2024 · ddd4627 · ddd4627
1 parent 778258d
commit ddd4627
Show file tree

Hide file tree

Showing 18 changed files with 228 additions and 0 deletions.
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;
+    }
+}