To-Do List Application
This project will show you how to make a simple To-Do List Website so you can keep track of the things you may like to do. Happy Coding!
Supplies
- Computer (With internet access and the ability to download software)
- IDE (For Example VS Code)
- Web Browser (You should use Google Chrome, Microsoft Edge, or Mozilla Firefox)
Prepping Your Work Space
In this step, you will create a folder to house your project along with the necessary HTML, CSS, and Javascript files.
Downloads
Coding the HTML
Now that we have the appropriate files structure for out project we should start coding our html.
<!DOCTYPE html>
<html>
<head>
<title>My Todo App</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
</head>
<body>
<div id="todo-list-container">
<!-- Your to-do list items will be added here -->
</div>
<div id="add-todo-container">
<input type="text" id="todo-input" placeholder="Enter a new item">
<button id="add-todo-btn">Add</button>
</div>
<script src="main.js"></script>
<script>
// Call the addItem() function to enable adding items
addItem();
</script>
</body>
</html>
This code will be the starting point for all of our code in the future. This code has makes the box where we can enter the contents of our to do list and the enter button to confirm what we would like in the text field. It also allows our HTML, CSS and Javascript to speak to each other. Right now our website may look to you as "not attractive" but we are going to change that.
Styling the Website
In this section we will style our website so it can look attractive to our potential users.
#add-todo-btn {
font-family: 'Nunito', sans-serif;
font-size: large;
font-style: normal;
}
body {
background-color: linen;
}
Now that we have done this, our website looks better. Our user is now no longer blinded by that static white background of the website. Our website still does not work, let's fix that!
Coding the Javascript
Now that our website is styled and we have starter points. We now have to make it interactive. That is where our Javascript comes in, it will make our website actually responsive.
// Declare a variable to store your to-do list items
let todoList = [];
// Create a function to add new items to the list
function addItem() {
// Select the input field where users can enter their to-do item
let inputField = document.getElementById("todo-input");
// Select the "Add" button
let addButton = document.getElementById("add-todo-btn");
// Add an event listener to the "Add" button that triggers when it is clicked
addButton.addEventListener("click", function () {
// Retrieve the value entered by the user
let newItem = inputField.value;
if (newItem !== "") {
// Add the item to the list of items
todoList.push(newItem);
// Clear the input field after adding the item
inputField.value = "";
// Call the display function to update the list on the screen
displayList();
}
});
}
// Create a function to display the to-do list
function displayList() {
// Select the container element where you want to display the list
let container = document.getElementById("todo-list-container");
// Generate the necessary HTML dynamically to display each item in the list
let html = "";
for (let i = 0; i < todoList.length; i++) {
html += `<div>${todoList[i]}</div>`;
}
// Append the generated HTML to the container element
container.innerHTML = html;
}
// Call the addItem() function to enable adding items
addItem();
Now our website is complete! Now lets see if all is working!
Testing Our Website
This step is very simple, here we are just going to open our webpage. Make sure you are inside of you HTML file and then simply find the "run" button and run your project.
Downloads
Enjoy
I hope you enjoy your To-Do List! Here is the Github for the project. You can also try to revise it, for example you can make a system that saves everything that you list. A feature where you can check the items off the list, or you can improve styling like making the UI bigger and simpler. Happy Coding!