Subscribe On YouTube
- Episode 1: Introduction & Project Setup
- Episode 2: Adding UI Elements
- Episode 3: Styling The App
- Episode 4: Adding Todos
- Episode 5: Completing & Removing Todos
Today’s web frameworks like React, Svelte, Vue, or Angular makes it possible to build powerful well structured feature-rich web application. However using those frameworks requires additional effort to learn the framework concepts and techniques. Often times those frameworks help a lot but on the other side frameworks are adding more complexity to apps, are increasing the bundle size and makes it hard for other developers (not knowing the framework) to understand your code.
What We’re Going To Build
You can use the input field to enter the title of a new task and add that task to the list by either clicking the plus icon or hitting return:
The new task item is then added to the list underneath. For each task two more icons are displayed: a check icon and a delete icon:
You can continue adding multiple task items in the same way. The list is extended automatically and each item is presented in a new row:
Clicking on the check icon of a task item will strike through the item text as you can see in the following:
Creating The Project
Creating the new project is easy as we do not need to install dependencies like frameworks or other packages. Just create a new project folder:
$ mkdir vanilla-js-todo
and change into that new folder by entering:
$ cd vanilla-js-todo
Inside that folder we need to create three new files
Now we’re ready to insert the basic HTML code into file index.html:
To insert the code you can use any code editor you like. A good choice is Visual Studio Code (https://code.visualstudio.com/) which is free and and running on macOS, Windows, and Linux.
Notice that we made sure to include our styles.css in the head section and the app.js script in the body section.
Using Google Fonts
Because the application should have a modern UI, we should also include a modern-looking font which we can get from Google Fonts. Go to the website https://fonts.google.com/ and search for “Raleway”:
Then select to first search result and on the next screen select the styles you’d like to include (e.g. Light 300, and Light 300 italic). Then click on tab Embed on the right side and copy the link element:
Insert the link element in the head section of index.html:
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;1,300&display=swap" rel="stylesheet">
Using Font Awesome Icons
To be able to include some nice-looking icons in our app (like the trask icon, the check icon, and the plus icon) we’ll use an icon package which is called Font Awesome. We’re able to include this library by using a CSS file which is hosted on a CDN (Content Delivery Network). Go to page https://cdnjs.com/libraries/font-awesome switch to tab CSS and copy the first link which is listed:
Then include it in our project by adding the following link element to the head section in index.html as well:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet">
Starting Live Server
Finally let’s see what’ve got and run our application in the browser. To do so we’re starting a small live-reloading web server from within Visual Studio code. Therefore you need to install the Live Server extension and the you can click on the entry Open with Liver Server when opening the context on file index.html:
Live server is then started on your local system and the website is automatically opened in your browser:
In the next episode we’ll continue implementing the UI of the Todo application.
- Practice your new skills with coding challenges (solutions included)
* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!