Added Pet Age Calculator (#805)

Rakesh9100 · May 24, 2024 · d97053b · d97053b
1 parent 78334c4
commit d97053b
Show file tree

Hide file tree

Showing 5 changed files with 246 additions and 0 deletions.
diff --git a/Calculators/Pet-Age-Calculator/README.md b/Calculators/Pet-Age-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Pet Age Calculator</p>
+
+## 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
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pet Age Calculator</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <div id="container">
+        <h1 id="title">
+            Pet Age Calculator
+        </h1>
+        <div id="humanYears">
+            <label for="AgeInHumanYears">Enter the age of your pet in human years and months:</label><br>
+            <input type="number" name="years" placeholder="years" id="Years"><br>
+            <input type="number" name="months" placeholder="months" id="Months"><br>
+        </div>
+        <div id="Type">
+            <label for="PetType">select the type of pet</label><br>
+            <select name="PetType" id="PetType"><br>
+                <option value="Dog">Dogs</option>
+                <option value="Cat">Cats</option>
+                <option value="Rabbit">Rabbits</option>
+                <option value="Parrot">Parrots</option>
+                <option value="Hamster">Hamsters</option>
+                <option value="Horse">Horses</option>
+            </select>
+        </div>
+        <br>
+        <button onclick="CalculatePetAge()" id="submitButton">Calculate</button><br>
+        <div id="result"></div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Pet-Age-Calculator/script.js 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
@@ -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
@@ -1406,6 +1406,20 @@ <h3>Calculates nPr and nCr after taking inputs as n and r.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Pet Age Calculator</h2>
+                <h3>Calculates a pet's age in human years.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Pet-Age-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Pet-Age-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Population Density Calculator</h2>