Search Header Logo
coloreful keyboard

coloreful keyboard

Assessment

Presentation

Computers

1st Grade

Hard

Created by

Edukoht Edukohter

Used 9+ times

FREE Resource

60 Slides • 0 Questions

1

coloreful keyboard

Slide image

2

Привет, HTML!

Slide image

3

Уже умеешь

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


4

Slide image


5

Уже умеешь

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

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

6

Slide image


7

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

Slide image

8

Уже умеешь

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

9

Slide image


10

Уже умеешь

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

11

Slide image


12

Уже умеешь

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

13

Slide image


14

Уже умеешь

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

15

Slide image


16

Уже умеешь

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

17

Slide image


18

Уже умеешь

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

19

Slide image


20

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

Slide image

21

Уже умеешь

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

22

Slide image


23

Уже умеешь

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

"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"

24

Slide image


25

Уже умеешь

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

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

26

Slide image


27

Уже умеешь

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

28

Slide image


29

Уже умеешь

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

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

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

30

Slide image


31

Уже умеешь

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

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

newKey.appendChild(newSpan),

keySection.appendChild(newKey)

32

Slide image


33

Уже умеешь

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

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

34

Slide image


35

Уже умеешь

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

36

Slide image


37

Уже умеешь

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

38

Slide image


39

Уже умеешь

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

40

Slide image


41

Уже умеешь

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

42

Slide image


43

Уже умеешь

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

44

Slide image


45

Уже умеешь

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

«newSpanText.innerText = alphabet[letter]»

«newSpanText.style.color = randomColorValue»

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

46

Slide image


47

Уже умеешь

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

«textContainer.appendChild(newSpanText)»

48

Slide image


49

Уже умеешь

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

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

50

Slide image


51

Уже умеешь

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

52

Slide image


53

Уже умеешь

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

54

Slide image


55

Уже умеешь

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

56

Slide image


57

Уже умеешь

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

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

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

58

Slide image


59

Уже умеешь

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

60

Slide image


coloreful keyboard

Slide image

Show answer

Auto Play

Slide 1 / 60

SLIDE