Мы все пришли к тому моменту в нашей жизни, что у нас есть много дел, которые мы даже забываем сделать и делаем все хуже, это самые важные из них, которые мы забываем, это причинило много вреда и снизил уровень компетентности в обществе, чтобы решить эту проблему, нам нужно программное обеспечение, которое позволяет пользователю создавать список вещей, которые они хотели бы делать в течение дня, недели, месяца или даже года, а также пользователь может удалить уже выполненные, это позволит пользователю отслеживать то, что он / она должен делать, и то, что они уже сделали, одно из которых является приложением списка дел.
Приложение To-Do list считается одним из самых первых приложений, которые может создать каждый новый программист, и сегодня я собираюсь научить вас, ребята, как я создал свое первое приложение TO-DO с использованием HTML, CSS и Vanilla JavaScript.
Итак, давайте познакомимся с тем, что мы пытаемся создать, приложение TO-DO - это программное обеспечение, которое позволяет пользователю создавать списки вещей, которые они хотели бы сделать позже в день, неделю, месяц или даже год, и удалять те. они достигли этого, как только они это сделают, это позволит им хорошо планировать свою жизнь и достичь баланса между работой и личной жизнью, так что теперь вы знаете, насколько важно это приложение, которое вы пытаетесь создать, поможет пользователям, я ' Я здесь не для того, чтобы мотивировать вас, я здесь, чтобы собраться с мыслями и сделать что-то очень интересное.
HTML
В нашем HTML мы собираемся создать базовый скелет HTML и добавить только 7 (семь) тегов, а именно:
<main> tag,
это представляет собой все приложение и содержит все остальные теги внутри него.
<h1> tag,
это просто для отображения имени приложения, в нашем случае мы будем называть проект «ДОБАВИТЬ К ДЕЛАТЬ».
<ul> tag,
это будет содержать списки, которые наш javascript будет генерировать, когда мы создадим список дел.
<div>
с классом add-item это не делает ничего слишком серьезного, он содержит текстовый ввод и кнопку, поэтому я могу стилизовать их отдельно от основного тега.
<input type=” text ”>
именно здесь пользователь может ввести то, что он хочет сделать, чтобы наша функция JavaScript могла использовать это и манипулировать им.
<button>
тег кнопки будет выполнять здесь основную функцию.
CSS
CSS - это вещь предпочтений пользователя, это означает, что нет определенного способа стилизации, то, что я считаю потрясающим, может быть для вас ужасным, поэтому стилизуйте каждый элемент так, как вам нравится, но помните, что пользователь должен найти ваш дизайн крутым.
JavaScript
Здесь происходит чудо, когда мы создаем и добавляем элементы в наше приложение, не затрагивая наш HTML-файл.
во-первых, нам нужно настроить таргетинг на элементы в нашем HTML-документе, используя
document.querySelector(“ ”) or document.getElementById(“ ”) or document.getElementByTagName(“ ”) or document.getElementByClassName(“ ”),
после этого мы затем создаем массив, в котором будет храниться весь список, который мы создадим позже, затем напишем функцию для добавления элементов, наши элементы здесь - это списки, которые мы собираемся создать,
затем мы добавляем прослушиватель событий щелчка к нашей основной кнопке с функцией addItem, то есть кнопкой, добавляющей тег ‹li› к тегу ‹ul›,
помните, каждый список, который мы создаем, помещается в массив, который мы создали ранее, поэтому мы можем легко получить доступ к конкретному списку, который нам нужен, это будет очень удобно, когда мы захотим удалить любой список из созданных.
На данный момент я заканчиваю эту статью здесь, но обещаю завершить ее, как только у меня будет время.
