coloreful keyboard

coloreful keyboard

Привет, HTML!

Уже умеешь

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

Уже умеешь

После этого создаем еще один элемент «div» с классом «keyboard».

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

А теперь немного красок

Уже умеешь

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

Уже умеешь

Обратись к классу «keyboard» и укажи у него CSS-свойства: «width», «height», «border», «margin», «border-radius», «padding», «background-color»

Уже умеешь

Обратись к классу «key» и укажи у него CSS-свойства: «text-align:center», «width», «height», «background-color», «display:inline-block», «margin-right», «margin-bottom»

Уже умеешь

Обратись к элементу «h1» и укажи у него CSS-свойства: «display:inline-block», «color»

Уже умеешь

Обратись к классу «keysection» и укажи у него CSS-свойства: «width:80%», «margin: 20px auto»

Уже умеешь

Обратись к классу «textContainer» и укажи у него CSS-свойства: «width:80%», «margin:0px auto;»

А теперь запустим нашу машину

Уже умеешь

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

Уже умеешь

В этот список, мы вставим буквы английского алфавита:

"q","w","e","r","t","y","u","i","o",

"p","a","s","d","f","g","h",

"j","k","l","z","x","c",

"v","b","n","m","<",">","?","shift"

Уже умеешь

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

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

Уже умеешь

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

Уже умеешь

Внутри цикла создай переменные: «newKey» и «newSpan»

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

Присвой второй переменной конструкцию «document.createElement("span")»

Уже умеешь

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

«newKey.classList.add("key")», «newSpan.innerText = alphabet[letter]»,

newKey.appendChild(newSpan),

keySection.appendChild(newKey)

Уже умеешь

Выйди из тела цикла и на новой строчке создай переменную «allButtons».

Присвой этой переменой конструкцию для выбора всех HTML-элементов с классом «key».

Уже умеешь

Добавь конструкцию «document.addEventListener("keypress", function(event){

}»

Уже умеешь

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

Уже умеешь

Создай if-блок и укажи у него вот такое условие «event.key.toLowerCase() === alphabet[letter]»

Уже умеешь

Внутри этого if-блока создай переменную «randomColorValue» и присвой ей вызов функции «randomColor»

Уже умеешь

Внутри этого if-блока создай переменную «newSpanText» и присвой ей конструкцию «document.createElement("span")»

Уже умеешь

После создания переменных добавь себе вот такие конструкции в код:

«newSpanText.innerText = alphabet[letter]»

«newSpanText.style.color = randomColorValue»

«newSpanText.style.fontSize = "24px"»

Уже умеешь

После этого добавляем вот такую команду

«textContainer.appendChild(newSpanText)»

Уже умеешь

После этого добавляем вот такую команду

«allButtons[letter].style.backgroundColor = randomColorValue»

Уже умеешь

Создай конструкцию «setTimeout(function(){}, 150)»

Уже умеешь

Добавляем в функцию «setTimeout» конструкцию «allButtons[letter].style.backgroundColor = "#ecf0f1"»

Уже умеешь

Создай функцию «randomColor»

Уже умеешь

Создай переменную «red» и присвой ей конструкцию «Math.floor(Math.random() * 256)»

Создай переменную «green» и присвой ей конструкцию «Math.floor(Math.random() * 256)»

Создай переменную «blue» и присвой ей конструкцию «Math.floor(Math.random() * 256)»

Уже умеешь

В функцию «randomColor» добавь конструкцию « return "rgb(" + red + "," + green + "," + blue + ")"»