01:10
Урок 50: Финальный проект

Курс по программированию на JavaScript

Урок 50: Финальный проект

Добро пожаловать в финальный урок нашего курса по JavaScript! В этом уроке мы объединим все изученные технологии и разработаем полный проект. Также подведем итоги курса и обсудим дальнейшие планы по обучению.

Разработка полного проекта

В финальном проекте мы создадим простое веб-приложение для управления задачами (To-Do List), используя HTML, CSS, JavaScript, и интеграцию с локальным хранилищем для сохранения данных.

Создание структуры проекта

Создайте структуру проекта, включающую следующие файлы:

// Структура проекта
/
|-- index.html
|-- styles.css
|-- script.js

HTML

Создайте HTML-структуру для вашего приложения:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>To-Do List</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <h1>To-Do List</h1>
 <input type="text" id="task-input" placeholder="Add a new task...">
 <button id="add-task">Add Task</button>
 <ul id="task-list"></ul>
 <script src="script.js"></script>
</body>
</html>
// HTML структура создана

CSS

Добавьте стили для вашего приложения:

/* styles.css */
body {
 font-family: Arial, sans-serif;
 background-color: #f4f4f4;
 margin: 0;
 padding: 20px;
}
h1 {
 color: #333;
}
#task-input {
 padding: 10px;
 width: 300px;
 margin-right: 10px;
}
#add-task {
 padding: 10px 20px;
}
#task-list {
 list-style-type: none;
 padding: 0;
}
#task-list li {
 padding: 10px;
 background-color: #fff;
 border: 1px solid #ddd;
 border-radius: 5px;
 margin-bottom: 10px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
#task-list li button {
 background-color: #ff4444;
 color: #fff;
 border: none;
 padding: 5px 10px;
 border-radius: 5px;
}
// CSS стили добавлены

JavaScript

Добавьте функциональность с помощью JavaScript:

// script.js
document.addEventListener('DOMContentLoaded', () => {
 const taskInput = document.getElementById('task-input');
 const addTaskButton = document.getElementById('add-task');
 const taskList = document.getElementById('task-list');

 addTaskButton.addEventListener('click', () => {
 const taskText = taskInput.value.trim();
 if (taskText !== '') {
 addTask(taskText);
 taskInput.value = '';
 }
 });

 taskList.addEventListener('click', (event) => {
 if (event.target.tagName === 'BUTTON') {
 const taskItem = event.target.parentElement;
 taskList.removeChild(taskItem);
 saveTasks();
 }
 });

 function addTask(taskText) {
 const taskItem = document.createElement('li');
 taskItem.textContent = taskText;
 const deleteButton = document.createElement('button');
 deleteButton.textContent = 'Delete';
 taskItem.appendChild(deleteButton);
 taskList.appendChild(taskItem);
 saveTasks();
 }

 function saveTasks() {
 const tasks = [];
 taskList.querySelectorAll('li').forEach(taskItem => {
 tasks.push(taskItem.firstChild.textContent);
 });
 localStorage.setItem('tasks', JSON.stringify(tasks));
 }

 function loadTasks() {
 const tasks = JSON.parse(localStorage.getItem('tasks'));
 if (tasks) {
 tasks.forEach(taskText => addTask(taskText));
 }
 }

 loadTasks();
});
// Функциональность добавлена

Подведение итогов курса

Поздравляем! Вы успешно завершили курс по программированию на JavaScript. Мы изучили основные концепции, такие как переменные, функции, объекты, массивы, циклы, асинхронное программирование, работа с DOM, события, а также продвинутые темы, такие как модули, работа с API, деплой и многое другое.

Дальнейшие шаги в обучении могут включать углубленное изучение JavaScript, фреймворков, таких как React, Vue или Angular, и создание более сложных проектов. Вы также можете изучить серверную разработку с Node.js и базы данных, а также улучшить свои навыки в области тестирования и безопасности.

Продолжайте практиковаться и исследовать новые возможности JavaScript. Удачи в вашем дальнейшем обучении и разработке!

Упражнения

Упражнение 1: Добавление возможности редактирования задач

Добавьте возможность редактирования задач в вашем To-Do List приложении. Позвольте пользователю кликнуть на задачу, чтобы отредактировать ее текст.

