diff --git a/Projects/Zodiac-Sign_Calculator/assets/Aquarius.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Aquarius.jpeg new file mode 100644 index 00000000..f88c061f Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Aquarius.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Aries.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Aries.jpeg new file mode 100644 index 00000000..b91981c0 Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Aries.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Cancer.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Cancer.jpeg new file mode 100644 index 00000000..d4a82f22 Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Cancer.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Capricorn.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Capricorn.jpeg new file mode 100644 index 00000000..dcf48eee Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Capricorn.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Gemini.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Gemini.jpeg new file mode 100644 index 00000000..73b4c9f8 Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Gemini.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Leo.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Leo.jpeg new file mode 100644 index 00000000..604aa03b Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Leo.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Libra.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Libra.jpeg new file mode 100644 index 00000000..cb8b257d Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Libra.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Pisces.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Pisces.jpeg new file mode 100644 index 00000000..854af72b Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Pisces.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Sagittarius.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Sagittarius.jpeg new file mode 100644 index 00000000..b25742a9 Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Sagittarius.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Scorpio.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Scorpio.jpeg new file mode 100644 index 00000000..4bb8d2b6 Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Scorpio.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Taurus.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Taurus.jpeg new file mode 100644 index 00000000..df781440 Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Taurus.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Virgo.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Virgo.jpeg new file mode 100644 index 00000000..5fc80075 Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Virgo.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Wallpaper.jpeg b/Projects/Zodiac-Sign_Calculator/assets/Wallpaper.jpeg new file mode 100644 index 00000000..2a9528d4 Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Wallpaper.jpeg differ diff --git a/Projects/Zodiac-Sign_Calculator/assets/Zodiac Calculator.png b/Projects/Zodiac-Sign_Calculator/assets/Zodiac Calculator.png new file mode 100644 index 00000000..a0a3f930 Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/assets/Zodiac Calculator.png differ diff --git a/Projects/Zodiac-Sign_Calculator/index.html b/Projects/Zodiac-Sign_Calculator/index.html new file mode 100644 index 00000000..26a5e7f1 --- /dev/null +++ b/Projects/Zodiac-Sign_Calculator/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + + Zodiac Calculator + + +
+
+
+

Zodiac Sign Calculator

+
+
+
+ + +
+
+ +
+
+
+ +
+
+

+

+
+
+
+
+
+ + + + + + + diff --git a/Projects/Zodiac-Sign_Calculator/logo.jpg b/Projects/Zodiac-Sign_Calculator/logo.jpg new file mode 100644 index 00000000..541a61c9 Binary files /dev/null and b/Projects/Zodiac-Sign_Calculator/logo.jpg differ diff --git a/Projects/Zodiac-Sign_Calculator/script.js b/Projects/Zodiac-Sign_Calculator/script.js new file mode 100644 index 00000000..04325765 --- /dev/null +++ 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 new file mode 100644 index 00000000..2c385abd --- /dev/null +++ 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; + } +}