update last 4 projects

sahandghavidel · sahandghavidel · commit cde2cb963461 · 2023-04-11T21:30:22.000+07:00
diff --git a/projects/age-calculator/index.html b/projects/age-calculator/index.html
@@ -1,21 +1,23 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Age Calculator</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
     <div class="container">
-      <h1>Age Calculator</h1>
-      <div class="form">
-        <label for="birthday">Enter your date of birth:</label>
-        <input type="date" id="birthday" name="birthday" />
-        <button id="calculate">Calculate Age</button>
-        <p id="result"></p>
-      </div>
+        <h1>Age Calculator</h1>
+        <div class="form">
+            <label for="birthday">Enter you date of birth</label>
+            <input type="date" id="birthday" name="birthday">
+            <button id="btn">Calculate Age</button>
+            <p id="result">Your age is 21 years old</p>
+        </div>
     </div>
 
     <script src="index.js"></script>
-  </body>
-</html>
+</body>
+</html>
diff --git a/projects/age-calculator/index.js b/projects/age-calculator/index.js
@@ -1,51 +1,31 @@
-// Get the elements from the DOM
-const birthdayInput = document.getElementById("birthday");
-const calculateButton = document.getElementById("calculate");
-const resultElement = document.getElementById("result");
-
-// Add click event listener to the calculate button
-calculateButton.addEventListener("click", calculateAge);
-
-// Function to calculate the age
+const btnEl = document.getElementById("btn");
+const birthdayEl = document.getElementById("birthday");
+const resultEl = document.getElementById("result");
 
 function calculateAge() {
-  // Get the value from the input
-  const birthday = birthdayInput.value;
-
-  // Check if the value is empty
-  if (birthday === "") {
-    // If the value is empty, show an alert
+  const birthdayValue = birthdayEl.value;
+  if (birthdayValue === "") {
     alert("Please enter your birthday");
   } else {
-    // If the value is not empty, calculate the age
-    const age = getAge(birthday);
-
-    // Show the result
-    resultElement.innerHTML = `Your age is ${age} ${
-      age > 1 ? "years" : "year" // Check if the age is more than 1
-    } old`;
+    const age = getAge(birthdayValue);
+    resultEl.innerText = `Your age is ${age} ${age > 1 ? "years" : "year"} old`;
   }
 }
 
-// Function to calculate the age
-function getAge(birthDay) {
-  // Get the current date
+function getAge(birthdayValue) {
   const currentDate = new Date();
-
-  // Get the birthday date
-  const birthdayDate = new Date(birthDay);
-
-  // Calculate the age
-  const age = currentDate.getFullYear() - birthdayDate.getFullYear();
-
+  const birthdayDate = new Date(birthdayValue);
+  let age = currentDate.getFullYear() - birthdayDate.getFullYear();
   const month = currentDate.getMonth() - birthdayDate.getMonth();
+
   if (
     month < 0 ||
     (month === 0 && currentDate.getDate() < birthdayDate.getDate())
   ) {
     age--;
   }
 
-  // Return the age
   return age;
 }
+
+btnEl.addEventListener("click", calculateAge);
diff --git a/projects/age-calculator/style.css b/projects/age-calculator/style.css
@@ -1,20 +1,18 @@
-/* General styles */
 body {
   margin: 0;
   padding: 20px;
   font-family: "Montserrat", sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
   background-color: #f7f7f7;
 }
 
 .container {
+  background-color: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  padding: 20px;
   max-width: 600px;
   margin: 0 auto;
-  padding: 20px;
-  background-color: #fff;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
+  margin-top: 50px;
 }
 
 h1 {
@@ -35,24 +33,23 @@ label {
   margin-bottom: 10px;
 }
 
-input[type="date"] {
+input {
   padding: 8px;
   border: 1px solid #ccc;
-  border-radius: 4px;
+  border-radius: 5px;
   width: 100%;
   max-width: 300px;
-  box-sizing: border-box;
 }
 
 button {
   background-color: #007bff;
-  color: #fff;
+  color: white;
   border: none;
   padding: 10px 20px;
-  border-radius: 4px;
+  border-radius: 5px;
   margin-top: 10px;
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  transition: background-color 0.3s ease;
 }
 
 button:hover {
@@ -63,5 +60,4 @@ button:hover {
   margin-top: 20px;
   font-size: 24px;
   font-weight: bold;
-  text-align: center;
 }
diff --git a/projects/recipe-book-app/index.html b/projects/recipe-book-app/index.html
@@ -2,17 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>Recipe Book</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Recipe Book</h1>
+      <h1>Recipe Book App</h1>
     </header>
 
     <div class="container">
-      <ul id="recipe-list">
-        <li class="recipe-item">
+      <ul id="recipe-list" class="recipe-list">
+        <!-- <li class="recipe-item">
           <img
             src="https://spoonacular.com/recipeImages/12345-312x231.jpg"
             alt="Recipe 1"
@@ -26,31 +28,30 @@ <h2>Recipe 1</h2>
         </li>
         <li class="recipe-item">
           <img
-            src="https://spoonacular.com/recipeImages/67890-312x231.jpg"
+            src="https://spoonacular.com/recipeImages/12545-312x231.jpg"
             alt="Recipe 2"
           />
           <h2>Recipe 2</h2>
           <p>
-            <strong>Ingredients:</strong> Ingredient 4, Ingredient 5, Ingredient
-            6
+            <strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
+            3
           </p>
           <a href="#">View Recipe</a>
         </li>
         <li class="recipe-item">
           <img
-            src="https://spoonacular.com/recipeImages/54321-312x231.jpg"
+            src="https://spoonacular.com/recipeImages/12445-312x231.jpg"
             alt="Recipe 3"
           />
           <h2>Recipe 3</h2>
           <p>
-            <strong>Ingredients:</strong> Ingredient 7, Ingredient 8, Ingredient
-            9
+            <strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
+            3
           </p>
           <a href="#">View Recipe</a>
-        </li>
+        </li> -->
       </ul>
     </div>
-
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/projects/recipe-book-app/index.js b/projects/recipe-book-app/index.js
@@ -1,43 +1,45 @@
 const API_KEY = "275d58779ccf4e22af03e792e8819fff";
+const recipeListEl = document.getElementById("recipe-list");
 
-// Call the API and retrieve a list of recipes
-const recipeList = document.getElementById("recipe-list");
+function displayRecipes(recipes) {
+  recipeListEl.innerHTML = "";
+  recipes.forEach((recipe) => {
+    const recipeItemEl = document.createElement("li");
+    recipeItemEl.classList.add("recipe-item");
+    recipeImageEl = document.createElement("img");
+    recipeImageEl.src = recipe.image;
+    recipeImageEl.alt = "recipe image";
+
+    recipeTitleEl = document.createElement("h2");
+    recipeTitleEl.innerText = recipe.title;
+
+    recipeIngredientsEl = document.createElement("p");
+    recipeIngredientsEl.innerHTML = `
+        <strong>Ingredients:</strong> ${recipe.extendedIngredients
+          .map((ingredient) => ingredient.original)
+          .join(", ")}
+    `;
+
+    recipeLinkEl = document.createElement("a");
+    recipeLinkEl.href = recipe.sourceUrl;
+    recipeLinkEl.innerText = "View Recipe";
+
+    recipeItemEl.appendChild(recipeImageEl);
+    recipeItemEl.appendChild(recipeTitleEl);
+    recipeItemEl.appendChild(recipeIngredientsEl);
+    recipeItemEl.appendChild(recipeLinkEl);
+    recipeListEl.appendChild(recipeItemEl);
+  });
+}
 
 async function getRecipes() {
   const response = await fetch(
     `https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
   );
-  const data = await response.json();
-  return data.recipes;
-}
-
-function displayRecipes(recipes) {
-  recipeList.innerHTML = "";
-  recipes.forEach((recipe) => {
-    const recipeItem = document.createElement("li");
-    recipeItem.classList.add("recipe-item");
-    const recipeImage = document.createElement("img");
-    recipeImage.src = recipe.image;
-
-    const recipeTitle = document.createElement("h2");
-    recipeTitle.innerText = recipe.title;
-
-    const recipeIngredients = document.createElement("p");
-    recipeIngredients.innerHTML = `<strong>Ingredients:</strong> ${recipe.extendedIngredients
-      .map((ingredient) => ingredient.original)
-      .join(", ")}`;
 
-    const recipeLink = document.createElement("a");
-    recipeLink.href = recipe.sourceUrl;
-    recipeLink.innerText = "View Recipe";
-
-    recipeItem.appendChild(recipeImage);
-    recipeItem.appendChild(recipeTitle);
-    recipeItem.appendChild(recipeIngredients);
-    recipeItem.appendChild(recipeLink);
+  const data = await response.json();
 
-    recipeList.appendChild(recipeItem);
-  });
+  return data.recipes;
 }
 
 async function init() {
diff --git a/projects/recipe-book-app/style.css b/projects/recipe-book-app/style.css
@@ -5,7 +5,7 @@ body {
 }
 
 header {
-  background-color: #0c2461;
+  background: #0c2461;
   color: #fff;
   padding: 20px;
   text-align: center;
@@ -17,8 +17,8 @@ h1 {
 }
 
 .container {
-  max-width: 1200px;
   margin: 0 auto;
+  max-width: 1200px;
   padding: 20px;
 }
 
@@ -33,7 +33,7 @@ h1 {
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   overflow: hidden;
 }
@@ -47,36 +47,37 @@ h1 {
 .recipe-item h2 {
   margin: 0;
   font-size: 20px;
-  min-width: 200px;
   padding: 10px;
+  min-width: 200px;
 }
 
 .recipe-item p {
   margin: 0;
   padding: 10px;
+  color: #777;
 }
 
 .recipe-item a {
-  padding: 10px;
-  background-color: #0c2461;
+  background: #0c2461;
   color: #fff;
-  text-align: center;
-  text-decoration: none;
-  transition: background-color 0.2s ease-in-out;
   min-width: 150px;
+  padding: 10px;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-size: 14px;
+  transition: background 0.3s ease;
 }
 
 .recipe-item a:hover {
-  background-color: #1e3799;
+  background: #1e3799;
 }
 
-@media only screen and (max-width: 800px) {
+@media screen and (max-width: 768px) {
   .container {
     max-width: 90%;
   }
-
   .recipe-item {
-    flex-wrap: wrap;
+    flex-direction: column;
   }
 
   .recipe-item img {
@@ -95,7 +96,9 @@ h1 {
     font-size: 14px;
     margin-bottom: 10px;
   }
+
   .recipe-item a {
     width: 100%;
+    text-align: center;
   }
 }
diff --git a/projects/tip-calculator/index.html b/projects/tip-calculator/index.html
diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
diff --git a/projects/tip-calculator/style.css b/projects/tip-calculator/style.css

-Original file line number
+Diff line change
@@ @@ -1,21 +1,23 @@ @@
+>
 -<html>
 -  <head>
 -    <meta charset="UTF-8" />
 +<html lang="en">
 +<head>
 +    <meta charset="UTF-8">
 +    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 +    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Age Calculatortitle>
 -    <link rel="stylesheet" href="style.css" />
 -  head>
 -  <body>
 +    <link rel="stylesheet" href="style.css">
 +head>
 +<body>
     <div class="container">
 -      <h1>Age Calculatorh1>
 -      <div class="form">
 -        <label for="birthday">Enter your date of birth:label>
 -        <input type="date" id="birthday" name="birthday" />
 -        <button id="calculate">Calculate Agebutton>
 -        <p id="result">p>
 -      div>
 +        <h1>Age Calculatorh1>
 +        <div class="form">
 +            <label for="birthday">Enter you date of birthlabel>
 +            <input type="date" id="birthday" name="birthday">
 +            <button id="btn">Calculate Agebutton>
 +            <p id="result">Your age is 21 years oldp>
 +        div>
     div>
     <script src="index.js">script>
 -  body>
 -html>
 +body>
 +html>