Vanilla JS projects for total beginners

I had a really interesting conversation this morning about what makes a good project for beginners who want to learn JavaScript.

Things like a todo list app and a JS calculator were thrown out there, but, honestly, I think those are way too hard for someone who’s truly a beginner with no programing background.

The calculator app is full of little gotchas and “oh, but wait, what happens if…” scenarios. And the todo app just has too many moving parts. Adding items to a list is relatively easy. Everything else—marking them as complete, supporting multiple lists, letting someone edit or delete—it gets complicated fast.

The biggest mistake I see beginners make is trying to build something too big too soon. You fail, get stuck, get frustrated, and quit.

So, what is a good project for a total beginner? Here’s my short list (with links to starter templates):

1. Show/hide text when a button is clicked
2. Mirror text into a div as it’s typed
3. Get a random something from an API and display it in the UI
4. An app that converts Fahrenheit to Celsius (or vice-versa)
5. A script that toggles password visibility when you click a button or check a checkbox
6. An app that tells you how many characters you’ve typed

The underlying theme with all of these is that they focus on few foundational skills:

• Getting elements from the DOM
• Detecting user interactions and events
• Manipulating attributes (a class, a property, or text content)

They’re all very narrowly focused, and designed to be done in just a few hours. They’re starter projects that get you moving, get you excited, and give you some momentum to keep building more cool stuff.

You can find more projects like this at VanillaJSProjects.com.