• 1 min

#SpiceUpJSExercise: Build a todo app with Vanilla JavaScript

Table of Content

A lot of people have asked to help them grow in their JavaScript skills. But the only way to do it is by using JavaScript properly and get feedback on the code you’ve written.

With #SpiceUpJSExercise we go back2basics with Vanilla JavaScript! Why? Because if you want to grow your basics need to be good!

Why not learn a JavaScript framework to spice up the JavaScript skills? Well, it really depends on your knowledge! But I would give it a shot and test yourself on how your level is.

Please follow the requirements :-)

Build a todo app with Vanilla JavaScript


  • ****Add todo item
  • Remove todo item
  • Select todo item as done
  • Edit todo item
  • Stored todo’s in LocalStorage.


  • CSS Framework/library of your choice, but you don’t have to.
  • There may only 1 CSS file loaded in the HTML
  • You can use Less, Sass, SCSS, PostCSS or just plain CSS
  • Use a naming convention! (I prefer BEM, but OOCSS or another is just fine)


  • No JavaScript library or framework (No jQuery, Angular, React or something similar)
  • No compiler (Babel or something similar)
  • You can use ES5, but if you want to try ES6 to higher the bar, please do!


  • Use a task runner like Gulp, Grunt or NPM scripts
  • Publish your repo on Github


  • Use your creativity off course! :-)

How to get feedback

If you think your done, please put it on github and ask me to review your code. So I won’t be the only one that can see it, but others also can give you feedback on it!

Put a link in the comment of your Github repository!

I’m looking forwards to your Todo app’s.


I’m Ray, a Frontend Developer since 2009 living in the Netherlands. I write about Frontend Development, JavaScript, TypeScript, Angular, CSS, VueJS and a lot more related topics.

Want to reach me for comments or questions on my blog? Send a DM on Twitter @DevByRayRay