From f805e34697d0a164c395b79858035b9ed672f017 Mon Sep 17 00:00:00 2001 From: Archiesachin Date: Fri, 5 Jul 2024 12:56:31 +0530 Subject: [PATCH] Pet age calculator added --- Pet Age Calculator/manifest.json | 13 +++++++ Pet Age Calculator/popup.html | 30 ++++++++++++++++ Pet Age Calculator/script.js | 26 ++++++++++++++ Pet Age Calculator/style.css | 59 ++++++++++++++++++++++++++++++++ 4 files changed, 128 insertions(+) create mode 100644 Pet Age Calculator/manifest.json create mode 100644 Pet Age Calculator/popup.html create mode 100644 Pet Age Calculator/script.js create mode 100644 Pet Age Calculator/style.css diff --git a/Pet Age Calculator/manifest.json b/Pet Age Calculator/manifest.json new file mode 100644 index 00000000..98a9e072 --- /dev/null +++ b/Pet Age Calculator/manifest.json @@ -0,0 +1,13 @@ +{ + "manifest_version": 3, + "name": "Pet Age Caclulator", + "description": "Pet Age Caclulator", + "version": "1.0", + "permissions": [ + "storage" + ], + "host_permissions": ["*://*/*"], + "action": { + "default_popup": "popup.html" + } +} diff --git a/Pet Age Calculator/popup.html b/Pet Age Calculator/popup.html new file mode 100644 index 00000000..9c0d3759 --- /dev/null +++ b/Pet Age Calculator/popup.html @@ -0,0 +1,30 @@ + + + + + + Pet Age Calculator + + + +
+

Pet Age Calculator

+
+ + + + + + + +
+
+
+ + + diff --git a/Pet Age Calculator/script.js b/Pet Age Calculator/script.js new file mode 100644 index 00000000..0a10bcb4 --- /dev/null +++ b/Pet Age Calculator/script.js @@ -0,0 +1,26 @@ +document.getElementById('ageForm').addEventListener('submit', function(event) { + event.preventDefault(); + + const petType = document.getElementById('petType').value; + const humanYears = parseFloat(document.getElementById('humanYears').value); + let petYears = 0; + + switch(petType) { + case 'dog': + petYears = humanYears * 7; + break; + case 'cat': + petYears = humanYears * 6; + break; + case 'rabbit': + petYears = humanYears * 12; + break; + case 'fish': + petYears = humanYears * 5; + break; + default: + petYears = 0; + } + + document.getElementById('result').textContent = `Your ${petType} is ${petYears.toFixed(1)} years old in pet years.`; +}); diff --git a/Pet Age Calculator/style.css b/Pet Age Calculator/style.css new file mode 100644 index 00000000..ea2f5f24 --- /dev/null +++ b/Pet Age Calculator/style.css @@ -0,0 +1,59 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: lightblue; + margin: 0; +} + +.container { + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; + width: 50vw; +} + +h1 { + margin-bottom: 20px; +} + +form { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +label { + margin: 10px 0 5px; + font-size: 20px; +} + +input, select, button { + margin-bottom: 10px; + padding: 8px; + width: 100%; + box-sizing: border-box; + font-size: 18px; +} + +button { + background-color: #007BFF; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 20px; + font-size: 1.2em; + color: #333; +}