Making a Todo App from Scratch with Vanilla JavaScript

Introduction

If a programmer's first step is writing "Hello World" in the console, then their second step is creating a Todo application. This app generally consists of being able to save notes (something that you'll need "to do" later), displaying them, and checking off the ones you completed. A todo application is a common entry point into CRUD operations - create, read, update, delete. It's simple but teaches you the core mechanics that are ever-present in real-world applications.

Pretty much every application implements CRUD operations, and as such, they're a great entry point in creating something simple but functional and genuinely useful.

We'll be using this foundational project as our starting point. The limited scope brings three JavaScript features to focus on - using const and let for variable declarations and template strings. Before the ES2015 standard, variables in JavaScript were declared with the var keyword. Now we have two new keywords that the developer community almost solely uses. With template strings, mixing strings with variables is less of a hassle. Don't worry, we'll be detailing both features in our app soon.

We'll be developing this app for the browser. Our code will be leveraging the browser's JavaScript API. Even more important, there will be some setup involving HTML and CSS that we need to do first. While they aren't the focus of this lesson, or course for that matter, to become a good JavaScript developer you'll need to be comfortable working in the environments it typically runs on.