From d97053bdb1fb4ff7e9faba20007d01afee8a27a5 Mon Sep 17 00:00:00 2001 From: abhay-sen <144714595+abhay-sen@users.noreply.github.com> Date: Fri, 24 May 2024 15:30:12 +0530 Subject: [PATCH] Added Pet Age Calculator (#805) --- Calculators/Pet-Age-Calculator/README.md | 15 +++ Calculators/Pet-Age-Calculator/index.html | 36 +++++++ Calculators/Pet-Age-Calculator/script.js | 65 ++++++++++++ Calculators/Pet-Age-Calculator/style.css | 116 ++++++++++++++++++++++ index.html | 14 +++ 5 files changed, 246 insertions(+) create mode 100644 Calculators/Pet-Age-Calculator/README.md create mode 100644 Calculators/Pet-Age-Calculator/index.html create mode 100644 Calculators/Pet-Age-Calculator/script.js create mode 100644 Calculators/Pet-Age-Calculator/style.css diff --git a/Calculators/Pet-Age-Calculator/README.md b/Calculators/Pet-Age-Calculator/README.md new file mode 100644 index 000000000..e18c8b52f --- /dev/null +++ b/Calculators/Pet-Age-Calculator/README.md @@ -0,0 +1,15 @@ +#

Pet Age Calculator

+ +## Description :- + +Calculates a pet's age in human years. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/Rakesh9100/CalcDiverse/assets/144714595/1f1ff4ef-598f-4155-b10b-371e187e0cdc) diff --git a/Calculators/Pet-Age-Calculator/index.html b/Calculators/Pet-Age-Calculator/index.html new file mode 100644 index 000000000..56bfdd05f --- /dev/null +++ b/Calculators/Pet-Age-Calculator/index.html @@ -0,0 +1,36 @@ + + + + + + Pet Age Calculator + + + +
+

+ Pet Age Calculator +

+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/Calculators/Pet-Age-Calculator/script.js b/Calculators/Pet-Age-Calculator/script.js new file mode 100644 index 000000000..a4a555e7c --- /dev/null +++ b/Calculators/Pet-Age-Calculator/script.js @@ -0,0 +1,65 @@ +function CalculatePetAge(){ + var Pet = document.getElementById('PetType').value; + var Years = document.getElementById('Years').value; + var Months = document.getElementById('Months').value; + var PetAgeInHumanYears = 0; + var resultContainer = document.getElementById('result'); + if(Months>=12|| Months<0||Years<0){ + resultContainer.innerHTML = "please enter valid data"; + } + else{ + switch (Pet) { + case "Dog": + if (Years < 2) { + PetAgeInHumanYears = Years * 10.5 + Months * (10.5 / 12); + } else { + PetAgeInHumanYears = 2 * 10.5 + (Years - 2) * 4 + Months * (4 / 12); + } + break; + case "Cat": + if (Years < 2) { + PetAgeInHumanYears = Years * 12.5 + Months * (12.5 / 12); + } else { + PetAgeInHumanYears = 2 * 12.5 + (Years - 2) * 4 + Months * (4 / 12); + } + break; + case "Rabbit": + if (Years < 1) { + PetAgeInHumanYears = Years * 16 + Months * (16 / 12); + } else { + PetAgeInHumanYears = 1 * 16 + (Years - 1) * 6 + Months * (6 / 12); + } + break; + case "Parrot": + PetAgeInHumanYears = Years * 1.5 + Months * (1.5 / 12); + break; + case "Hamster": + PetAgeInHumanYears = Years * 25 + Months * (25 / 12); + break; + case "Horse": + if (Years < 3) { + PetAgeInHumanYears = Years * 6.5 + Months * (6.5 / 12); + } else { + PetAgeInHumanYears = 3 * 6.5 + (Years - 3) * 2.5 + Months * (2.5 / 12); + } + break; + default: + PetAgeInHumanYears = -1; // Default case to handle unknown pets + break; +} +function displayPetAge(PetAgeInHumanYears) { + let humanYears = Math.floor(PetAgeInHumanYears); + let humanMonths = Math.round((PetAgeInHumanYears - humanYears) * 12); + + let message = `Your pet is approximately ${humanYears} years and ${humanMonths} months old in human years.`; + document.getElementById('result').innerHTML = message; +} + +// Assuming PetAgeInHumanYears has been calculated +displayPetAge(PetAgeInHumanYears); + + + } + + } + diff --git a/Calculators/Pet-Age-Calculator/style.css b/Calculators/Pet-Age-Calculator/style.css new file mode 100644 index 000000000..9a20708d3 --- /dev/null +++ b/Calculators/Pet-Age-Calculator/style.css @@ -0,0 +1,116 @@ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + margin: 0; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + background: linear-gradient(to right, #393E46, #222831); + color: white; + animation: gradientAnimation 10s linear infinite; +} + +#container { + background-color: rgba(255, 255, 255, 0.9); + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + text-align: center; + width: 300px; + animation: fadeIn 0.8s ease-out; +} + +h1 { + margin-bottom: 20px; + color: #333; +} + +label { + display: block; + margin-bottom: 5px; + color: #555; +} + +input, +select, +button { + width: 100%; + padding: 8px; + margin-bottom: 15px; + box-sizing: border-box; + border: 1px solid #ccc; + border-radius: 5px; + outline: none; + transition: border-color 0.3s; + color: #333; + background-color: #fff; +} + +input:focus, +select:focus { + border-color: #3498db; +} + +select:hover { + transform: scale(1.02); +} + +button { + padding: 10px; + background-color: #00ADB5; + color: white; + border: none; + cursor: pointer; + border-radius: 5px; + transition: background-color 0.3s, transform 0.2s; +} + +button:hover { + background-color: #219d54; + transform: scale(1.05); +} + +#result { + margin-top: 15px; + font-weight: bold; + color: #333; + opacity: 0; + animation: fadeInResult 0.5s forwards; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes fadeInResult { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes gradientAnimation { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } + + 100% { + background-position: 0% 50%; + } +} diff --git a/index.html b/index.html index 17b6c2d4b..f6ef760f5 100644 --- a/index.html +++ b/index.html @@ -1406,6 +1406,20 @@

Calculates nPr and nCr after taking inputs as n and r.

+
+
+

Pet Age Calculator

+

Calculates a pet's age in human years.

+
+ + + + + Source Code + +
+
+

Population Density Calculator