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

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

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

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

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

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