moodTest

moodTest

Наш друг ведет всех за собой

Уже умеем

Создай тег «header»

Уже умеем

Внутри элемента «header» создай тег «img» и вставь туда какую-нибудь картинку.

В нашем случае это мороженое

Уже умеем

Внутри элемента «header» создай тег «h1» и напиши туда какой-нибудь текст.

В нашем случае это:

«What icecream describes your mood»

Уже умеем

Выходим из элемента «header». После него создаем элемент div с классом «result»

Уже умеем

Внутри элемента div c классом «result» создаем тег «h1» c каким-нибудь текстом.

В нашем случае это:

«Your mood is like:»

Уже умеем

Внутри элемента div c классом «result» создаем тег «img» с классом «resultImg».

Здесь можно не указывать картинку, так как она будет меняться относительно нашего выбора.

Уже умеем

Внутри элемента div c классом «result» создаем тег «br».

Уже умеем

Внутри элемента div c классом «result» создаем тег «button» c классом «lickMore». Указываем у кнопки какое-нибудь название:

«Lick one more time»

Уже умеем

Выходим из элемента div c классом «result».

После него создаем еще один div-элемент и указываем у него класс «main»

Уже умеем

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

еще один div-элемент c классом «itemBox»

Уже умеем

Внутри элемента div c классом «itemBox» создаем элемент «span» с каким-нибудь вопросом.

В нашем случае:

How do you feel right now?

Уже умеем

Внутри элемента div c классом «itemBox» создаем элемент «div» с классом «selectItemContainer»

Уже умеем

Внутри элемента div c классом «selectItemContainer» создаем элемент «button» с классами: «mood» и «selector»

Уже умеем

Внутри элемента button создаем элемент «img» с классом «btnIcon» и указываем ему какую-нибудь картинку

Уже умеем

Делаем еще такие же две кнопки с картинками.

Уже умеем

Выходим из div-элемента с классом «itemBox» и создаем еще один div с классом «itemBox»

Уже умеем

Внутри этого div-элемента с классом «itemBox» создаем span. Внутри этого тега пишем вопрос.

В нашем случае:

How do you think you look like?

Уже умеем

Внутри этого div-элемента с классом «itemBox» создаем div с классом «selectItemContainer»

Уже умеем

Внутри этого div-элемента с классом «selectItemContainer» создаем button с классами: «look» и «selector». Внутри кнопки создаем тег «img» с классом «btnIcon»

Уже умеем

Внутри этого div-элемента с классом «selectItemContainer» создаем еще один тег «button» с классами: «look» и «selector». Внутри кнопки создаем тег «img» с классом «btnIcon»

Уже умеем

Выходим из div-элемента «itemBox». Внутри тега с классом «main» создаем кнопку с классом «lick» и названием «Lick»

Да будет цвет!

Попробуй сам!

Попробуй сделать вот такой дизайн!

У тебя есть 30 минут на это задание

PS: цвета могут различаться

Уже умеем

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

font-family:

Уже умеем

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

width:

Уже умеем

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

display: flex;

justify-content: center;

width: 100%;

height: ;

background-color: #8EC5FC;

background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

Уже умеем

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

margin: 0px auto;

display: flex;

justify-content: space-between;

align-items: center;

margin-top: ;

width: 70%;

border-bottom: 2px solid grey;

padding: ;

Уже умеем

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

margin-left:

Уже умеем

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

width: ;

Уже умеем

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

background-color: ;

border-radius: ;

color: ;

Уже умеем

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

width: 50%;

display: block;

margin: 20px auto;

height: ;

border-radius: ;

border: none;

font-size: ;

background-color: ;

box-shadow: ;

color: ;

Уже умеем

Обратитесь к псевдо классу «hover» у классу «lick» и укажи свойство:

background-color: ;

Уже умеем

Обратитесь к псевдо классу «active» у классу «lick» и укажи у него свойства:

box-shadow: 0px 5px 2px rgba(149, 165, 166, 0.9);

transform: translateY(5px);

Уже умеем

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

height: ;

width: ;

Уже умеем

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

margin-left: ;

Уже умеем

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

font-size: ;

Уже умеем

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

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

display: none;

Уже умеем

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

width: ;

transition: 2s;

animation: rotate 2s 1;

Уже умеем

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

width: 100%;

height: ;

background-color: ;

color: ;

font-size: ;

box-shadow: 0px 10px 2px rgba(149, 165, 166, 0.9);

