#День7

const hamburger = document.querySelector('.hamburger'); - Здесь мы создаем переменную hamburger. Переменная простым языком это область памяти, которая может хранить какое то значение. Переменная создается с помощью слова const или let. Разница в том что переменные, созданные с помощью let можно менять по ходу дела, а с помощью const нет. Знак равно говорит о том, что я что то кладу в свою переменную hamburger. document - это тоже переменная, но зарезервированная, тоесть она существует всегда и содержит весь мой html документ. Далее я с помощью функции «querySelector» в своем документе хочу найти класс hamburger. Функция это какое либо действие. Тоесть я говорю, что мне в документе нужно выбрать селектор и передаю его в скобочках. Селектор я передаю в одинарных ковычках, потому что в функция требует, чтобы ее аргумент был строковый. В JS строки определяются одинарными кавычками по краям. В результате моя переменная hamburger будет содержать в себе див с классом «hamburger» и все его дочерние элементы. Делать это не обязательно, но так удобнее работать. Каждый раз когда я захочу что то поделать с этим блоком, я просто обращусь к переменной hamburger.

const hamburgerNav = document.querySelector('.hamburger\-nav'); - Тоже самое, только с классом «hamburger-nav»

hamburger.onclick = function () { hamburger.classList.toggle('open\-menu'); hamburgerNav.classList.toggle('open\-menu'); }; - В этой конструкции я обращаюсь к стандартному событию onclick, которое есть у каждого элемента, и после знака равно описываю поведение, которое будет происходить по клику на гамбургер. Здесь я создаю целую функцию, которая будет выполняться. Функция создается с помощью зарезервированного слова function. Далее в скобках нужно указать аргументы, которые принимает функция. Здесь мне аргументы не требуются, поэтому скобки пустые. Далее в фигурных скобках описываются действия, которые выполняет эта функция. В двух строчках я выполняю одинаковые действия для двух разных переменных. Как мы помним, в переменной hamburger лежит див с гамбургером, а в переменной hamburgerNav наше мобильное меню. Я обращаюсь к свойству переменной «classList», которое содержит все классы этого элемента, и вызываю функцию toggle с аргументом в виде названия класса «open-menu».

Что делает функция toggle? Она либо добавляет класс «open-menu» элементу, либо убирает. Она сама определяет, есть ли уже этот класс у элемента. Напомню, что при наличии этого класса у нас выезжает меню и гамбургер превращается в крестик.

Результаты сегодняшнего дня на ваших экранах и по ссылке http://site2hday.ru ? продолжим завтра

#День7

День 7

Сегодня все время занималась мобильным меню.

Пришлось задействовать
язык программирования JavaScript.

Вкратце зачем он нужен сайту. Он добавляет интерактивности. Тоесть позволяет выполнять действия, не перезагружая страницу. Пример полезности JavaScript прост. Может кто то помнит, раньше в соцсети Вконтакте новые сообщения можно было посмотреть, обновив страницу. Тоесть нужно было чтобы страница перезагрузилась с актуальными данными с сервера. Сейчас же мы общаемся, прямо в чате. Все это благодаря JavaScript.

Зачем он сейчас моему сайту? Мне нужно чтобы меню на смартфоне открывалось без перезагрузки страницы.

Для этого я сначала отобразила мобильное меню и придала стилей, чтобы оно выглядело на весь экран. Меню сделано с помощью списка. <ul> - парный корневой тэг списка, а элементы списка - тэг <li>. Также я сделала у меню position:absolute и left:-100%. Тем самым как будто меню сдвинуто влево на всю свою ширину. Все это для того, чтобы потом с помощью JavaScript (далее JS) вытянуть его обратно с анимацией. Анимация достигается засчет свойства css transition. Это свойство как бы говорит элементу, что если свойства элемента например позиция, прозрачность, размер и т.д будут менять, нужно делать это с задержкой, указанной в этом элементе. Получается как бы покадровое изменение позиции.

Для JS я создала отдельную папку «js» в корне сайта и создала там файл «script.js». В html этот скрипт можно подключить с помозью тега <script>, указав в атрибуте src путь к файлу скрипта. Так же в этом тэге можно сразу писать JS код. Подключать JS желательно как можно ниже, я подключила перед закрывающим тэгом , потому что JS должен выполняться, когда прогрузиться вся страница. Иначе он просто выдаст ошибку, потому что обращается к элементу, которого еще нет. ?‍♀️

Скрипт у меня получился небольшой. Расскажу что там означает каждая строчка.

#День7

До и После
#День6

#День5

День 5

Сегодня я работала в основном со стилями.

Из того что новое:

- Мне надоело что у моего сайта на вкладке браузера иконка документа, поэтому я решила туда поставить свою. Для этого нужно сделать файл favicon.ico, положить его в корень сайта и в теге <head> прописать через <link> путь до него. И еще указать пару атрибутов. Создала я этот файл очень просто. Нашла в интернете генератор favicon, загрузила свое лого и скачала уже готовый favicon.

- Есть такой трюк, как margin: 0 auto. Это позоволяет отцентровать элемент по горизонтали. Именно так я выровняла счетчик дней на главной странице

- box\-shadow - Свойство тени. Задала я тень с помощью 5 параметров: Сдвиг по оси x, сдвиг по оси y, радиус размытия, растяжение и цвет. Теперь шапка отбрасывает приятную тень ?

- border . На странице с историей я решила дни обвести в кружочек и соединить пунктирными линиями. Если с кружочками вокруг дня все довольно просто - border-radius 50% и border: 3px solid white. border - это граница блока. Задать ее можно быстро в одну строку указав 3 параметра: размер, вид (solid - сплошная) и цвет. Так же эти параметры можно задать отдельно, например border-size, border-style, border color. Для разделителя а именно пунктирной палки я создалка блок див и сделала у него только левую границу с помощью border-left, где вторым параметром написала dashed, что означает пунктир, получилась пунктирная палочка. Ну и с помощью margin-left подравняла ее под кружок. Выглядит довольно интересно.

Проблемы которые я обнаружила:

- Прибить footer к низу экрана было ошибкой. Получилось что он всегда на одной позиции, поэтому я решила снять гвозди. Убрала position: absolute и bottom:0. Теперь он просто будет под контентом. И, так как на главное странице маловато контента, он слишком высоко.

- Вторая проблема - сайт не очень выглядит на мобильных устройствах, поэтому завтра я буду решать эту ситуацию.

Ну а так сайт становится краше и краше с каждым днем?

Что сделано с HTML:
- Добавила класс «menu» к диву с кнопками «Главная» и «История»
- Добавила ссылку на иконку в тэге <head> через тэг <link>
- Обернула дни на страницы с историей в дивы с классами «day-num»
- Показать и скачать обернула в див с классом «history-links»
- Диву, внутри которого день и ссылки дала класс «history
-Создала под каждым днем Див с классом «history-separator»

Что сделано с CSS:
- Добавила стилей к классу day-counter.
- Добавила margin-top 20px для section. Чтобы контент чуть чуть отступал от шапки
- Добавила теней к header с помощью box-shadow
- Добавила стилей к классу menu и к тегам a, которые внутри класса menu, с помощью селектора .menu a {Тут стили}
- Добавила стилей кнопкам меню при наведении на них.
- Разделила комментариями стили, которые относятся только к главной странице и стили которые только к истории
- Добавила стилей классам history, history-daynum, history-links, history-separator

Результаты сегодняшнего дня на ваших экранах и по ссылке http://site2hday.ru ? продолжим завтра

#День5

#День4