From cde2cb9634615d9cce876a6733a7038b72888913 Mon Sep 17 00:00:00 2001 From: Sahandgha Date: Tue, 11 Apr 2023 21:30:22 +0700 Subject: [PATCH 1/4] update last 4 projects --- projects/age-calculator/index.html | 32 ++++++++------- projects/age-calculator/index.js | 46 ++++++--------------- projects/age-calculator/style.css | 22 ++++------ projects/recipe-book-app/index.html | 25 +++++------ projects/recipe-book-app/index.js | 64 +++++++++++++++-------------- projects/recipe-book-app/style.css | 29 +++++++------ projects/tip-calculator/index.html | 42 ++++++++++--------- projects/tip-calculator/index.js | 16 ++++---- projects/tip-calculator/style.css | 18 ++++---- 9 files changed, 140 insertions(+), 154 deletions(-) diff --git a/projects/age-calculator/index.html b/projects/age-calculator/index.html index dd793a3..7ef5c27 100644 --- a/projects/age-calculator/index.html +++ b/projects/age-calculator/index.html @@ -1,21 +1,23 @@ - - - + + + + + Age Calculator - - - + + +
-

Age Calculator

-
- - - -

-
+

Age Calculator

+
+ + + +

Your age is 21 years old

+
- - + + \ No newline at end of file diff --git a/projects/age-calculator/index.js b/projects/age-calculator/index.js index 2d829c4..b2888ee 100644 --- a/projects/age-calculator/index.js +++ b/projects/age-calculator/index.js @@ -1,44 +1,23 @@ -// 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()) @@ -46,6 +25,7 @@ function getAge(birthDay) { age--; } - // Return the age return age; } + +btnEl.addEventListener("click", calculateAge); diff --git a/projects/age-calculator/style.css b/projects/age-calculator/style.css index 88f0382..0229675 100644 --- 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 index 81489f7..b93360d 100644 --- a/projects/recipe-book-app/index.html +++ b/projects/recipe-book-app/index.html @@ -2,17 +2,19 @@ - Recipe Book + + + Document
-

Recipe Book

+

Recipe Book App

-
- diff --git a/projects/recipe-book-app/index.js b/projects/recipe-book-app/index.js index 7fcf11a..d35b3b8 100644 --- 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 = ` + Ingredients: ${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 = `Ingredients: ${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 index d1405d5..9e56d02 100644 --- 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 index aa0dc58..029457b 100644 --- a/projects/tip-calculator/index.html +++ b/projects/tip-calculator/index.html @@ -1,24 +1,28 @@ - - + + + + + Tip Calculator - - - + + +
-

Tip Calculator

-

Enter the bill amount and tip percentage to calculate the total.

- - -
- - -
- -
- - +

Tip Calculator

+

Enter the bill amount and tip percentage to calculate the total.

+ + +
+ + +
+ +
+ + +
- - + + \ No newline at end of file diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js index 515b4de..98cb079 100644 --- a/projects/tip-calculator/index.js +++ b/projects/tip-calculator/index.js @@ -1,11 +1,13 @@ -const calculateBtn = document.getElementById("calculate"); +const btnEl = document.getElementById("calculate"); const billInput = document.getElementById("bill"); const tipInput = document.getElementById("tip"); const totalSpan = document.getElementById("total"); -calculateBtn.addEventListener("click", function () { - const bill = billInput.value; - const tip = tipInput.value; - const total = bill * (1 + tip / 100); - totalSpan.innerText = `$${total.toFixed(2)}`; -}); +function calculateTotal() { + const billValue = billInput.value; + const tipValue = tipInput.value; + const totalValue = billValue * (1 + tipValue / 100); + totalSpan.innerText = totalValue.toFixed(2); +} + +btnEl.addEventListener("click", calculateTotal); diff --git a/projects/tip-calculator/style.css b/projects/tip-calculator/style.css index 9db5f26..786e129 100644 --- a/projects/tip-calculator/style.css +++ b/projects/tip-calculator/style.css @@ -1,31 +1,27 @@ -/* Set body styles */ * { box-sizing: border-box; } body { background-color: #f2f2f2; - font-family: "Helvetica Neue", sans-serif; + font-family: "Helvetica", sans-serif; } -/* Set container styles */ .container { - margin: 100px auto; + background-color: white; max-width: 600px; + margin: 100px auto; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - background-color: #fff; border-radius: 10px; } -/* Set heading styles */ h1 { margin-top: 0; text-align: center; } -/* Set input styles */ -input[type="number"] { +input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; @@ -33,23 +29,23 @@ input[type="number"] { width: 100%; } -/* Set button styles */ button { background-color: #4caf50; color: white; padding: 10px; border: none; - border-radius: 4px; cursor: pointer; margin: 10px 0; width: 100%; + font-size: 18px; + text-transform: uppercase; + transition: background-color 0.2s ease; } button:hover { background-color: #45a049; } -/* Set result styles */ #total { font-size: 24px; font-weight: bold; From b395884f4fb3fdd42fae861b2f661180ae0e8469 Mon Sep 17 00:00:00 2001 From: Sahand Ghavidel Date: Sun, 4 Jun 2023 08:54:31 +0700 Subject: [PATCH 2/4] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e54352e..408019f 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 50 HTML CSS JavaScript Projects -This is the source code of the Udemy course: 50 HTML CSS JavaScript Projects +This is the source code of the Udemy course: 60 HTML CSS JavaScript Projects
Visit 100jsprojects.com to preview the projects.

About

-

Hi there! I'm Sahand, a web developer with over a decade of experience. This course, "50 HTML CSS JavaScript Projects," was created to share my knowledge and experience with you. In this course, you'll learn how to build simple, responsive websites using HTML, CSS, and JavaScript.

+

Hi there! I'm Sahand, a web developer with over a decade of experience. This course, "60 HTML CSS JavaScript Projects," was created to share my knowledge and experience with you. In this course, you'll learn how to build simple, responsive websites using HTML, CSS, and JavaScript.

In this course, you'll learn how to install Visual Studio Code and its extensions, and then we'll start from scratch with each project. After finishing HTML, we'll move on to CSS and JavaScript. Building in HTML, CSS, or JavaScript is fine, and this guide will explain HTML, CSS, and JavaScript syntax.

Each project in this course is started from scratch and finished without using copied code. Then, we'll go over the code together to ensure that everyone understands. This program's exciting project-based curriculum includes building modern, super cool, and responsive websites!

If you have any questions, please feel free to contact me through my Twitter: @codewithsahand.

From 383128a15d7c87ac7dae37a60049efa976823a39 Mon Sep 17 00:00:00 2001 From: Sahand Ghavidel Date: Sun, 4 Jun 2023 08:54:49 +0700 Subject: [PATCH 3/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 408019f..55d6ee3 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# 50 HTML CSS JavaScript Projects +# 60 HTML CSS JavaScript Projects This is the source code of the Udemy course: 60 HTML CSS JavaScript Projects
From 9178903cb14285736df153332c97209e8eab3ab1 Mon Sep 17 00:00:00 2001 From: Sahand Ghavidel Date: Tue, 3 Oct 2023 09:08:20 +0800 Subject: [PATCH 4/4] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 55d6ee3..af383c5 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,15 @@ -# 60 HTML CSS JavaScript Projects +# HTML CSS JavaScript Projects -This is the source code of the Udemy course: 60 HTML CSS JavaScript Projects +This is the source code of the website: 100 HTML CSS JavaScript Projects
Visit 100jsprojects.com to preview the projects.

About

-

Hi there! I'm Sahand, a web developer with over a decade of experience. This course, "60 HTML CSS JavaScript Projects," was created to share my knowledge and experience with you. In this course, you'll learn how to build simple, responsive websites using HTML, CSS, and JavaScript.

+

Hi there! I'm Sahand, a web developer with over a decade of experience. This course, "HTML CSS JavaScript Projects," was created to share my knowledge and experience with you. In this course, you'll learn how to build simple, responsive websites using HTML, CSS, and JavaScript.

In this course, you'll learn how to install Visual Studio Code and its extensions, and then we'll start from scratch with each project. After finishing HTML, we'll move on to CSS and JavaScript. Building in HTML, CSS, or JavaScript is fine, and this guide will explain HTML, CSS, and JavaScript syntax.

Each project in this course is started from scratch and finished without using copied code. Then, we'll go over the code together to ensure that everyone understands. This program's exciting project-based curriculum includes building modern, super cool, and responsive websites!

-

If you have any questions, please feel free to contact me through my Twitter: @codewithsahand.

- Visit my website +

If you have any questions, please feel free to contact me through my email: codewithsahand@gmail.com

+ Visit my website