title: “Building a Todo List App in JavaScript” date: 2022-01-01T10:00:00 draft: false description: “Learn how to build a simple Todo List app using JavaScript” categories:
In this tutorial, we will explore the process of building a simple Todo List application using JavaScript. We will use HTML and CSS for the structure and styling of the app, while JavaScript will handle the logic and functionality.
Before we begin, you should have knowledge of HTML, CSS, and basic JavaScript concepts. Familiarity with DOM manipulation will also be beneficial. Ensure that you have a text editor and a web browser installed on your computer for development and testing.
Start by creating a new HTML file and opening it in your preferred text editor. Add the following HTML structure to set up the basic layout of our Todo List app:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todo List App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Todo List</h1>
</header>
<main>
<form>
<input type="text" id="todo-input" placeholder="Enter a todo">
<button type="submit">Add</button>
</form>
<ul id="todo-list"></ul>
</main>
<script src="script.js"></script>
</body>
</html>
Save the HTML file as index.html.
Create a new CSS file named style.css and link it to the HTML file using the <link> tag in the <head> section. Apply the following CSS styles to enhance the visual appearance of our Todo List app:
/* Add some basic styling to the Todo List app */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
h1 {
margin: 0;
}
main {
max-width: 500px;
margin: 40px auto;
padding: 20px;
background-color: #f4f4f4;
}
form {
display: flex;
}
input[type="text"] {
flex: 1;
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
Save the CSS file.
Create a new JS file named script.js and reference it in the HTML file using the <script> tag placed at the end of the <body> section.
// Get the form and input elements
const form = document.querySelector('form');
const input = document.querySelector('#todo-input');
// Get the todo list element
const todoList = document.querySelector('#todo-list');
// Event listener for form submit
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form submission
const todoText = input.value;
if (todoText.trim() !== '') {
addTodoToList(todoText);
input.value = ''; // Clear the input field
}
});
// Function to add a todo to the list
function addTodoToList(todoText) {
const todoItem = document.createElement('li');
todoItem.textContent = todoText;
todoList.appendChild(todoItem);
}
Save the JavaScript file.
Open the index.html file in a web browser. You should see the Todo List app with a header, an input field, and an empty list.
Enter a todo text in the input field and click the “Add” button. The entered todo should appear as an item in the list.
Congratulations! You have successfully built a simple Todo List app using JavaScript.
In this tutorial, we learned how to create a Todo List app using JavaScript. We covered setting up the HTML structure, styling with CSS, and adding dynamic functionality with JavaScript. You can further enhance this app by incorporating additional features like marking todos as completed or removing them from the list.
Feel free to modify and experiment with the code to customize the app according to your needs. Happy coding!