Create a Simple To-Do List Web App: A Step-by-Step Guide
Building a simple web app is a great way to learn the basics of web development. In this tutorial, we will create a basic to-do list app to explore the essential steps involved.
Prerequisites:
- Basic understanding of HTML, CSS, and JavaScript.
- A text editor like Visual Studio Code or Sublime Text. (You could use your notepad if you have none of those installed)
Steps:
Now that we're all set, let's start building our To-do list web app.
1. Define the App's Functionality:
The first step is deciding which features and functionalities we want our to-do list app to have.
In this case, our focus is on adding, removing, and marking tasks as completed.
2. Design the User Interface (UI):
The next step is figuring out how we want our web app to look. We can achieve this by sketching out a simple layout for our web app.
You can use pen and paper or a digital design tool like Figma or Sketch.
For this tutorial we came up with the design below:
3. Code the HTML:
Now let's get to the fun part- writing some code. Let's first create an HTML file where we will define the basic structure of our page using HTML elements like div, ul, li, and input.
Our html code will look like as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<style> </style>
</head>
<body>
<div class="main-container">
<h1>To-Do List</h1>
<div id="input-container">
<input type="text" id="new-task" placeholder="Enter new task">
<button id="add-task">Add</button>
</div>
<ul id="task-list"> </ul>
</div>
<script src="script.js"></script>
</body>
</html>
4. Style the App with CSS:
With our page structure now set up, let's make it look good by giving it some style. Create a CSS file and name it style.css and place it in the same folder as our html file. This is where we will style the different elements of our app.
Our style sheet will look like this:
body {
font-family: sans-serif;
}
.main-container {
margin: 0 auto;
max-width: 300px;
text-align: center;
}
#input-container {
margin: 8px auto;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#new-task {
padding: 10px;
width: 200px;
border: 1px solid #ccc;
}
#add-task {
padding: 11px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#task-list {
list-style: none;
padding: 0;
margin: 0;
max-width: 300px;
}
.completed {
text-decoration: line-through;
color: #ccc;
}
li {
padding: 12px;
cursor: pointer;
text-align: left;
margin-bottom: 2px;
background-color: #f4f4fa;
}
5. Add Functionality with JavaScript:
Now that we are done with our structure and styling, we can now implement the logic for adding, removing, and marking tasks as completed.
Our to do list will work in the following way:
- The user will write their task in the input field and click the add button to add it to a list
- When the user clicks on a to-do item, we will draw a line across it to indicate that it is completed. We will also change its colour to grey
- When the user double clicks an item, we will remove it from our list.
To achieve all that, we will use the code below:
const newTaskInput = document.getElementById('new-task');
const addTaskButton = document.getElementById('add-task');
const taskList = document.getElementById('task-list');
addTaskButton.addEventListener('click', () => {
const newTask = newTaskInput.value.trim();
if (newTask) {
const listItem = document.createElement('li');
listItem.textContent = newTask;
listItem.addEventListener('click', () => {
listItem.classList.toggle('completed');
});
taskList.appendChild(listItem);
newTaskInput.value = '';
}
});
6. Test and Deploy:
Once we are done we can now test our app on different browsers and devices to ensure it works correctly.
If we are satisfied, we can then deploy the app to a web hosting platform like GitHub Pages or Netlify.
Additional Features:
It is important to note that this is just a basic to do list and is only meant as a starting point. You can then add more features to make it more robust and useful.
Some improvements that we could make to our to-do list are are:
- Add persistence using local storage or a database to store tasks even after refreshing the page.
- Implement filtering and sorting options for tasks.
- Enable editing of task descriptions.
- Enhance the UI with animations and interactions.
Congratulations! You've created a simple to-do list web app. By following these steps and exploring additional features, you can build more complex and engaging web applications as you progress in your web development journey.