I came across a code-along on YouTube by "Youssef Code" that uses JavaScript and HTML/CSS to make a simple to-do list application:
This project seemed interesting and that it would be good practice for a beginner in JavaScript, so I gave it a try. I followed most of the code in the video, yet there were certain areas that I modified what was done in order to be more concise, clear, or to use methods that were taught to me. In this post, I'll walk through the code, and at the bottom I'll post a link to the code on my Github repository.
When I'm done, my final project will look like this:
Creating the HTML structure
This project requires creating three files in a directory: index.html, index.js, and style.css. The HTML file is pretty short. In the head, I linked the file to the stylesheet, and gave it a title:
<head>
<link rel="stylesheet" href="style.css">
<title>To Do List</title>
</head>
In the body, I inserted an <h1> tag for the header, and created a few divs. The first div surrounds the input bar and button. The second div is where new items added to the to-do list will go. In the input div, I created an <input> element, giving it necessary class, type, and placeholder, as well as a <button> with the class addButton. At the bottom of the body, I linked to the JavaScript file.
<body>
<h1>To Do List</h1>
<div class="input_div">
<input class="input" type="text" placeholder="What Do You Want To Do?">
<button class="addButton">+</button>
</div>
<div class="container">
<!--This is where items will go-->
</div>
<script src="index.js"></script>
</body>
Making it work with JavaScript
The logic of this application can all by found in index.js. At the top of this file, I declared a few variables globally that will be necessary to use later on:
const addButton = document.querySelector('.addButton');
let inputValue = document.querySelector('.input')
const container = document.querySelector('.container');
Then, I created a class called Item. Inside the class I have a constructor, which takes in itemName. Inside the constructor, I called on an instance method called createDiv and pass in the itemName.
class Item {
constructor(itemName) {
this.createDiv(itemName);
}
...
}
Still inside the Item class, I created an instance method, createDiv, passing in itemName. This method first creates a variable called input which is an input, and is given the value of the inputName, a class of item_input, a type of text, and disabled is set to true. The text property disabled affects whether the field can be clicked on and altered. This is important for the editing function which will be implemented later on.
In the same method, I created a variable called itemBox which is a div, and is given the class of item. I appended itemBox to the container class, and appended input to the itemBox. I then created a variable called editButton, which is a button, and gave it text content of Edit and the class of editButton. I made a variable called removeButton, which is also a button, with the text content of Delete and the class of removeButton. I appended both the edit and remove buttons to itemBox.
Finally, in this method I added two event listeners, one for the edit button and one for the delete button. When the edit button is clicked, the method edit is called, which takes in input. When the delete button is clicked, the method remove is called, taking in itemBox.
class Item {
...
createDiv(itemName) {
let input = document.createElement('input');
input.value = itemName;
input.disabled = true;
input.classList.add('item_input');
input.type = 'text';
let itemBox = document.createElement('div');
itemBox.classList.add('item');
container.appendChild(itemBox);
itemBox.appendChild(input);
let editButton = document.createElement('button');
editButton.textContent = "Edit"
editButton.classList.add('editButton');
itemBox.appendChild(editButton);
let removeButton = document.createElement('button');
removeButton.textContent = "Delete"
removeButton.classList.add('removeButton');
itemBox.appendChild(removeButton);
editButton.addEventListener('click', () => this.edit(input));
removeButton.addEventListener('click', () => this.remove(itemBox));
}
...
}
The final two methods in the Item class are edit and remove. When edit is called, it changes the disabled method on the input--if it were previously true, and therefore unable to be changed, clicking edit will make disabled false, and therefore the input text can be altered. When remove is called, that itemBox is removed from the container:
class Item {
...
edit(input){
input.disabled = !input.disabled;
}
remove(itemBox) {
container.removeChild(itemBox)
}
}
The final element in the JavaScript file is how items get added to the list. I added an event listener to the add button. When the button is clicked, it checks to see if the input value is not empty, and if so it creates a new instance of the Item class, setting the itemName to the input value. After doing so, the input value is reset to an empty string.
addButton.addEventListener('click', () => {
if (inputValue.value != "") {
new Item(inputValue.value);
inputValue.value = "";
}
});
Just for looks: CSS
The video that I followed used a lot of CSS, and as I don't have much experience with it, I largely followed along with their code. There were, however, things I added that I thought improved the functionality of the program, or removed because I felt they were unnecessary or not in my personal style. For this part of the code-along, I will include the CSS block-by-block, and say generally what that block does.
body {
height: 100%;
background-color: rgb(247, 123, 123);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
The body block targets the entirety of the body. These few lines are a good place to put style that will remain uniform for the program, such as background color and font.
h1 {
font-size: 3.5rem;
font-weight: bold;
text-align: center;
color: black;
}
The <h1> tag is what says the name of the program, so it's valuable to make it large, bolded, centered, and contrasting against the background.
.input_div {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.input_div .input {
padding: 0.5rem 1rem;
height: 50px;
outline: none;
border: none;
background-color: white;
width: 450px;
font-size: 1.15rem;
margin: 0.25rem;
border-radius: 25px;
}
These blocks target the input. They center content, set sizes and padding, and change the text size.
.addButton{
height: 50px;
width: 50px;
border-radius: 25px;
outline: none;
border:none;
background-color: black;
color: white;
font-size: 1.5rem;
margin: 0.25rem;
cursor: pointer;
}
.addButton:hover{
background-color: cornflowerblue;
}
These blocks target the add button. They set the size and appearance of the button. The :hover block says what happens when the cursor goes over the button. In this case, it turns a shade of blue.
.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 2rem;
}
The container div is where all of the items are contained. This block primary sets the styling for the items, and ensures they are stacked vertically rather than horizontally.
.item{
padding: 0.5rem;
margin-bottom: 1.5rem;
border-bottom: 4px solid black;
}
.item_input{
background:none;
outline:none;
color: black;
border: none;
width: 350px;
font-size: 1.4rem;
}
These blocks concern the inputted to-do list items, setting appearance and style.
.editButton,
.removeButton{
font-size: 1.4rem;
margin: 0 0.75rem;
background: none;
outline: none;
color: white;
border: none;
cursor: pointer;
}
.editButton:hover,
.removeButton:hover{
color: cornflowerblue;
font-size: 1.5rem;
}
The formatting for these two buttons was so similar that I combined them. These blocks set the style of the 'edit' and 'delete' buttons, and also make it so that they turn blue and get larger when hovered over.
And that's all it takes to make a clean, functional to-do list app using vanilla JavaScript, HTML and CSS! Here is my Github repository if you'd like to try it out yourself:
Top comments (0)