Урок 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;
}
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, чтобы задачи отображались в порядке их добавления.