Hope you enjoy this video. It took around 50+ hours to plan, record, edit and put together so please share with anyone you feel might find it useful and drop me a comment with any feedback you have 👍
This video is very useful, we have a lot of things to learn in this video. thank you for your time and effort to create this wonderful video in an effective way. Thank you so much
Cheers mate. Thanks for the feedback. Yeah, it’s always a bit of a compromise; some people want to see the updates, others want to see all the code and then other people want to have the code in a massive font size so they can watch in their phone!! All the code is on GitHub if you want you see/follow along with anything if the helps you.
Lovely Video @codewithbubb, I have a question, It's about the Star Rating, I noticed when the app started with the empty class of the star content if I select the last star it changes to filled which is fine, but when I select the last star again it doesn't change or reduced back to empty, except I selected on the fourth or the 3rd or any other than the 5th star, if I select on the 1st star and it changes to filled, when I select back the 1st star it doesn't change back to empty...??
Really great beginner projects and I love the use of the constructor class in the shopping list project. I have a question: why did you call the renderItems function twice in the initialize function..? Also, how could we work around the input element to avoid rendering an empty string when the button is clicked? I’ll try the “if” statement on the renderItem function. Thanks and am happy to be your student.
Thanks Shi for your feedback! I take it you're talking about the Shopping List project? The initialise function calls renderItems to first of all get all the existing items (when the page loads) then there's a second call inside the event listener for when a new item is added - this is only called when the user clicks the add item button. Yes, that's a very good idea - we should really check what the user is entering and see if it is an empty string or perhaps meets a minimum string length. Probably the best place to do this is inside that event listener we just mentioned (which is setup in the initialise function). I would probably, for starters, just add a check to see if the user input is either an empty string or just consisting completely of white space like so: initialise() { this.addItemButtonElement.addEventListener('click', () => { // Check for empty strings if (this.newItemTextElement.value.trim().length < 1) { // Stop the item from being added (optionally display a message to the user) return; } this.addItem(this.newItemTextElement.value); this.newItemTextElement.value = ''; this.renderItems(); this.storeItems(); }); this.renderItems(); } Hope that helps you out!
Hé Bubb, question: regarding the modal tutorial. I’m using glitch, it doesn’t toggle open close when you press the content element. It opens, but doesn’t closes, expected when I put a space in the code it reacts. Thoughts ?
i used the opacity property to that model when btn clicked the model will appear like opacity to "1" and when clicked on the model window the opacity is set to 0 which will make it disappear
@@codewithbubb It's my fifth day on this tutorial and fifth project and I give about 4-5 hrs/day to coding. I have a chemistry major but I think this skill will be a lot beneficial a lot to. What do you advise me on it for better growth? It's been a month since I started this all.
Oh wow! Great effort and thanks for choosing to spend your coding time with me! Yeah, definitely a great skill to have. I would say to get the fundamentals of coding (in any language) under your belt first and then you can explore what sort of things you might want to move into. Is there anything about coding you particularly enjoy? Designing websites? Solving problems? Making apps?
Hi, First thanks you so much for this video I have a question rather problem. If i delete "defer", my code is not work (for modal project). What is the reason of this. Thanks.
Hi, you’re welcome! Hope you’re finding it useful. To answer your question, the defer keyword in the script tag waits for the document (all of the HTML etc) to be loaded into the browser first, before running any JavaScript (included in the script tag). This means your JavaScript won’t run before the document is loaded and try and access something on the page that isn’t there yet! Chances are, if you remove the defer keyword the JavaScript is being run too early and throwing an error as it’s trying to work with an element on the page that’s not there. You can also do a similar thing by wrapping your code in the window.onload function which will also wait for the page to be ready before running the JavaScript. Hope that makes sense!
@@codewithbubb well, you explain in such a plain language which is perfect, i would like to see more projects with Promises, (fetch, async ) and also about Class Composition and i know there is alot out there on RUclips nut you explain in such a good way!!
Yes, the reason for putting the script tag at the bottom of the body is so that the whole document (any HTML elements on the page) are loaded and available before the JavaScript runs. However, you can achieve the same thing by putting the script tag in the HEAD of the document and using the defer keyword. This allows all the elements on the page to load before the JavaScript is executed. Hope that helps.
Just finished the colour flipper and I attempted these before i watch the projects to test my knowledge I add onclick to my buttons with a function name instead of addeventlistener is this bad Practice
Do you mean inline functions in your HTML or a .onclick = in your JavaScript code. Inline functions in your HTML are considered bad practice in most situations but it’s good to know of them! Adding event listeners or using properties on selected elements (like .onclick) in your JavaScript code is pretty much the same thing. I prefer the .addEventListener method but assigning functions directly to a property is fine.
Hey , so i completed ALL the projects and i must say ,it was nice to learn that way . the level of beginer friendliness is 5/10 , thought the projects are commonly beginner friendly as some youtubers also have them , youre explanation of some concepts is lacking and you kept halving the screen which made coding along difficult . but thank you so much for this , i would mos def recommend this to some else learning JS. i did not proof read this .
@@codewithbubb You know when you have both screens next to each other? When you're writing code, it keeps going when you write a long line of code, I'm not able to see what you wrote. I was just suggesting breaking up the code so it fits on the screen. I hope this clears things up.
You’re more than welcome! Hope you find the video useful. I think there did used to be an ‘Export to HTML’ option in Word. Not sure if it’s still there 😀
![10 HTML CSS JavaScript projects (HTML5, CSS3, vanilla JavaScript) [2024]](http://i.ytimg.com/vi/g6v_vbqKYeU/mqdefault.jpg)
Hope you enjoy this video. It took around 50+ hours to plan, record, edit and put together so please share with anyone you feel might find it useful and drop me a comment with any feedback you have 👍
This video is very useful, we have a lot of things to learn in this video. thank you for your time and effort to create this wonderful video in an effective way.
Thank you so much
The way you teach us JS coding is really impressive.
I could understand it line by line.
Thank you man.🎉
thank you for these simple but very useful js project bubb! really appreciated your work
Ah, no problem at all. Hope you find them useful 😀
following this project I got such a confident on my javaScript skills, thankyou. keep posting such content
Ahh, that's so great to hear Mohammad! Glad you found the projects useful and look forward to seeing what you get up to in the future!
@codewithbubb you're really an underrated channel. I'm willing to see this channel at 1M soon
@@mohammadabbas1623 Thanks so much for your kind words - I wish I could get to 1M !! 😀
i am a biggineer in js. thanks for making this kind of project. it helps me. keep doing it sir.
Love this course!! Really good for beginners...Thank You Bubb
Bubb, you're a real champ.
Thank you for making these videos for the newbies.
We really appreciate you
Subbed and Liked.
Thanks very much Hassan, appreciate your support!!
This video was suggested by RUclips to my feed. I'll drop another feedback when I'm done with building all the projects in this vid.
Just completed the Hello World program and what I love about JS is that you can write a different line of codes and achieve the same outcome!
I really learn a lot making these projects. You got a new subscriber, You have my gratitude, Bubb. Looking forward to your next videos!
Love the videos, only thing that is slightly annoying is that you dont drag your window over to the right more so that i can see more code at once :)
Cheers mate. Thanks for the feedback. Yeah, it’s always a bit of a compromise; some people want to see the updates, others want to see all the code and then other people want to have the code in a massive font size so they can watch in their phone!!
All the code is on GitHub if you want you see/follow along with anything if the helps you.
Obrigado pelo otimo conteudo!! Fortaleza - Brasil - Go JS!!!
Lovely Video @codewithbubb, I have a question, It's about the Star Rating, I noticed when the app started with the empty class of the star content if I select the last star it changes to filled which is fine, but when I select the last star again it doesn't change or reduced back to empty, except I selected on the fourth or the 3rd or any other than the 5th star, if I select on the 1st star and it changes to filled, when I select back the 1st star it doesn't change back to empty...??
this is an amazing content thanks for your time and effort. will share definetely!
Ah, thank you so much! Appreciate your support and I hope you find the video useful.
Underrated
Thanks very much for your support 😀
Outstanding content! I wish half the screen was not hidden most of the time
Gracias por tu trabajo, me esta ayudando mucho a aplicar javascript en mis proyectos. Buen video para empezar.Continua subiendo contenido!!
Thanks very much - appreciate all your support!
Bro! Are these projects enough to start studying react js
Subscribed. Thanks
Really great beginner projects and I love the use of the constructor class in the shopping list project. I have a question: why did you call the renderItems function twice in the initialize function..? Also, how could we work around the input element to avoid rendering an empty string when the button is clicked? I’ll try the “if” statement on the renderItem function. Thanks and am happy to be your student.
Thanks Shi for your feedback! I take it you're talking about the Shopping List project? The initialise function calls renderItems to first of all get all the existing items (when the page loads) then there's a second call inside the event listener for when a new item is added - this is only called when the user clicks the add item button.
Yes, that's a very good idea - we should really check what the user is entering and see if it is an empty string or perhaps meets a minimum string length. Probably the best place to do this is inside that event listener we just mentioned (which is setup in the initialise function). I would probably, for starters, just add a check to see if the user input is either an empty string or just consisting completely of white space like so:
initialise() {
this.addItemButtonElement.addEventListener('click', () => {
// Check for empty strings
if (this.newItemTextElement.value.trim().length < 1) {
// Stop the item from being added (optionally display a message to the user)
return;
}
this.addItem(this.newItemTextElement.value);
this.newItemTextElement.value = '';
this.renderItems();
this.storeItems();
});
this.renderItems();
}
Hope that helps you out!
Thank you so much. Yes it has helped and solved the puzzle 🧩. I’m happy to continue learning from you. Happy holidays 🎉
@Shipupa Amazing! Glad I could help.
U earn a new subscriber form inda
That's great! Glad to have you aboard 😀
Hé Bubb, question: regarding the modal tutorial.
I’m using glitch, it doesn’t toggle open close when you press the content element. It opens, but doesn’t closes, expected when I put a space in the code it reacts. Thoughts ?
Why the script is placed in head section instead of right above the body end tag and what does the defer property do?
Thank you 😃
You're welcome Winstone! Hope you found it useful.
i used the opacity property to that model when btn clicked the model will appear like opacity to "1" and when clicked on the model window the opacity is set to 0 which will make it disappear
Thank youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
You’re welcome lol 😂
@@codewithbubb It's my fifth day on this tutorial and fifth project and I give about 4-5 hrs/day to coding. I have a chemistry major but I think this skill will be a lot beneficial a lot to. What do you advise me on it for better growth? It's been a month since I started this all.
Oh wow! Great effort and thanks for choosing to spend your coding time with me! Yeah, definitely a great skill to have. I would say to get the fundamentals of coding (in any language) under your belt first and then you can explore what sort of things you might want to move into. Is there anything about coding you particularly enjoy? Designing websites? Solving problems? Making apps?
@@codewithbubb I explored the topics bit and I think making apps would be a interesting thing.
Subscribed ❤
Liked 👍
Shared 😊
Thank you so much Raj! Very much appreciated 🙏
Great!! Awesome!! So Useful!!
thanks so much.
Thank you so much Ibraheem! Glad you found it useful.
Thank you
Hi,
First thanks you so much for this video
I have a question rather problem.
If i delete "defer", my code is not work (for modal project). What is the reason of this.
Thanks.
Hi, you’re welcome! Hope you’re finding it useful.
To answer your question, the defer keyword in the script tag waits for the document (all of the HTML etc) to be loaded into the browser first, before running any JavaScript (included in the script tag). This means your JavaScript won’t run before the document is loaded and try and access something on the page that isn’t there yet!
Chances are, if you remove the defer keyword the JavaScript is being run too early and throwing an error as it’s trying to work with an element on the page that’s not there.
You can also do a similar thing by wrapping your code in the window.onload function which will also wait for the page to be ready before running the JavaScript.
Hope that makes sense!
thanks for the video
Awesome video!!!!
Cheers Dimitrije! Hope you find it useful 👍
@@codewithbubb very!!! Hope there will be more in the future
@Kinder_Jajce certainly! What kind of things would you like to see?
@@codewithbubb well, you explain in such a plain language which is perfect, i would like to see more projects with Promises, (fetch, async ) and also about Class Composition and i know there is alot out there on RUclips nut you explain in such a good way!!
Great content.
Cheers! Appreciate your support!
thankyou
You're welcome - hope you find the projects useful!
this is lovely
Thank you very much - hope you find it useful!
shouldn't the script go at the bottom instead of at the top?
Yes, the reason for putting the script tag at the bottom of the body is so that the whole document (any HTML elements on the page) are loaded and available before the JavaScript runs. However, you can achieve the same thing by putting the script tag in the HEAD of the document and using the defer keyword. This allows all the elements on the page to load before the JavaScript is executed.
Hope that helps.
@@codewithbubbvaluable information!
Just finished the colour flipper and I attempted these before i watch the projects to test my knowledge I add onclick to my buttons with a function name instead of addeventlistener is this bad Practice
Do you mean inline functions in your HTML or a .onclick = in your JavaScript code. Inline functions in your HTML are considered bad practice in most situations but it’s good to know of them! Adding event listeners or using properties on selected elements (like .onclick) in your JavaScript code is pretty much the same thing. I prefer the .addEventListener method but assigning functions directly to a property is fine.
@@codewithbubb great thank you and great videos I started my coding journey two weeks ago and wish I found this channel sooner
@l-fitness3590 no problem. Good luck with your journey - let me know if you have any questions!
@@codewithbubbyou definitely should have picked a different work on the testimonials project 😂
@@l-fitness3590 Sorry, not sure what you mean Lawrence?
❤
Thanks for your support!
🔥🔥🔥
Cheers Daniel!
Helpfull 🥹❤️
Hey , so i completed ALL the projects and i must say ,it was nice to learn that way . the level of beginer friendliness is 5/10 , thought the projects are commonly beginner friendly as some youtubers also have them , youre explanation of some concepts is lacking and you kept halving the screen which made coding along difficult . but thank you so much for this , i would mos def recommend this to some else learning JS. i did not proof read this .
i love u
Why thank you ☺️ Hope you enjoy the vid.
@@codewithbubb 👌
in your future videos can you break up the code so its visible on the screen please?
Do you mean, keep the code on a separate screen to the preview/finished project? Apologies if you meant something else.
@@codewithbubb You know when you have both screens next to each other? When you're writing code, it keeps going when you write a long line of code, I'm not able to see what you wrote. I was just suggesting breaking up the code so it fits on the screen. I hope this clears things up.
@aloSolo Ah I see, yeah that would be better. Thanks fit the feedback.
this is what i needed any THANK YOU... any ways " not ms word aaaaaaaaa 😂😂😂😂😂😂"
You’re more than welcome! Hope you find the video useful. I think there did used to be an ‘Export to HTML’ option in Word. Not sure if it’s still there 😀
Sticky nav,
Hernandez Betty Miller Donna Rodriguez Karen
you cloned projects require permission from you sir 🙃🙃