Все статьи | Блог студента

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

Эта статья написана нашим студентом. Мнение пользователей иногда может не совпадать с точкой зрения Хекслета
Как я улучшил лендинг из первого проекта по вёрстке главное изображение

О том, что я добавил в свой первый проект по вёрстке после начала изучения 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.

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

Аватар пользователя Шахзод Давлатов
Шахзод Давлатов 21 сентября 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
1 декабря 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
1 декабря 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
1 декабря 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
1 декабря 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
1 декабря 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Новый
Создает веб-приложения со скоростью света
1 декабря 5 месяцев