Таймер задач: создайте веб-приложение с использованием HTML, CSS и JavaScript

Введение

В этом пошаговом проекте вы научитесь создавать веб-приложение для таймера задач с использованием HTML, CSS и JavaScript. Это веб-приложение позволит пользователям добавлять задачи, запускать и останавливать таймеры для каждой задачи и удалять задачи. В конце проекта у вас будет полностью функциональное веб-приложение для таймера задач с современным и удобным для пользователя интерфейсом.

👀 Предварительный просмотр

Демонстрация веб-приложения для таймера задач

🎯 Задачи

В этом проекте вы научитесь:

Создавать базовую HTML-структуру для веб-приложения для таймера задач
Стилизовать веб-приложение с использованием CSS, чтобы сделать его визуально привлекательным
Реализовывать функциональность JavaScript для добавления задач в приложение
Добавлять функциональность таймера для запуска и остановки таймеров для каждой задачи
Реализовывать возможность удаления задач из приложения

🏆 Достижения

После завершения этого проекта вы сможете:

Обрабатывать ввод пользователя и валидацию в веб-формах
-Динамически запускать и останавливать таймеры с использованием JavaScript
Обновлять и отображать время в удобном для пользователя формате
Удалять элементы из Document Object Model (DOM) с использованием JavaScript
Структурировать и организовать простой проект веб-приложения
Создавать кнопки и прикреплять к ним слушатели событий
Очищать поля ввода после взаимодействия пользователя
Включать и отключать кнопки в зависимости от действий пользователя
Использовать атрибуты данных для хранения информации в HTML-элементах

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/functions -.-> lab-445715{{"Создание веб-приложения для таймера задач"}} javascript/dom_select -.-> lab-445715{{"Создание веб-приложения для таймера задач"}} javascript/dom_manip -.-> lab-445715{{"Создание веб-приложения для таймера задач"}} javascript/event_handle -.-> lab-445715{{"Создание веб-приложения для таймера задач"}} javascript/dom_traverse -.-> lab-445715{{"Создание веб-приложения для таймера задач"}} end

Создайте HTML-структуру

Требования:

Откройте файл index.html.
Создайте базовую HTML-структуру с заголовком, полем ввода для имен задач, кнопкой "Добавить задачу" и пустым списком задач (ul).

Функциональность:

Создайте начальную структуру веб-приложения для таймера задач.

Шаги:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task Timer</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Task Timer</h1>
      <div class="task-input">
        <input type="text" id="taskName" placeholder="Task Name" />
        <button onclick="addTask()">Add Task</button>
      </div>
      <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Эта HTML-структура включает в себя главный контейнер, заголовок, поле ввода для имен задач, кнопку "Добавить задачу" и пустой список задач (ul), который будет заполняться динамически.

✨ Проверить решение и практиковаться

CSS-стилизация

Требования:

Откройте файл style.css.
Добавьте CSS-стили, чтобы сделать веб-приложение визуально привлекательным.

Функциональность:

Примените базовые стили к элементам веб-приложения.

Шаги:

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

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

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

.task-input {
  display: flex;
  margin-bottom: 20px;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  border: none;
  border-bottom: 2px solid #333;
  border-radius: 0;
  outline: none;
}

button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

button:hover {
  background-color: #444;
}

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

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

.timer-controls {
  display: flex;
  gap: 10px;
}

