From 61d4cf2ce5b5525a4cb3dea0ed6b9f8be7079d84 Mon Sep 17 00:00:00 2001 From: Sahandgha Date: Thu, 23 Mar 2023 06:20:56 +0700 Subject: [PATCH 01/14] update stopwatch project --- projects/simple-stopwatch/style.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/projects/simple-stopwatch/style.css b/projects/simple-stopwatch/style.css index f1a4e31..bea5522 100644 --- a/projects/simple-stopwatch/style.css +++ b/projects/simple-stopwatch/style.css @@ -54,3 +54,24 @@ button[disabled] { opacity: 0.5; cursor: default; } + +/* add media query */ + +@media (max-width: 800px) { + #timer { + font-size: 4rem; + width: 350px; + } + + button { + font-size: 1.5rem; + padding: 1rem 2rem; + } + +} + + + + +/* add media query for tablet size */ + From 3ff1ee95a8894bdef8f6526ee485f8812474e85e Mon Sep 17 00:00:00 2001 From: Sahandgha Date: Fri, 24 Mar 2023 06:24:51 +0700 Subject: [PATCH 02/14] update stopwatch project --- projects/simple-stopwatch/index.html | 16 ---- projects/simple-stopwatch/stopwatch.js | 78 ------------------- projects/stopwatch/index.html | 20 +++++ projects/stopwatch/index.js | 54 +++++++++++++ .../{simple-stopwatch => stopwatch}/style.css | 26 ++----- 5 files changed, 79 insertions(+), 115 deletions(-) delete mode 100644 projects/simple-stopwatch/index.html delete mode 100644 projects/simple-stopwatch/stopwatch.js create mode 100644 projects/stopwatch/index.html create mode 100644 projects/stopwatch/index.js rename projects/{simple-stopwatch => stopwatch}/style.css (62%) diff --git a/projects/simple-stopwatch/index.html b/projects/simple-stopwatch/index.html deleted file mode 100644 index d61ac22..0000000 --- a/projects/simple-stopwatch/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - Stopwatch - - - -
00:00:00
-
- - - -
- - - diff --git a/projects/simple-stopwatch/stopwatch.js b/projects/simple-stopwatch/stopwatch.js deleted file mode 100644 index df0d14a..0000000 --- a/projects/simple-stopwatch/stopwatch.js +++ /dev/null @@ -1,78 +0,0 @@ -// Get references to the timer and button elements -var timer = document.getElementById("timer"); -var startButton = document.getElementById("start"); -var stopButton = document.getElementById("stop"); -var resetButton = document.getElementById("reset"); - -// Initialize variables for tracking the start time, elapsed time, and timer interval -var startTime, - elapsedTime = 0, - timerInterval; - -// Function to start the timer -function startTimer() { - // Calculate the start time by subtracting the elapsed time from the current time - startTime = Date.now() - elapsedTime; - - // Start an interval that updates the timer display every 10 milliseconds - timerInterval = setInterval(function printTime() { - // Calculate the elapsed time by subtracting the start time from the current time - elapsedTime = Date.now() - startTime; - - // Update the timer display with the formatted elapsed time - timer.textContent = formatTime(elapsedTime); - }, 10); - - // Disable the start button and enable the stop button - startButton.disabled = true; - stopButton.disabled = false; -} - -// Function to stop the timer -function stopTimer() { - // Clear the interval that updates the timer display - clearInterval(timerInterval); - - // Enable the start button and disable the stop button - startButton.disabled = false; - stopButton.disabled = true; -} - -// Function to reset the timer -function resetTimer() { - // Clear the interval that updates the timer display - clearInterval(timerInterval); - - // Reset the elapsed time to 0 and update the timer display - elapsedTime = 0; - timer.textContent = "00:00:00"; - - // Enable the start button and disable the stop button - startButton.disabled = false; - stopButton.disabled = true; -} - -// Function to format the elapsed time as a string -function formatTime(time) { - var hours = Math.floor(time / (1000 * 60 * 60)); - var minutes = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60)); - var seconds = Math.floor((time % (1000 * 60)) / 1000); - var milliseconds = Math.floor((time % 1000) / 10); - // The ternary operator hours ? (hours > 9 ? hours : "0" + hours) : "00" checks if the hours variable has a value greater than zero. If it does, it checks if it is greater than 9. If it is, it returns the value of hours. If it is less than or equal to 9, it adds a leading zero to the hours value and returns it. If hours is zero, it returns the string "00". - - // The same logic is applied to format the minutes and seconds values. - return ( - (hours ? (hours > 9 ? hours : "0" + hours) : "00") + - ":" + - (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + - ":" + - (seconds ? (seconds > 9 ? seconds : "0" + seconds) : "00") + - "." + - (milliseconds > 9 ? milliseconds : "0" + milliseconds) - ); -} - -// Add event listeners to the button elements to trigger the timer functions -startButton.addEventListener("click", startTimer); -stopButton.addEventListener("click", stopTimer); -resetButton.addEventListener("click", resetTimer); diff --git a/projects/stopwatch/index.html b/projects/stopwatch/index.html new file mode 100644 index 0000000..05d8b2b --- /dev/null +++ b/projects/stopwatch/index.html @@ -0,0 +1,20 @@ + + + + + + + Stopwatch + + + + +
00:00:00
+
+ + + +
+ + + \ No newline at end of file diff --git a/projects/stopwatch/index.js b/projects/stopwatch/index.js new file mode 100644 index 0000000..0cbd647 --- /dev/null +++ b/projects/stopwatch/index.js @@ -0,0 +1,54 @@ +const timerEl = document.getElementById("timer"); +const startButtonEl = document.getElementById("start"); +const stopButtonEl = document.getElementById("stop"); +const resetButtonEl = document.getElementById("reset"); + +let startTime = 0; +let elapsedTime = 0; +let timerInterval; + +function startTimer() { + startTime = Date.now() - elapsedTime; + + timerInterval = setInterval(() => { + elapsedTime = Date.now() - startTime; + timerEl.textContent = formatTime(elapsedTime); + }, 10); + + startButtonEl.disabled = true; + stopButtonEl.disabled = false; +} + +function formatTime(elapsedTime) { + const milliseconds = Math.floor((elapsedTime % 1000) / 10); + const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000); + const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60)); + const hours = Math.floor(elapsedTime / (1000 * 60 * 60)); + return ( + (hours ? (hours > 9 ? hours : "0" + hours) : "00") + + ":" + + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + + ":" + + (seconds ? (seconds > 9 ? seconds : "0" + seconds) : "00") + + "." + + (milliseconds > 9 ? milliseconds : "0" + milliseconds) + ); +} +function stopTimer() { + clearInterval(timerInterval); + startButtonEl.disabled = false; + stopButtonEl.disabled = true; +} +function resetTimer() { + clearInterval(timerInterval); + + elapsedTime = 0; + timerEl.textContent = "00:00:00"; + + startButtonEl.disabled = false; + stopButtonEl.disabled = true; +} + +startButtonEl.addEventListener("click", startTimer); +stopButtonEl.addEventListener("click", stopTimer); +resetButtonEl.addEventListener("click", resetTimer); diff --git a/projects/simple-stopwatch/style.css b/projects/stopwatch/style.css similarity index 62% rename from projects/simple-stopwatch/style.css rename to projects/stopwatch/style.css index bea5522..cf0859d 100644 --- a/projects/simple-stopwatch/style.css +++ b/projects/stopwatch/style.css @@ -4,17 +4,16 @@ body { display: flex; flex-direction: column; justify-content: center; - align-items: center; - height: 100vh; + min-height: 100vh; overflow: hidden; + align-items: center; } #timer { font-size: 7rem; font-weight: 700; - color: #f92672; text-shadow: 2px 2px #f8a5c2; - /* In the current code, the value 2px 2px #f8a5c2 sets a shadow that is 2 pixels to the right and 2 pixels down of the text, with a blur radius of 0 (no blur), and a color of #f8a5c2. */ + color: #f92672; width: 600px; text-align: center; margin: 40px auto; @@ -29,15 +28,14 @@ button { background-color: #f92672; color: white; border: none; - border-radius: 30px; font-size: 2rem; font-weight: bold; padding: 1.5rem 4rem; - /* In the current code, the value 1.5rem 4rem sets a padding of 1.5rem (24px) for the top and bottom sides of the buttons, and 4rem (64px) for the left and right sides of the buttons. */ margin: 1rem; + border-radius: 30px; cursor: pointer; - transition: background-color 0.2s; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); + transition: all 0.2s; } button:hover { @@ -45,18 +43,11 @@ button:hover { box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); } -button:active { - background-color: #f34282; - box-shadow: none; -} - button[disabled] { opacity: 0.5; cursor: default; } -/* add media query */ - @media (max-width: 800px) { #timer { font-size: 4rem; @@ -67,11 +58,4 @@ button[disabled] { font-size: 1.5rem; padding: 1rem 2rem; } - } - - - - -/* add media query for tablet size */ - From 051f5a567b3b1f15b9bdcf63064391fcd96e438a Mon Sep 17 00:00:00 2001 From: Sahandgha Date: Fri, 24 Mar 2023 06:42:33 +0700 Subject: [PATCH 03/14] update double landing page projects --- projects/double-landing-page/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/double-landing-page/style.css b/projects/double-landing-page/style.css index 5a62c04..0d37d66 100644 --- a/projects/double-landing-page/style.css +++ b/projects/double-landing-page/style.css @@ -11,7 +11,7 @@ body { h1 { font-size: 100px; color: aliceblue; - backdrop-filter: brightness(0.5); + background-color: rgba(0, 0, 0, 0.3); letter-spacing: 4px; } From 0c0e315a232d39f5c68ae549c22090148c135f62 Mon Sep 17 00:00:00 2001 From: Sahandgha Date: Sat, 25 Mar 2023 05:33:17 +0700 Subject: [PATCH 04/14] add rock paper scissors game and pomodoro timer projects --- projects/pomodoro-timer/index.html | 19 +++++ projects/pomodoro-timer/index.js | 47 ++++++++++++ projects/pomodoro-timer/style.css | 62 ++++++++++++++++ projects/rock-paper-scissors-game/index.html | 27 +++++++ projects/rock-paper-scissors-game/index.js | 44 ++++++++++++ projects/rock-paper-scissors-game/style.css | 75 ++++++++++++++++++++ 6 files changed, 274 insertions(+) create mode 100644 projects/pomodoro-timer/index.html create mode 100644 projects/pomodoro-timer/index.js create mode 100644 projects/pomodoro-timer/style.css create mode 100644 projects/rock-paper-scissors-game/index.html create mode 100644 projects/rock-paper-scissors-game/index.js create mode 100644 projects/rock-paper-scissors-game/style.css diff --git a/projects/pomodoro-timer/index.html b/projects/pomodoro-timer/index.html new file mode 100644 index 0000000..39dfbb7 --- /dev/null +++ b/projects/pomodoro-timer/index.html @@ -0,0 +1,19 @@ + + + + Pomodoro Timer + + + +
+

