Skip to content

Commit cde2cb9

Browse files
sahandghavidelsahandghavidel
committed
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‎

Lines changed: 17 additions & 15 deletions
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‎

Lines changed: 13 additions & 33 deletions
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‎

Lines changed: 9 additions & 13 deletions
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‎

Lines changed: 13 additions & 12 deletions
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‎

Lines changed: 33 additions & 31 deletions
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‎

Lines changed: 16 additions & 13 deletions
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
}

0 commit comments

Comments
 (0)