Привет, ребята🙌

Сегодня я закончил пятое видео JavaScript30!

Проект 05: Галерея изображений панелей Flex

Источник: https://javascript30.com

Обучение:

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

Во-первых, нам нужно убедиться, что изображения расположены слева направо, а текст равномерно разделен на трети. Основной <div class="panels"> содержит каждый из <div class="panel">, который представляет собой отдельную фотографию и текст. Чтобы сложить каждую панель рядом с другой, вместо использования float: left, как в старые времена, мы используем flexbox.

С flexbox вы сначала выясняете, каким будет ваш flex-контейнер. В данном случае это наш <div class="panels">, и мы присваиваем ему свойство display: flex. Отлично, теперь у нас есть гибкий контейнер с дочерними элементами.

Теперь, используя свойство flex: 1, мы равномерно распределим пространство между флексбоксами.

Таким образом, по умолчанию <div> имеет свойство отображения display: block, и flex-потомки не являются исключением. Но мы можем сделать каждый flex-потомок своим собственным flex-контейнером, делая дочерние flex-потомки также flex-потомками.

Это будет сделано с помощью следующего CSS:

flex: 1 0 auto;
display: flex;
justify-content: center;
align-items: center;

Теперь идет часть JavaScript

Первое, что нам нужно сделать, это убедиться, что текст, который мы хотим вводить и выводить, на самом деле находится вне нашего поля зрения. Так что несколько быстрых строк CSS сделают свое дело:

.panel > *:first-child { transform: translateY(-100%) }
.panel.open-active > *:first-child { transform: translateY(0) }
.panel > *:last-child { transform: translateY(100%) }
.panel.open-active > *:last-child { transform: translateY(0) }

Из-за flexbox мы можем просто translateY обоих потомков таким образом, чтобы они оба оказались за пределами документа. Затем у нас есть класс .open-active, чтобы вернуть их обратно в документ с помощью JavaScript.

Итак, первое, что нам нужно сделать, это собрать все панели. Для этого мы выводим наш верный querySelectorAll вот так:

const panels = document.querySelectorAll('.panel');

Когда мы нажимаем на панель, мы хотим, чтобы она открывалась, а затем переводила текст в изображение. Это делается с помощью метода addEventListener:

panels.forEach(panel => panel.addEventListener('click', toggleOpen))

Когда мы нажимаем на панель, мы хотим, чтобы она открывалась, добавляя к ней класс .open. Мы могли бы сделать это, используя классный метод .toggle(), который позволяет нам буквально переключать класс элемента.

function toggleOpen() {
  this.classList.toggle('open');
}panels.forEach(panel => panel.addEventListener('click', toggleOpen))

Итак, что происходит сейчас, так это то, что каждый раз, когда вы нажимаете на панель, она прослушивает этот щелчок. Когда он услышит фактический щелчок, он запустит функцию toggleOpen() и переключит класс .open.

Теперь, когда мы можем открыть панель, мы хотим убедиться, что после завершения перехода к открытию панели мы переходим по тексту. Итак, сначала нам нужно убедиться, что открытый переход действительно завершился:

panels.forEach(panel => panel.addEventListener(
  'transitionend', 
  toggleActive
))

слушатель получит 2 события: flex-grow и текст. Flex-grow относится к панели, так что это то, к чему мы хотим прислушаться. Уэс отмечает, что из-за разных браузеров, на этот раз в основном Safari, нам нужно обязательно прослушивать flex и flex-grow до конца. Вот тут-то и появляется includes() метод:

function toggleActive(e) {
  if(e.propertyName.includes('flex')) {
    this.classList.toggle('open-active');
  }
}

В дополнение к вышеуказанному проекту я реализовал логгер в своем веб-приложении Django👇

Регистратор в Джанго

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

Код выглядит следующим образом:

import os
LOGGING = {
    'version': 1,
    'loggers': {
        'django': {
            'handlers': ['file', 'file2'],
            'level': 'DEBUG'
        }
    },
    'handlers': {
        'file': {
            'level': 'INFO',
            'class': 'logging.FileHandler',
            'filename': './logs/debug_info.log',
            'formatter': 'simpleRe',
        },
        'file2': {
            'level': 'DEBUG',
            'class': 'logging.FileHandler',
            'filename': './logs/debug.log',
            'formatter': 'simpleRe',
        }
    },
    'formatters': {
        'simpleRe': {
            'format': '{levelname} {asctime} {module} {process:d} {thread:d} {message}',
            'style': '{',
        }
     }
}

TIL (Сегодня я узнал)

  • Флексбокс
  • Метод toggle() — отличный способ буквально переключать классы.
  • Используя includes(), мы можем проверить, есть ли у чего-то определенное слово или символ, который мы ищем!
  • Logger действительно полезен при отслеживании вызовов API и, конечно же, при отладке!

Это все на Day05 ✅

Спасибо за внимание.Увидимся завтра!