spangeBob's clock

spangeBob's clock

Сегодня мы будем делать интерактивные часы :)

Для начала поработает с HTML

Multiple Choice

А где же мы будем писать весь кодик для часиков?

• <body>

• <head>

• <korobka>

• <meta>

Multiple Choice

Первым делом мы должны задать название для наших часов. Какой тег мы можем с вами для этого использовать?

• <h1>

• <div>

• <heading>

• <Arkadiy pomogi>

Сделай сам!

Добавь тег «h1» в элемент «body».

Multiple Choice

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

• <img>

• border

• <h2>

• <ul>

Сделай сам!

Добавь тег «h2». Укажите у него атрибут «class» с значением «time»

Multiple Select

Ура, теперь у нас есть место, куда мы сможем выводить время. Но сейчас наши часы будут выглядеть слишком скучно. Предлагаю добавить туда какую-нибудь картинку ;) Какой тег и атрибут помогут нам просто вставить картинку?

• scr

• img put

• src

• <img>

• source

Сделай сам!

Добавь тег «img» c атрибутом «src». Не забудь указать ссылку на картинку

Multiple Choice

Ну что же дальше? Мне кажется нам не хватает нашей любимой кнопочки! Каким образом мы можем добавить кнопочку к нам на сайт, чтобы она отображалась в любом браузере?

• <murMay>

• <batton>

• <BUTTON>

• <button>

Сделай сам!

Добавь кнопку на свою страницу и укажи ей название: покажи время

Multiple Choice

Ой, что же случилось с нашим великолепным дизайном? Почему кнопочка находится вместе с фотографией на одной строчке? Нам нужно немедленно это исправить! При помощи какого тега мы можем переместить кнопочку на новую строчку?

• <break line>

• <br>

• <delet>

• <li>

Сделай сам!

Добавь тег «br» перед кнопочкой.

Отлично, мы разобрались со структурой наших часов. Но что же там с дизайном...

Multiple Choice

Какую технологию мы можем использовать для стилизации наших часов?

• HTML

• CSS

• JS

• Python

• C++

Multiple Select

Супер, теперь мы можем использовать CSS-свойства для украшения наших часов! Какое свойство и значениe мы можем использовать, чтобы сделать наш текст в центрике?

• text-align

• center

• margin-top

• <div>

• centrelize

Fill in the Blanks

Хех, не все так просто... А какому элементу мы должны прописать свойство «text-align: center»?

Сделай сам!

Добавь элементу «body» свойство «text-align: center»

Multiple Select

Отлично текст теперь по центру. Но что происходит с нашей картинкой? Почему она все еще такая большая? Какому элементу мы должны сказать, чтобы он стал поменьше и какие свойства мы можем для этого использовать? PS: здесь должно быть выбрано три ответа.

• img

• border

• opacity

• width

• height

Сделай сам!

Задай картинки какие-нибудь размеры

Fill in the Blanks

Хорошо, мы разобрались с нашей фотографией. А как же украсить нашу кнопку? Попробуй написать код для увеличения высоты кнопки на 50px. PS: В этом здании ты должен использовать: «{}», «width:», «button», «50px».

Сделай сам!

Задай кнопке какие-нибудь размеры.

Multiple Choice

Хорошо, а можно ли как-то избавиться от этой надоедливой рамочки? Какое значение мы можем указать для border, чтобы она пропала?

• 4px solid

• none

• 10px dashed yellow

• deleted

Multiple Choice

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

• background-raound

• background-image

• border-radius

• border-definder

Сделай сам!

Добавь кнопке свойство «border: none». Так же сделай кнопочку закругленной.

Multiple Select

Отлично, теперь добавим нашим кнопочкам немного цвета! Какие два свойства помогут нам задать цвет букв и цвет заднего фона?

• border

• background-color

• color

• text-transform

• transition

Multiple Choice

А чего такие буковки маленькие? Надо нам это исправлять! При помощи какого свойства мы можем изменить размер нашего текста?

• font-size

• text-size

• text-smaller

• text-differ

• text-transform

Multiple Choice

Здорово, было бы еще круто вспомнить, при помощи какого свойства мы можем подвинуть нашу кнопку от других элементов?

• resizer

• padding

• space

• magic

• margin

Сделай сам!

Измени задний цвет фона у кнопки, размер шрифта, цвет букв. Сделай отступ сверху от других элементов. Не забудь использовать для этого свойство «margin-top»

Теперь нужно добавить нашему сайту действия. Здесь на поможет JS.

Multiple Select

Для начала нам нужно создать переменную «Time» и присвоить ей найденный элемент «h2». Какая конструкция делает это?

• let time = document.h2

• let time = document

• let time = document.querySelector("")

• let time = document.querySelector("h2");

