Whish List

Whish List

Начинаем с HTML

Уже делали

Создай элемент «div» и укажи у него класс «container».

Уже делали

Внутри элемента «div» создай заголовок первого уровня и укажи у него название своего списка желаний.

Уже делали

Не выходя из «div» с классом «container», создай еще один div-элемент с классом «addBox»

Уже делали

Внутри элемента «div» с классом «addBox» создай элемент «input» с классом «elementInput».

Там же создай кнопку с классом «addAnItem» и укажи у нее название «add»

Уже делали

Создай еще один элемент «div» с классом «itemBox»

А где же CSS?

Попробуй сам

Попробуй сделать примерно такой же дизайн самостоятельно

Уже делали

Обратись к элементу «body». Укажи у него css-свойства: «text-align», «background-color»

Уже делали

Обратись к классу «container». Укажи у него css-свойства: «width», «margin:0px auto», «border», «padding», «background-color», «color», «margin-top».

Уже делали

Обратись к классу «elementInput». Укажи у него css-свойства: «width», «border-radius», «border: none», «padding».

Уже делали

Обратись к классу «addAnItem». Укажи у него css-свойства: «width», «background-color», «color», «border-radius», «padding», «border:none»

Уже делали

Обратись к классу «itemBox». Укажи у него css-свойства: «margin-top», «width», «height», «text-align:left;», «position:relative»

Уже делали

Обратись к классу «item». Укажи у него css-свойства: «margin:0px», «padding: 0px», «display:inline-block»

Уже делали

Обратись к классу «del». Укажи у него css-свойства: «position: absolute», «top:0px», «right:0px», «background-color», «color», «border:none», «padding», «border:none», «border-radius: 4px»

Самое сладкое

Уже делали

Создай переменную «add» и присвой ей выбранный элемент с классом «addAnItem»

Создай переменную «elementInput» и присвой ей выбранный элемент с классом «elementInput»

Уже делали

Создай переменную «itemCounter» и присвой ей значение ноль.

Создай переменную «container» и присвой ей выбранный элемент с классом «container»

Уже делали

Добавь переменной «add» слушатель событий с параметрами: «click» и  function(){}

Внутри функции слушателя событий создай переменную «item» и присвой ей конструкцию «elementInput.value»

Уже делали

Внутри функции слушателя событий вызови функцию «elementCreation» и передай туда параметр «item»

Уже делали

Выйди из слушателя событий.

Создай функцию с именем «elementCreation» и передай туда параметр «textValue».

Что-то новое

При помощи конструкции «document.createElement("имя элемента")» мы можем создавать любой HTML-элемент.

Пример:

document.createElement("p") - эта конструкция создаст новый p-элемент, но он не отобразиться на нашем сайте.

Что-то новое

Создай переменную «newP» и присвой ей конструкцию «document.createElement("p")»

Создай переменную «newDel» и присвой ей конструкцию «document.createElement("button")»

Создай переменную «newItemBox» и присвой ей конструкцию «document.createElement("div")»

Что-то новое

Мы можем добавлять нашим элементам классы. Для этого мы должны воспользоваться конструкцией: «название элемента.classList.add("название класса")»

Что-то новое

Добавь переменной «newP» класс «item».

Добавь переменной «newDel» класс «del».

Что-то новое

Также у нас есть возможность добавлять «id» HTML-элементам с помощью JS.

Для этого мы можем воспользоваться конструкцией:

«Название элемента.id = Название id»

Пример:

document.querySelector(".addAnItem").id = newId

Что-то новое

Добавь переменной «newDel» id «itemCounter».

Добавь элементу «newItemBox» класс «itemBox»

Что-то новое

Вызови конструкцию «innerText» у элемента «newP» присвой ей значение переменной «textValue»

Вызови конструкцию «innerText» у элемента «newDel» присвой ей значение «Delete»

Что-то новое

Чтобы добавить созданный HTML-элемент на наш сайт, мы должны воспользоваться конструкцией:

имя элемента.appendChild(Название элемента, который вставляем)

PS: Мы вызываем метод «appendChild» у элемента, в который будем вставлять наш новый HTML-элемент.

Что-то новое

Вызови метод «appendChild» у элемента «newItemBox» и передай туда параметр «newP».

Вызови метод «appendChild» у элемента «newItemBox» и передай туда параметр «newDel».

Что-то новое

Добавь элементу «newItemBox» id «itemCounter»

Добавь элемент «newItemBox» в элемент «container»

PS: не забудь воспользоваться конструкцией «appendChild»

Уже делали

Вызови у переменной «newDel» слушатель событий с параметрами: «click», fucntion(){}

Уже делали

Внутри функции слушателя событий создаем переменную «deleteItem» и присваиваем ей конструкцию «document.getElementById(this.id)»

Вызываем конструкцию «deleteItem.remove()»

Уже делали

Выходим из функции слушателя событий и создаем конструкцию для увеличения переменной «itemCounter» на единицу.