slideShow

slideShow

Время HTML

Уже умеем

Создай в элементе «body» тег «div» и укажи у него класс «photoAddingBox».

Уже умеем

Внутри элемента «div» создай тег абзаца с текстом "Put the link on the image here:" После этого укажи тег «input» с классом «link».

Уже умеем

Внутри элемента «div» создай еще один тег абзаца с текстом "Put the name of the image here". После этого укажи тег «input» с классом «name».

Уже умеем

Внутри элемента «div» создай еще один тег абзаца с текстом "Choose the photo creation date". После этого укажи тег «input» с классом «date» и типом «date».

Уже умеем

Внутри элемента «div» создай еще один тег абзаца с текстом «You have 0 photo(s)» и классом «numberOfPhotos». После этого укажи тег для переноса строчных элементов на новую строчку.

Потом создай кнопку с классом «add» и названием «Add a photo».

Уже умеем

Выйди из элемента «div» с классом «photoAddingBox»

На новой строчке создай еще один «div» с классом «tvBox»

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

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

Уже умеем

Внутри элемента «div» с классом «mainScreen»

Создай тег картинки с классом «imgChange»

Уже умеем

После картинки создай еще два тега абзаца с классами: «nameOfThePhoto» и «dateOfThePhoto»

Укажи в этих абзацах вот такие слова: «Text», «Date»

Уже умеем

Выйди из элемента «div» с классом «mainScreen»

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

Внутри этого элемента создай четыре кнопки:

«Start», «Stop», «Next», «Back».

Укажи этим кнопкам классы:

«start», «stop», «next», «back».

CSS - это наше все

Уже умеем

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

Уже умеем

Сделай вот такой дизайн карточки для добавления фотографии.

Уже умеем

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

Обратись к классу «photoAddingBox» и укажи у него вот такие свойства: width, height, background-color, margin: 0px auto, text-align: center, color, border-radius

Уже умеем

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

Воспользуйся вот таким селектором в CSS «.photoAddingBox button»

Укажи у него вот такие свойства: margin-top, background-color, color, padding,  border:none, border-radius.

Уже умеем

Обратись к классу «tvBox» и указываем у него ширину и высоту.

Задаем рамки, задаем закругление.

Указываем свойство «margin: 50px auto»

Уже умеем

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

position: relative

 width: 90%

 height:90%

background-color

margin: 15px auto

Уже умеем

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

width: 80%

 height:100%

Свойство для смены отображения элемента на блочно-строчный

 margin:0px

Свойство для центровки строчных элементов

Свойство для смены цвета букв

Уже умеем

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

text-align: center;

 position: absolute;

 width: 19%;

 height:100%;

Свойство для смены цвета заднего фона

Свойство для смены отображения элемента на блочно-строчный

margin-left: 3px;

Уже умеем

Воспользуйся вот таким селектором «.controPanel button»

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

Уже умеем

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

Время JS

Уже умеем

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

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

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

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

Уже умеем

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

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

Уже умеем

Создай класс с именем «photo». Укажи внутри него конструктор с параметрами: link, name, date.

Сделай так, чтобы для каждого параметра была создана локальная переменная объекта.

Уже умеем

Добавь кнопке c классом «add» слушатель событий c действием «click»

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

Добавь внутрь этого метода конструкцию для создания нового объекта класса «photo»

Уже умеем

Вызови у переменной «numberOfPhotos» конструкцию «innerText» и присвой ей вот такую конструкцию:

"You have " + photoGallery.length + " photo(s)";

Уже умеем

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

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

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

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

Уже умеем

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

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

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

Уже умеем

Укажи у переменной «start» слушатель событий c действием «click»

В функции этого метода сделай присвоение переменной «number» значения ноль.

Уже умеем

Создай переменную с именем «auto» и присвой ей функцию «setInterval» c параметрами: function, 2000

Уже умеем

Укажи в функции конструкции «setInterval» if-блок с условием «number < photoGallery.length»

Если условие правда, то выполняем вот такой код:

вызываем функцию «photoChanger» с параметром «number»

увеличиваем переменную «number» на единицу

Уже умеем

Если условие не правда, то выполняем вот такой код:

присваиваем переменной «number» значение 0

Уже умеем

Выходим из функции конструкции «setInterval»

Внутри функции слушателя событий у переменной «start» добавляем слушатель событий для переменной «stop»

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

Уже умеем

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

Добавляем кнопке «next» слушатель событий. Внутри функции этого слушателя событий добавляем if-блок с условием «number < photoGallery.length - 1»

Уже умеем

Если условие верно, то выполняем вот такой код:

увеличиваем переменную «number» на единицу

вызываем функцию «photoChanger» и передаем туда параметр «number»

Уже умеем

Если условие не верно, то выполняем вот такой код:

присваиваем переменной «number» значение ноль

вызываем функцию «photoChanger» с параметром «number»

Уже умеем

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

Добавляем кнопке «back» слушатель событий. Внутри функции этого слушателя событий добавляем if-блок с условием «number < 1»

Уже умеем

Если условие верное, то выполняем вот такой код:

присваиваем переменной «number» конструкцию «photoGallery.length - 1»

вызываем функцию «photoChanger» и передаем параметр «number»

Уже умеем

Если условие не верно, то выполняем вот такой код:

уменьшаем переменную «number» на единицу

вызываем функцию «photoChanger» и передаем параметр «number»

Уже умеем

Создаем функцию «photoChanger», передаем ей параметр «number»

Внутри функции пишем вот такой код:

imgChange.src = photoGallery[number].link;

  nameOfThePhoto.innerText = photoGallery[number].name;

  dateOfThePhoto.innerText = photoGallery[number].date;