HOW TO create a To Do List App With JavaScript, HTML and CSS | ES6 For Beginners

Показать описание

🎁 Join my channel to get access to perks:

🧡 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: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.

💲 Suppport the Channel

Рекомендации по теме

Комментарии

Dude after a long ur videos... Plz keep on uploading content regularly .. Ur explanation is just amazing

vikasni

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!

brandonjansenvanvuuren

Amazing, Great Job! never stop teaching us, incredibly well explained, Congratulations. New Sub!

davdargplays

For now, too advanced for me to do everything myself, but I learned a lot of things. Thanks! super well done

hwg

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.

bjorn

So happy to see your new post 😊😊, very helpful, thanks a lot

elieli

Great tutorial, learnt a lot, please keep making such video you are great 😃👍

anshulvairagade

Nice video❤💫💫. this video has helped me to improve my level in JS Es6. Thank you so much, I like it🥰🥰🥰🥰

arsenosgrandeur

Please I'm having syntax error in the template literal <div class="todo" id=${index}>
</div>.

What might be the problem?

dkultech

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

davidu