Pomodoro Timer

+

25:00

+
+ + + +
+
+ + + diff --git a/projects/pomodoro-timer/index.js b/projects/pomodoro-timer/index.js new file mode 100644 index 0000000..af8598e --- /dev/null +++ b/projects/pomodoro-timer/index.js @@ -0,0 +1,47 @@ +const startEl = document.getElementById("start"); +const stopEl = document.getElementById("stop"); +const resetEl = document.getElementById("reset"); +const timerEl = document.getElementById("timer"); + +let intervalId; +let timeLeft = 1500; // 25 minutes in seconds + +function updateTimer() { + let minutes = Math.floor(timeLeft / 60); + let seconds = timeLeft % 60; + let formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds + .toString() + .padStart(2, "0")}`; + // padStart() is a built-in method in JavaScript that allows you to pad a string with another string until it reaches a specified length. It's often used to format strings to a specific length, such as adding leading zeros to a number. + // const str = '7'; + // const paddedStr = str.padStart(2, '0'); + + // console.log(paddedStr); // Output: '07' + + timerEl.innerHTML = formattedTime; +} + +function startTimer() { + intervalId = setInterval(() => { + timeLeft--; + updateTimer(); + if (timeLeft === 0) { + clearInterval(intervalId); + alert("Time's up!"); + } + }, 1000); +} + +function stopTimer() { + clearInterval(intervalId); +} + +function resetTimer() { + clearInterval(intervalId); + timeLeft = 1500; + updateTimer(); +} + +startEl.addEventListener("click", startTimer); +stopEl.addEventListener("click", stopTimer); +resetEl.addEventListener("click", resetTimer); diff --git a/projects/pomodoro-timer/style.css b/projects/pomodoro-timer/style.css new file mode 100644 index 0000000..8583f8f --- /dev/null +++ b/projects/pomodoro-timer/style.css @@ -0,0 +1,62 @@ +/* Pomodoro Timer styles */ + +.container { + font-family: "Roboto", Arial, Helvetica, sans-serif; + margin: 0 auto; + max-width: 400px; + padding: 20px; + text-align: center; +} + +.title { + font-size: 36px; + margin-bottom: 10px; + color: #2c3e50; +} + +.timer { + font-size: 72px; + color: #2c3e50; +} + +.button-wrapper { + display: flex; + justify-content: center; +} + +.button { + border: none; + border-radius: 4px; + color: #fff; + font-size: 18px; + font-weight: bold; + margin-right: 10px; + padding: 10px 20px; + text-transform: uppercase; + transition: all 0.2s; + cursor: pointer; +} + +.button--start { + background-color: #27ae60; +} + +.button--start:hover { + background-color: #229954; +} + +.button--stop { + background-color: #c0392b; +} + +.button--stop:hover { + background-color: #a93226; +} + +.button--reset { + background-color: #7f8c8d; +} + +.button--reset:hover { + background-color: #6c7a7d; +} diff --git a/projects/rock-paper-scissors-game/index.html b/projects/rock-paper-scissors-game/index.html new file mode 100644 index 0000000..d736e45 --- /dev/null +++ b/projects/rock-paper-scissors-game/index.html @@ -0,0 +1,27 @@ + + + + Rock Paper Scissors + + + + + +

