Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: k-ashokkumar/HTML-CSS-JavaScript-projects-for-beginners
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: main
Choose a base ref
...
head repository: sahandghavidel/HTML-CSS-JavaScript-projects-for-beginners
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref

Commits on Oct 27, 2022

  1. Copy the full SHA
    6fa003e View commit details

Commits on Oct 30, 2022

  1. Copy the full SHA
    17eeae6 View commit details

Commits on Nov 11, 2022

  1. add 12 new projects

    sahandghavidel committed Nov 11, 2022
    Copy the full SHA
    8788085 View commit details

Commits on Nov 20, 2022

  1. Copy the full SHA
    ea47391 View commit details

Commits on Nov 28, 2022

  1. Copy the full SHA
    c6c243a View commit details
  2. Copy the full SHA
    266dca8 View commit details

Commits on Nov 29, 2022

  1. Copy the full SHA
    8f870b7 View commit details

Commits on Nov 30, 2022

  1. Copy the full SHA
    55ae029 View commit details

Commits on Dec 4, 2022

  1. Copy the full SHA
    8a5ba99 View commit details

Commits on Dec 11, 2022

  1. Copy the full SHA
    47a76ff View commit details
  2. Copy the full SHA
    d543507 View commit details
  3. Copy the full SHA
    1818598 View commit details

Commits on Dec 12, 2022

  1. Copy the full SHA
    4502cce View commit details
  2. Copy the full SHA
    63e176d View commit details

Commits on Dec 13, 2022

  1. Copy the full SHA
    7c5b973 View commit details

Commits on Dec 15, 2022

  1. Copy the full SHA
    0ffab49 View commit details

Commits on Dec 16, 2022

  1. update 2 projects

    sahandghavidel committed Dec 16, 2022
    Copy the full SHA
    3a4a17e View commit details

Commits on Dec 17, 2022

  1. Copy the full SHA
    e7e3b9a View commit details

Commits on Dec 18, 2022

  1. Copy the full SHA
    ea83e76 View commit details
  2. Copy the full SHA
    4389873 View commit details

Commits on Dec 19, 2022

  1. update bmi project

    sahandghavidel committed Dec 19, 2022
    Copy the full SHA
    772b540 View commit details

Commits on Dec 21, 2022

  1. update 2 projects

    sahandghavidel committed Dec 21, 2022
    Copy the full SHA
    f7ab3df View commit details
  2. Copy the full SHA
    255472a View commit details
  3. Copy the full SHA
    8017149 View commit details
  4. Copy the full SHA
    45ef139 View commit details

Commits on Dec 22, 2022

  1. Copy the full SHA
    8461294 View commit details

Commits on Dec 23, 2022

  1. Copy the full SHA
    8811dbc View commit details

Commits on Dec 24, 2022

  1. Copy the full SHA
    420c6ab View commit details

Commits on Dec 26, 2022

  1. Copy the full SHA
    b316036 View commit details
  2. Copy the full SHA
    8371c43 View commit details
  3. Copy the full SHA
    65b1889 View commit details

Commits on Mar 2, 2023

  1. add weather app

    sahandghavidel committed Mar 2, 2023
    Copy the full SHA
    6064fbc View commit details

Commits on Mar 4, 2023

  1. update weather app

    sahandghavidel committed Mar 4, 2023
    Copy the full SHA
    d51b3e3 View commit details
  2. add new projects

    sahandghavidel committed Mar 4, 2023
    Copy the full SHA
    99e37f2 View commit details

Commits on Mar 6, 2023

  1. Copy the full SHA
    d464c78 View commit details

Commits on Mar 7, 2023

  1. Copy the full SHA
    55fd9ba View commit details

Commits on Mar 10, 2023

  1. Update README.md

    sahandghavidel authored Mar 10, 2023
    Copy the full SHA
    d3c6e3c View commit details

Commits on Mar 16, 2023

  1. update and clean files

    sahandghavidel committed Mar 16, 2023
    Copy the full SHA
    ce561ee View commit details
  2. Copy the full SHA
    ad2a96d View commit details
  3. clean files 2

    sahandghavidel committed Mar 16, 2023
    Copy the full SHA
    e62d161 View commit details
  4. update folder name

    sahandghavidel committed Mar 16, 2023
    Copy the full SHA
    f04e0e3 View commit details

Commits on Mar 22, 2023

  1. Copy the full SHA
    61d4cf2 View commit details

Commits on Mar 23, 2023

  1. Copy the full SHA
    3ff1ee9 View commit details
  2. Copy the full SHA
    051f5a5 View commit details

Commits on Mar 24, 2023

  1. Copy the full SHA
    0c0e315 View commit details

Commits on Mar 25, 2023

  1. Copy the full SHA
    07a1687 View commit details

Commits on Mar 26, 2023

  1. Copy the full SHA
    dfb834e View commit details

