Привет! В этой статье я немного расскажу о своем первом JS-проекте. Я создал простое приложение для еженедельного планирования, используя HTML, CSS и JavaScript.
Когда пользователь заходит на сайт, изображение ниже представляет собой целевую страницу (да, мы любим немного цвета!), с которой он будет взаимодействовать. На странице есть заголовок, раскрывающееся меню для выбора определенного дня недели, раздел ввода для введите задачи, которые будут отображаться на экране, и раздел еженедельного фокуса, в котором выделяются ключевые приоритетные задачи недели. В разделе еженедельного фокуса в настоящее время отображаются данные с предположением, что пользователь уже ввел данные. Он извлекается из файла db.json.
Пользователь может ввести задачи, которые он хочет выполнить в определенный день, введя их в поле с пометкой description. После нажатия кнопки Add New Task задача будет добавлена к My Tasks в виде списка.
Раздел Weekly Focus служит напоминанием о «обязательных» задачах недели. Пользователь может удалить задачи, добавленные в Weekly Focus, нажав кнопку COMPLETED после выполнения задач.
Чтобы немного погрузиться в серверную часть, я реализовал этот проект, используя JavaScript для извлечения данных и создания прослушивателей событий, HTML для создания элементов веб-страницы и управления DOM и >CSS, чтобы сделать его таким же красочным, как кажется.
В моем файле index.js я взял элемент формы и добавил событие отправки, чтобы получить любой ввод, отображаемый в форме. Функция fetchData имеет: метод fetch(), содержащий путь ресурса к нашим данным в качестве аргумента, метод then(), содержащий объект ответа (представление всего HTTP-ответа), который мы подвергаем методу json() для извлечения фактического JSON. содержимое в нашем файле db.json и последний метод then(), который возвращает второе обещание и анализирует основной текст как JSON.
В функцию buildWeeklyPlanner мы передаем один аргумент, создаем кнопку и элементы абзаца, которые позволяют пользователю вводить и добавлять новые элементы и добавлять их в наш файл index.html. В функции handleDelete мы реализуем делегирование события, используя свойство target для доступа к объекту элемента и используя метод удаления для удаления указанного элемента.
Наконец, у нас есть функции displayList и deletePriority, которые создают элементы DOM, реализуют прослушиватели событий и добавляют элементы в DOM. Функция удаления почти аналогична функции извлечения данных. Разница в том, что в функции удаления мы указываем элементы, которые должны быть извлечены из нашего API, и используем метод DELETE.
Вот и все для файла index.js. Чтобы просмотреть остальные файлы кода {index.js, style.css и db.json}, вы можете проверить мой репозиторий проекта github.
Как начинающий инженер-программист, я часто ищу ресурсы, которые помогут мне лучше понять и реализовать концепцию. Я ссылался на множество хороших материалов, когда разрабатывал этот конкретный проект. Когда дело дошло до манипулирования DOM, этот конкретный блог действительно помог мне выйти из тупика, и я определенно рекомендую его другим новичкам!