Fill in the Blanks

Здорово, далее нам нужно проделать туже операцию с кнопочкой. Попробуй создать переменную «btn» и присвоить ей найденный элемент «button». Напиши свой ответ в блоке ниже. PS: для решения этого задания тебе понадобятся: «btn», «let», «querySelector()», «"button"», «document.», «=» .

Fill in the Blanks

Теперь попробуй самостоятельно создать переменную «img» и присвоить ей значение выбранного элемента «img».

Сделай сам!

Создай переменные: time, img, button. Присвой этим переменным выбраные элементы: .time, img, button.

Multiple Choice

Давайте теперь попробуем создать функцию «getTime». Какая конструкция поможет нам это реализовать?

• function getTime

• function getTime{}

• function getTime(){}

• function(){}

Multiple Choice

После этого давайте создадим переменную «fullTime» и присвоим ей новый объект класса «Date». Да, звучит очень сложно, но на самом деле все просто. Попробуй предположить, какая конструкция могла бы помочь нам это сделать?

• let = new Date();

• let fullTime = new Date();

• let fullTime new Date();

• let babaZina = new Date();

Multiple Choice

Теперь нам нужно создать переменную «hours» и присвоить ей значение часов. Для этого мы должны воспользоваться методом «getHours» объекта Date. Как ты думаешь, какая конструкция нам в этом поможет?

• fullTime.getNothing()

• fullTime.getSeconds()

• fullTime.getMinutes()

• fullTime.getHours()

Fill in the Blanks

Попробуй теперь самостоятельно создать переменную «minutes» и присвоить ей значение минут. Для решение этого задание тебе понадобятся: «minutes», «fullTime.», «=», «getMinutes()», «let» .

Fill in the Blanks

Чтобы двигаться дальше, тебе придётся самостоятельно создать переменную «seconds» и присвоить ей значение секунд. Для решения этого задания не забудь использовать метод «getSeconds()».

Сделай сам!

Посмотри на следующий слайд и перепиши код.

Multiple Choice

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

• innerColor

• innerText

• text

• innerMedia

Круто, теперь мы должны создать строчку со временем.

.Здесь нам поможет операция «concatenation». Давайте посмотрим один пример, чтобы разобраться с этим приемом. Если мы сложим "Name" и "mentor", то получим "Namementor". Если мы сложим 5 и 5, то получим 10. Если мы сложим "time: " и 5, то получим "time: 5".

Multiple Choice

Используя знания с предыдущего слайда, попробуй выбрать правильную строчку в формате hours:minutes:seconds

• hours+minutes+seconds

• hours+":"+minutes+":"+seconds

• hours":"minutes":"seconds

Multiple Choice

Воу это было сложно. Также функция может возвращать значения, когда мы ее вызываем. Чтобы наша функция вернула какое-то значение, нужно использовать специальное слово «return». В нашей задачи мы должны вернуть значение переменной hours. Попробуй выбрать конструкцию, которая решит нашу проблему.

• return seconds

• return hours

• something return

Сделай сам!

Посмотри на следующий слайд и перепиши код.

Fill in the Blanks

После этого давайте создадим еще одну полезную функцию «getImage». Попробуйте самостоятельно создать данный элемент. Для решения этой задачи вам понадобятся: «getImage()», «function», «{}»

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

Также в функцию мы можем передавать какие-то параметры. В нашем случае, мы будем передавать туда нашу переменную «hours». То-есть наша функция будет выглядеть воть так: function getImage(hours){}

Multiple Choice

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

• if else

• for

• try catch

• while

Multiple Choice

Давайте попробуем менять картинку в зависимости от времени. Какая команда нам в этом поможет?

• setInterval()

• setAttribute()

Сделай сам!

Посмотри на следующий слайд и перепиши код. PS: только не переписывай, пожалуйста, ту большую ссылку. Найди свою фотографию и вставь ее как второй параметр в метод «setAttribute»

Сделай сам!

Посмотри на следующий слайд и перепиши код. PS: только не переписывай, пожалуйста, ту большую ссылку. Найди свою фотографию и вставь ее как второй параметр в метод «setAttribute»

Multiple Choice

Теперь давайте подумаем. При помощи какой конструкции мы можем задать нашей кнопочки действие «click»? Посмотрите на варианты и выберите правильный ответ.

• button.addEventListener("click"}

• button.addEventListener("click", function(){}

• button.addEventListener()

• button

Сделай сам!

Добавь элементу «button» действие «click».

Сделай сам!

Добавь элементу в функцию метода «addEventListener» конструкцию «setInterval» c параметрами: getTime, 10

Сделай сам!

Добавь элементу в функцию метода «addEventListener» еще одну конструкцию «setInterval» c параметрами: getImage(getTime()) , 5000