productCart

productCart

Поработаем с HTML

Уже умеешь

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

Уже умеешь

Внутри элемента «div» с классом «header» создай еще один элемент «div» с классом «itemContainer»

Уже умеешь

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

Уже умеешь

Внутри элемента «div» с классом «itemContainer» создай элемент «div» с классом «circle»

Внутри элемента «div» с классом «circle» создай элемент «p» с классом «productCounter»

Уже умеешь

Внутри элемента «div» с классом «itemContainer» создай элемент «img» с классом «bag»

Уже умеешь

Выйди из всех div-блоков и создай элемент «h1». Внутри этого элемента укажи текст: «Your product cart»

Уже умеешь

После элемента «h1» создай элемент «h2» с классом «emptyCart». Внутри этого элемента укажи текст: «Your cart is empty. Please reload the page to get the products»

Уже умеешь

После этого создай элемент «div» с классом «productContainer»

Уже умеешь

Внутри элемента «div» с классом «productContainer» создай элемент «div» с классом «functionalContainer»

Уже умеешь

Внутри элемента «div» с классом «functionalContainer» создай элемент «div» с классом «product»

Уже умеешь

Внутри элемента «div» с классом «product» создай элемент «img» и вставь туда картинку продукта

После него создай еще один div-элемент с классом «productDescription»

Уже умеешь

Внутри элемента «div» с классом «productDescription» создай два элемента «p».

В первом напиши название продукта, а во втором цену продукта

Уже умеешь

После элементов «p» создай элемент «button» с классом «remove». Внутри этого элемента укажи текст:

«remove»

Уже умеешь

Выйди из div с классом «product»

Создай div с классом «functions»

Уже умеешь

Внутри div с классом «functions» создай кнопку с классами: «add», «funcBtn».

Укажи у кнопки такое название «+»

Уже умеешь

Внутри div с классом «functions» создай элемент «p» c классом «quantity»

Укажи внутри этого элемента вот такой текст «1»

Внутри div с классом «functions» создай кнопку с классами: «minus», «funcBtn».

Укажи у кнопки такое название «-»

Уже умеешь

Скопируй сам тег с классом «functionalContainer» и все его содержимое.

Вставь скопированный код три раза.

Уже умеешь

В каждом скопированном блоке изменяй название продукта, его цену и фотографию.

Уже умеешь

После последнего скопированного блока создаем тег «hr»

После него создаем новый тег «div» с классом «totalBox»

Уже умеешь

Внутри элемента div с классом «totalBox» создай элемент «p» с текстом: «Total»

После этого создай еще один элемент «p» с классом «totalPrice» и укажи туда вот такой текст: «$ 3900»

Уже умеешь

Выйди из элемента div с классом «totalBox»

После него создай кнопку с классом «delBtn» и укажи туда текст:

«Clear cart»

Немного красоты

Что-то новое

В CSS у нас есть глобальный селектор. Данная штука позволяет нам задать какое-то CSS свойство для всех элементов.

Чтобы обратиться к глобальному селектору, мы ставим «*»

Что-то новое

В CSS мы можем обращаться сразу к нескольким элементам с помощью запятой.

Пример: h1, p{

}

Что-то новое

Обратись к элементам: «h1» и «h2»

Задай им CSS-свойство «text-align: center»

Что-то новое

Обратись к элементу «h2» и укажи у него CSS-свойство «display: none»

Это свойство поможет нам скрыть элемент с нашего сайта

Уже умеешь

Обратись к классу «productContainer» и укажи у него CSS-свойства:

width, height, свойство для центровки div-элементов, свойство для центровки строчных элементов

Уже умеешь

Обратись к элементу «body» и укажи у него CSS-свойство «background-color»

Уже умеешь

Обратись к элементу «img» и укажи у него CSS-свойство «width»

Уже умеешь

Обратись к классу «product» и укажи у него CSS-свойство:

display: flex

Что-то новое

display: flex позволяет нам с лёгкостью располагать элементы на нашем сайте.

Когда мы пишем у контейнера/коробки это свойство, то все элементы автоматически становяться в ряд.

Без display: flex

C display: flex

Уже умеешь

Обратись к классу «productDescription» и укажи у него CSS-свойства:

«margin-left», «text-align: center»

Уже умеешь

Обратись к классу «functionalContainer» и укажи у него CSS-свойства:

«display: flex», «justify-content: space-between»

Что-то новое

Что такое justify-content: space-between?

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

Уже умеешь

Обратись к классу «functions» и укажи у него CSS-свойства:

«display: flex», «flex-direction: column»

Что-то новое

Что такое flex-direction?

Данное CSS-свойство говорит, каким образом должны быть расположены элементы в контейнере.

Стандартное значение этого свойства - row

Уже умеешь

Обратись к элементу «button» и укажи у него какие-нибудь размеры.

Уже умеешь

Обратись к классу «funcBtn» и укажи у него CSS-свойства:

width, border: transparent, color, font-size

Уже умеешь

Обратись к классу «remove» и укажи у него CSS-свойства:

border: none, font-size, color

Уже умеешь

Обратись к классу «functionalContainer» и укажи у него CSS-свойство:

margin-top

Уже умеешь

Обратись к элементу «hr» и укажи у него CSS-свойства:

border: none, height, background-color

Уже умеешь

Обратись к классу «totalBox» и укажи у него CSS-свойства:

display: flex, justify-content: space-between

Уже умеешь

