diff --git a/Pet Care Calculator/calc.png b/Pet Care Calculator/calc.png new file mode 100644 index 00000000..bb05230d Binary files /dev/null and b/Pet Care Calculator/calc.png differ diff --git a/Pet Care Calculator/image.png b/Pet Care Calculator/image.png new file mode 100644 index 00000000..c9224e1c Binary files /dev/null and b/Pet Care Calculator/image.png differ diff --git a/Pet Care Calculator/index.html b/Pet Care Calculator/index.html new file mode 100644 index 00000000..fd5509c3 --- /dev/null +++ b/Pet Care Calculator/index.html @@ -0,0 +1,51 @@ + + + + + + Pet Care Cost Calculator + + + +
+
+

Pet Care Cost Calculator

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

Total Estimated Lifetime Cost: $0

+
+
+
+ + + diff --git a/Pet Care Calculator/manifest.json b/Pet Care Calculator/manifest.json new file mode 100644 index 00000000..8f317f7e --- /dev/null +++ b/Pet Care Calculator/manifest.json @@ -0,0 +1,16 @@ +{ + "manifest_version": 3, + "name": "Pet Care Calculator", + "version": "1.0", + "description": "Calculates the lifetime cost of owning different types of pets, including food, healthcare, and other expenses, based on current market prices.", + "action": { + "default_popup": "index.html", + "default_icon": "calc.png" + }, + "icons": { + "16": "calc.png", + "48": "calc.png", + "128": "calc.png" + }, + "permissions":[] +} \ No newline at end of file diff --git a/Pet Care Calculator/script.js b/Pet Care Calculator/script.js new file mode 100644 index 00000000..603e167d --- /dev/null +++ b/Pet Care Calculator/script.js @@ -0,0 +1,12 @@ +function calculateCost() { + const foodCost = parseFloat(document.getElementById('foodCost').value) || 0; + const healthCost = parseFloat(document.getElementById('healthCost').value) || 0; + const groomingCost = parseFloat(document.getElementById('groomingCost').value) || 0; + const insuranceCost = parseFloat(document.getElementById('insuranceCost').value) || 0; + const otherCost = parseFloat(document.getElementById('otherCost').value) || 0; + const years = parseFloat(document.getElementById('years').value) || 0; + + const totalCost = (foodCost + healthCost + groomingCost + insuranceCost + otherCost) * years; + + document.getElementById('totalCost').innerText = totalCost.toFixed(2); +} diff --git a/Pet Care Calculator/styles.css b/Pet Care Calculator/styles.css new file mode 100644 index 00000000..dd56b1df --- /dev/null +++ b/Pet Care Calculator/styles.css @@ -0,0 +1,83 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f8ff; + background-image: url('image.png'); /* Change 'background.jpg' to your image URL */ + background-size: cover; + background-position: center; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 50px rgba(0, 0, 8, 4); + text-align: center; + width: 80%; + max-width: 600px; +} + +h1 { + color: red; +} + +form { + margin: 20px 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +label { + flex: 1 1 40%; + margin: 10px 0 5px; + font-weight: bold; + text-align: left; + color: white; +} + +input, select { + flex: 1 1 55%; + padding: 8px; + margin-bottom: 15px; + border: 1px solid #cccccc; + border-radius: 5px; +} + +button { + background-color: #007bff; + color: #ffffff; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + width: 100%; + margin-top: 10px; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 20px; +} + +h2 { + background: linear-gradient(135deg, #833ab4, #fd1d1d); +}