Creating a to-do list application is an excellent way to grasp the fundamentals of web development. This project will help you understand how HTML structures content, CSS styles it, and JavaScript adds interactivity.
Step 1: Set Up the HTML Structure
Begin by creating an index.html file. This file will define the structure of your to-do list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>To-Do List</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="container">
<h1>My To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task..." />
<button id="addTaskBtn">Add Task</button>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Style with CSS
Next, create a styles.css file to add some basic styling.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
padding: 50px;
}
.container {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
width: 70%;
padding: 10px;
margin-right: 10px;
}
button {
padding: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
Step 3: Add Interactivity with JavaScript
Finally, create a script.js file to handle the functionality.
document.getElementById('addTaskBtn').addEventListener('click', function() {
const taskInput = document.getElementById('taskInput');
const taskText = taskInput.value.trim();
if (taskText !== '') {
const li = document.createElement('li');
li.textContent = taskText;
document.getElementById('taskList').appendChild(li);
taskInput.value = '';
}
});
Conclusion
By following these steps, you’ve built a basic to-do list application. This project demonstrates how HTML, CSS, and JavaScript work together to create interactive web pages. You can expand this app by adding features like task deletion, marking tasks as completed, or storing tasks in local storage.