Build A Todo App using Vanilla JavaScript in 2020 for Beginner

In this tutorial we will look at building a Todo App with Vanilla JavaScript and ES6 syntax for beginner. If you are looking to touch on SessionStorage, JS Arrow Functions and jQuery then this is the tutorial for you.

You will learn how to build a simple #ui using #html and #css. Once the user interface is complete, we then look at building functions to add, remove and store "tasks" in session storage.

0:00 - Intro and Todo App preview
2:14 - HTML layout design
7:34 - CSS styling of layout
16:57 - Jump to the JavaScript coding
38:40 - Conclusion of tutorial

[siphiwocode]

On line 30:38 I talk about looping through an array using an forEach function. In that function I did make use of the (index) param but created one by declaring a variable outside the forEach function and then incrementing it inside the function... stupid? Maybe... Long way around? Definitely! So a work around for this to make it much easier was just to loop is as follows:

get_todos.forEach( ( item, index ) => { // code goes here } );