Web development is an exciting field that enables you to create interactive, visually appealing applications. This article will guide you through building your very first web application: a To-Do List App. This project is an excellent introduction to HTML, CSS, and JavaScript, giving you a hands-on approach to frontend development.
New to Frontend Development?
If you're new to frontend development, check out our previous guide: Frontend Development for Beginners: Your Essential Starting Point to learn the basics of HTML, CSS, and JavaScript!
| Table of Contents: |
|---|
| 1. What is a Web Application? |
| 2. Setting Up Your Development Environment |
| 3. Core Frontend Technologies |
| 4. Building the To-Do List App |
| - Structuring the HTML |
| - Styling with CSS |
| - Adding Functionality with JavaScript |
| 5. Expanding the To-Do App: Features and Design |
| 6. Conclusion |
1. What is a Web Application?
A web application is a software program that runs in a web browser. Unlike static websites, web applications are interactive, allowing users to perform tasks like adding tasks to a to-do list, completing them, and deleting them. You’ve probably used countless web applications, from social media platforms to online shopping websites.
2. Setting Up Your Development Environment
Before you start coding, make sure your environment is ready:
- Code Editor: Use a code editor like VS Code, Sublime Text, or Atom.
- Browser: Any modern browser will work. Google Chrome or Firefox are popular choices.
- Basic Setup: Create a project folder where you’ll save your HTML, CSS, and JavaScript files.
3. Core Frontend Technologies
- HTML (HyperText Markup Language): This is the foundation of your web app. It defines the structure and layout of the application.
- CSS (Cascading Style Sheets): CSS styles your HTML content, making it visually appealing.
- JavaScript: JavaScript adds interactivity to your web app, allowing users to perform actions like adding or deleting tasks.
4. Building the To-Do List App
Let’s dive into building your To-Do List Application. We’ll start by writing the HTML, then style it with CSS, and finally, add functionality with JavaScript.
Let’s set up a simple project structure:
- Create a new folder for your project.
- Inside it, create:
- index.html: The main HTML file.
- style.css: For styling the app.
- script.js: Your JavaScript code.
You can now link the CSS and JavaScript files to your HTML using simple <link> and <script> tags. 🎨
a) Structuring the HTML
Start with the basic layout of your web application. For example, if you're building a To-Do List, your HTML might look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To-Do App</title>
<!-- Link to the external CSS file for styling -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Main container for the To-Do App -->
<section class="container">
<!-- Application heading -->
<h1 id="header" class="header">To-Do App</h1>
<!-- Form for adding new tasks -->
<form class="new-task-container box">
<!-- Label for the input field to describe its purpose -->
<label for="new-task">Add New Task</label>
<!-- Input field where the user can enter the task -->
<input type="text" id="new-task" />
<!-- Button to submit the form and add the new task -->
<input type="submit" id="addTask" value="Add Task" />
</form>
<!-- Section to display the incomplete tasks -->
<div class="todo-list box">
<h2>Incomplete Tasks</h2>
<!-- Unordered list to contain the incomplete tasks -->
<ul id="items">
<!-- Example list items representing incomplete tasks -->
<li class="item">
<input type="checkbox" />
<label>Here Task Name</label>
</li>
<li class="item">
<input type="checkbox" />
<label>Here Task Name</label>
</li>
<li class="item">
<input type="checkbox" />
<label>Here Task Name</label>
</li>
</ul>
</div>
<!-- /todo-list -->
<!-- Section to display the completed tasks -->
<div class="complete-list box">
<h2>Completed Tasks</h2>
<!-- Unordered list to contain the completed tasks -->
<ul>
<!-- Example list item representing a completed task -->
<li class="item">
Here Task Name
<!-- Button to delete the completed task -->
<button class="delete">Delete</button>
</li>
</ul>
</div>
<!-- /complete-list -->
</section>
<!-- /container -->
<!-- Link to the external JavaScript file for functionality -->
<script src="script.js"></script>
</body>
</html>
This sets up a simple interface where users can input tasks and see them listed.
b) Styling with CSS
Now, let’s style the app to make it visually appealing. Here’s a basic example:
* {
box-sizing: border-box; /* Ensure consistent element sizing */
}
.container {
background: #add4f6; /* Light blue background for the container */
padding: 25px;
max-width: 760px; /* Maximum width of the container */
margin: 25px auto; /* Center the container */
overflow: hidden;
border-radius: 10px; /* Rounded corners */
border: 4px solid #7fa2de; /* Border color */
font-family: sans-serif; /* Font for the entire app */
}
h1,
h2 {
margin: 0;
text-align: center;
text-transform: uppercase; /* Capitalized headings */
}
h2 {
font-size: 20px;
border-bottom: 1px solid #7fa2de; /* Divider below the title */
padding-bottom: 10px;
color: #575cab; /* Heading color */
}
.new-task-container {
text-align: center; /* Center alignment for new task input */
}
.box {
padding: 10px 15px;
border: 2px solid #7fa2de;
border-radius: 5px; /* Slightly rounded task boxes */
background: #fff; /* White background for task lists */
margin: 15px 0;
}
.todo-list {
float: left;
width: 46%; /* Incomplete tasks take up 46% width */
}
.complete-list {
float: right;
width: 46%; /* Completed tasks take up 46% width */
}
ul {
list-style: none; /* Remove default list styling */
padding: 0;
margin: 0;
}
li {
padding: 10px;
border-bottom: 1px dotted #ccc; /* Dashed separator between tasks */
}
.update {
float: right;
background-color: blue;
color: white;
border: 0;
padding: 3px 5px; /* Styling for the update button */
}
.delete {
float: right;
background-color: red;
color: white;
border: 0;
padding: 3px 5px; /* Styling for the delete button */
}
This makes your app look clean and structured. You can customize the colors and layout as you like! 🎨
c) Adding Functionality with JavaScript
Now comes the fun part – adding JavaScript to make the app interactive! For a To-Do List, you want users to be able to add tasks and mark them as completed.
// Select DOM elements and assign them to variables
let newTask = document.querySelector('#new-task');
let form = document.querySelector('form');
let todoUl = document.querySelector('#items');
let completeUl = document.querySelector('.complete-list ul');
// Create a new task item with a checkbox and label
let createTask = function(task) {
let listItem = document.createElement('li');
let checkBox = document.createElement('input');
let label = document.createElement('label');
label.innerText = task;
checkBox.type = 'checkbox';
listItem.appendChild(checkBox);
listItem.appendChild(label);
return listItem;
}
// Add a new task
let addTask = function(event) {
event.preventDefault();
let listItem = createTask(newTask.value);
todoUl.appendChild(listItem);
newTask.value = ""; // Clear input field after adding
// Bind new task to complete task function
bindInCompleteItems(listItem, completeTask);
}
// Move task to completed list
let completeTask = function() {
let listItem = this.parentNode;
let deleteBtn = document.createElement('button');
deleteBtn.innerText = 'Delete';
deleteBtn.className = 'delete';
listItem.appendChild(deleteBtn);
// Remove checkbox and move task to completed list
let checkBox = listItem.querySelector('input[type="checkbox"]');
checkBox.remove();
completeUl.appendChild(listItem);
// Bind delete button to delete function
bindCompleteItems(listItem, deleteTask);
}
// Delete task from completed list
let deleteTask = function() {
let listItem = this.parentNode;
let ul = listItem.parentNode;
ul.removeChild(listItem);
}
// Bind incomplete tasks to complete task function
let bindInCompleteItems = function(taskItem, checkboxClick) {
let checkBox = taskItem.querySelector('input[type="checkbox"]');
checkBox.onchange = checkboxClick;
}
// Bind completed tasks to delete function
let bindCompleteItems = function(taskItem, deleteButtonClick) {
let deleteButton = taskItem.querySelector('.delete');
deleteButton.onclick = deleteButtonClick;
}
// Loop through incomplete tasks to bind complete task function
for(let i = 0; i < todoUl.children.length; i++) {
bindInCompleteItems(todoUl.children[i], completeTask);
}
// Loop through completed tasks to bind delete function
for(let i = 0; i < completeUl.children.length; i++) {
bindCompleteItems(completeUl.children[i], deleteTask);
}
// Add task on form submit
form.addEventListener('submit', addTask);
5. Expanding the To-Do App: Features and Design
At this stage, you’ve created a fully functional To-Do List App that allows users to add, complete, and delete tasks. However, there are several ways you can expand and enhance the app both in terms of functionality and design:
a) Add Task Editing: You could allow users to edit a task after it’s been added. This would involve adding an "Edit" button next to each task, enabling users to modify the task name before saving it again.
b) Improve the Design: You can enhance the design by using CSS frameworks like Tailwind CSS or Bootstrap to make the app look more modern and responsive on different screen sizes. Experiment with animations for smoother transitions when tasks are added or removed.
6. Conclusion
🎉 Congratulations! You’ve successfully built your first web application, a To-Do List App, using HTML, CSS, and JavaScript. 🚀 Along the way, you learned how to structure your application using HTML, style it with CSS, and bring it to life with JavaScript. ✨ This project introduced you to the core aspects of frontend development, and you’re now equipped with the basic skills to build more complex applications. 💻
Top comments (0)