Решение:

// script.js (обновленный)
document.addEventListener('DOMContentLoaded', () => {
 const taskInput = document.getElementById('task-input');
 const addTaskButton = document.getElementById('add-task');
 const taskList = document.getElementById('task-list');

 addTaskButton.addEventListener('click', () => {
 const taskText = taskInput.value.trim();
 if (taskText !== '') {
 addTask(taskText);
 taskInput.value = '';
 }
 });

 taskList.addEventListener('click', (event) => {
 if (event.target.tagName === 'BUTTON') {
 const taskItem = event.target.parentElement;
 taskList.removeChild(taskItem);
 saveTasks();
 } else if (event.target.tagName === 'LI') {
 editTask(event.target);
 }
 });

 function addTask(taskText) {
 const taskItem = document.createElement('li');
 taskItem.textContent = taskText;
 const deleteButton = document.createElement('button');
 deleteButton.textContent = 'Delete';
 taskItem.appendChild(deleteButton);
 taskList.appendChild(taskItem);
 saveTasks();
 }

 function editTask(taskItem) {
 const newText = prompt('Edit task:', taskItem.firstChild.textContent);
 if (newText !== null) {
 taskItem.firstChild.textContent = newText;
 saveTasks();
 }
 }

 function saveTasks() {
 const tasks = [];
 taskList.querySelectorAll('li').forEach(taskItem => {
 tasks.push(taskItem.firstChild.textContent);
 });
 localStorage.setItem('tasks', JSON.stringify(tasks));
 }

 function loadTasks() {
 const tasks = JSON.parse(localStorage.getItem('tasks'));
 if (tasks) {
 tasks.forEach(taskText => addTask(taskText));
 }
 }

 loadTasks();
});
// Возможность редактирования задач добавлена

Объяснение: Мы добавили функцию editTask, которая позволяет пользователю редактировать текст задачи при клике на нее.

Упражнение 2: Сортировка задач по дате добавления

Добавьте возможность сортировки задач по дате добавления. Задачи, добавленные позже, должны отображаться в начале списка.

Решение:

// script.js (обновленный)
document.addEventListener('DOMContentLoaded', () => {
 const taskInput = document.getElementById('task-input');
 const addTaskButton = document.getElementById('add-task');
 const taskList = document.getElementById('task-list');

 addTaskButton.addEventListener('click', () => {
 const taskText = taskInput.value.trim();
 if (taskText !== '') {
 addTask(taskText);
 taskInput.value = '';
 }
 });

 taskList.addEventListener('click', (event) => {
 if (event.target.tagName === 'BUTTON') {
 const taskItem = event.target.parentElement;
 taskList.removeChild(taskItem);
 saveTasks();
 } else if (event.target.tagName === 'LI') {
 editTask(event.target);
 }
 });

 function addTask(taskText) {
 const taskItem = document.createElement('li');
 taskItem.textContent = taskText;
 const deleteButton = document.createElement('button');
 deleteButton.textContent = 'Delete';
 taskItem.appendChild(deleteButton);
 taskList.insertBefore(taskItem, taskList.firstChild);
 saveTasks();
 }

 function editTask(taskItem) {
 const newText = prompt('Edit task:', taskItem.firstChild.textContent);
 if (newText !== null) {
 taskItem.firstChild.textContent = newText;
 saveTasks();
 }
 }

 function saveTasks() {
 const tasks = [];
 taskList.querySelectorAll('li').forEach(taskItem => {
 tasks.push(taskItem.firstChild.textContent);
 });
 localStorage.setItem('tasks', JSON.stringify(tasks));
 }

 function loadTasks() {
 const tasks = JSON.parse(localStorage.getItem('tasks'));
 if (tasks) {
 tasks.reverse().forEach(taskText => addTask(taskText));
 }
 }

 loadTasks();
});
// Возможность сортировки задач по дате добавления добавлена

Объяснение: Мы изменили функцию addTask, чтобы новые задачи добавлялись в начало списка, и функцию loadTasks, чтобы задачи отображались в порядке их добавления.

Категория: JavaScript | Просмотров: 13 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: