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)