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 websiteYour age is 21 years old
+25:00
+ +Choose your move:
+ + ++ 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 new file mode 100644 index 0000000..4944f3e --- /dev/null +++ b/projects/rock-paper-scissors-game/index.js @@ -0,0 +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", () => { + const result = playRound(button.id, computerPlay()); + resultEl.textContent = result; + + }); +}); + +function computerPlay() { + const choices = ["rock", "paper", "scissors"]; + const randomChoice = Math.floor(Math.random() * choices.length); + return choices[randomChoice]; +} + +function playRound(playerSelection, computerSelection) { + if (playerSelection === computerSelection) { + return "It's a tie!"; + } else if ( + (playerSelection === "rock" && computerSelection === "scissors") || + (playerSelection === "paper" && computerSelection === "rock") || + (playerSelection === "scissors" && computerSelection === "paper") + ) { + playerScore++; + playerScoreEl.textContent = playerScore; + return "You win! " + playerSelection + " beats " + computerSelection; + } else { + computerScore++; + computerScoreEl.textContent = computerScore; + return "You lose! " + computerSelection + " beats " + playerSelection; + } +} diff --git a/projects/rock-paper-scissors-game/style.css b/projects/rock-paper-scissors-game/style.css new file mode 100644 index 0000000..940eff4 --- /dev/null +++ b/projects/rock-paper-scissors-game/style.css @@ -0,0 +1,58 @@ +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.5rem; + font-weight: 600; + text-align: center; + margin-bottom: 0.5rem; +} + +.buttons { + display: flex; + justify-content: center; +} + +button { + border: none; + font-size: 3rem; + margin: 0 0.5rem; + padding: 0.5rem; + cursor: pointer; + border-radius: 5px; + transition: all 0.3s ease-in-out; +} + +button:hover { + opacity: 0.7; +} + +#rock { + background-color: #ff0000; +} + +#paper { + background-color: #2196f3; +} + +#scissors { + background-color: #4caf50; +} + +#user-score { + color: #2196f3; +} + +#computer-score { + color: #ff0000; +} 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 @@ + + + + + + +Enter the bill amount and tip percentage to calculate the total.
+ + +