Commits on Mar 27, 2023

  1. add 2 new projects

    sahandghavidel committed Mar 27, 2023
    Copy the full SHA
    2617699 View commit details

Commits on Mar 28, 2023

  1. add 2 more projects

    sahandghavidel committed Mar 28, 2023
    Copy the full SHA
    0643a11 View commit details

Commits on Mar 29, 2023

  1. Copy the full SHA
    6d61e9c View commit details
Showing with 3,228 additions and 50 deletions.
  1. +15 −13 README.md
  2. +0 −34 projects/Navbar-project/index.html
  3. +23 −0 projects/age-calculator/index.html
  4. +31 −0 projects/age-calculator/index.js
  5. +63 −0 projects/age-calculator/style.css
  6. +21 −0 projects/amine-pics-generator/index.html
  7. +25 −0 projects/amine-pics-generator/index.js
  8. +6 −0 projects/amine-pics-generator/spinner.svg
  9. +56 −0 projects/amine-pics-generator/style.css
  10. BIN projects/{background-video-project → background-video}/background-video.mp4
  11. 0 projects/{background-video-project → background-video}/index.html
  12. 0 projects/{background-video-project → background-video}/index.js
  13. BIN projects/{background-video-project → background-video}/preloader.gif
  14. 0 projects/{background-video-project → background-video}/styles.css
  15. +35 −0 projects/basic-calculator/index.html
  16. +29 −0 projects/basic-calculator/index.js
  17. +68 −0 projects/basic-calculator/style.css
  18. +23 −0 projects/bmi-calculator/index.html
  19. +24 −0 projects/bmi-calculator/index.js
  20. +52 −0 projects/bmi-calculator/style.css
  21. +41 −0 projects/currency-converter/index.html
  22. +33 −0 projects/currency-converter/index.js
  23. +47 −0 projects/currency-converter/style.css
  24. +18 −0 projects/dad-jokes-generator/index.html
  25. +36 −0 projects/dad-jokes-generator/index.js
  26. +52 −0 projects/dad-jokes-generator/style.css
  27. +20 −0 projects/dice-roll-simulator/index.html
  28. +53 −0 projects/dice-roll-simulator/index.js
  29. +70 −0 projects/dice-roll-simulator/style.css
  30. +1 −1 projects/double-landing-page/style.css
  31. +23 −0 projects/english-dictionary/index.html
  32. +40 −0 projects/english-dictionary/index.js
  33. +40 −0 projects/english-dictionary/style.css
  34. +31 −0 projects/feedback-ui/index.html
  35. +34 −0 projects/feedback-ui/index.js
  36. +70 −0 projects/feedback-ui/style.css
  37. +57 −0 projects/image-search-app/index.html
  38. +54 −0 projects/image-search-app/index.js
  39. +125 −0 projects/image-search-app/style.css
  40. +27 −0 projects/loan-calculator/index.html
  41. +15 −0 projects/loan-calculator/index.js
  42. +27 −0 projects/loan-calculator/style.css
  43. +34 −0 projects/music-player/index.html
  44. BIN projects/music-player/pause.png
  45. BIN projects/music-player/play.png
  46. +90 −0 projects/music-player/script.js
  47. BIN projects/music-player/songs/song1.m4a
  48. BIN projects/music-player/songs/song2.m4a
  49. BIN projects/music-player/songs/song3.m4a
  50. +90 −0 projects/music-player/style.css
  51. +38 −0 projects/navbar/index.html
  52. 0 projects/{Navbar-project → navbar}/index.js
  53. 0 projects/{Navbar-project → navbar}/logo.svg
  54. 0 projects/{Navbar-project → navbar}/styles.css
  55. +1 −1 projects/new-year-countdown/index.html
  56. +1 −1 projects/new-year-countdown/index.js
  57. +25 −0 projects/note-app/index.html
  58. +64 −0 projects/note-app/index.js
  59. +68 −0 projects/note-app/style.css
  60. +33 −0 projects/photo-gallery/index.html
  61. +48 −0 projects/photo-gallery/index.js
  62. +6 −0 projects/photo-gallery/spinner.svg
  63. +75 −0 projects/photo-gallery/styles.css
  64. +22 −0 projects/pomodoro-timer/index.html
  65. +42 −0 projects/pomodoro-timer/index.js
  66. +47 −0 projects/pomodoro-timer/style.css
  67. 0 projects/{Q&A-section → q-and-a-section}/app.js
  68. 0 projects/{Q&A-section → q-and-a-section}/index.html
  69. 0 projects/{Q&A-section → q-and-a-section}/styles.css
  70. +18 −0 projects/random-emoji/index.html
  71. +27 −0 projects/random-emoji/index.js
  72. +41 −0 projects/random-emoji/style.css
  73. +25 −0 projects/random-quote-generator/index.html
  74. +33 −0 projects/random-quote-generator/index.js
  75. +54 −0 projects/random-quote-generator/style.css
  76. +57 −0 projects/recipe-book-app/index.html
  77. +50 −0 projects/recipe-book-app/index.js
  78. +104 −0 projects/recipe-book-app/style.css
  79. +25 −0 projects/rock-paper-scissors-game/index.html
  80. +42 −0 projects/rock-paper-scissors-game/index.js
  81. +58 −0 projects/rock-paper-scissors-game/style.css
  82. 0 projects/{Sidebar-project → sidebar}/index.html
  83. 0 projects/{Sidebar-project → sidebar}/index.js
  84. 0 projects/{Sidebar-project → sidebar}/logo.svg
  85. 0 projects/{Sidebar-project → sidebar}/styles.css
  86. +20 −0 projects/stopwatch/index.html
  87. +54 −0 projects/stopwatch/index.js
  88. +61 −0 projects/stopwatch/style.css
  89. +49 −0 projects/temperature-converter/index.html
  90. +24 −0 projects/temperature-converter/index.js
  91. +51 −0 projects/temperature-converter/style.css
  92. +28 −0 projects/tip-calculator/index.html
  93. +13 −0 projects/tip-calculator/index.js
  94. +53 −0 projects/tip-calculator/style.css
  95. +32 −0 projects/weather-app/index.html
  96. +58 −0 projects/weather-app/index.js
  97. +94 −0 projects/weather-app/style.css
  98. +22 −0 projects/weight-converter/index.html
  99. +24 −0 projects/weight-converter/index.js
  100. +42 −0 projects/weight-converter/style.css
