Skip to content

Commit f805e34

Browse files
ArchiesachinArchiesachin
committed
Pet age calculator added
1 parent cc1a5fd commit f805e34

File tree

4 files changed

+128
-0
lines changed

4 files changed

+128
-0
lines changed

‎Pet Age Calculator/manifest.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"manifest_version": 3,
3+
"name": "Pet Age Caclulator",
4+
"description": "Pet Age Caclulator",
5+
"version": "1.0",
6+
"permissions": [
7+
"storage"
8+
],
9+
"host_permissions": ["*://*/*"],
10+
"action": {
11+
"default_popup": "popup.html"
12+
}
13+
}

‎Pet Age Calculator/popup.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Pet Age Calculator</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Pet Age Calculator</h1>
12+
<form id="ageForm">
13+
<label for="petType">Select Pet:</label>
14+
<select id="petType" required>
15+
<option value="dog">Dog</option>
16+
<option value="cat">Cat</option>
17+
<option value="rabbit">Rabbit</option>
18+
<option value="fish">Fish</option>
19+
</select>
20+
21+
<label for="humanYears">Enter Human Years:</label>
22+
<input type="number" id="humanYears" step="0.1" min="0" required>
23+
24+
<button type="submit">Calculate Pet Age</button>
25+
</form>
26+
<div id="result"></div>
27+
</div>
28+
<script src="script.js"></script>
29+
</body>
30+
</html>

‎Pet Age Calculator/script.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
document.getElementById('ageForm').addEventListener('submit', function(event) {
2+
event.preventDefault();
3+
4+
const petType = document.getElementById('petType').value;
5+
const humanYears = parseFloat(document.getElementById('humanYears').value);
6+
let petYears = 0;
7+
8+
switch(petType) {
9+
case 'dog':
10+
petYears = humanYears * 7;
11+
break;
12+
case 'cat':
13+
petYears = humanYears * 6;
14+
break;
15+
case 'rabbit':
16+
petYears = humanYears * 12;
17+
break;
18+
case 'fish':
19+
petYears = humanYears * 5;
20+
break;
21+
default:
22+
petYears = 0;
23+
}
24+
25+
document.getElementById('result').textContent = `Your ${petType} is ${petYears.toFixed(1)} years old in pet years.`;
26+
});

‎Pet Age Calculator/style.css

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
background-color: lightblue;
8+
margin: 0;
9+
}
10+
11+
.container {
12+
background-color: #fff;
13+
padding: 20px;
14+
border-radius: 8px;
15+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
16+
text-align: center;
17+
width: 50vw;
18+
}
19+
20+
h1 {
21+
margin-bottom: 20px;
22+
}
23+
24+
form {
25+
display: flex;
26+
flex-direction: column;
27+
align-items: flex-start;
28+
}
29+
30+
label {
31+
margin: 10px 0 5px;
32+
font-size: 20px;
33+
}
34+
35+
input, select, button {
36+
margin-bottom: 10px;
37+
padding: 8px;
38+
width: 100%;
39+
box-sizing: border-box;
40+
font-size: 18px;
41+
}
42+
43+
button {
44+
background-color: #007BFF;
45+
color: #fff;
46+
border: none;
47+
border-radius: 4px;
48+
cursor: pointer;
49+
}
50+
51+
button:hover {
52+
background-color: #0056b3;
53+
}
54+
55+
#result {
56+
margin-top: 20px;
57+
font-size: 1.2em;
58+
color: #333;
59+
}

0 commit comments

Comments
 (0)