Rock Paper Scissors Game

+

Choose your move:

+
+ + + + + +
+

+

+ Your score: 0 Computer's score: + 0 +

+ + + + diff --git a/projects/rock-paper-scissors-game/index.js b/projects/rock-paper-scissors-game/index.js new file mode 100644 index 0000000..e003110 --- /dev/null +++ b/projects/rock-paper-scissors-game/index.js @@ -0,0 +1,44 @@ +const buttons = document.querySelectorAll("button"); +let playerScore = 0; +let computerScore = 0; + +buttons.forEach((button) => { + button.addEventListener("click", () => { + playRound(button.id, computerPlay()); + }); +}); + +function computerPlay() { + const choices = ["rock", "paper", "scissors"]; + return choices[Math.floor(Math.random() * choices.length)]; +} + +function playRound(playerSelection, computerSelection) { + if (playerSelection === computerSelection) { + document.getElementById("result").textContent = "Tie game!"; + } else if ( + (playerSelection === "rock" && computerSelection === "scissors") || + (playerSelection === "paper" && computerSelection === "rock") || + (playerSelection === "scissors" && computerSelection === "paper") + ) { + playerScore++; + document.getElementById( + "result" + ).textContent = `You win! ${playerSelection} beats ${computerSelection}`; + } else { + computerScore++; + document.getElementById( + "result" + ).textContent = `You lose! ${computerSelection} beats ${playerSelection}`; + } + updateScore(); +} + +function updateScore() { + document.getElementById( + "player-score" + ).textContent = `Your score: ${playerScore}`; + document.getElementById( + "computer-score" + ).textContent = `Computer's score: ${computerScore}`; +} diff --git a/projects/rock-paper-scissors-game/style.css b/projects/rock-paper-scissors-game/style.css new file mode 100644 index 0000000..8962ff0 --- /dev/null +++ b/projects/rock-paper-scissors-game/style.css @@ -0,0 +1,75 @@ +* { + box-sizing: border-box; +} + +body { + background-color: #f1f1f1; + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +h1 { + font-size: 2rem; + text-align: center; + padding-top: 100px; +} + +p { + font-size: 1.2rem; + margin-bottom: 0.5rem; + text-align: center; +} + +.buttons { + display: flex; + justify-content: center; +} + +button { + border: none; + border-radius: 5px; + color: white; + cursor: pointer; + font-size: 3rem; + margin: 0 0.5rem; + padding: 0.5rem; + transition: all 0.3s ease-in-out; +} + +button:hover { + opacity: 0.7; +} + +#rock { + background-color: #f44336; /* Red */ +} + +#paper { + background-color: #2196f3; /* Blue */ +} + +#scissors { + background-color: #4caf50; /* Green */ +} + +#result { + font-size: 1.5rem; + font-weight: bold; + margin: 1rem 0; +} + +#scores { + font-size: 1.2rem; + font-weight: bold; + text-align: center; +} + +#player-score { + color: #4caf50; + margin-right: 0.5rem; +} + +#computer-score { + color: #f44336; +} From 07a16873b84779a27b0dad8d78148b1aded64f18 Mon Sep 17 00:00:00 2001 From: Sahandgha Date: Sat, 25 Mar 2023 13:44:14 +0700 Subject: [PATCH 05/14] update Rock Paper Scissors Game project --- projects/rock-paper-scissors-game/index.html | 34 ++++++++-------- projects/rock-paper-scissors-game/index.js | 36 ++++++++--------- projects/rock-paper-scissors-game/style.css | 41 ++++++-------------- 3 files changed, 45 insertions(+), 66 deletions(-) diff --git a/projects/rock-paper-scissors-game/index.html b/projects/rock-paper-scissors-game/index.html index d736e45..c458606 100644 --- a/projects/rock-paper-scissors-game/index.html +++ b/projects/rock-paper-scissors-game/index.html @@ -1,27 +1,25 @@ - - - Rock Paper Scissors - - - - - + + + + + + Rock Paper Scissors Game + + +

Rock Paper Scissors Game

Choose your move:

- - - - - + + +

- Your score: 0 Computer's score: - 0 + Your score: 0 + Computer score: 0

- - - + + \ No newline at end of file diff --git a/projects/rock-paper-scissors-game/index.js b/projects/rock-paper-scissors-game/index.js index e003110..4944f3e 100644 --- a/projects/rock-paper-scissors-game/index.js +++ b/projects/rock-paper-scissors-game/index.js @@ -1,44 +1,42 @@ const buttons = document.querySelectorAll("button"); + +const resultEl = document.getElementById("result"); + +const playerScoreEl = document.getElementById("user-score"); + +const computerScoreEl = document.getElementById("computer-score"); + let playerScore = 0; let computerScore = 0; buttons.forEach((button) => { button.addEventListener("click", () => { - playRound(button.id, computerPlay()); + const result = playRound(button.id, computerPlay()); + resultEl.textContent = result; + }); }); function computerPlay() { const choices = ["rock", "paper", "scissors"]; - return choices[Math.floor(Math.random() * choices.length)]; + const randomChoice = Math.floor(Math.random() * choices.length); + return choices[randomChoice]; } function playRound(playerSelection, computerSelection) { if (playerSelection === computerSelection) { - document.getElementById("result").textContent = "Tie game!"; + return "It's a tie!"; } else if ( (playerSelection === "rock" && computerSelection === "scissors") || (playerSelection === "paper" && computerSelection === "rock") || (playerSelection === "scissors" && computerSelection === "paper") ) { playerScore++; - document.getElementById( - "result" - ).textContent = `You win! ${playerSelection} beats ${computerSelection}`; + playerScoreEl.textContent = playerScore; + return "You win! " + playerSelection + " beats " + computerSelection; } else { computerScore++; - document.getElementById( - "result" - ).textContent = `You lose! ${computerSelection} beats ${playerSelection}`; + computerScoreEl.textContent = computerScore; + return "You lose! " + computerSelection + " beats " + playerSelection; } - updateScore(); -} - -function updateScore() { - document.getElementById( - "player-score" - ).textContent = `Your score: ${playerScore}`; - document.getElementById( - "computer-score" - ).textContent = `Computer's score: ${computerScore}`; } diff --git a/projects/rock-paper-scissors-game/style.css b/projects/rock-paper-scissors-game/style.css index 8962ff0..940eff4 100644 --- a/projects/rock-paper-scissors-game/style.css +++ b/projects/rock-paper-scissors-game/style.css @@ -1,10 +1,6 @@ -* { - box-sizing: border-box; -} - body { background-color: #f1f1f1; - font-family: Arial, sans-serif; + font-family: "Arial", sans-serif; margin: 0; padding: 0; } @@ -16,9 +12,10 @@ h1 { } p { - font-size: 1.2rem; - margin-bottom: 0.5rem; + font-size: 1.5rem; + font-weight: 600; text-align: center; + margin-bottom: 0.5rem; } .buttons { @@ -28,12 +25,11 @@ p { button { border: none; - border-radius: 5px; - color: white; - cursor: pointer; font-size: 3rem; margin: 0 0.5rem; padding: 0.5rem; + cursor: pointer; + border-radius: 5px; transition: all 0.3s ease-in-out; } @@ -42,34 +38,21 @@ button:hover { } #rock { - background-color: #f44336; /* Red */ + background-color: #ff0000; } #paper { - background-color: #2196f3; /* Blue */ + background-color: #2196f3; } #scissors { - background-color: #4caf50; /* Green */ -} - -#result { - font-size: 1.5rem; - font-weight: bold; - margin: 1rem 0; -} - -#scores { - font-size: 1.2rem; - font-weight: bold; - text-align: center; + background-color: #4caf50; } -#player-score { - color: #4caf50; - margin-right: 0.5rem; +#user-score { + color: #2196f3; } #computer-score { - color: #f44336; + color: #ff0000; } From dfb834e9d2d33469623af5e9b860685d0fc7fa53 Mon Sep 17 00:00:00 2001 From: Sahandgha Date: Sun, 26 Mar 2023 14:44:28 +0700 Subject: [PATCH 06/14] update pomodoro timer project --- projects/pomodoro-timer/index.html | 31 ++++++++++---------- projects/pomodoro-timer/index.js | 21 ++++++-------- projects/pomodoro-timer/style.css | 45 ++++++++++-------------------- 3 files changed, 40 insertions(+), 57 deletions(-) diff --git a/projects/pomodoro-timer/index.html b/projects/pomodoro-timer/index.html index 39dfbb7..7cfe584 100644 --- a/projects/pomodoro-timer/index.html +++ b/projects/pomodoro-timer/index.html @@ -1,19 +1,22 @@ - - + + + + + Pomodoro Timer - - - + + +
-

Pomodoro Timer

-

25:00

-
- - - -
+

Pomodoro Timer

+

25:00

+
+ + + +
- - + + \ No newline at end of file diff --git a/projects/pomodoro-timer/index.js b/projects/pomodoro-timer/index.js index af8598e..22b4ede 100644 --- a/projects/pomodoro-timer/index.js +++ b/projects/pomodoro-timer/index.js @@ -3,8 +3,8 @@ const stopEl = document.getElementById("stop"); const resetEl = document.getElementById("reset"); const timerEl = document.getElementById("timer"); -let intervalId; -let timeLeft = 1500; // 25 minutes in seconds +let interval; +let timeLeft = 1500; function updateTimer() { let minutes = Math.floor(timeLeft / 60); @@ -12,32 +12,27 @@ function updateTimer() { let formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds .toString() .padStart(2, "0")}`; - // padStart() is a built-in method in JavaScript that allows you to pad a string with another string until it reaches a specified length. It's often used to format strings to a specific length, such as adding leading zeros to a number. - // const str = '7'; - // const paddedStr = str.padStart(2, '0'); - - // console.log(paddedStr); // Output: '07' timerEl.innerHTML = formattedTime; } function startTimer() { - intervalId = setInterval(() => { + interval = setInterval(() => { timeLeft--; updateTimer(); if (timeLeft === 0) { - clearInterval(intervalId); + clearInterval(interval); alert("Time's up!"); + timeLeft = 1500; + updateTimer(); } }, 1000); } - function stopTimer() { - clearInterval(intervalId); + clearInterval(interval); } - function resetTimer() { - clearInterval(intervalId); + clearInterval(interval); timeLeft = 1500; updateTimer(); } diff --git a/projects/pomodoro-timer/style.css b/projects/pomodoro-timer/style.css index 8583f8f..0e6970b 100644 --- a/projects/pomodoro-timer/style.css +++ b/projects/pomodoro-timer/style.css @@ -1,11 +1,9 @@ -/* Pomodoro Timer styles */ - .container { - font-family: "Roboto", Arial, Helvetica, sans-serif; margin: 0 auto; max-width: 400px; - padding: 20px; text-align: center; + padding: 20px; + font-family: "Roboto", sans-serif; } .title { @@ -19,44 +17,31 @@ color: #2c3e50; } -.button-wrapper { - display: flex; - justify-content: center; -} +button { + font-size: 18px; + padding: 10px 20px; + margin: 10px; + color: white; -.button { border: none; border-radius: 4px; - color: #fff; - font-size: 18px; - font-weight: bold; - margin-right: 10px; - padding: 10px 20px; - text-transform: uppercase; - transition: all 0.2s; cursor: pointer; + text-transform: uppercase; + transition: opacity 0.3s ease-in-out; } -.button--start { - background-color: #27ae60; +button:hover { + opacity: 0.7; } -.button--start:hover { - background-color: #229954; +#start { + background-color: #27ae60; } -.button--stop { +#stop { background-color: #c0392b; } -.button--stop:hover { - background-color: #a93226; -} - -.button--reset { +#reset { background-color: #7f8c8d; } - -.button--reset:hover { - background-color: #6c7a7d; -} From 26176999fd74b2b2ed11231ccf9f4991c7374655 Mon Sep 17 00:00:00 2001 From: Sahandgha Date: Mon, 27 Mar 2023 21:21:39 +0700 Subject: [PATCH 07/14] add 2 new projects --- projects/dice-roll-simulator/dice-roll.js | 50 +++++++++++ projects/dice-roll-simulator/index.html | 18 ++++ projects/dice-roll-simulator/style.css | 71 +++++++++++++++ projects/recipe-book-app/index.html | 23 +++++ projects/recipe-book-app/index.js | 48 ++++++++++ projects/recipe-book-app/style.css | 101 ++++++++++++++++++++++ 6 files changed, 311 insertions(+) create mode 100644 projects/dice-roll-simulator/dice-roll.js create mode 100644 projects/dice-roll-simulator/index.html create mode 100644 projects/dice-roll-simulator/style.css create mode 100644 projects/recipe-book-app/index.html create mode 100644 projects/recipe-book-app/index.js create mode 100644 projects/recipe-book-app/style.css diff --git a/projects/dice-roll-simulator/dice-roll.js b/projects/dice-roll-simulator/dice-roll.js new file mode 100644 index 0000000..6e161a8 --- /dev/null +++ b/projects/dice-roll-simulator/dice-roll.js @@ -0,0 +1,50 @@ +const diceElement = document.getElementById("dice"); +const rollButton = document.getElementById("roll-button"); +const rollHistory = document.getElementById("roll-history"); +let historyList = []; + +function rollDice() { + const rollResult = Math.floor(Math.random() * 6) + 1; + const diceFace = getDiceFace(rollResult); + diceElement.textContent = diceFace; + historyList.push(rollResult); + updateRollHistory(); +} + +function getDiceFace(rollResult) { + switch (rollResult) { + case 1: + return "⚀"; + case 2: + return "⚁"; + case 3: + return "⚂"; + case 4: + return "⚃"; + case 5: + return "⚄"; + case 6: + 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"); + setTimeout(() => { + diceElement.classList.remove("roll-animation"); + rollDice(); + }, 1000); +}); diff --git a/projects/dice-roll-simulator/index.html b/projects/dice-roll-simulator/index.html new file mode 100644 index 0000000..d88b92d --- /dev/null +++ b/projects/dice-roll-simulator/index.html @@ -0,0 +1,18 @@ + + + + Dice Roll Simulator + + + +

Dice Roll Simulator

+
⚀
+ +
    +
  • Roll 1: ⚀
    • +
  • Roll 2: ⚀
    • +
+ + + + diff --git a/projects/dice-roll-simulator/style.css b/projects/dice-roll-simulator/style.css new file mode 100644 index 0000000..841de74 --- /dev/null +++ b/projects/dice-roll-simulator/style.css @@ -0,0 +1,71 @@ +body { + font-family: "Open Sans", sans-serif; + text-align: center; + margin: 0; +} + +h1 { + font-size: 3rem; + margin-top: 2rem; +} + +.dice { + font-size: 7rem; + margin: 5px; + animation-duration: 1s; + animation-fill-mode: forwards; +} + +.roll-animation { + animation-name: roll; +} + +@keyframes roll { + 0% { + transform: rotateY(0deg) rotateX(0deg); + } + 100% { + transform: rotateY(720deg) rotateX(720deg); + } +} + +button { + background-color: #47a5c4; + color: white; + font-size: 1.5rem; + border: none; + padding: 1rem 2rem; + margin: 5px; + border-radius: 1rem; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #2e8baf; +} + +ul { + list-style: none; + padding: 0; + margin: 2rem; + max-width: 600px; + margin: 0 auto; +} + +li { + font-size: 1.5rem; + padding: 0.5rem; + margin: 0.5rem; + background-color: #f2f2f2; + border-radius: 0.5rem; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + display: flex; + justify-content: space-between; + align-items: center; +} + +li span { + font-size: 3rem; + margin-right: 1rem; +} diff --git a/projects/recipe-book-app/index.html b/projects/recipe-book-app/index.html new file mode 100644 index 0000000..6cc0f1d --- /dev/null +++ b/projects/recipe-book-app/index.html @@ -0,0 +1,23 @@ + + + + + Recipe Book + + + + +
+

Recipe Book

+
+ +
+
    +
    + + + + diff --git a/projects/recipe-book-app/index.js b/projects/recipe-book-app/index.js new file mode 100644 index 0000000..7fcf11a --- /dev/null +++ b/projects/recipe-book-app/index.js @@ -0,0 +1,48 @@ +const API_KEY = "275d58779ccf4e22af03e792e8819fff"; + +// Call the API and retrieve a list of recipes +const recipeList = document.getElementById("recipe-list"); + +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); + + recipeList.appendChild(recipeItem); + }); +} + +async function init() { + const recipes = await getRecipes(); + displayRecipes(recipes); +} + +init(); diff --git a/projects/recipe-book-app/style.css b/projects/recipe-book-app/style.css new file mode 100644 index 0000000..d1405d5 --- /dev/null +++ b/projects/recipe-book-app/style.css @@ -0,0 +1,101 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; +} + +header { + background-color: #0c2461; + color: #fff; + padding: 20px; + text-align: center; +} + +h1 { + margin: 0; + font-size: 36px; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +.recipe-list { + list-style: none; + margin: 0; + padding: 0; +} + +.recipe-item { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + border-radius: 5px; + overflow: hidden; +} + +.recipe-item img { + width: 150px; + height: 150px; + object-fit: cover; +} + +.recipe-item h2 { + margin: 0; + font-size: 20px; + min-width: 200px; + padding: 10px; +} + +.recipe-item p { + margin: 0; + padding: 10px; +} + +.recipe-item a { + padding: 10px; + background-color: #0c2461; + color: #fff; + text-align: center; + text-decoration: none; + transition: background-color 0.2s ease-in-out; + min-width: 150px; +} + +.recipe-item a:hover { + background-color: #1e3799; +} + +@media only screen and (max-width: 800px) { + .container { + max-width: 90%; + } + + .recipe-item { + flex-wrap: wrap; + } + + .recipe-item img { + width: 100%; + height: auto; + margin-bottom: 10px; + } + + .recipe-item h2 { + font-size: 20px; + padding: 0; + margin-bottom: 10px; + } + + .recipe-item p { + font-size: 14px; + margin-bottom: 10px; + } + .recipe-item a { + width: 100%; + } +} From 0643a11eb20d0b10e850047edd364cad54b089a4 Mon Sep 17 00:00:00 2001 From: Sahandgha Date: Tue, 28 Mar 2023 13:04:04 +0700 Subject: [PATCH 08/14] add 2 more projects --- projects/age-calculator/index.html | 21 ++++++++++ projects/age-calculator/index.js | 51 +++++++++++++++++++++++ projects/age-calculator/style.css | 67 ++++++++++++++++++++++++++++++ projects/tip-calculator/index.html | 24 +++++++++++ projects/tip-calculator/index.js | 11 +++++ projects/tip-calculator/style.css | 57 +++++++++++++++++++++++++ 6 files changed, 231 insertions(+) create mode 100644 projects/age-calculator/index.html create mode 100644 projects/age-calculator/index.js create mode 100644 projects/age-calculator/style.css create mode 100644 projects/tip-calculator/index.html create mode 100644 projects/tip-calculator/index.js create mode 100644 projects/tip-calculator/style.css diff --git a/projects/age-calculator/index.html b/projects/age-calculator/index.html new file mode 100644 index 0000000..dd793a3 --- /dev/null +++ b/projects/age-calculator/index.html @@ -0,0 +1,21 @@ + + + + + Age Calculator + + + +
    +

    Age Calculator

    +
    + + + +

    +
    +
    + + + + diff --git a/projects/age-calculator/index.js b/projects/age-calculator/index.js new file mode 100644 index 0000000..2d829c4 --- /dev/null +++ b/projects/age-calculator/index.js @@ -0,0 +1,51 @@ +// 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 + +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 + 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`; + } +} + +// Function to calculate the age +function getAge(birthDay) { + // Get the current date + const currentDate = new Date(); + + // Get the birthday date + const birthdayDate = new Date(birthDay); + + // Calculate the age + const 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; +} diff --git a/projects/age-calculator/style.css b/projects/age-calculator/style.css new file mode 100644 index 0000000..88f0382 --- /dev/null +++ b/projects/age-calculator/style.css @@ -0,0 +1,67 @@ +/* General styles */ +body { + margin: 0; + padding: 20px; + font-family: "Montserrat", sans-serif; + font-size: 16px; + line-height: 1.5; + background-color: #f7f7f7; +} + +.container { + 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; +} + +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[type="date"] { + padding: 8px; + border: 1px solid #ccc; + border-radius: 4px; + width: 100%; + max-width: 300px; + box-sizing: border-box; +} + +button { + background-color: #007bff; + color: #fff; + border: none; + padding: 10px 20px; + border-radius: 4px; + margin-top: 10px; + cursor: pointer; + transition: background-color 0.2s ease; +} + +button:hover { + background-color: #0062cc; +} + +#result { + margin-top: 20px; + font-size: 24px; + font-weight: bold; + text-align: center; +} diff --git a/projects/tip-calculator/index.html b/projects/tip-calculator/index.html new file mode 100644 index 0000000..aa0dc58 --- /dev/null +++ b/projects/tip-calculator/index.html @@ -0,0 +1,24 @@ + + + + Tip Calculator + + + +
    +

    Tip Calculator

    +

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

    + + +
    + + +
    + +
    + + +
    + + + diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js new file mode 100644 index 0000000..515b4de --- /dev/null +++ b/projects/tip-calculator/index.js @@ -0,0 +1,11 @@ +const calculateBtn = 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)}`; +}); diff --git a/projects/tip-calculator/style.css b/projects/tip-calculator/style.css new file mode 100644 index 0000000..9db5f26 --- /dev/null +++ b/projects/tip-calculator/style.css @@ -0,0 +1,57 @@ +/* Set body styles */ +* { + box-sizing: border-box; +} + +body { + background-color: #f2f2f2; + font-family: "Helvetica Neue", sans-serif; +} + +/* Set container styles */ +.container { + margin: 100px auto; + max-width: 600px; + 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"] { + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + margin: 10px 0; + 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%; +} + +button:hover { + background-color: #45a049; +} + +/* Set result styles */ +#total { + font-size: 24px; + font-weight: bold; + margin-top: 10px; +} From 6d61e9ce23b3ee95d4cc2b9d3233836d786fc558 Mon Sep 17 00:00:00 2001 From: Sahandgha Date: Wed, 29 Mar 2023 13:19:23 +0700 Subject: [PATCH 09/14] update roll dice simulator --- projects/dice-roll-simulator/index.html | 14 ++--- .../{dice-roll.js => index.js} | 51 ++++++++++--------- projects/dice-roll-simulator/style.css | 7 ++- 3 files changed, 38 insertions(+), 34 deletions(-) rename projects/dice-roll-simulator/{dice-roll.js => index.js} (54%) 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

    -
    ⚀
    +
    ⚄
      -
    • Roll 1: ⚀
      • -
    • Roll 2: ⚀
      • +
    - - + 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 { From 0894ef2fb7758346a77213cb3033e65f80347b76 Mon Sep 17 00:00:00 2001 From: Sahandgha Date: Thu, 30 Mar 2023 11:04:46 +0700 Subject: [PATCH 10/14] update recipe book app --- projects/recipe-book-app/index.html | 43 +++++++++++++++++++++++++---- 1 file changed, 38 insertions(+), 5 deletions(-) diff --git a/projects/recipe-book-app/index.html b/projects/recipe-book-app/index.html index 6cc0f1d..81489f7 100644 --- a/projects/recipe-book-app/index.html +++ b/projects/recipe-book-app/index.html @@ -3,10 +3,6 @@ Recipe Book - @@ -15,7 +11,44 @@

    Recipe Book

    -
      +
        +
      • + Recipe 1 +

        Recipe 1

        +

        + Ingredients: Ingredient 1, Ingredient 2, Ingredient + 3 +

        + View Recipe +
        • +
      • + Recipe 2 +

        Recipe 2

        +

        + Ingredients: Ingredient 4, Ingredient 5, Ingredient + 6 +

        + View Recipe +
        • +
      • + Recipe 3 +

        Recipe 3

        +

        + Ingredients: Ingredient 7, Ingredient 8, Ingredient + 9 +

        + View Recipe +
        • +
      From cde2cb9634615d9cce876a6733a7038b72888913 Mon Sep 17 00:00:00 2001 From: Sahandgha Date: Tue, 11 Apr 2023 21:30:22 +0700 Subject: [PATCH 11/14] 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 12/14] 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 13/14] 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 14/14] 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