Building a Simple To-Do List App with JavaScript

Introduction to the Simple To-Do List App

Welcome to the beginner-friendly tutorial on building a Simple To-Do List App with JavaScript! In this project, we'll create a straightforward to-do list application where users can add and delete tasks. This project is an excellent starting point for learning DOM manipulation and event handling in JavaScript.

Setting Up Your Workspace

Creating Your Project Folder and Files

Before we begin coding, let's set up a workspace for our project. Think of this as preparing your art supplies!

Step 1: Create Your Project Folder

Create a new folder on your computer to store all your project files. You can name it "simple-todo-list-app".

On Windows:

Right-click on your desktop.
Choose "New" > "Folder"
Name it "simple-todo-list-app"

On Mac:

Right-click on your desktop.
Choose "New Folder"
Name it "simple-todo-list-app"

Step 2: Get Your Text Editor Ready

You'll need a text editor to write your code. We recommend Visual Studio Code, which is free and beginner-friendly.

Download Visual Studio Code from code.visualstudio.com if you haven't already.
Install it on your computer.
Open VS Code and drag your "simple-todo-list-app" folder into the window.

Step 3: Create Your Project Files

We need three essential files for our project:

index.html - The HTML file is like the blueprint of our app.
styles.css - The CSS file is where we'll add styles to make our app look beautiful.
script.js - The JavaScript file is where the magic happens, making our app interactive.

To create these files:

Open VS Code.
index.html - Click "New File" and save it as "index.html".
styles.css - Click "New File" again and save it as "styles.css".
script.js - Click "New File" once more and save it as "script.js".

🎯 Success Check: You should now have:

A folder named "simple-todo-list-app" on your desktop.
Visual Studio Code open with your folder.
Three empty files: index.html, styles.css, and script.js.

👉 Tip: If you encounter any issues, try restarting VS Code or creating the files using the "File → New File" menu.

Setting Up the HTML Structure

Creating the Simple To-Do List HTML

Let's start by building the HTML structure for our simple to-do list app. HTML is like the foundation of a house, providing the structure for our app.

1. Open "index.html": Open your "index.html" file in your code editor.

2. Add the Simple To-Do List HTML: Copy and paste the following code into your "index.html" file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple To-Do List App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Simple To-Do List</h1>
    <form id="todo-form">
      <input type="text" id="todo-input" placeholder="Add a new task" required>
      <button type="submit">Add Task</button>
    </form>
    <ul id="todo-list"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

Let's break down the HTML structure:

<div class="container">: This is the main container for our app, like a frame for a painting.
<h1>Simple To-Do List</h1>: This is the title of our app, displayed at the top.
<form id="todo-form">: This is the form where users can add new tasks.
<input type="text" id="todo-input" placeholder="Add a new task" required>: This is the input field where users type their tasks.
<button type="submit">Add Task</button>: This button submits the form to add the task to the list.
<ul id="todo-list"></ul>: This unordered list will display the tasks added by the user.
<script src="script.js"></script>: This includes the JavaScript file where we'll write the interactive code.

Save your "index.html" file. Now we have the basic HTML structure in place. In the next step, we'll add some styling to make it look nice!

Styling the Simple To-Do List

Adding CSS Styles

CSS is like the paint and brushes we use to make our app visually appealing. Let's add some styles to our simple to-do list.

1. Open "styles.css": Open the "styles.css" file in your code editor.

2. Add Simple To-Do List Styles: Copy and paste the following CSS code into your "styles.css" file:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: center;
}

h1 {
  margin: 0 0 20px;
  font-size: 1.5rem;
}

form {
  margin-bottom: 20px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  background-color: #f9f9f9;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
}

li button {
  background-color: #ff4d4d;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background-color 0.3s ease;
}

li button:hover {
  background-color: #ff1a1a;
}

Let's understand the CSS rules we just added:

body: Sets the default font, removes margins and padding, and centers the content on the screen.
.container: Styles the container with a white background, padding, rounded corners, and a shadow.
h1: Styles the title with a larger font size and margin.
form: Adds margin to the form.
input[type="text"]: Styles the input field with a fixed width, padding, border, and font size.
button: Styles the add task button with a blue background, white text, and a hover effect.
ul: Removes the default list style.
li: Styles the list items with a light gray background, padding, and flexbox for layout.
li button: Styles the delete button within the list items with a red background and a hover effect.

Save your "styles.css" file. Now, if you open "index.html" in a web browser, you'll see the styled simple to-do list app.

Adding JavaScript for User Interactions

Handling Form Submission and Adding Tasks

Now, let's add JavaScript to make our app interactive! We'll start by handling form submission and adding tasks to the to-do list.

Selecting HTML Elements

First, we need to select the HTML elements we want to work with. We'll select the form, input field, and the unordered list.

1. Open "script.js": Open the "script.js" file in your code editor.

2. Selecting Elements: Copy and paste the following JavaScript code into your "script.js" file:

