Продолжаем наши экзерсисы. В этом уроке мы создадим третий экран. Он простой, как и первый.
Допишем еще один элемент в конец нашего файла для третьего экрана:
Я сразу указал класс. На этом экране у нас должно быть сообщение о том, кто выиграл партию и одна кнопка "Начать сначала". Предлагаю не мудрить и просто скопировать содержимое первого экрана. При это мы изменим текст надписи, уберем одну кнопку и изменим ее текст:
Я еще добавил класс hidden ко второму экрану, чтобы не мешался. Смотрите, что получилось:
С третьим экраном мы справились очень быстро! Кстати, не волнуйтесь по поводу надписи, мы будем менять ее в зависимости от результата игры.
Теперь давайте "причешем" код. Дело в том, что у нас с вами получилось много повторяющегося кода, а это нехорошо. Помните, как у нас получилось с ячейками, когда для того чтобы поправить стиль ячейки нам приходилось делать это 9 раз.
Смотрите, все имеющиеся у нас кнопки мы копировали, а это значит, что их стили одинаковы (на самом деле почти одинаковы). А это значит, что мы можем создать для всех этих кнопок отдельный класс. Назовем его button - кнопка. Здесь мы добавили стили для класса:
А вот так мы поправим кнопки, удалим стиль и добавим класс:
Окей. То же самое относится и к надписям - они одинаковы по форматированию:
Отлично. Можете сохранить файл и перезагрузить страницу. Убедитесь, что класс hidden добавлен ко второму и третьему экрану, а у первого экрана этого класса нет. Когда обновите страницу, вы должны увидеть первый экран. Он немного отличается, от того каким был прежде, но в целом выглядит также.
Давайте оглянемся назад, Через что нам пришлось пройти. Мы создали эскиз интерфейса нашего приложения, а затем последовательно нарисовали его используя технологии html и css.
Все. Теперь осталась только логика игры - само программирование. Этим мы займемся на следующем уроке. Будем двигаться также - потихоньку.
Если остались вопросы - обязательно пишите их в комментариях.
Предыдущий урок | Содержание курса | Следующий урок
Подпишитесь на наш канал, чтобы не пропустить следующие уроки. Другие курсы и навигация по каналу
Новые уроки, новые курсы будут на моем блоге здесь: keklik.me.