Skip to content

Commit 0643a11

Browse files
sahandghavidelsahandghavidel
committed
add 2 more projects
1 parent 2617699 commit 0643a11

File tree

6 files changed

+231
-0
lines changed

6 files changed

+231
-0
lines changed

‎projects/age-calculator/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Age Calculator</title>
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<div class="container">
10+
<h1>Age Calculator</h1>
11+
<div class="form">
12+
<label for="birthday">Enter your date of birth:</label>
13+
<input type="date" id="birthday" name="birthday" />
14+
<button id="calculate">Calculate Age</button>
15+
<p id="result"></p>
16+
</div>
17+
</div>
18+
19+
<script src="index.js"></script>
20+
</body>
21+
</html>

‎projects/age-calculator/index.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// Get the elements from the DOM
2+
const birthdayInput = document.getElementById("birthday");
3+
const calculateButton = document.getElementById("calculate");
4+
const resultElement = document.getElementById("result");
5+
6+
// Add click event listener to the calculate button
7+
calculateButton.addEventListener("click", calculateAge);
8+
9+
// Function to calculate the age
10+
11+
function calculateAge() {
12+
// Get the value from the input
13+
const birthday = birthdayInput.value;
14+
15+
// Check if the value is empty
16+
if (birthday === "") {
17+
// If the value is empty, show an alert
18+
alert("Please enter your birthday");
19+
} else {
20+
// If the value is not empty, calculate the age
21+
const age = getAge(birthday);
22+
23+
// Show the result
24+
resultElement.innerHTML = `Your age is ${age} ${
25+
age > 1 ? "years" : "year" // Check if the age is more than 1
26+
} old`;
27+
}
28+
}
29+
30+
// Function to calculate the age
31+
function getAge(birthDay) {
32+
// Get the current date
33+
const currentDate = new Date();
34+
35+
// Get the birthday date
36+
const birthdayDate = new Date(birthDay);
37+
38+
// Calculate the age
39+
const age = currentDate.getFullYear() - birthdayDate.getFullYear();
40+
41+
const month = currentDate.getMonth() - birthdayDate.getMonth();
42+
if (
43+
month < 0 ||
44+
(month === 0 && currentDate.getDate() < birthdayDate.getDate())
45+
) {
46+
age--;
47+
}
48+
49+
// Return the age
50+
return age;
51+
}

‎projects/age-calculator/style.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/* General styles */
2+
body {
3+
margin: 0;
4+
padding: 20px;
5+
font-family: "Montserrat", sans-serif;
6+
font-size: 16px;
7+
line-height: 1.5;
8+
background-color: #f7f7f7;
9+
}
10+
11+
.container {
12+
max-width: 600px;
13+
margin: 0 auto;
14+
padding: 20px;
15+
background-color: #fff;
16+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
17+
border-radius: 5px;
18+
}
19+
20+
h1 {
21+
font-size: 36px;
22+
text-align: center;
23+
margin-top: 0;
24+
margin-bottom: 20px;
25+
}
26+
27+
.form {
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
}
32+
33+
label {
34+
font-weight: bold;
35+
margin-bottom: 10px;
36+
}
37+
38+
input[type="date"] {
39+
padding: 8px;
40+
border: 1px solid #ccc;
41+
border-radius: 4px;
42+
width: 100%;
43+
max-width: 300px;
44+
box-sizing: border-box;
45+
}
46+
47+
button {
48+
background-color: #007bff;
49+
color: #fff;
50+
border: none;
51+
padding: 10px 20px;
52+
border-radius: 4px;
53+
margin-top: 10px;
54+
cursor: pointer;
55+
transition: background-color 0.2s ease;
56+
}
57+
58+
button:hover {
59+
background-color: #0062cc;
60+
}
61+
62+
#result {
63+
margin-top: 20px;
64+
font-size: 24px;
65+
font-weight: bold;
66+
text-align: center;
67+
}

‎projects/tip-calculator/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Tip Calculator</title>
5+
<link rel="stylesheet" href="style.css" />
6+
</head>
7+
<body>
8+
<div class="container">
9+
<h1>Tip Calculator</h1>
10+
<p>Enter the bill amount and tip percentage to calculate the total.</p>
11+
<label for="bill">Bill amount:</label>
12+
<input type="number" id="bill" />
13+
<br />
14+
<label for="tip">Tip percentage:</label>
15+
<input type="number" id="tip" />
16+
<br />
17+
<button id="calculate">Calculate</button>
18+
<br />
19+
<label for="total">Total:</label>
20+
<span id="total"></span>
21+
</div>
22+
<script src="index.js"></script>
23+
</body>
24+
</html>

‎projects/tip-calculator/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const calculateBtn = document.getElementById("calculate");
2+
const billInput = document.getElementById("bill");
3+
const tipInput = document.getElementById("tip");
4+
const totalSpan = document.getElementById("total");
5+
6+
calculateBtn.addEventListener("click", function () {
7+
const bill = billInput.value;
8+
const tip = tipInput.value;
9+
const total = bill * (1 + tip / 100);
10+
totalSpan.innerText = `$${total.toFixed(2)}`;
11+
});

‎projects/tip-calculator/style.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* Set body styles */
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
body {
7+
background-color: #f2f2f2;
8+
font-family: "Helvetica Neue", sans-serif;
9+
}
10+
11+
/* Set container styles */
12+
.container {
13+
margin: 100px auto;
14+
max-width: 600px;
15+
padding: 20px;
16+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
17+
background-color: #fff;
18+
border-radius: 10px;
19+
}
20+
21+
/* Set heading styles */
22+
h1 {
23+
margin-top: 0;
24+
text-align: center;
25+
}
26+
27+
/* Set input styles */
28+
input[type="number"] {
29+
padding: 10px;
30+
border: 1px solid #ccc;
31+
border-radius: 4px;
32+
margin: 10px 0;
33+
width: 100%;
34+
}
35+
36+
/* Set button styles */
37+
button {
38+
background-color: #4caf50;
39+
color: white;
40+
padding: 10px;
41+
border: none;
42+
border-radius: 4px;
43+
cursor: pointer;
44+
margin: 10px 0;
45+
width: 100%;
46+
}
47+
48+
button:hover {
49+
background-color: #45a049;
50+
}
51+
52+
/* Set result styles */
53+
#total {
54+
font-size: 24px;
55+
font-weight: bold;
56+
margin-top: 10px;
57+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy