diff --git a/README.md b/README.md index e54352e..af383c5 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,15 @@ -# 50 HTML CSS JavaScript Projects +# 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 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, "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, "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
diff --git a/projects/age-calculator/index.html b/projects/age-calculator/index.html new file mode 100644 index 0000000..7ef5c27 --- /dev/null +++ b/projects/age-calculator/index.html @@ -0,0 +1,23 @@ + + + + + + + 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 new file mode 100644 index 0000000..b2888ee --- /dev/null +++ b/projects/age-calculator/index.js @@ -0,0 +1,31 @@ +const btnEl = document.getElementById("btn"); +const birthdayEl = document.getElementById("birthday"); +const resultEl = document.getElementById("result"); + +function calculateAge() { + const birthdayValue = birthdayEl.value; + if (birthdayValue === "") { + alert("Please enter your birthday"); + } else { + const age = getAge(birthdayValue); + resultEl.innerText = `Your age is ${age} ${age > 1 ? "years" : "year"} old`; + } +} + +function getAge(birthdayValue) { + const currentDate = new Date(); + 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 age; +} + +btnEl.addEventListener("click", calculateAge); diff --git a/projects/age-calculator/style.css b/projects/age-calculator/style.css new file mode 100644 index 0000000..0229675 --- /dev/null +++ b/projects/age-calculator/style.css @@ -0,0 +1,63 @@ +body { + margin: 0; + padding: 20px; + font-family: "Montserrat", sans-serif; + 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; + border-radius: 5px; + margin-top: 50px; +} + +h1 { + font-size: 36px; + text-align: center; + margin-top: 0; + margin-bottom: 20px; +} + +.form { + display: flex; + flex-direction: column; + align-items: center; +} + +label { + font-weight: bold; + margin-bottom: 10px; +} + +input { + padding: 8px; + border: 1px solid #ccc; + border-radius: 5px; + width: 100%; + max-width: 300px; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + margin-top: 10px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #0062cc; +} + +#result { + margin-top: 20px; + font-size: 24px; + font-weight: bold; +} diff --git a/projects/dice-roll-simulator/index.html b/projects/dice-roll-simulator/index.html index d88b92d..edf81b5 100644 --- a/projects/dice-roll-simulator/index.html +++ b/projects/dice-roll-simulator/index.html @@ -1,18 +1,20 @@ - + + + + Dice Roll Simulator

Dice Roll Simulator

-
⚀
+
⚄
- - + diff --git a/projects/dice-roll-simulator/dice-roll.js b/projects/dice-roll-simulator/index.js similarity index 54% rename from projects/dice-roll-simulator/dice-roll.js rename to projects/dice-roll-simulator/index.js index 6e161a8..8deecde 100644 --- a/projects/dice-roll-simulator/dice-roll.js +++ b/projects/dice-roll-simulator/index.js @@ -1,50 +1,53 @@ -const diceElement = document.getElementById("dice"); -const rollButton = document.getElementById("roll-button"); -const rollHistory = document.getElementById("roll-history"); +const buttonEl = document.getElementById("roll-button"); + +const diceEl = document.getElementById("dice"); + +const rollHistoryEl = document.getElementById("roll-history"); + let historyList = []; function rollDice() { const rollResult = Math.floor(Math.random() * 6) + 1; const diceFace = getDiceFace(rollResult); - diceElement.textContent = diceFace; + diceEl.innerHTML = diceFace; historyList.push(rollResult); updateRollHistory(); } +function updateRollHistory() { + rollHistoryEl.innerHTML = ""; + for (let i = 0; i < historyList.length; i++) { + const listItem = document.createElement("li"); + listItem.innerHTML = `Roll ${i + 1}: ${getDiceFace( + historyList[i] + )}`; + rollHistoryEl.appendChild(listItem); + } +} + function getDiceFace(rollResult) { switch (rollResult) { case 1: - return "⚀"; + return "⚀"; case 2: - return "⚁"; + return "⚁"; case 3: - return "⚂"; + return "⚂"; case 4: - return "⚃"; + return "⚃"; case 5: - return "⚄"; + return "⚄"; case 6: - return "⚅"; + return "⚅"; default: return ""; } } -function updateRollHistory() { - rollHistory.innerHTML = ""; - for (let i = 0; i < historyList.length; i++) { - const listItem = document.createElement("li"); - listItem.innerHTML = `Roll ${i + 1}: ${getDiceFace( - historyList[i] - )}`; - rollHistory.appendChild(listItem); - } -} - -rollButton.addEventListener("click", () => { - diceElement.classList.add("roll-animation"); +buttonEl.addEventListener("click", () => { + diceEl.classList.add("roll-animation"); setTimeout(() => { - diceElement.classList.remove("roll-animation"); + diceEl.classList.remove("roll-animation"); rollDice(); }, 1000); }); diff --git a/projects/dice-roll-simulator/style.css b/projects/dice-roll-simulator/style.css index 841de74..439ab24 100644 --- a/projects/dice-roll-simulator/style.css +++ b/projects/dice-roll-simulator/style.css @@ -24,6 +24,7 @@ h1 { 0% { transform: rotateY(0deg) rotateX(0deg); } + 100% { transform: rotateY(720deg) rotateX(720deg); } @@ -33,9 +34,8 @@ button { background-color: #47a5c4; color: white; font-size: 1.5rem; - border: none; padding: 1rem 2rem; - margin: 5px; + border: none; border-radius: 1rem; cursor: pointer; transition: background-color 0.3s ease; @@ -48,9 +48,8 @@ button:hover { ul { list-style: none; padding: 0; - margin: 2rem; max-width: 600px; - margin: 0 auto; + margin: 2rem auto; } li { diff --git a/projects/recipe-book-app/index.html b/projects/recipe-book-app/index.html index 6cc0f1d..b93360d 100644 --- a/projects/recipe-book-app/index.html +++ b/projects/recipe-book-app/index.html @@ -2,22 +2,56 @@ - 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 new file mode 100644 index 0000000..029457b --- /dev/null +++ b/projects/tip-calculator/index.html @@ -0,0 +1,28 @@ + + + + + + + Tip Calculator + + + +
+

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 new file mode 100644 index 0000000..98cb079 --- /dev/null +++ b/projects/tip-calculator/index.js @@ -0,0 +1,13 @@ +const btnEl = document.getElementById("calculate"); +const billInput = document.getElementById("bill"); +const tipInput = document.getElementById("tip"); +const totalSpan = document.getElementById("total"); + +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 new file mode 100644 index 0000000..786e129 --- /dev/null +++ b/projects/tip-calculator/style.css @@ -0,0 +1,53 @@ +* { + box-sizing: border-box; +} + +body { + background-color: #f2f2f2; + font-family: "Helvetica", sans-serif; +} + +.container { + background-color: white; + max-width: 600px; + margin: 100px auto; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + border-radius: 10px; +} + +h1 { + margin-top: 0; + text-align: center; +} + +input { + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + margin: 10px 0; + width: 100%; +} + +button { + background-color: #4caf50; + color: white; + padding: 10px; + border: none; + cursor: pointer; + margin: 10px 0; + width: 100%; + font-size: 18px; + text-transform: uppercase; + transition: background-color 0.2s ease; +} + +button:hover { + background-color: #45a049; +} + +#total { + font-size: 24px; + font-weight: bold; + margin-top: 10px; +}