Как я улучшил лендинг из первого проекта по вёрстке

О том, что я добавил в свой первый проект по вёрстке после начала изучения JavaScript.

«Завершение проекта — не повод заканчивать работу над ним», — Согласен, да и в резюме добавлять простенький лендинг как-то не хочется, так что нужно его как-то улучшить.

Адаптируем под мобильные устройства

Разумеется, сперва нужно адаптировать лендинг под мобильные устройства, иначе какой смысл во всей проделанной работе, если её на телефоне нельзя нормально оценить?

Идея

Что же можно добавить на лендинг? Да много чего, лично я остановил свой выбор на реализации возможности смены цветового оформления при помощи JavaScript.

Подготовка

Сперва нам нужно продумать, как будет происходить смена темы оформления, можно добавлять новые классы с нужными нам цветами через JavaScript. Это очень громоздко и неудобно, поэтому нам не подходит.

Остаётся только использовать JavaScript для подключения нового стилевого файла. Уже лучше, этим и воспользуемся.

Настраиваем стили

Нам потребуется создать три SCSS-файла: один со светлой темой, с тёмной и общий файл со стилями (Можно просто скопировать весь код из старого CSS файла).

Дальше мы создаём переменные с нужными нами цветами в каждом SCSS с темой оформления.

Важно!!! Используйте одинаковые названия для переменных в этих двух файлах

Дальше нам потребуется заменить все цветовые значения в основном SCSS на названия переменных и подключить этот файл к оставшимся двум.

Готово!

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

Подготавливаем

Сперва реализуем подключение CSS файла с помощью JavaScript:

let a;

window.onload = function() {
    a = document.createElement("link");
    a.rel = "stylesheet";
    a.href = "styles/style-light.css";
    a.id = "style-theme";
    document.getElementsByTagName("head")[0].appendChild(a);
}

P.S. Переменная a нужна нам в глобальной области видимости.

На случай если не сработает скрипт я оставил подключение CSS файла в HTML.

Заканчиваем проект

Добавляем переключатель тем на наш лендинг и подключаем к нему обработчик событий:

let getTheme = document.getElementById("change-theme");
getTheme.addEventListener("change", function () {
    if (document.querySelector(".dark-theme")) {
        a.href = "styles/style-light.css";
        getTheme.classList.remove("dark-theme")
        return;
    }
    getTheme.classList.add("dark-theme");
    a.href = "styles/style-dark.css";
});

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

Итог

Конечно, проект требует ещё много доработок с структурной точки зрения (Банально хочется доработать стили и разбить их по секциям, раз уж тут теперь используется SASS)

Итоговый результат вы можете посмотреть на моём GitHub и GitHub Pages.

Спасибо за внимание!