.timer-controls button {
  padding: 8px 16px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

.timer-controls button:hover {
  background-color: #444;
}

.task-time {
  font-size: 1.2rem;
  color: #555;
}

В следующих шагах мы добавим CSS-стили, чтобы обеспечить правильную координацию с функциональностью JavaScript.

✨ Проверить решение и практиковаться

Реализуйте функциональность добавления задач

Требования:

Откройте файл script.js.
Создайте функцию addTask, которая добавляет задачи в список при нажатии кнопки "Добавить задачу".

Функциональность:

Пользователи могут добавлять задачи в список задач.

Шаги:

// Функция для добавления новой задачи
function addTask() {
  const taskNameInput = document.getElementById("taskName");
  const taskName = taskNameInput.value.trim();

  if (taskName === "") {
    alert("Пожалуйста, введите название задачи.");
    return;
  }

  // Создайте новый элемент списка (li)
  const li = document.createElement("li");
  li.innerHTML = `
        <span>${taskName}</span>
        <div class="timer-controls">
            <button onclick="startTimer(this)">Start</button>
            <button onclick="stopTimer(this)">Stop</button>
            <button onclick="deleteTask(this)">Delete</button>
        </div>
        <span class="task-time">0:00</span>
    `;

  // Добавьте новую задачу в список задач (ul)
  const taskList = document.getElementById("taskList");
  taskList.appendChild(li);

  // Очистите поле ввода
  taskNameInput.value = "";
}

Этот код определяет функцию addTask, которая создает новый элемент задачи при нажатии кнопки "Добавить задачу".

✨ Проверить решение и практиковаться

Реализуйте функциональность запуска таймера для задач

Требования:

Расширьте файл script.js.
Создайте функцию startTimer, которая запускает таймеры для задач при нажатии кнопки "Start".

Функциональность:

Пользователи могут запускать таймеры для конкретных задач.

Шаги:

// Функция для запуска таймера
function startTimer(button) {
  // Получите родительский элемент списка (li) для нажатой кнопки
  const li = button.parentElement.parentElement;
  const taskTime = li.querySelector(".task-time");
  const startTime = Date.now();

  // Отключите кнопку "Start" и включите кнопку "Stop"
  button.disabled = true;
  li.querySelector("button:nth-child(2)").disabled = false;

  // Обновите отображение таймера каждую секунду
  const interval = setInterval(() => {
    const elapsedTime = new Date(Date.now() - startTime);
    taskTime.textContent = elapsedTime.toISOString().substr(14, 5);
  }, 1000);

  // Сохраните идентификатор интервала в атрибуте данных для последующего использования
  li.dataset.intervalId = interval;
}

Этот код определяет функцию startTimer, которая запускает таймер при нажатии кнопки "Start".

✨ Проверить решение и практиковаться

Реализуйте функциональность остановки таймера для задач

Требования:

Продолжайте работу в файле script.js.
Создайте функцию stopTimer, которая останавливает таймеры для задач при нажатии кнопки "Stop".

Функциональность:

Пользователи могут останавливать таймеры для конкретных задач.

Шаги:

// Функция для остановки таймера
function stopTimer(button) {
  const li = button.parentElement.parentElement;
  const taskTime = li.querySelector(".task-time");
  const intervalId = li.dataset.intervalId;

  clearInterval(intervalId);
  button.disabled = true;
  li.querySelector("button:nth-child(1)").disabled = false;

  // Отобразите итоговое пройденное время
  const totalTime = taskTime.textContent;
  taskTime.textContent = totalTime;

  button.disabled = true;
}

Этот код определяет функцию stopTimer, которая останавливает таймер при нажатии кнопки "Stop".

✨ Проверить решение и практиковаться

Реализуйте функциональность удаления задач

Требования:

Продолжайте работу в файле script.js.
Создайте функцию deleteTask, которая позволяет пользователям удалять задачи при нажатии кнопки "Delete".

Функциональность:

Пользователи могут удалять задачи из списка.

Шаги:

// Функция для удаления задачи
function deleteTask(button) {
  const li = button.parentElement.parentElement;
  li.remove();
}

Этот код определяет функцию deleteTask, которая удаляет задачу при нажатии кнопки "Delete".

✨ Проверить решение и практиковаться

Запуск приложения

Откройте index.html в веб-браузере.

Протестируйте приложение, добавляя расходы и проверяя, правильно ли обновляются список расходов и сводка.
Эффект страницы выглядит так:

✨ Проверить решение и практиковаться

Резюме

Поздравляем! Вы успешно создали веб-приложение для таймера задач с использованием HTML, CSS и JavaScript. Пользователи могут добавлять задачи, запускать и останавливать таймеры для каждой задачи и удалять задачи по необходимости. Это веб-приложение предоставляет современный и удобный для пользователя интерфейс для отслеживания времени, затраченного на конкретные задачи или проекты.