-
Notifications
You must be signed in to change notification settings - Fork 173
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2409 from ANKeshri/feat/pet-care-calculator
Add Pet Care Calculator
- Loading branch information
Showing
6 changed files
with
162 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Pet Care Cost Calculator</title> | ||
<link rel="stylesheet" href="styles.css"> | ||
</head> | ||
<body> | ||
<div class="overlay"> | ||
<div class="container"> | ||
<h1>Pet Care Cost Calculator</h1> | ||
<form id="petCostForm"> | ||
<label for="petType">Select Pet Type:</label> | ||
<select id="petType"> | ||
<option value="dog">Dog</option> | ||
<option value="cat">Cat</option> | ||
<option value="bird">Bird</option> | ||
<option value="fish">Fish</option> | ||
<option value="reptile">Reptile</option> | ||
</select> | ||
|
||
<label for="foodCost">Annual Food Cost ($):</label> | ||
<input type="number" id="foodCost" placeholder="Enter annual food cost"> | ||
|
||
<label for="healthCost">Annual Health Care Cost ($):</label> | ||
<input type="number" id="healthCost" placeholder="Enter annual health care cost"> | ||
|
||
<label for="groomingCost">Annual Grooming Cost ($):</label> | ||
<input type="number" id="groomingCost" placeholder="Enter annual grooming cost"> | ||
|
||
<label for="insuranceCost">Annual Insurance Cost ($):</label> | ||
<input type="number" id="insuranceCost" placeholder="Enter annual insurance cost"> | ||
|
||
<label for="otherCost">Annual Other Expenses ($):</label> | ||
<input type="number" id="otherCost" placeholder="Enter other annual expenses"> | ||
|
||
<label for="years">Expected Lifespan (years):</label> | ||
<input type="number" id="years" placeholder="Enter expected lifespan"> | ||
|
||
<button type="button" onclick="calculateCost()">Calculate</button> | ||
</form> | ||
|
||
<div id="result"> | ||
<h2>Total Estimated Lifetime Cost: $<span id="totalCost">0</span></h2> | ||
</div> | ||
</div> | ||
</div> | ||
<script src="script.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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":[] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} |