To-do list is a list of tasks you need to complete or things that you want to do.
Most typically, they’re organized in order of priority. Traditionally, they’re written on a piece of paper or post it notes and act as a memory aid. As technology has evolved we have been able to create a todo lists with excel spreadsheets, word documents, email lists, todo list apps, Microsoft to do and google to do list to name a few. You can use a to do list in your home and personal life, or in the workplace.
We will not use any To-do app build by any organization. We will build our own To-do app using HTML, CSS & JavaScript. This is a beginner's project for web development learners. Below is the video given so, you can learn "How to build To-Do app":
Video 1: HTML formatting
Video 2: HTML formatting & CSS styling
Video 3: CSS styling
Video 4: CSS styling
Video 5: CSS styling
Video 6: JavaScript coding
Line 1-4: Targeted all the elements which we need to use in JavaScript.
Line 4: Targeted all the elements with Class "list".
Line 6: Function added to the variable "btn". Function will invoke when someone click on the button.
Line 7: Variable "input" will store the input value by the user (mistakenly wrong code written).
Line 8: Variable "regx" will use to validate the input value.
Video 7: JavaScript coding
Line 10: Code written to check whether the input value validation is true or false.
Line 10-14: If and Else conditional statement used, if the given condition is true it will create an element with class "li" and also add to the ul element using append method or if condition is false it will do nothing.
Line 16: Code will set the input value to nil.
Video 8: JavaScript coding
Line 19-23: Function will apply to all the item with class "list".
Line 20: When user double click on the item with class "list" it will remove the targeted item.
Hope, You guys have created your own To-Do list and learned something new by watching these videos.
Comentarios