gwtech To-do app in JavaScript - Live Coding

This tutorial codes a to-do app in JavaScript, written in response to a viewer request.

Live demo: http://www.easylearntutorial.com/live...

There were six requirements that this JavaScript application was to satisfy:

1. Create a new to do item from an input field
2. New item is displayed on an "uncompleted" list with a checkbox next to it
3. After a new item is created, the input field is cleared, but retains focus
4. By clicking the checkbox next to an uncompleted item, that item is moved to the "completed" list
5. By clicking the checkbox next to a completed item, that item is moved back to the uncompleted list
6. When an item is moved between lists, it is removed from the list is was moved from, so a given item only shows on one list at a time

My goal was to be brief and write clean code. It's easy to search for code online, then use it in your app without fully understanding the code. What I wanted to do here was to provide a simple solution, but also to explain every decision I made.

The first design decision I made was to keep all my variables in a self-invoking, anonymous function. That way I wouldn't add anything to the global namespace. Next, I decided to have the basic HTML markup for the app all declared as HTML right on the document, as opposed to creating the application skeleton dynamically through JavaScript.

From there, I created 4 functions; one that creates the HTML for each task, another function to create the task from user input, a method to handle click events on a task's checkbox, and finally I wrote a function to handle user input.

Programming tutorials by Easy Learn Tutorial - because anyone can learn how to become an expert software and web developer!

Copyright (c) 2013 Rodrigo Silveira - http://www.easylearntutorial.com

gwtech To-do app in JavaScript - Live Coding
293 Likes	293 Dislikes
38,374 views views	18.1K followers
Education	Upload TimePublished on 7 Aug 2014

Related keywords

javascript tutorial web development,javascript tutorial for beginners udemy,javascript tutorial for beginners ppt,javascript tutorial for beginners,gwtool gmod,object oriented javascript es6,gwtool,getnet,php str_replace,php for loop,php tutorials for beginners pdf,php strpos,object oriented javascript interview questions,php currency,php in_array,object oriented javascript es6 pdf,javascript for,javascript reduce,javascript tutorial date,object oriented javascript tutorial pdf,php tutorials for beginners with examples,javascript tutorial library,php agency,php foreach,javascript tutorialspoint,javascript tutorial w3,gwtr direto,javascript tutorial for beginners ej media,javascript для детей,getussp,php tutorials for web development,php date,javascript tutorial for beginners to advanced,javascript tutorial example,object oriented javascript w3schools,javascript switch,object oriented javascript projects,object oriented javascript udemy,javascript tutorial callback,javascript tutorial documentation,php to usd,gwti,gwtk,php tutorials w3schools,javascript tutorial indonesia pdf,php tutorials online,gwtr,php array length,javascript tutorial for beginners youtube,javascript tutorial for beginners 2019,javascript substring,javascript книги,php tutorials point full pdf,php tutorials pdf,object oriented javascript udacity,javascript tutorial code,object oriented javascript vs functional,javascript tutorial function,php tutorialspoint,javascript tutorial for beginners telusko,php tutorials best,javascript tutorial for beginners in hindi,object oriented javascript frameworks,object oriented javascript book,php tutorials youtube,gwt board game,php try catch,php tutorials for beginners,javascript class,getty,object oriented javascript concepts,javascript tutorial for beginners pdf,php code,javascript tutorial pdf,php substr,object oriented javascript tutorial point,javascript tutorial for beginners javatpoint,javascript array,javascript tutorial for beginners pdf free download,nintendo web framework tutorial,javascript tutorial for beginners w3schools,javascript map,javascript tutorial for beginners with examples in hindi,gwt brasil,php tutorials pdf free download,object oriented javascript tutorial,gwtools,object oriented javascript by stoyan stefanov,javascript foreach,object oriented javascript sample projects,javascript settimeout,gwt global,javascript tutorial for beginners step by step pdf,javascript date,javascript tutorial w3school,php implode,javascript tutorial github,php tutorials download,php tutorials point pdf,javascript для дітей,nintendo web framework switch,object oriented javascript interview questions and answers,javascript tutorial for beginners in urdu,gwt showcase,gwt java,php tutorialspoint quick guide,javascript tutorial for beginners in tamil,phpstorm,gwtk rh,javascript tutorial video,php explode,javascript tutorial for beginners edureka,php tutorialspoint pdf free download,javascript split,javascript tutorial for frontend developers,php tutorials javatpoint,phpmyadmin,javascript tutorial for beginners step by step,javascript это,object oriented javascript 3rd edition,object oriented javascript cheat sheet,nintendo web framework download,javascript online,tutorialspoint php,javascript уроки,javascript replace,object oriented javascript medium,javascript tutorial for beginners mosh,phpbb,gato,javascript tutorial,javascript tutorial for beginners free,php isset,getulio vargas,php tutorials in hindi,gtwr11,javascript tutorial download,javascript це,php tutorials free,php array,