HTML CSS JS projects (Beginner): 16 projects using HTML CSS and JavaScript

Check the projects live demo and source codes here:
https://www.100jsprojects.com

My heart is stuck on the center of the screen and it does follow my mouse I've check your github code every single line is the same I don't know how to solve this. Please help

FINISHEDDDDDDDDDDDDDDDDDD ALL …THANK YOU sir <3 ….we want more bigger projects .

Amazing. Thank you!

I would like to ask why the seconds won't update? I try everything copy the whole code but it wont work.

t says sound crash 404 not found …. what to do …???? it is loaded on my container after every button but when i triggered a click event it didnt play ..it told Failed to load resource: the server responded with a status of 404 (Not Found)…help me out javascript king

I am using visual studio code for this digital clock. I believe all my code is correct, but the clock is not "running"….

I really love that you explain everything step by step, slowly and in detail, unlike other youtubers who explain quite fast, making it hard to understand
Thank you very much

It was quite amazing 😊

I got to see you literally liked and replied to 1107 members with hell lot of patience. Thankyou for the video I am currently doing all the projects with hashtag of #16daysprojectchallenge.

Thanks more , I need to developer a desktop app (not web) in order to integrate it with odoo erp, cam I use these 3 (js , html ,css)

U ARE THE BEST!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Thank you… Hi from Armenia…

just started and I love it! Thank you so much to put the work in making these projects! how do you set the work place in a way that your Dev Tools stay inside of VS code and not open a new window?

is Digital clock is working for everyone?

I cant find live preview option in my vs code at 1:41:30

You dabest sir

U r the best❤

Sir, you are great! Thank you

Your tutorial are amazing ! Thank you so much for your efforts ! God bless you 🙂

Very good job done by you sir 👏

Tell me sir please, how can u link vs studio with browser, and should I be online for that?

Perfect! i will never become a Cyber Security worker, but… i learn something, right? :3

Hi. In the making of the digital clock, the code do not work in changing am/pm. it's just stuck to "AM".

Thank you so much for your hardwork it really helps a lot

Great Tutorials : heads up @38:27 it did not work for AM/PM with the code you've used ampmEl, (innerText = ampm);❌
though it did work for me simply usinig the dot. instead comma and removing the brackets
Should be: ampmEl.innerText = ampm;👈

Hi,
Thanks for this helpful video.

const container = document.querySelector(".container");

const kits = ["Snare", "Kick", "Crash", "Tom"];

kits.forEach((kit) => {

const btn = document.createElement("button");

btn.classList.add("btn");

btn.innerText = kit;

btn.style.backgroundImage = "url(imgs/" + kit + ".png.jpg)";

container.appendChild(btn);

const audio = document.createElement("audio");

audio.src = "sounds/" + kit + ".mp3";

container.appendChild(audio);

btn.addEventListener("click", (e) => {

audio.play();

});

window.addEventListener("keydown", (event) => {

if (event.key === kit.slice(0,1)) {

audio.play();

btn.style.transform = "scale(.9)";

setTimeout(() => {

btn.style.transform = "scale(1)";

}, 100);

}

});

});

Why my cod's window.addEventListener part doesn't work?

Sir at 1: 19 in project 2

It's not happening in my computer..

questionE1.innertext = ' '
Up to here. Perfect.

After that

' What is the ${num1} multiply by ${num2} also showing exactly in the webpage numbers are not getting?

How can I contact you?

Insta or any messenger I'd

To talk with you.

Thank you.

Can anyone give the link for his video of javascript weather app

Sir, could you please upload the backend projects? Or end to end project(full stack)
If possible.

Thank you… Very much….

I am learning easily with your videos.

it's fine,but if u don't know basic html,ccs and javaScript u will be crushed

I tried and did the drum Kit project on my own and used KeyCodes and Timeouts to change the background size and activate the sounds, but your method is way more efficent. Thanks again.

Can we add these projects to our resume ?

So nice off you that's amazing Thank you for your best

Can you do a video on the roadmap to become a frontend developer, all the skills and concepts you must know to land a job. At the same time I'm wondering what level of projects should be on your resume. I hope you provide me the guidance I seek. Btw great video, I learning javascript and to put all the theory in use is real fun for me. Definitely recommending this to my friends who are struggling to get a grip on Js

What is wrong with my code

const num1 = Math.ceil(Math.random() *10);

const num2 = Math.ceil(Math.random() *10);

const questionEL = document.getElementById("question");

const inputEL = document.getElementById("input");

const formEL = document.getElementById("form");

const scoreEl = document.getElementById ("score");

scoreEl.innerHTML = `score: ${score}`

let score = JSON.parse(localStorage.getItem("score"));

if (!score) {

score = 0;

}

questionEL.innerText = `What is ${num1} multiply by ${num2}?`;

const correctAns = num1 * num2;

formEL.addEventListener("sumbit",() => {

const UserANs = +inputEL.value;

if (UserANs === correctAns) {

score ++;

updateLocalStorage()

} else {

score –;

updateLocalStorage()

}

});

function updateLocalStorage(){

localStorage.setItem("score", JSON.stringify("score"));

}

Finally today i completed all 16 project
Thanks sir

Thanks for providing knowledge about these projects along with detailed explanation sir!!

Thanks for providing knowledge about these projects along with detailed explanation sir!!

Test browser – to check right to left is correct but i am trying top to bottom on that time My "AM" Word is moving.
So solve above.

Sir, for the 2nd project. The variable 'score' in localStorage will not reset to ZERO when I refresh the page or close and reopen the page. Should this have some fix to reset the score value when the user refreshes the page?

I was Learning about React but a realize that my knowledge about the basics wasn't enough and now i know this for sure kkkkk. I'm learning a lot with this projects!!!! Thanks!!!!!!

when i do $(num1) and 2 in the file js it shows $(num1) not the actual random number . what can i do in this case ?

Wow I recently purchased a course and I must say after 30 min watching your project I understand a whole lot more. I hope you have advanced teaching

I m totally beginner and I learned a lot from this extensive video Thanks JavaScript king

Pls I need your help. I have followed all the steps you did on building digital clock and multiplication App. The HTML and CSS part of mine works perfectly. But my JS don’t work in both projects. Please I need help on what to do it’s actually frustrating me. I don’t know if it’s system fault why my JS code doesn’t work. My computer is MacBook pro14.
Please I will appreciate if you help me on what to do.
Thanks.