Skip to content

Commit cde2cb9

Browse files
sahandghavidelsahandghavidel
committedApr 11, 2023
update last 4 projects
1 parent 0894ef2 commit cde2cb9

File tree

9 files changed

+140
-154
lines changed

9 files changed

+140
-154
lines changed
 

‎projects/age-calculator/index.html

+17-15
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta charset="UTF-8" />
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
57
<title>Age Calculator</title>
6-
<link rel="stylesheet" href="style.css" />
7-
</head>
8-
<body>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
911
<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>
12+
<h1>Age Calculator</h1>
13+
<div class="form">
14+
<label for="birthday">Enter you date of birth</label>
15+
<input type="date" id="birthday" name="birthday">
16+
<button id="btn">Calculate Age</button>
17+
<p id="result">Your age is 21 years old</p>
18+
</div>
1719
</div>
1820

1921
<script src="index.js"></script>
20-
</body>
21-
</html>
22+
</body>
23+
</html>

‎projects/age-calculator/index.js

+13-33
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,31 @@
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
1+
const btnEl = document.getElementById("btn");
2+
const birthdayEl = document.getElementById("birthday");
3+
const resultEl = document.getElementById("result");
104

115
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
6+
const birthdayValue = birthdayEl.value;
7+
if (birthdayValue === "") {
188
alert("Please enter your birthday");
199
} 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`;
10+
const age = getAge(birthdayValue);
11+
resultEl.innerText = `Your age is ${age} ${age > 1 ? "years" : "year"} old`;
2712
}
2813
}
2914

30-
// Function to calculate the age
31-
function getAge(birthDay) {
32-
// Get the current date
15+
function getAge(birthdayValue) {
3316
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-
17+
const birthdayDate = new Date(birthdayValue);
18+
let age = currentDate.getFullYear() - birthdayDate.getFullYear();
4119
const month = currentDate.getMonth() - birthdayDate.getMonth();
20+
4221
if (
4322
month < 0 ||
4423
(month === 0 && currentDate.getDate() < birthdayDate.getDate())
4524
) {
4625
age--;
4726
}
4827

49-
// Return the age
5028
return age;
5129
}
30+
31+
btnEl.addEventListener("click", calculateAge);

‎projects/age-calculator/style.css

+9-13
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1-
/* General styles */
21
body {
32
margin: 0;
43
padding: 20px;
54
font-family: "Montserrat", sans-serif;
6-
font-size: 16px;
7-
line-height: 1.5;
85
background-color: #f7f7f7;
96
}
107

118
.container {
9+
background-color: white;
10+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
11+
padding: 20px;
1212
max-width: 600px;
1313
margin: 0 auto;
14-
padding: 20px;
15-
background-color: #fff;
16-
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
1714
border-radius: 5px;
15+
margin-top: 50px;
1816
}
1917

2018
h1 {
@@ -35,24 +33,23 @@ label {
3533
margin-bottom: 10px;
3634
}
3735

38-
input[type="date"] {
36+
input {
3937
padding: 8px;
4038
border: 1px solid #ccc;
41-
border-radius: 4px;
39+
border-radius: 5px;
4240
width: 100%;
4341
max-width: 300px;
44-
box-sizing: border-box;
4542
}
4643

4744
button {
4845
background-color: #007bff;
49-
color: #fff;
46+
color: white;
5047
border: none;
5148
padding: 10px 20px;
52-
border-radius: 4px;
49+
border-radius: 5px;
5350
margin-top: 10px;
5451
cursor: pointer;
55-
transition: background-color 0.2s ease;
52+
transition: background-color 0.3s ease;
5653
}
5754

5855
button:hover {
@@ -63,5 +60,4 @@ button:hover {
6360
margin-top: 20px;
6461
font-size: 24px;
6562
font-weight: bold;
66-
text-align: center;
6763
}

‎projects/recipe-book-app/index.html

+13-12
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,19 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Recipe Book</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
68
<link rel="stylesheet" href="style.css" />
79
</head>
810
<body>
911
<header>
10-
<h1>Recipe Book</h1>
12+
<h1>Recipe Book App</h1>
1113
</header>
1214

1315
<div class="container">
14-
<ul id="recipe-list">
15-
<li class="recipe-item">
16+
<ul id="recipe-list" class="recipe-list">
17+
<!-- <li class="recipe-item">
1618
<img
1719
src="https://spoonacular.com/recipeImages/12345-312x231.jpg"
1820
alt="Recipe 1"
@@ -26,31 +28,30 @@ <h2>Recipe 1</h2>
2628
</li>
2729
<li class="recipe-item">
2830
<img
29-
src="https://spoonacular.com/recipeImages/67890-312x231.jpg"
31+
src="https://spoonacular.com/recipeImages/12545-312x231.jpg"
3032
alt="Recipe 2"
3133
/>
3234
<h2>Recipe 2</h2>
3335
<p>
34-
<strong>Ingredients:</strong> Ingredient 4, Ingredient 5, Ingredient
35-
6
36+
<strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
37+
3
3638
</p>
3739
<a href="#">View Recipe</a>
3840
</li>
3941
<li class="recipe-item">
4042
<img
41-
src="https://spoonacular.com/recipeImages/54321-312x231.jpg"
43+
src="https://spoonacular.com/recipeImages/12445-312x231.jpg"
4244
alt="Recipe 3"
4345
/>
4446
<h2>Recipe 3</h2>
4547
<p>
46-
<strong>Ingredients:</strong> Ingredient 7, Ingredient 8, Ingredient
47-
9
48+
<strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
49+
3
4850
</p>
4951
<a href="#">View Recipe</a>
50-
</li>
52+
</li> -->
5153
</ul>
5254
</div>
53-
5455
<script src="index.js"></script>
5556
</body>
5657
</html>

‎projects/recipe-book-app/index.js

+33-31
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,45 @@
11
const API_KEY = "275d58779ccf4e22af03e792e8819fff";
2+
const recipeListEl = document.getElementById("recipe-list");
23

3-
// Call the API and retrieve a list of recipes
4-
const recipeList = document.getElementById("recipe-list");
4+
function displayRecipes(recipes) {
5+
recipeListEl.innerHTML = "";
6+
recipes.forEach((recipe) => {
7+
const recipeItemEl = document.createElement("li");
8+
recipeItemEl.classList.add("recipe-item");
9+
recipeImageEl = document.createElement("img");
10+
recipeImageEl.src = recipe.image;
11+
recipeImageEl.alt = "recipe image";
12+
13+
recipeTitleEl = document.createElement("h2");
14+
recipeTitleEl.innerText = recipe.title;
15+
16+
recipeIngredientsEl = document.createElement("p");
17+
recipeIngredientsEl.innerHTML = `
18+
<strong>Ingredients:</strong> ${recipe.extendedIngredients
19+
.map((ingredient) => ingredient.original)
20+
.join(", ")}
21+
`;
22+
23+
recipeLinkEl = document.createElement("a");
24+
recipeLinkEl.href = recipe.sourceUrl;
25+
recipeLinkEl.innerText = "View Recipe";
26+
27+
recipeItemEl.appendChild(recipeImageEl);
28+
recipeItemEl.appendChild(recipeTitleEl);
29+
recipeItemEl.appendChild(recipeIngredientsEl);
30+
recipeItemEl.appendChild(recipeLinkEl);
31+
recipeListEl.appendChild(recipeItemEl);
32+
});
33+
}
534

635
async function getRecipes() {
736
const response = await fetch(
837
`https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
938
);
10-
const data = await response.json();
11-
return data.recipes;
12-
}
13-
14-
function displayRecipes(recipes) {
15-
recipeList.innerHTML = "";
16-
recipes.forEach((recipe) => {
17-
const recipeItem = document.createElement("li");
18-
recipeItem.classList.add("recipe-item");
19-
const recipeImage = document.createElement("img");
20-
recipeImage.src = recipe.image;
21-
22-
const recipeTitle = document.createElement("h2");
23-
recipeTitle.innerText = recipe.title;
24-
25-
const recipeIngredients = document.createElement("p");
26-
recipeIngredients.innerHTML = `<strong>Ingredients:</strong> ${recipe.extendedIngredients
27-
.map((ingredient) => ingredient.original)
28-
.join(", ")}`;
2939

30-
const recipeLink = document.createElement("a");
31-
recipeLink.href = recipe.sourceUrl;
32-
recipeLink.innerText = "View Recipe";
33-
34-
recipeItem.appendChild(recipeImage);
35-
recipeItem.appendChild(recipeTitle);
36-
recipeItem.appendChild(recipeIngredients);
37-
recipeItem.appendChild(recipeLink);
40+
const data = await response.json();
3841

39-
recipeList.appendChild(recipeItem);
40-
});
42+
return data.recipes;
4143
}
4244

