interactiveCity

interactiveCity

Home

Open in new tab

Copy link

Босс веба тут

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

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

Подсказочки

Создай тег «h1» и укажи туда название своего города

Подсказочки

Создай пять кнопок

И укажи у них вот такие названия:

Offices

Countryside

Playground

Houses

Industries

Подсказочки

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

Подсказочки

Создай тег «img». Ссылку на картинку ты получишь на следующем слайде.

Когда ты открыл сайт, то нужно нажать правой кнопкой мыши на картинку.

Потом выбрать пункт "Copy image address"

Эту ссылку вставить в "src" у картинки

You can open this webpage in a new tab.

Copy link

Open in new tab

Добавь красоты

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

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

Подсказки

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

 background-color

  text-align: center;

  font-family

  color

  font-size

Подсказки

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

margin-top

Подсказки

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

width: ; height: ; border:

  border-radius:

  background-color:

  border:

  padding:

  color:

  font-size:

  margin-right:

  transition:

  margin-top:

  margin-bottom:

Подсказки

Напиши конструкцию button:hover{

}

Укажи внутри нее свойство для смены цвета текста и зданего фона элемента.

Подсказки

Обратись к элементу «img» и задай ему какие-нибудь размеры

Погорячее

Что-то новое

Сегодня мы еще раз познакомимся со списком.

Что-то новое

Если ты посмотришь в проект, то мы автоматически добавили тебе список «imgMenu». В нем хранятся все картинки для сегодняшнего проекта.

Что-то новое

Каждая из картинок в данном списке имеет свой индивидуальный номер. Все элементы в списке начинаются с 0. Так что номер первой картинки будет как раз нолик.

Что-то новое

Номер последний картинки будет на единицу меньше чем количество всех картинок в списке. Так как счет мы начинали с нуля. Посмотри на пример, чтобы лучше понять списки.

Что-то новое

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

PS: попробуй ввести индекс больше 3 или меньше нуля ;)

Вместо фрукта у тебя должна появиться фотография с ошибкой 404

listsExample - Replit

You can open this webpage in a new tab.

Copy link

Open in new tab

Где-то делали

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

PS: когда мы создаем переменные, которым присваиваем выбранные элементы, то лучше использовать ключевого слово «const», а не «let», так как значение не меняется.

Где-то делали

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

Что-то новое

Сегодня мы познакомимся с циклом со счетчиком. Цикл нужен нам для выполнения каких-то одинаковых операций фиксированное количество раз.

Что-то новое

У цикла вот такой синтаксис:

for(let i = 0; i < 5; i++){

console.log("I love Edukoht");

}

i - это счетчик, сначала его значение равно 0.

i < 5 - это условие, которое контролирует, какое количетсов раз будет выполняться цикл

i++ - это команда для увеличения перменной i на еденицу. Благодаря этой команде наш цикл сможет завершить работу.

loopExample - Replit

You can open this webpage in a new tab.

Copy link

Open in new tab

Что-то новое

Напиши конструкцию:

for(let i = 0; i < allButtons.length;i++){

}

allButtons.length - это команда, которая возвращает нам количество элементов в списке «allButtons».

Что-то новое

При помощи цикла ты можешь получать все элементы из списка по порядку.

Пример:

const fruits = ["apple", "mango", "banana"];

for(let i = 0; i < fruits.length; i++){

console.log("Hi I'm " + fruits[i] + " and my index number is: " + i);

}

Что-то новое

Внутри цикла напиши конструкцию:

allButtons[i]

Вызови у нее слушатель событий со значениями:

«mouseover» и function(){}

Что-то новое

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

 mainImg.src =imgMenu[i];

img.src - это конструкция, при помощи которой мы можем менять значение в атрибуте «src»

То-есть менять фотографию с одной на другую

Что-то новое

Внутри цикла вызови еще один слушатель событий у конструкции «allButtons[i]» со значениями:

«mouseout» и function(){}

Что-то новое

Внутри функции этого слушателя событий смени картинку на последний элемент из списка «imgMenu»

PS: не забудь воспользоваться конструкцией imgMenu.length - 1

PSS: можно конечно и простым числом обойтись :)