Just Another JavaScript Todo List Project

Hosted Project

JavaScript Todo List Project (Hosted on Github Pages)

Source Files

https://github.com/JS-Beginners/todo-list-project (Hosted on Github)

Project Objective

The objective for this JavaScript todo list project is to create a simple todo list that uses local storage to persist its data.

JavaScript Used

• eventListener
• Array
• functions
• localStorage
• DOM manipulation

My Personalize Summary

This project turned out to be pretty tough for me.

The project files hosted on github include the solution that I began working by myself, without the the help of the instructor, and the actually solution proposed by the instructor.

I completed my own HTML and CSS files in about 30 minutes, but then I spent about 3 hours trying to get my own project to work.

I got a lot of it done before I finally gave up in the night.

The next day, I just went straight to the instructor's solution and gave up on mine altogether.

Normally, I would want to get my project working in full before moving on but…I didn't fell like it. I was too excited to get to the next project before the weekend was up.

Maybe I'll come back to my own solution in the future.

Maybe.

For now, though, the instructor's solution works.

I only had to make one change to his code.

He created a function to clear the input box after a todo was added but he didn't wire it up correctly.

Now that…

I handled pretty easily. 😂

New Things Learned or Refreshed

I learned that no matter how many times you see a JavaScript todo list in actions, you can still forget how to code a simple one.

This is where practice and persistence comes into play.

This is probably my fourth or fifth JavaScript todo list, but all of them have been coded differently.

This javascript todo list uses event propagation to access individual todos, this javascript todo list uses multiples pages and creates individual ids for each todo, and this JavaScript todo list uses a Full-Stack solution, using NodeJS and ExpressJS.

So, my biggest struggle was trying to determine the “best” solution.

At the end of the day, I learned that the best solution is the one that works for a given specification (or technical requirements document).

The biggest take-away…

There is no limit to the number of JavaScript TodoList implementations you'll see in the world of JavaScript. 😄

Time to Code

This project took me about four hours to complete on my own, but I didn't get it quite the way I wanted it. So, I took another hour to run through the instructor's solution.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Todo List Project in action.

Need to see the video solution for this project?

Need to see the video solution for this project? Get Bluelime's JavaScript for Beginners: Create 27 Projects from Scratch Course Now!