4345
async function init() {

‎projects/recipe-book-app/style.css

+16-13
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ body {
55
}
66

77
header {
8-
background-color: #0c2461;
8+
background: #0c2461;
99
color: #fff;
1010
padding: 20px;
1111
text-align: center;
@@ -17,8 +17,8 @@ h1 {
1717
}
1818

1919
.container {
20-
max-width: 1200px;
2120
margin: 0 auto;
21+
max-width: 1200px;
2222
padding: 20px;
2323
}
2424

@@ -33,7 +33,7 @@ h1 {
3333
align-items: center;
3434
justify-content: space-between;
3535
margin-bottom: 20px;
36-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
36+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
3737
border-radius: 5px;
3838
overflow: hidden;
3939
}
@@ -47,36 +47,37 @@ h1 {
4747
.recipe-item h2 {
4848
margin: 0;
4949
font-size: 20px;
50-
min-width: 200px;
5150
padding: 10px;
51+
min-width: 200px;
5252
}
5353

5454
.recipe-item p {
5555
margin: 0;
5656
padding: 10px;
57+
color: #777;
5758
}
5859

5960
.recipe-item a {
60-
padding: 10px;
61-
background-color: #0c2461;
61+
background: #0c2461;
6262
color: #fff;
63-
text-align: center;
64-
text-decoration: none;
65-
transition: background-color 0.2s ease-in-out;
6663
min-width: 150px;
64+
padding: 10px;
65+
text-decoration: none;
66+
text-transform: uppercase;
67+
font-size: 14px;
68+
transition: background 0.3s ease;
6769
}
6870

6971
.recipe-item a:hover {
70-
background-color: #1e3799;
72+
background: #1e3799;
7173
}
7274

73-
@media only screen and (max-width: 800px) {
75+
@media screen and (max-width: 768px) {
7476
.container {
7577
max-width: 90%;
7678
}
77-
7879
.recipe-item {
79-
flex-wrap: wrap;
80+
flex-direction: column;
8081
}
8182

8283
.recipe-item img {
@@ -95,7 +96,9 @@ h1 {
9596
font-size: 14px;
9697
margin-bottom: 10px;
9798
}
99+
98100
.recipe-item a {
99101
width: 100%;
102+
text-align: center;
100103
}
101104
}

‎projects/tip-calculator/index.html

+23-19
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
47
<title>Tip Calculator</title>
5-
<link rel="stylesheet" href="style.css" />
6-
</head>
7-
<body>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
811
<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>
12+
<h1>Tip Calculator</h1>
13+
<p>Enter the bill amount and tip percentage to calculate the total.</p>
14+
<label for="bill">Bill amount:</label>
15+
<input type="number" id="bill">
16+
<br/>
17+
<label for="tip">Tip percentage:</label>
18+
<input type="number" id="tip">
19+
<br/>
20+
<button id="calculate">Calculate</button>
21+
<br/>
22+
<label for="total">Total:</label>
23+
<span id="total"></span>
24+
2125
</div>
2226
<script src="index.js"></script>
23-
</body>
24-
</html>
27+
</body>
28+
</html>

‎projects/tip-calculator/index.js

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
const calculateBtn = document.getElementById("calculate");
1+
const btnEl = document.getElementById("calculate");
22
const billInput = document.getElementById("bill");
33
const tipInput = document.getElementById("tip");
44
const totalSpan = document.getElementById("total");
55

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-
});
6+
function calculateTotal() {
7+
const billValue = billInput.value;
8+
const tipValue = tipInput.value;
9+
const totalValue = billValue * (1 + tipValue / 100);
10+
totalSpan.innerText = totalValue.toFixed(2);
11+
}
12+
13+
btnEl.addEventListener("click", calculateTotal);

‎projects/tip-calculator/style.css

+7-11
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,51 @@
1-
/* Set body styles */
21
* {
32
box-sizing: border-box;
43
}
54

65
body {
76
background-color: #f2f2f2;
8-
font-family: "Helvetica Neue", sans-serif;
7+
font-family: "Helvetica", sans-serif;
98
}
109

11-
/* Set container styles */
1210
.container {
13-
margin: 100px auto;
11+
background-color: white;
1412
max-width: 600px;
13+
margin: 100px auto;
1514
padding: 20px;
1615
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
17-
background-color: #fff;
1816
border-radius: 10px;
1917
}
2018

21-
/* Set heading styles */
2219
h1 {
2320
margin-top: 0;
2421
text-align: center;
2522
}
2623

27-
/* Set input styles */
28-
input[type="number"] {
24+
input {
2925
padding: 10px;
3026
border: 1px solid #ccc;
3127
border-radius: 4px;
3228
margin: 10px 0;
3329
width: 100%;
3430
}
3531

36-
/* Set button styles */
3732
button {
3833
background-color: #4caf50;
3934
color: white;
4035
padding: 10px;
4136
border: none;
42-
border-radius: 4px;
4337
cursor: pointer;
4438
margin: 10px 0;
4539
width: 100%;
40+
font-size: 18px;
41+
text-transform: uppercase;
42+
transition: background-color 0.2s ease;
4643
}
4744

4845
button:hover {
4946
background-color: #45a049;
5047
}
5148

52-
/* Set result styles */
5349
#total {
5450
font-size: 24px;
5551
font-weight: bold;

0 commit comments

Comments
 (0)
Please sign in to comment.