I improved a little on step-progress-bar. I added both elements to each step, then in css: .step .fa-check { display: none; } .step.checked .fa-check { display: inline-block; } .step.checked .fa-times { display: none; } then in js: if (i < currentChecked) { setTimeout(() => { step.classList.add('checked') }, 420);
I'm honor to have u as my mentor. Thank u so much, for all the HTML, CSS & JS videos u taught. I follow ur playlist thoroughly though the projects r small but they contain alot of new learning. Looking forward to learn more new things from u, Sir. 👍🏻🇮🇳
Indeed Javascript King - I just stumbled on your channel after spending tons and tons of hours and days struggling to understand how to manipulate the DOM and some CSS eg flexbox. You explain concepts in a very engaging and simple manner far much better than my so called proff:( thank you so much 🧡🧡.newbie and subscribed. If possible try add a little bit of intermediate JS please 😊
Hi! I just came across your video and within just 10 minutes into it, I pressed the like and subscribed to your channel, because I found it very informative, precise and well explained step by step. Imma watch it tonight after my shift. Thanks mate!
Thanks for this project, it def helped me understand the “foreach” loop. It wasn’t sinking in at first until I started typing it out as I followed along. That method def helped me understand how everything was working a lot better. Your a good teacher, keep it up 👍
This is just the best video anyone can find on UA-cam, you're so good. You deserve the UA-cam handle name "Javascript King 🤴 ". I just started my journey into Javascript. Thanks you. 😊
In TO-DO-LIST if you run the program for the first time you will face an error says ( can't read properties of null 'foreach') that's because in the first time the list is empty and can't do foreach. To solve that but it In if statement to check if it has a value If (list){ List.forEach(task=>{ toDoList(task);}) }
Wooh Bro, your'e such a good teacher, you can't imagine how much I look up to you, I want to be a good developer like you...please tell me how you got this good so that I can work on the same?
i just completed your this project video mate,it was amazing now i am going to watch your 15 projects video,but i just didnt understand in last: progressEl.style.width = ((checkedNumber.length - 1) / (stepsEl.length - 1)) * 100 + "%"; why you added -1 & what "%" indicate mate,can you please explain me this breifly in comment,it will helped me.. thanks god bless you :)
Hello. great tutorial. i have a question about an issue i got in the 'rotating-image-gallery' project. i get this error in the console: "Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute". everything work fine, the imgs do upload as they should, but this red error is annoying. should i just ignore it?
Sir.. I ma on rodemap of blockchain devloper..... Can this small small project improve my skill for.. Smart contract logic.. And i just completed java script can i go for. React js or.. First do some java script project
@@codewithkaran8860 nice mate, I am happy to see you enjoyed the videos. I am adding more projects to the channel soon. Let me know if you have any questions 😉
thanks for this beautiful and amazing video lecture. I have a doubt, what are we doing in the rotate image gallery part that cause it restricted to show only 8 images only in the round? why cant we add or see new images to the gallery.. I try to add new span tag for adding new image, but it wont show the image in round gallery
@@JavaScriptKing I tried but can't figure it out, I have played with almost every value. I successfully tried to change the degree and time of movement of image everytime I upload a new image, but it is not showing up on the gallery , but is initialised properly in the html page
@@simarpreetsingh019 That's how you're gonna learn coding not by just copy pasting like most of people here. It gives them an illusion of learning. That's it.
sir, i have a little knowledge about HTML,CSS and JS but interested for learning. Only doing this project based learning can I expert of front-end developer.
building projects is the best way to learn coding. Just start with small projects and then start working on the bigger projects like an e-commerce or social media websites
Sir, To-DO-List project is working in vs code but after pushing the code to GitHub, it's not working(task not adding). Any suggestions to fix this problem?
Check the projects live demo and source codes here:
www.100jsprojects.com
You can't imagine how much you helped me. This was just incredibly done. People can even include these projects under their resume. Awesome. Keep up!
thanks mate, appreciate it. I am happy that you found my video helpful ☺️. I am adding more projects to the channel.
@@JavaScriptKing please also start python on your channel im having so much confusion on learning python and your teaching is superb level
0:00 Introduction and Projects review
4:03 Project 1 - Emoji Rating
54:24 Project 2 - Profile Statistics
1:42:00 Project 3 - Rotating Image Gallery
2:24:36 Project 4 - New Year Countdown
3:10:47 Project 5 - Random Password Generator
4:13:33 Project 6 - Animated Search Bar
4:54:43 Project 7 - Social Media Select Menu
5:43:03 Project 8 - Double Landing Page
6:21:56 Project 9 - To Do List
7:28:27 Project 10 - Step Progress Bar
Js ,difficult for me understand
I improved a little on step-progress-bar. I added both elements to each step, then in css:
.step .fa-check {
display: none;
}
.step.checked .fa-check {
display: inline-block;
}
.step.checked .fa-times {
display: none;
}
then in js:
if (i < currentChecked) {
setTimeout(() => {
step.classList.add('checked')
}, 420);
I'm honor to have u as my mentor.
Thank u so much, for all the HTML, CSS & JS videos u taught.
I follow ur playlist thoroughly though the projects r small but they contain alot of new learning.
Looking forward to learn more new things from u,
Sir.
👍🏻🇮🇳
thanks mate for your nice comments, I am going to add more projects soon
Great walkthrogh and very easy to follow along. Great for a beginner :-) Keep up the good work
thanks for your comment 🙏
You are just phenomenal and the explanations are more than amazing.We are lucky to have such talented people like you sharing their knowledge
thanks for your comment, I really appreciate it. I am very happy to see you enjoyed the course. I am adding more projects to the channel soon 👍
I learnt javascript before but i wasn't confident enough but this tutorial helped me a lot thank you many. looking for react full course
coming soon mate, I am preparing the best react project on the Internet
That is incredible. I would like you to do more for us to learn from you.
thanks mate, appreciate it, I am happy to see you here. I am adding more projects soon
You helped me a lot. I tried to find a lot of other videos, but honestly this is the best.thanks a lot.❤️💗💗
thanks. I am happy that my video is helping you. 👌
I love how slow and clear you speak....
Omg this is one of the best beginners js projects. So detailed, thank you
thank you Lillian. I am very happy to hear that you have found the video useful. I am adding more projects to the channel soon 😉
Such a great teacher with great projects! Respect!
Many thanks
Thanks for the projects. Amazing and interesting
Thanks for watching!
I just found your channel. Your explanations are well detailed. I hope to get a certificate of completion when I'm done with the tutorial
Indeed Javascript King - I just stumbled on your channel after spending tons and tons of hours and days struggling to understand how to manipulate the DOM and some CSS eg flexbox. You explain concepts in a very engaging and simple manner far much better than my so called proff:( thank you so much 🧡🧡.newbie and subscribed. If possible try add a little bit of intermediate JS please 😊
sure mate thanks
Awesome vedios for begginers even they do not know about projects
thanks, I am glad that you enjoyed the projects, more projects are coming soon
Best project based course
Thanks for watching!
Such a great job man, this is what really call project for beginner, easy to follow. Subscribed & Bookmarked
thanks, I really appreciate it
Such a soft spoken teacher you are man,your calming voice makes your project even more effective,keep up the good work man,Appreciated :)
Thank you, I will
I m in 1 project and all the projects are so nice 👍
This is great! Keep it up! Best tutorials with HTML, CSS, JS in the internet!
Your project based teaching method is the best 👍
Thanks a lot 😊
Really enjoyed them , you really inspire and I tried also implementing some in a slightly different way. Thanks a lot
Hi!
I just came across your video and within just 10 minutes into it, I pressed the like and subscribed to your channel, because I found it very informative, precise and well explained step by step. Imma watch it tonight after my shift. Thanks mate!
🙏 thanks for the comment
Thanks for this project, it def helped me understand the “foreach” loop. It wasn’t sinking in at first until I started typing it out as I followed along. That method def helped me understand how everything was working a lot better. Your a good teacher, keep it up 👍
🙏🙏❤️
Thanks for your elaboration on each issue and sharing your experience and info!
Looking forward to hear from you JS frameworks also!
sure mate, I'll add more projects soon
This is just the best video anyone can find on UA-cam, you're so good. You deserve the UA-cam handle name "Javascript King 🤴 ". I just started my journey into Javascript. Thanks you. 😊
thanks mate, appreciate it. I am adding more projects to the channel soon
@@JavaScriptKing I can't wait 😍 🙌 🤗 😊
How can anyone explain js like this
Its calm and to the point
Awesome ❤️
That image viewer project was lit 🔥🔥
thank you mate
you are a great helper and with a great description. Thank you very much.
So nice of you
I feel terrible for subscribing late. Thanks a lot. Love fromAfrica
thanks for the projects and your work
Glad you like them!
as a beginner
this is just outstanding projects for learning JS
Thank you
Awesome! Great explanation! Love your work ❤️
thanks, I am happy to see you enjoyed the video. I am preparing more projects like this. Hope to see you again in my channel
Very good
So nice
thanks for you sharing, very nice and beginning friendly
So nice of you
You are helpful and request please come up with more applications. I am having a good time with your tutorials...
soon as possible
@@JavaScriptKingGood! That's gonna be awsome! Waiting...(hopefully)
In TO-DO-LIST if you run the program for the first time you will face an error says ( can't read properties of null 'foreach') that's because in the first time the list is empty and can't do foreach. To solve that but it In if statement to check if it has a value
If (list){
List.forEach(task=>{
toDoList(task);}) }
thanks for your comment. You are right 🙏. Another easier way is to just add an exclamation mark after list variable to prevent the error 😉
I meant question mark, like this list?
I really appreciate you making this kind of wallk through project based teching. I love it.
Glad you enjoy it!
We can also use CTRL+B to hide the explorer section. instead of hiding it manually.
Thank you.
Best course ever.
Just what I was looking for. Thank you so much for sharing. Please keep up
More to come!
Wow wow wow your explaining method it's really so easy and helpful, thanks Sir please keep going 🙏
Thank you, I will
thank you man 👍✊
Thanks mate!
It's really helpful.. I am really grateful...Please suggest some project for resume its very confusing for beginner to select...!!!!
start with small projects and get familiar with the basics and then start working on the bigger projects like an e-commerce or social media websites
@@JavaScriptKing thanks a lot for helping.. you are really great🥰
Wooh Bro, your'e such a good teacher, you can't imagine how much I look up to you, I want to be a good developer like you...please tell me how you got this good so that I can work on the same?
just build projects bro. Start simple and go advance after a while. Don't learn theory too much. Everything is on the internet.
@@JavaScriptKing Thank you
Sir you teach very well but one request keep to take less time and code easy to understand formation
its very useful for easy learn programming 😍😍
You are great. Always loving to watch your projects
thanks 🙏🙏
You are really nice teacher... i subscribed right now ur channel..amazing tutorials..thank you so much 💗
You're welcome 😊
really,,you are a king of JS
thanks
您的教程对我有很大的帮助 谢谢您
🙏🙏❤️
Awesome projects.. Thank you.
excellent teaching sir . i am your fan for your teaching skills
thanks mate, appreciate it
great
Thanks, appreciate your comment and support
Amazing your video
Thank you!
extremely useful, thank you. would you consider projects using MVC soon!!
Yes, definitely
Thank you sir,this is really help me :)
thanks, I am happy to see you enjoyed the video. I am adding more projects to the channel
Man you are amazing, God bless 👍
I appreciate that!
Great as always. Thank you so much
So nice of you
Thankyou good sir ❤️
Always welcome
Wonderful teacher
Thank you! 😃
Great video! but the javascript part of the profile statistics project was very confusing
Glad it was helpful! I am going to add more projects please use console log to learn about your code
I am really grateful to you
thank you
Please make a simple project for final year students using front end and back end.
OK, no problem
Thanks a lot
Thanks I love the information you shared
Glad it was helpful!
thank you very muck for your videos
no worries
Thanks for this video... please make more videos
I am adding more projects to the channel soon
THANK YOU BRO
6:56:23 todo js
دمت گرم خیلی باحاله پروژه ها
اونجا که فهمیدم ایرانی ای بیشتر با ویدیو حال کردم D:
ممنون عزیز سوالی داشتی همینجا بپرس در خدمتم 😊
I like your name. JavaScript King!!
Thanks!
You're awesome brother✨✨
You are the best
Watch at 1.5x for better experience
I was slow before ;)
Great work
Thank you! Cheers!
IN the animated search bar, I coulding place my magnifier in the center when the active class is there
please check the github repository linked in the description for comparison
@@JavaScriptKing Thankyou so much Sir😭
i just completed your this project video mate,it was amazing now i am going to watch your 15 projects video,but i just didnt understand in last:
progressEl.style.width =
((checkedNumber.length - 1) / (stepsEl.length - 1)) * 100 + "%";
why you added -1 & what "%" indicate mate,can you please explain me this breifly in comment,it will helped me..
thanks god bless you :)
God bless you too, the percentage is for width CSS rule to be a portion of its parent element. -1 is for steps as they are not started from 1
absolutely great
Thanks mate
please make an video for real project for begineers front end developer
sure mate
Hello. great tutorial.
i have a question about an issue i got in the 'rotating-image-gallery' project.
i get this error in the console:
"Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute".
everything work fine, the imgs do upload as they should, but this red error is annoying.
should i just ignore it?
Thanks for your messages. The error is not important, and not related to the project, just ignore it.
we want advance projects with full explanation.
thanks, I am preparing more projects for the channel, they will be some advance among them
Sir.. I ma on rodemap of blockchain devloper..... Can this small small project improve my skill for.. Smart contract logic.. And i just completed java script can i go for. React js or.. First do some java script project
Hi, thanks for comment, a little bit of understanding of Javascript could help you start learning react. Just few projects are enough.
@@JavaScriptKing qqaaaaaqaaammmkmkaamaakkmmkkmmkmmqmk mm m mm mm mmkkkkkkmmkkk
@@JavaScriptKing kmkkkm.kk mm kkmmmk me k..m?))ommm mm kmmmk)m mm mm mk))???kmmmkkk mm. Mkkkk#?####😊#😊###)#)?#?)?#?kaakaam😊#))kakkaak#))##)###
Great project sir
Thanks 🙏, there are more projects in channel, you can check them too.
@@JavaScriptKing i found your channel on UA-cam adds now I love your content 😃
@@codewithkaran8860 nice mate, I am happy to see you enjoyed the videos. I am adding more projects to the channel soon. Let me know if you have any questions 😉
@@JavaScriptKing if i have any doubts on your videos than i commented on it 😃
WOW! can i make the popup only appear when a specific user clicks on it, e.g. guest?
sure you can, needs more logic. I will add more advance projects soon
Emoji Rating:
4:15 => Start
5:18 : HTML
18:32 : CSS
34:28 : Javascript
You're amazing 😍
Thank you!! 🙏, there are more projects in channel, you can check them too.
Started the tutorial for the Emoji rating and it looks like the .far class has been changed to fa-regular to add the 1px margin
thanks for your update 🙏❤️
amoo sehandddd
💕
Hey i have a question about project 9. Im getting an error telling me that task does not exist? Or its not defind.. Any idea on how i can solve it?
Just waw
thanks for this beautiful and amazing video lecture. I have a doubt, what are we doing in the rotate image gallery part that cause it restricted to show only 8 images only in the round? why cant we add or see new images to the gallery.. I try to add new span tag for adding new image, but it wont show the image in round gallery
hey mate, you need to do some try and error with the value to find out the best amount
@@JavaScriptKing I tried but can't figure it out, I have played with almost every value. I successfully tried to change the degree and time of movement of image everytime I upload a new image, but it is not showing up on the gallery , but is initialised properly in the html page
@@simarpreetsingh019 That's how you're gonna learn coding not by just copy pasting like most of people here. It gives them an illusion of learning. That's it.
Thank you sir, you helping me so much ❤️
Your explaning really incredible 🤍
sir, i have a little knowledge about HTML,CSS and JS but interested for learning. Only doing this project based learning can I expert of front-end developer.
building projects is the best way to learn coding. Just start with small projects and then start working on the bigger projects like an e-commerce or social media websites
1st project can be build in css only
Is there an extension to open that browser window within the VS Code? I don't see that option by default!
live server
hi sir , is your 50 html css JS projects were enough to start learning react ?
Yes more than enough, check my react channel @reactproject for easy react projects
@@JavaScriptKing can u give the channel link...
ua-cam.com/channels/gjzpUKuLZjAr5A6XLWFX7Q.html
44:28 i dont get this part, what is idx here and what value it has?
Also at 49:56 what this function do? ` translateX(-${index * 50}px); `
just a name
Can I use these in my final year proect???Will it be ok if I show any one these project as my final year project??
yes mate, no problem
Sir, To-DO-List project is working in vs code but after pushing the code to GitHub, it's not working(task not adding).
Any suggestions to fix this problem?
change the script address to the folder name. Css is working?