 compilation.jpg)
Description
A developer's journey through code. I build, I break, and I write about it. Explore articles on modern software development, programming tips, and more.
Create a Simple To-Do List App with HTML, CSS, and JavaScript
Published in: 2025-03-20 12:02:00 Author: SunshineIHCTS Section: JavaScript
Tired of forgetting tasks or scribbling them on random sticky notes? Let us fix that today by building a simple to-do list app using HTML, CSS, and JavaScript (no fancy tools required)! Whether you are new to coding or ready to make your webpages interactive, this beginner-friendly project will teach you the essentials of web development in under an hour. By the end, you will have a working app to add tasks, style them your way, and feel like a coding rockstar. Ready? Let us dive in!
What We are Building
Our to-do list app will let you:
- Type a task into an input field.
- Click a button to add it to a list.
- See your tasks displayed neatly below.
We will use HTML to create the structure, CSS to make it look good, and JavaScript to bring it to life. Think of it as a mini-lesson in building dynamic apps (start small), then dream big!
Step 1: Set Up the HTML Structure
First, we need a place to type tasks and show them. Open your favorite code editor (I use VS Code, but anything works) and create a new file called `index.html`. Here is the basic HTML to get started:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My To-Do List App</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 task...">
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
What is Happening Here?
- `<input>` is where you will type your task. The `id="taskInput"` lets us grab it later with JavaScript.
- `<button>` triggers the magic—`onclick="addTask()"` calls a function we will write soon.
- `<ul id="taskList">` is an unordered list to display tasks.
- We have linked a `styles.css` file for design and a `script.js` file for functionality. Create those empty files in the same folder as `index.html`.
Save it, open it in a browser, and you will see a basic layout. It is not pretty yet, but we will fix that next!
Step 2: Style It with CSS
Let us make this app look inviting. Open `styles.css` and add this:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
margin: 0;
padding: 20px;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
h1 {
text-align: center;
color: #333;
}
input {
width: 70%;
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px 15px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: #f9f9f9;
padding: 10px;
margin: 5px 0;
border-radius: 4px;
word-wrap: break-word;
}
Why This Works:
- `flex` centers the app on the page (clean and professional).
- The `container` gets a white background and a subtle shadow for depth.
- `input` and `button` are styled to feel modern, with a green button that darkens on hover (`:hover`).
- Each task (`li`) will look like a neat card with `background` and `padding`.
Refresh your browser now (it is starting to look like a real app)! Time to make it work.
Step 3: Add Interactivity with JavaScript
Open `script.js` and add this code:
function addTask() {
// Get the input value
let taskInput = document.getElementById("taskInput");
let taskText = taskInput.value;
// Check if it's not empty
if (taskText === "") {
alert("Please enter a task!");
return;
}
// Create a new list item
let taskList = document.getElementById("taskList");
let newTask = document.createElement("li");
newTask.textContent = taskText;
// Add it to the list
taskList.appendChild(newTask);
// Clear the input
taskInput.value = "";
}
Breaking It Down:
- `document.getElementById("taskInput")` grabs the input field.
- `taskText` stores what you typed.
- `if (taskText === "")` stops blank tasks—good user experience!
- `document.createElement("li")` makes a new list item, and `textContent` fills it with your task.
- `appendChild` adds it to the `<ul>`, and clearing the input (`value = ""`) resets it for the next task.
Save, refresh, and try it: type “Learn JavaScript” and click “Add Task.” Boom🔥 it appears in the list! Add a few more tasks to see it grow.
Test It Out
Your app should now let you add tasks smoothly. If it does not work, check:
- Are all files linked correctly in `index.html`?
- Did you save all changes?
- Any typos in the code? (Copy-paste from here if needed!)
Take It Further
This is a solid start, but teaching means inspiring growth. Here’s a challenge for you (and your readers):
- Add a Delete Button: Can you make each task removable? Hint: Add a `<button>` inside each `<li>` and use `removeChild`.
- Mark Tasks Done: Try adding a checkbox to strike through completed tasks, look up `text-decoration: line-through` in CSS.
Why This Project Matters
This to-do list is not just a fun exercise, it is how real developers build dynamic apps. You have learned to:
- Structure a page with HTML.
- Style it with CSS.
- Use JavaScript to manipulate the DOM (that is the webpage’s skeleton!).
These skills are the foundation for bigger projects, like games or dashboards. Plus, it is a portfolio piece to show off (tweak the colors or add features to make it yours)!
Your Turn
Grab the code, build this app, and let me know how it goes! What tasks did you add? Did you try the challenge? Drop a comment below I do love to hear from you. Keep coding, and keep visiting sunshineihcts.me for more lessons!
You may like:
Copyright © 2018 - 2026 SunshineIHCTS | All rights reserved. Powered by 
Comments section
You need to be logged in to comment, Login or Register.Approved comments:
No comments yet! be the first to comment