Interactive Task List

From Basic to Advanced: Complete DOM Manipulation Course

Sobre a Aula

Interactive To-Do List

In this final project, we will apply the concepts learned to create a practical application: an interactive to-do list. This application will allow you to add, mark as completed, and delete tasks. Let’s create the HTML, CSS, and JavaScript step by step.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive To-Do List</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
  <h1>To-Do List</h1>
  <!-- Input field for a new task -->
  <input type="text" id="newTask" placeholder="Add a new task">
  <!-- Button to add a new task -->
  <button onclick="addTask()">Add</button>
  <!-- List to display tasks -->
  <ul id="taskList"></ul>
</div>

<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.container {
  max-width: 600px;
  margin: 50px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

input[type="text"] {
  width: 70%;
  padding: 8px;
  margin-right: 8px;
}

button {
  padding: 8px;
  cursor: pointer;
}

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

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.completed {
  text-decoration: line-through;
  color: #888;
}

JavaScript (script.js):

// Function to add a new task to the list
function addTask() {
  const newTaskInput = document.getElementById('newTask');
  const newTaskText = newTaskInput.value.trim();

  // Check if the field is not empty
  if (newTaskText !== '') {
    const taskList = document.getElementById('taskList');
    const newTaskItem = document.createElement('li');
    
    // Add the HTML for the task item
    newTaskItem.innerHTML = `
      <span>${newTaskText}</span>
      <button onclick="markCompleted(this)">Completed</button>
      <button onclick="removeTask(this)">Remove</button>
    `;
    
    // Add the item to the list
    taskList.appendChild(newTaskItem);
    
    // Clear the input field
    newTaskInput.value = '';
  }
}

// Function to mark a task as completed
function markCompleted(completeButton) {
  const taskItem = completeButton.parentNode;
  
  // Toggle the 'completed' class to mark/unmark as completed
  taskItem.classList.toggle('completed');
}

// Function to remove a task
function removeTask(removeButton) {
  const taskItem = removeButton.parentNode;
  
  // Remove the item from the list
  taskItem.remove();
}

Explanation

HTML: We created a simple structure with a text field for adding tasks, an add button, and a list to display tasks.
CSS: We styled the application to make it visually appealing and responsive.
JavaScript: We implemented functions to add tasks, mark as completed, and remove tasks. We used DOM manipulation and CSS classes to reflect the state of tasks.

This project incorporates key concepts learned, such as DOM manipulation, events, best practices, and optimizations. Use this interactive project to solidify your understanding and feel free to expand it with additional features. Now it’s all up to you!

Once you finish, move on to the next project.

Siga-me

Entrar na conversa