passwordScreen

passwordScreen

Уже привычный HTML

Уже умеешь

Создай тег «div» и укажи у него id «loginContainer»

Уже умеешь

Внутри тега «div» с id «loginContainer» создай элемент «div» с id «passwordBox»

Уже умеешь

Внутри тега «div» с id «passwordBox» создай тег «span» с id «password»

Уже умеешь

Выйди из элемента div с id «passwordBox»

Внутри элемента div с id «loginContainer» создай кнопку с классом «button»

Укажи у нее название «1»

Уже умеешь

После этого создай еще 8 кнопок с классом «button».

Укажи у них такие названия: «2», «3», «4», «5», «6», «7», «8», «9»

Уже умеешь

После этого создай еще одну кнопку с классом «funcButton» и id «cancelButton»

Внутри кнопки укажи вот такое название «❌»

Уже умеешь

После этого создай еще одну кнопку с классом «button»

Внутри кнопки укажи вот такое название «0»

Уже умеешь

После этого создай еще одну кнопку с классом «funcButton» и id «checkButton»

Внутри кнопки укажи вот такое название «✓»

Приукрасим немного!

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

Разбираемся

Обратись к элементу с id «loginContainer»

Укажи у него CSS-свойства:

 width, background-color,  border-radius,

text-align:center, padding, margin:0px auto,

position:relative

Разбираемся

Обратись к элементу с id «passwordBox»

Укажи у него CSS-свойства:

margin-top, width: 70%, height: 35px,

border-radius, background-color, margin: 20px auto

Разбираемся

Обратись к элементу «body»

Укажи у него CSS-свойство « background-color»

Разбираемся

Обратись к элементу с классом «button»

Укажи у него CSS-свойства:

width, height, border-radius

border:none, color, font-size

margin-top, margin-right, margin-bottom

Разбираемся

Обратись к элементу с классом «funcButton»

Укажи у него CSS-свойства:

width, height, border-radius

border:none, color, font-size

margin-top, margin-right, margin-bottom

Разбираемся

Обратись к элементу с id «password»

Укажи у него CSS-свойства:

display:inline-block, margin-top

Разбираемся

Обратись к классу «errorPasswordAnimation»

Укажи у него CSS-свойство:

animation:shake 0.5s 1

Multiple Choice

Какую ключевую конструкцию мы используем для создания анимации в CSS?

• @keyFrames

• @animation

• function animation(){}

• animtion

Разбираемся

Создай анимацию с именем «shake»

Multiple Choice

Какое CSS-свойство мы можем использовать для поворота элемента на какой-нибудь градус?

• transform: scale(2)

• margin-top: 20px

• transform: rotate(180deg)

• rotate: 280deg;

Разбираемся

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

0%{

  transform: rotate(0deg);

 }

 25%{

   transform: rotate(45deg);

 }

Разбираемся

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

50%{

  transform: rotate(-45deg);

 }

  75%{

  transform: rotate(0deg);

 }

Идем в гости к боссу

Апгрейд знаний

Давайте теперь будем чаще использовать ключевое слово «const»

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

Апгрейд знаний

const отлично подходит для хранения элементов выбранных с помощью конструкций:

document.querySelector(), document.querySelectorAll()

Уже умеем

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

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

Уже умеем

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

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

Уже умеем

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

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

Уже умеем

Создай переменную «passwordNumber» и присвой ей какую-нибудь числовую комбинацию из четырех чисел.

Уже умеем

Добавь слушатель событий переменной «cancelButton»

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

Если длинна списка «passwordValue» больше нуля

Уже умеем

Если условие верно, то выполняем вот такой код:

passwordValue = passwordValue.slice(0, passwordValue.length - 1);

 password.innerText = password.innerText.slice(0, password.innerText.length - 1);

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

Slice - это метод, который позволяет нам сокращать наш список.

Пример:

const animals = ['ant', 'bison', 'camel'];

console.log(animals.slice(1));

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

Пример:

const animals = ['ant', 'bison', 'camel'];

console.log(animals.slice(2));

Уже умеем

Добавь слушатель событий переменной «checkButton»

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

Если длинна списка «passwordValue» больше нуля,

то выполняем вот такой код:

if(checkTheNumber(passwordValue, passwordNumber)){

changeColor(true);

  }

 else{

   changeColor(false);

  }

Уже умеем

Вызови у переменной «numberButton» вот такую конструкцию «forEach(button => button.addEventListener("click", function(){

 }

))»

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

const array = ['a', 'b', 'c'];

array.forEach(element => console.log(element));

Уже умеем

Создай if-блок и вызови в условии функцию «checkTheLength» с параметром «passwordValue»

Уже умеем

Если функция «checkTheLength» возвращает правду, то выполняем вот такой код:

добавляем в конце списка «passwordValue» значение «button.innerText»

Вызываем конструкцию «innerText» у переменной «password» и ставим += "*"

Уже умеем

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

Уже умеем

Создаем if-блок и указываем у него условие:

parseInt(checkNumber.toString().replace(/,/g,"")) === mainNumber

Уже умеем

Если условие верное, то возвращаем true

Если нет, то возвращаем false

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

parseInt - это функция, которая конвертирует строку в число.

parseInt("10") = 10

parseInt("100") = 100

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

toString - это метод, который конвертирует список в строку.

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

replace - это метод, который изменяет какие-то символы в строке один раз.

Пример:

"Hello".replace("l","e") = "Heelo"

Что такое /,/g?

/,/g - это конструкция, которая позволяет убрать все запятые из нашей строчки.

Символ между двумя слешами можно изменить и применять эту конструкцию не только с запятой

Почему == != === ?

== - это оператор сравнения, который делает приведение типов. Тоже самое, что ты видел(а) с конструкцией «parseInt()»

"2" == 2 - правда

=== - это строгий оператор сравнения, который не делает приведение типов.

"2" === 2 - какая-то чушь, типы не равны. Слева строка, а справа Number.

Уже умеешь

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

Уже умеешь

Создай if-блок и укажи у него условие:

Если длинна переменной «number» меньше четырех, то нужно вернуть true

Иначе возвращаем false

Уже умеешь

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

Уже умеешь

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

Если переменная «answer» равняется true, то блок с паролем должен стать зеленым. Через 400 миллисекунд он должен изменить цвет на исходный.

Уже умеешь

Укажи else-блок, который будет выполнять вот такие действия: блок с паролем должен стать красным и к нему должен добавиться класс «errorPasswordAnimation».

Уже умеешь

Не выходя из else-блока, создай удаление у элемента «password» класса «errorPasswordAnimation» и перекраску этого элемента в исходный цвет через 400 миллисекунд.