Я только начал изучать javascript, и я должен создать приложение todo в качестве своего первого проекта, правда в том, что это было не очень дружелюбно, так как мне нужно читать много документации и задавать много вопросов. Одним из самых сложных моментов для меня было получить старт. Первая строка кода для написания. Было непонятно, но я начал, и это сработало.
Приложение, которое я создаю, будет выглядеть, как на изображении ниже:
Не обращайте внимания на мой плохой интерфейс, цель заключалась не в том, чтобы получить интерфейс, а в том, чтобы получить функциональность приложения с использованием javascript.
У меня не очень хорошо развито логическое мышление, но я должен попробовать, да ладно, всему можно научиться. Итак, приступим.
Шаг 1:
Создайте структуру HTML, которая будет строить и выполнять нашу логику javascript, глядя на структуру, которую мы хотим достичь, мы должны принять ввод от нашего пользователя и добавить его в массив с помощью элемента OL или UL. Итак, оттуда мы создаем нашу структуру.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8"> <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>todolist</title> </head> <body> <div class=”background”> <h1>Make Your List</h1> <form action=”” id=”listform”> <input type=”text” id=”inputlist”> <input type=”submit” /> </form> <ol id=”mylists”> </ol> </div> </body> </html>
Идентификаторы назначаются, чтобы мы могли ориентироваться на определенные элементы, а также для упрощения стилизации. Итак, мы переходим прямо к нашему javascript. Но перед этим наше приложение сейчас будет выглядеть так.
Ярко написанный СДЕЛАЙ СПИСОК был добавлен с использованием элемента h1, вы также можете ознакомиться с некоторыми руководствами и статьями по HTML, если вы не знакомы с ним, я сосредоточусь на части javascript в этой статье.
Итак, мы создаем наш javascript как другой файл и связываем его с помощью элемента сценария. Итак, давайте добавим нашу логику.
const todos = []
const form = document.getElementById(‘listform’)
const add = function(e){
e.preventDefault()
let item = document.getElementById(“inputlist”).value
todos.push(item)
display()
document.getElementById(“inputlist”).value = “”
}
const display = function(){
let button = document.createElement(“button”)
let newItem = document.createElement(“li”)
let orderedList = document.getElementById(“mylists”)
todos.forEach(function(todo){
newItem.textContent = todo
button.textContent = “X”
button.addEventListener(“click”,function(){
newItem.remove()
})
newItem.appendChild(button)
orderedList.appendChild(newItem)
})
}
form.addEventListener(‘submit’,add)
Не волнуйтесь, я буду объяснять код по крупицам. Не бойся, я тоже испугался, когда увидел это впервые, но следуй за мной и будь сильным, лол;
const todos = [] const form = document.getElementById(‘listform’)
В первых двух строках моего javascript я создал массив с именем todos, а также создал константу с именем form, в которой я заполнил ее элементами из моего элемента Html с идентификатором listform.
const add = function(e){
e.preventDefault()
let item = document.getElementById(“inputlist”).value
todos.push(item)
display()
document.getElementById(“inputlist”).value = “”
}
Итак, мы создаем функцию под названием add, эта функция позволяет нам поместить содержимое нашего списка ввода в элемент, а затем поместить этот элемент в массив, созданный ранее. Мы вызываем функцию display (), которая поможет нам отобразить элемент на нашем экране. Затем последняя строка кода очищает пространство, это заставляет наш ввод прекращаться после того, как мы его напечатали.
Итак, идем дальше. Следующая строка кода - это часть, в которой мы создали функцию display, которую мы вызвали ранее, чтобы элементы ввода отображались на нашем экране. Итак, давайте объясним.
const display = function(){
let button = document.createElement(“button”)
let newItem = document.createElement(“li”)
let orderedList = document.getElementById(“mylists”)
В первых трех строках мы создаем наши элементы с помощью let и the, поскольку мы хотим иметь возможность удалять наши задачи, мы создали кнопку под названием button, а также элемент li. был создан и добавлен в newItem, а также был получен идентификатор 'mylists' и преобразован в 'orderList'.
Итак, здесь мы пишем наши основные функции, и наше приложение собирается вместе, на этом этапе вы можете сохранить и запустить приложение, чтобы увидеть, что происходит, когда вы вводите некоторые задачи Todo.
todos.forEach(function(todo){
newItem.textContent = todo
button.textContent = “X”
button.addEventListener(“click”,function(){
newItem.remove()
})
мы хотим зациклить массив, используя forEach; Итак, у нас есть написанный выше код, функция todo внутри forEach обозначает каждый элемент LI внутри функции todos, созданной ранее. Во время цикла мы выполняем каждую строку кода внутри этой функции. addEventListener, добавленный к кнопке, позволяет нам удалять задачу всякий раз, когда мы нажимаем кнопку X, созданную ранее. Функция, которая удаляет задачу / список, - это функция «.remove», вызываемая в последней строке.
newItem.appendChild(button) orderedList.appendChild(newItem) }) } form.addEventListener(‘submit’,add)
Сейчас нам остается добавить нашу кнопку и наш newItem, созданный там, где они должны быть, а также добавить addEvenListener в нашу форму, чтобы мы могли отправлять форму каждый раз, когда нажимаем кнопку ввода на клавиатуре.
Обратите внимание, что это очень необходимо, потому что по умолчанию форма обновляется каждый раз, когда мы отправляем ввод, и нам пришлось остановить это действие, поместив эти строки кода в наш предыдущий код.
e.preventDefault()
вы можете подойти и посмотреть на опубликованный нами код, чтобы лучше понять, что я пытаюсь объяснить.
Следуя моим шагам, вы создадите простое приложение для задач, вы даже сможете достичь этого в первый же день, а также помните, что вы учитесь в основном на практике, поэтому откройте свой идеал и код.
Ссылка на мое репо ниже. Https://github.com/prewsh/todoApp