Уже умеем

Обратитесь к псевдо классу «hover» у элементу «button» в классе «result» и укажи у него свойства:

background-color: ;

Уже умеем

Обратитесь к псевдо классу «hover» у элементу «button» в классе «active» и укажи у него свойства:

transform: translateY(5px);

box-shadow: 0px 5px 2px;

Уже умеем

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

color: ;

Уже умеем

Создай анимацию «rotate»

Уже умеем

from{

transform: rotateY(0deg)

}

to{

transform: rotateY(360deg)

}

Он уже здесь

Уже умеем

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

Уже умеем

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

Уже умеем

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

Уже умеем

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

Уже умеем

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

Уже умеем

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

Уже умеем

Создай переменную «icecreamFotos» и присвой ей выбранный элемент c шестью реономными фотографиями.

Уже умеем

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

Уже умеем

Создай переменную «combinations» и присвой ей пустой список.

А что дальше?

Сейчас мы будем делать комбинации. Каждая из них будет выдавать нам разную фотографию. В ключ «selectorButtons» мы указываем номера кнопок на которые нажимает пользователь. В ключ «img» мы указываем картинку из нашего списка картинок.

Уже умеем

Добавь в этот список объект:

{"selectorButtons": [0,3],

"img":icecreamFotos[0],

}

Уже умеем

Добавь в этот список объект:

{"selectorButtons": [2,3],

"img":icecreamFotos[2],

},

Уже умеем

Добавь в этот список объект:

{"selectorButtons": [2,3],

"img":icecreamFotos[2],

},

Уже умеем

Добавь в этот список объект:

{"selectorButtons": [0,4],

"img":icecreamFotos[3],

},

Уже умеем

Добавь в этот список объект:

{"selectorButtons": [1,4],

"img":icecreamFotos[4],

},

Уже умеем

Добавь в этот список объект:

{"selectorButtons": [2,4],

"img":icecreamFotos[5],

},

Уже умеем

Создай переменную «selectedButtons» и присвой ей пустой список.

Уже умеем

Вызови у переменной «moodBtns» метод «forEach». Внутри этого метода укажи:

(button) => {

}

Уже умеем

Внутри фигурных скобок добавь параметру «button» слушатель событий с параметрами: «click», function(){

}

Уже умеем

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

Уже умеем

Внутри функции слушателя событий смени цвет переменной «button» на какой-нибудь другой.

Уже умеем

Посмотри на следующий слайд. Тебе нужно будет поменять два параметра, чтобы сделать работу еще двух кнопок. Ты можешь скопировать весь блок, который изображен на предыдущей фотографии.

Меняем название списка, у которого вызываем конструкцию «lookBtns». В функцию «clearTheBtnBackground» передаем параметр «lookBtns».

Уже умеем

Указываем у переменной «lick» с параметрами: "click", function(){}

Уже умеем

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

Уже умеем

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

Что такое toString()?

toString() позволяет нам перевести данные в строку.

На следующих слайдах примеры ;)

Уже умеем

Внутри цикла со счетчиком укажи условие: combinations[i].selectorButtons.toString() == selectedButtons.toString()

Уже умеем

Если условие верное, то меняем атрибут «src» у переменной «resultImg» на combinations[i].img;

Уже умеем

Выходим из цикла. Внутри функции у слушателя событий элемента «lick» добавляем:

смену у элемента «main» параметра «display» на «none»

смену у элемента «result» параметра «display» на «block»

Уже умеем

Выходим из слушателя событий и добавляем элементу «lickMore» слушатель событий с параметрами: "click", function(){}

Уже умеем

В функции слушателя событий присвой переменной «selectedButtons» пустой список.

Уже умеем

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

смену у элемента «main» параметра «display» на «block»

смену у элемента «result» параметра «display» на «none»

Уже умеем

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

Уже умеем

Внутри этой функции вызови у параметра «arr» конструкцию «forEach»

Попробуй вспомнить, как мы можем сменить у каждого элемента в списке «arr» цвет заднего фона на исходный.

Уже умеем

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

Уже умеем

Внутри цикла добавь if-блок вот с таким условием:

selectors[i].style.backgroundColor == "rgb(231, 76, 60)"

Если ты выбирал(а) другой цвет при нажатии на кнопку, то укажи вместо "rgb(231, 76, 60)" свой цвет.

Уже умеем

Если условие верно, то сделай добавление в список «selectedButtons» элемента «i»