interactiveCity

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

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

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

Offices

Countryside

Playground

Houses

Industries

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

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

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

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

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

Обратись к элементу «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

Создай переменную «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 на еденицу. Благодаря этой команде наш цикл сможет завершить работу.

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

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: можно конечно и простым числом обойтись :)