Creating a Todo App using HTML, CSS, and JavaScript is a great way to practice your front-end development skills. In this tutorial, we will walk you through the process of creating a simple Todo App with basic functionality.
Step 1: Setting up the project structure
To start, create a new folder for your project and create three files: index.html, style.css, and script.js. Your project structure should look like this:
todo-app
|- index.html
|- style.css
|- script.jsStep 2: Setting up the HTML structure
Open the index.html file and add the following code to create the basic structure of the Todo App:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Todo App</h1>
<input type="text" id="todoInput" placeholder="Enter your task...">
<button id="addButton">Add</button>
<ul id="todoList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>Step 3: Styling the Todo App
Open the style.css file and add the following CSS code to style the Todo App:
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
input {
width: 70%;
padding: 5px;
margin-bottom: 10px;
}
button {
padding: 5px 10px;
background-color: #3498db;
color: #fff;
border: none;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
}
li:last-child {
border-bottom: none;
}Step 4: Implementing the JavaScript functionality
Open the script.js file and add the following JavaScript code to implement the functionality of the Todo App:
const todoInput = document.getElementById('todoInput');
const addButton = document.getElementById('addButton');
const todoList = document.getElementById('todoList');
addButton.addEventListener('click', function() {
const todoText = todoInput.value;
if (todoText.trim() !== '') {
const li = document.createElement('li');
li.innerText = todoText;
todoList.appendChild(li);
todoInput.value = '';
}
});
todoList.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('completed');
}
});Now, you have successfully created a simple Todo App using HTML, CSS, and JavaScript. You can further enhance the functionality by adding features like editing, deleting, and filtering tasks. Happy coding!
