HOW TO create a To Do List App With JavaScript, HTML and CSS | ES6 For Beginners
HTML-код
- Опубликовано: 2 июн 2024
- 🎁 Join my channel to get access to perks:
/ @codeexplained
🧡 Hello All JavaScript Lovers Outhere!
Today we are going to build a JavaScript project, which is; the to do list app. It will be a very clean tutorial where everything is explained very well, and a long the way this is what you will learn today:
🔸 Manipulate the DOM with JavaScript.
🔸 Render informations from a JavaScript object to the user interface.
🔸 Use of Leteral expression (backticks, multi-line string).
🔸 Using of Array forEach method.
🔸 Using of Array some method.
🔸 Using of Array map method.
🔸 Using of Array filter method.
🔸 Using of Array push method.
🔸Save data to the local storage.
🔸Form submission in JavaScript.
🔸Submit and Click Event listeners in JavaScript.
🔸HTML5 custom attributes and how to access them in JavaScript.
🔸Ternary operator.
🔸AND & OR logical operators in JavaScript.
🔸setTimeout in JavaScript.
🔸Generate a random color in JavaScript.
🔸Arrow functions in JavaScript.
🔸Bootstrap icons.
🕔 Timeline :
00:00:00 - Project Preview
00:02:03 - Download starter template : github.com/CodeExplainedRepo/...
00:03:01 - HTML code
00:10:10 - Form submission
00:12:51 - Save a todo
00:22:21 - Render to-dos to the user interface
00:28:37 - Target a todo
00:35:17 - HTML5 custom attributes and access them in JavaScript
00:41:15 - Check a completed todo
00:52:03 - Edit a todo
01:00:13 - Delete a todo
01:03:47 - Custom notifications
01:08:23 - Save to-dos to the local storage
01:14:51 - Fixing a little bug
🌍 Social Media Links.
◾ Facebook : / code.explained.official
◾ Twitter : / code_explained
◾ Instagram : / code.explained.official
◾ GitHub : github.com/CodeExplainedRepo
💲 Suppport the Channel
Paypal : paypal.me/CodeExplained
Dude you saved my ass i had I'm currently undergoing a bootcamp and this is one of my projects and just could not get it right ,,, this explanation was exactly what i needed to understand everything thanks a lot bro!!! I just subscribed!
Great tutorial, learnt a lot, please keep making such video you are great 😃👍
Amazing, Great Job! never stop teaching us, incredibly well explained, Congratulations. New Sub!
Dude after a long ur videos... Plz keep on uploading content regularly .. Ur explanation is just amazing
I will try my best
thank you!
Spectacular
For now, too advanced for me to do everything myself, but I learned a lot of things. Thanks! super well done
Thus is aimed for beginners
So happy to see your new post 😊😊, very helpful, thanks a lot
Glad it was helpful!
thanks
i like it, thanks bro! Keep going
Thanks, will do!
Thank you for that video! I'd learned much through that course and it was fun, too. To see so fast changings in front-end is amazing!
In the process of doing that tutorial there came issues, like I used the normal bootstrap instead of bootstrap icon or small typos. But I re-watched it and I saw what I did wrong and could fix it.
The other thing is your accent, it's a bit difficult for me to understand. Like if you say 'if-statement' I hear 'F-statement' and I'm confused sometimes with other stuff I couldn't understand.
Happy to hear you learned something!
And sorry about my accent 🙏
@@CodeExplained you are awesome man. No need to be sorry for the accent. ❤
thanks just completed
Please I'm having syntax error in the template literal
.
What might be the problem?
very Nicely explained.. thank you .. appreciate it..
Glad it was helpful!
thanks for your support!
Nice video❤💫💫. this video has helped me to improve my level in JS Es6. Thank you so much, I like it🥰🥰🥰🥰
Happy to hear that!
🔥🔥🔥🔥
hey, great video but I found one bug maybe someone reading this can help me. When you make the checkmark it works but when you console.log it doesn't work properly at least for me. the first 'checked' will be false even though its clicked and then when you click the second then the first will be clicked in the console but the second not and so on. And because of this, i can't write a filter to clear the todos. So anyone else experienced this? or have any tips to fix it
Bro is that send notifications when I'm not using browser
Thanks!
Welcome!
Please any advise on how I can be very good at programming like you?
practice, practice and practice.
Read Docs
Build Apps on your own
Watch tutorials when you stuck
If you can't, you can:
Watch tutorials, and try to build the projects while following the tutor.
1st
12:22
I Can see 360p video quality only bro, pls check it
Still processing HD versions.
@@CodeExplained ok thank you for the response
your css is not working😭. what should i do?
is it linked in the html doc?
be sure is the right css, he has an older todo app tutorial