Обратись к элементу «p» в классе «totalBox» и укажи у него CSS-свойства:

font-weight: bold, color

Уже умеешь

Обратись к классу «delBtn» и укажи у него CSS-свойства:

width, border, border-radius, text-transform: uppercase

Уже умеешь

Создай псевдо класс «hover» у элемента с классом «delBtn». Укажи у него CSS-свойства:

color, background-color

Уже умеешь

Обратись к классу «showAnItem» и укажи у него CSS-свойство:

display: block

Уже умеешь

Обратись к классу «header» и укажи у него CSS-свойство:

background-color

Уже умеешь

Обратись к классу «bag» и укажи у него CSS-свойства:

width, height

Уже умеешь

Обратись к классу «itemContainer» и укажи у него CSS-свойства:

display: flex

width

margin: 0px auto

justify-content: space-between

position: relative

Уже умеешь

Обратись к классу «circle» и укажи у него CSS-свойства:

width: 50px;

height: 50px;

background-color

border-radius: 50%

position: absolute

top: 2px

right: -5px

Уже умеешь

Обратись к классу «productCounter» и укажи у него CSS-свойства:

position: relative

top: -7px

left: 7px

color

font-weight: bold

Что-то помощнее

Уже умеешь

Создай переменную «functionalContainers» с помощью ключевого слова «const». Присвой ей выбранные элементы с классом «functionalContainer»

Уже умеешь

Создай переменную «allRemoveBtns» с помощью ключевого слова «const». Присвой ей выбранные элементы с классом «remove»

Уже умеешь

Создай переменную «delBtn» с помощью ключевого слова «const». Присвой ей выбранный элемент с классом «delBtn»

Уже умеешь

Создай переменную «productContainer» с помощью ключевого слова «const». Присвой ей выбранный элемент с классом «productContainer»

Уже умеешь

Создай переменную «emptyCart» с помощью ключевого слова «const». Присвой ей выбранный элемент с классом «emptyCart»

Уже умеешь

Создай пустой список с именем «productsArr»

Уже умеешь

Создай переменную «totalSum» и присвой ей значение - 3900

Уже умеешь

Создай переменную «counter» и присвой ей значение - 4

Уже умеешь

Создай пустой список «namesArr».

Заполни его названиями каких-то продуктов.

Например:

'Iphone', 'Apple Watch', 'Oneplus', 'Mac-mini'

Уже умеешь

Создай пустой список «priceArr».

Укажи туда цену товаров.

Первое значение = цена первого товара.

Например:

1000, 500, 900, 1500

Уже умеешь

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

Уже умеешь

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

Уже умеешь

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

Уже умеешь

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

Уже умеешь

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

Уже умеешь

Создай класс «products»

Уже умеешь

Внутри класса «products» создай конструктор. Передай в него вот такие параметры:

«name», «price»

Внутри фигурных скобок вставь вот такой код:

this.name = name;

this.price = price;

Уже умеешь

Выйди из класса «products»

На следующей строчке создай конструкцию:

«productCounter.innerText = counter»

Уже умеешь

Создай функцию «productsCreation», передай туда параметры:

namesArr, priceArr

Уже умеешь

Внутри функции создай цикл, который будет повторяться такое же количество раз, сколько элементов находиться в списке «namesArr»

Уже умеешь

Внутри цикла создай конструкцию:

productsArr.push(new products(namesArr[i], priceArr[i]));

Уже умеешь

Вызови функцию «productsCreation» передай в нее два параметра:

«namesArr», «priceArr»

Уже умеешь

Cоздай цикл, который будет повторяться такое же количество раз, сколько элементов находиться в списке «allRemoveBtns»

Уже умеешь

Внутри цикла сделайте добавление каждому элементу в списке «allRemoveBtns» действия «click»

Уже умеешь

Внутри функции у слушателя событий добавь команду для уменьшение переменной «totalSum» на число productsArr[i].price

Уже умеешь

Добавь в функцию слушателя событий еще такие команды:

totalPrice.innerText = totalSum;

functionalContainers[i].remove()

Уже умеешь

Выйди из функции слушателя события и добавь вот такую конструкцию:

allAddBtn[i].addEventListener("click", function(){

})

Уже умеешь

Внутри функции слушателя событий добавь конструкцию для увеличения переменной «totalSum» на конструкцию priceArr[i]

Уже умеешь

После этого добавь себе вот такие конструкции в функцию последнего слушателя событий:

Уже умеешь

Выйди из функции слушателя событий и добавь еще один слушатель событий у всех элементов списка «allMinusBtn»

Уже умеешь

Внутри функции слушателя событий добавь конструкцию для уменьшения переменной «totalSum» на конструкцию priceArr[i]

Уже умеешь

Внутри функции слушателя событий добавь вот такие конструкции:

totalPrice.innerText = "$ " + totalSum ;

quantity[i].innerText = parseInt(quantity[i].innerText) - 1;

counter -= 1;

productCounter.innerText = counter;

Уже умеешь

Внутри функции слушателя событий добавь if-блок, вот с таким условием:

parseInt(quantity[i].innerText) === 0

Если условие верно, то вызови у этого элемента «functionalContainers[i]» метод «remove»

Уже умеешь

Вызови у переменной «delBtn» метод «addEventListener» с действием «click»

Уже умеешь

Вызови у элемента «productContainer» метод «remove»

Уже умеешь

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

Уже умеешь

Поменяй текст в переменной «productCounter» на ноль