fzcj-pl · Mar 2, 2023 · Mar 4, 2023 · Mar 4, 2023 · Mar 6, 2023 · Mar 7, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
-# HTML-CSS-JavaScript-projects-for-beginners
-
-This is the source code of the YouTube video (10 projects) https://www.youtube.com/watch?v=ePzOFu2xXUQ.
-
-Part 2 (16 projects) : https://youtu.be/EWv2jnhZErc
-
-NEW HTML CSS JavaScript Projects    Interesting HTML CSS JavaScript projects    Learn HTML, CSS, and JavaScript 2021 to create modern websites.    Fun learning HTML, CSS, and JavaScript!    
-
-I'm Sahand, a web developer in computer science.   I've been doing this for over a decade.    This course was created to share my knowledge and experience with you.    Build simple websites using HTML, CSS, and JavaScript.    Responsive web design employs HTML, CSS, and JavaScript.   This is a skill you'll learn in this course.    This new course teaches students how to install Visual Studio Code and its extensions.    Then we start from scratch with each project.    After finishing HTML, it's on to CSS and JavaScript.    Building in HTML, CSS, or JavaScript is fine.    This guide explains HTML, CSS, and JavaScript syntax.    
-
-Every project is started from scratch and finished without using copied code.    Then they are used on the project to ensure everyone understands.    This program's exciting project-based curriculum includes building modern, super cool, and responsive websites!    Let's get started learning HTML, CSS, and JavaScript.    
-
-Contact me if you have any questions through my twitter: @codewithsahand. 
+# <a href="https://100jsprojects.com" style="background-color: #1a73e8; color: white; font-weight: bold; padding: 10px 20px; border-radius: 5px; text-decoration: none;">HTML CSS JavaScript Projects</a>
+
+This is the source code of the website: <a href="https://100jsprojects.com" style="background-color: #1a73e8; color: white; font-weight: bold; padding: 10px 20px; border-radius: 5px; text-decoration: none;">100 HTML CSS JavaScript Projects</a>
+<div>
+  Visit <a href="https://100jsprojects.com">100jsprojects.com</a> to preview the projects.
+
+  </div>
+<div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+  <h1 style="font-size: 2rem; font-weight: bold; margin-bottom: 10px;">About</h1>
+  <p style="font-size: 1.1rem; line-height: 1.5; margin-bottom: 20px;">Hi there! I'm Sahand, a web developer with over a decade of experience. This course, "<a href="https://100jsprojects.com" style="background-color: #1a73e8; color: white; font-weight: bold; padding: 10px 20px; border-radius: 5px; text-decoration: none;">HTML CSS JavaScript Projects</a>," 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.</p>
+  <p style="font-size: 1.1rem; line-height: 1.5; margin-bottom: 20px;">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.</p>
+  <p style="font-size: 1.1rem; line-height: 1.5; margin-bottom: 20px;">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!</p>
+  <p style="font-size: 1.1rem; line-height: 1.5; margin-bottom: 20px;">If you have any questions, please feel free to contact me through my email: codewithsahand@gmail.com </p>
+  <a href="https://100jsprojects.com"  style="background-color: #1a73e8; color: white; font-weight: bold; padding: 10px 20px; border-radius: 5px; text-decoration: none;">Visit my website</a>
+</div>
diff --git a/projects/Navbar-project/index.html b/projects/Navbar-project/index.html
diff --git a/projects/age-calculator/index.html b/projects/age-calculator/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Age Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Age Calculator</h1>
+        <div class="form">
+            <label for="birthday">Enter you date of birth</label>
+            <input type="date" id="birthday" name="birthday">
+            <button id="btn">Calculate Age</button>
+            <p id="result">Your age is 21 years old</p>
+        </div>
+    </div>
+
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/projects/age-calculator/index.js 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
@@ -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/...ground-video-project/background-video.mp4 → ...cts/background-video/background-video.mp4 b/...ground-video-project/background-video.mp4 → ...cts/background-video/background-video.mp4
diff --git a/projects/background-video-project/index.html → projects/background-video/index.html b/projects/background-video-project/index.html → projects/background-video/index.html
diff --git a/projects/background-video-project/index.js → projects/background-video/index.js b/projects/background-video-project/index.js → projects/background-video/index.js
diff --git a/...ts/background-video-project/preloader.gif → projects/background-video/preloader.gif b/...ts/background-video-project/preloader.gif → projects/background-video/preloader.gif
diff --git a/projects/background-video-project/styles.css → projects/background-video/styles.css b/projects/background-video-project/styles.css → projects/background-video/styles.css
diff --git a/projects/basic-calculator/index.html b/projects/basic-calculator/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Basic Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="calculator">
+        <input type="text" id="result" readonly>
+        <div class="buttons">
+            <button class="clear">C</button>
+            <button class="operator">/</button>
+            <button class="operator">*</button>
+            <button class="operator">-</button>
+            <button class="number">7</button>
+            <button class="number">8</button>
+            <button class="number">9</button>
+            <button class="operator">+</button>
+            <button class="number">4</button>
+            <button class="number">5</button>
+            <button class="number">6</button>
+            <button class="equals">=</button>
+            <button class="number">1</button>
+            <button class="number">2</button>
+            <button class="number">3</button>
+            <button class="number">0</button>
+            <button class="decimal">.</button>
+        </div>
+    </div>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/projects/basic-calculator/index.js b/projects/basic-calculator/index.js
@@ -0,0 +1,29 @@
+const buttonsEl = document.querySelectorAll("button");
+
+const inputFieldEl = document.getElementById("result");
+
+for (let i = 0; i < buttonsEl.length; i++) {
+  buttonsEl[i].addEventListener("click", () => {
+    const buttonValue = buttonsEl[i].textContent;
+    if (buttonValue === "C") {
+      clearResult();
+    } else if (buttonValue === "=") {
+      calculateResult();
+    } else {
+      appendValue(buttonValue);
+    }
+  });
+}
+
+function clearResult() {
+  inputFieldEl.value = "";
+}
+
+function calculateResult() {
+  inputFieldEl.value = eval(inputFieldEl.value);
+}
+
+function appendValue(buttonValue) {
+  inputFieldEl.value += buttonValue;
+  //   inputFieldEl.value = inputFieldEl.value + buttonValue;
+}
diff --git a/projects/basic-calculator/style.css b/projects/basic-calculator/style.css
@@ -0,0 +1,68 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.calculator {
+  background-color: #f2f2f2;
+  padding: 20px;
+  max-width: 400px;
+  margin: 0 auto;
+  border: solid 1px #ccc;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  margin-top: 40px;
+}
+
+#result{
+    width: 100%;
+    padding: 10px;
+    font-size: 24px;
+    border: none;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) inset;
+    border-radius: 5px;
+}
+
+.buttons{
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 10px;
+    margin-top: 20px;
+}
+
+button{
+    padding: 10px;
+    font-size: 24px;
+    border: none;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+}
+
+button:hover{
+    background-color: #ddd;
+}
+
+.clear{
+    background-color: #ff4136;
+    color: #fff;
+}
+
+.number, .decimal{
+    background-color: #fff;
+    color: #333;
+
+}
+
+.operator{
+    background-color: #0074d9;
+    color: #fff;
+}
+
+.equals{
+    background-color: #01ff70;
+    grid-row: span 3;
+    color: #fff;
+}
diff --git a/projects/dad-jokes-generator/index.js b/projects/dad-jokes-generator/index.js
@@ -33,3 +33,4 @@ async function getJoke() {
 }
 
 btnEl.addEventListener("click", getJoke);
+
diff --git a/projects/dice-roll-simulator/index.html b/projects/dice-roll-simulator/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dice Roll Simulator</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1>Dice Roll Simulator</h1>
+    <div class="dice" id="dice">&#9860;</div>
+    <button id="roll-button">Roll Dice</button>
+    <ul id="roll-history">
+      <!-- <li>Roll 1: <span>&#9856;</span></li>
+      <li>Roll 2: <span>&#9860;</span></li> -->
+    </ul>
+    <script src="index.js"></script>
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -33,3 +33,4 @@ async function getJoke() {
		}

		btnEl.addEventListener("click", getJoke);