How to Make a To-Do List App Using HTML
Introduction
Creating a to-do list app is a great way to start learning web development. It is a simple project but can teach you many useful skills. In this guide, we will use HTML to make a basic to-do list app. Let's get started!
Steps to Create a To-Do List App
Follow these steps to create your own to-do list app using HTML:
Step 1: Set Up Your HTML Structure
Create a new HTML file. We will start by setting up the basic structure.
<!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 App</title>
</head>
<body>
<h1>To-Do List</h1>
<ul id="todo-list"></ul>
<input type="text" id="new-task" placeholder="New Task">
<button onclick="addTask()">Add Task</button>
</body>
</html>
This is a basic HTML structure. It includes a heading, an unordered list to display tasks, an input field to type new tasks, and a button to add tasks.
Step 2: Add JavaScript to Handle Tasks
Next, we need to add JavaScript to make the app functional. We will write a simple script to add tasks to the list.
<script>
function addTask() {
var task = document.getElementById("new-task").value;
if (task === "") {
alert("You must write something!");
} else {
var li = document.createElement("li");
li.textContent = task;
document.getElementById("todo-list").appendChild(li);
document.getElementById("new-task").value = "";
}
}
</script>
This script gets the value from the input field, creates a new list item, and adds it to the to-do list. It also clears the input field after adding the task.
Step 3: Style Your App with CSS
Let's add some basic CSS to make our app look nicer. You can add the CSS in a <style> tag inside the <head> section.
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
h1 {
font-size: 24px;
}
ul {
list-style: none;
padding: 0;
}
li {
background: #fff;
margin: 5px 0;
padding: 10px;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
input, button {
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background: #007BFF;
color: #fff;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
</style>
This CSS will center the app on the page, style the tasks, and make the button more appealing.
FAQ
Can I add more features to the app?
Yes, you can! Try adding the ability to delete tasks or mark them as complete.
Do I need to know JavaScript to build this app?
Basic JavaScript knowledge is helpful, but you can learn as you go. Start with small changes and build up your skills.
Where can I learn more about HTML and JavaScript?
There are many online resources like W3Schools, MDN Web Docs, and freeCodeCamp where you can learn more.
Conclusion
Creating a to-do list app using HTML is a great way to start learning web development. It teaches you the basics of HTML, CSS, and JavaScript. Follow the steps in this guide, and you will have a functional to-do list app in no time. Happy coding!