28 changes: 15 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -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>
34 changes: 0 additions & 34 deletions projects/Navbar-project/index.html

This file was deleted.

23 changes: 23 additions & 0 deletions projects/age-calculator/index.html
Original file line number Diff line number Diff line change
@@ -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>
31 changes: 31 additions & 0 deletions projects/age-calculator/index.js
Original file line number Diff line number Diff line change
@@ -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);
63 changes: 63 additions & 0 deletions projects/age-calculator/style.css
Original file line number Diff line number Diff line change
@@ -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;
}
21 changes: 21 additions & 0 deletions projects/amine-pics-generator/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!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>Anime Pics Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h3>Anime Pics Generator</h1>
<button class="btn" id="btn">Get Anime</button>
<div class="anime-container">
<img class="anime-img" src="https://c.files.bbci.co.uk/F382/production/_123883326_852a3a31-69d7-4849-81c7-8087bf630251.jpg">
<h3 class="anime-name">Anime Name</h3>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
25 changes: 25 additions & 0 deletions projects/amine-pics-generator/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
const btnEl = document.getElementById("btn");
const animeContainerEl = document.querySelector(".anime-container");
const animeImgEl = document.querySelector(".anime-img");
const amineNameEl = document.querySelector(".anime-name");

btnEl.addEventListener("click", async function () {
try {
btnEl.disabled = true;
btnEl.innerText = "Loading...";
amineNameEl.innerText = "Updating...";
animeImgEl.src = "spinner.svg";
const response = await fetch("https://api.catboys.com/img");
const data = await response.json();
btnEl.disabled = false;
btnEl.innerText = "Get Anime";
animeContainerEl.style.display = "block";
animeImgEl.src = data.url;
amineNameEl.innerText = data.artist;
} catch (error) {
console.log(error);
btnEl.disabled = false;
btnEl.innerText = "Get Anime";
amineNameEl.innerText = "An error happened, please try again";
}
});
6 changes: 6 additions & 0 deletions projects/amine-pics-generator/spinner.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 56 additions & 0 deletions projects/amine-pics-generator/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
body{
margin: 0;
background: linear-gradient(to right, lightblue, yellow);
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
font-family: 'Courier New', Courier, monospace;
}

.container{
background: aliceblue;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
text-align: center;
padding: 10px;
width: 450px;
margin: 5px;
}

.btn{
background-color: green;
color: aliceblue;
padding: 10px 30px;
font-size: 16px;
margin-bottom: 30px;
border-radius: 6px;
cursor: pointer;

}

.btn:disabled{
background-color: gray;
cursor: not-allowed;
}

.anime-img{
height: 300px;
width: 300px;
border-radius: 50%;
border: 3px solid green;
}

.anime-name{
margin: 20px;
background-color: green;
color: aliceblue;
padding: 10px;
border-radius: 6px;
font-size: 17px;
font-weight: 600;
}

.anime-container{
display: none;
}
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes.
35 changes: 35 additions & 0 deletions projects/basic-calculator/index.html
Original file line number Diff line number Diff line change
@@ -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>
29 changes: 29 additions & 0 deletions projects/basic-calculator/index.js
Original file line number Diff line number Diff line change
@@ -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;
}
Loading