// Selecting HTML elements
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');

Here, we're using the getElementById method to select the HTML elements with specific IDs.

Handling Form Submission

Next, we'll add an event listener to the form to handle the submit event. We'll prevent the default form submission behavior and call a function to add the task to the list.

3. Handling Form Submission: Copy and paste the following JavaScript code into your "script.js" file:

// Handling form submission
todoForm.addEventListener('submit', (e) => {
  e.preventDefault();
  addTask(todoInput.value);
  todoInput.value = '';
});

In this part, we're using the addEventListener method to listen for the 'submit' event on the form. We prevent the default form submission behavior using e.preventDefault() and then call the addTask function to add the task to the list.

Adding Tasks to the List

Now, let's define the addTask function to add tasks to the to-do list.

4. Adding Tasks: Copy and paste the following JavaScript code into your "script.js" file:

// Adding tasks to the list
function addTask(task) {
  const li = document.createElement('li');
  li.textContent = task;
  todoList.appendChild(li);
}

Here, we create a new list item using createElement, set its text content to the task, and then append it to the to-do list usingappendChild.

Putting It All Together

Now, let's put everything together. If you've been following along and pasting the code into your "script.js" file, it should look like this:

// Selecting HTML elements
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');

// Handling form submission
todoForm.addEventListener('submit', (e) => {
  e.preventDefault();
  addTask(todoInput.value);
  todoInput.value = '';
});

// Adding tasks to the list
function addTask(task) {
  const li = document.createElement('li');
  li.textContent = task;
  todoList.appendChild(li);
}

Adding Functionality to Delete Tasks

Deleting Tasks from the To-Do List

Now, let's add the functionality to delete tasks from the to-do list. We'll create a delete button for each task and handle the click event to remove the corresponding list item.

Adding Delete Functionality

First, we'll define a function to create and add the delete button to each task.

1. Open "script.js": Open the "script.js" file in your code editor.

2. Adding Delete Functionality: Copy and paste the following JavaScript code into your "script.js" file:

// Function to add a delete button to each task
function addDeleteButton(li) {
  const deleteButton = document.createElement('button');
  deleteButton.textContent = 'Delete';
  deleteButton.addEventListener('click', () => {
    li.remove();
  });
  li.appendChild(deleteButton);
}

In this section, we're defining the addDeleteButton function to create a delete button, set its text content to 'Delete', and add an event listener to handle the click event.

Modifying the addTask Function

Now, let's modify the addTask function to include the delete button.

3. Modifying the addTask Function: Copy and paste the following JavaScript code into your "script.js" file:

// Adding tasks to the list
function addTask(task) {
  const li = document.createElement('li');
  li.textContent = task;
  todoList.appendChild(li);
  addDeleteButton(li);
}

Here, we're calling the addDeleteButton function within theaddTask function to add the delete button to each task.

Putting It All Together

Now, let's put everything together. If you've been following along and pasting the code into your "script.js" file, it should now look like this:

// Selecting HTML elements
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');

// Handling form submission
todoForm.addEventListener('submit', (e) => {
  e.preventDefault();
  addTask(todoInput.value);
  todoInput.value = '';
});

// Function to add a delete button to each task
function addDeleteButton(li) {
  const deleteButton = document.createElement('button');
  deleteButton.textContent = 'Delete';
  deleteButton.addEventListener('click', () => {
    li.remove();
  });
  li.appendChild(deleteButton);
}

// Adding tasks to the list
function addTask(task) {
  const li = document.createElement('li');
  li.textContent = task;
  todoList.appendChild(li);
  addDeleteButton(li);
}

Making the Simple To-Do List Responsive

Adjusting for Different Screen Sizes

Let's make our simple to-do list app responsive so that it looks great on various devices. We'll use CSS media queries to adjust the layout for smaller screens.

1. Open "styles.css": Open the "styles.css" file in your code editor.

2. Add Responsive Design Styles: Copy and paste the following CSS code into your "styles.css" file:

@media (max-width: 600px) {
  .container {
    width: 90%;
  }

  input[type="text"] {
    font-size: 0.9rem;
  }

  button {
    padding: 8px 16px;
    font-size: 0.9rem;
  }

  li {
    font-size: 0.9rem;
  }

  li button {
    padding: 4px 8px;
    font-size: 0.7rem;
  }
}

Here, we're using a media query to target screens with a maximum width of 600px (e.g., mobile phones). We adjust the container width, font sizes, and button padding to make the layout more suitable for smaller screens.

Final Thoughts

Congratulations! You've completed the Simple To-Do List App project with JavaScript. You've learned how to create a basic to-do list app where users can add and delete tasks. This project introduced you to DOM manipulation, event handling, and responsive design.

Feel free to customize and expand your simple to-do list app further. You can add more features, improve the design, or even create a mobile version. Happy coding and exploring the world of web development! 🚀