Day05 of #100DaysOfCode

#100DaysOfCode

Hii folks 🙌

Today I have completed the 5th video of JavaScript30!

Project 05: Flex Panels Image Gallery

Source: https://javascript30.com

Learnings:

Today I have learned to modify the flexbox using JavaScript! Attaching the transitioned image below, so when you click on any particular section of the webpage that enlarges the size of the container and then transition in the top and bottom text. It’s cool!

First, we need to make sure that the images are stacked from left to right and the text is evenly divided into thirds. The main <div class="panels"> hold each of the <div class="panel"> which is the individual photo and text. To stack each panel next to the other, instead of using float: left as the old days, we use flexbox.

With flexbox, you first figure out what your flex container is going to be. In this case, it’s our <div class="panels"> and we give that a property of display: flex. Great, now we have a flex container with flex children.

Now using the flex: 1 property we will evenly distribute the space amongst flexbox.

So by default, a <div> has a display property of display: block and the flex children are no exception. But we can make each flex child, its own flex container making the children of the flex child, also flex children

It will be done by the following CSS:

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

Now comes the JavaScript part

The first thing we need to do is make sure that the text that we want to transition in and out is actually out of our sight. So a quick few CSS lines will do the trick:

.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) }

Because of flexbox, we can simply translateY both of the children in a way that they both appear to be outside of the document. We then have a class .open-active to get them back into the document using JavaScript.

Alright, so the first thing we need to do is gather all the panels. To do that we bring out our trusty querySelectorAll like so:

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

When we click on a panel, we want it to open and then transition the text into the image. This is done by using the addEventListener method:

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

When we click a panel, we want it to open up by adding a class of .open to it. We could do this by using a cool method called .toggle() which allows us to literally toggle a class on an element.

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

So what happens now is that each time click a panel, it listens for that click. When it hears the actual click it will fire off the toggleOpen() function and toggle the .open class

Now that we can open the panel we want to make sure that when the transition to open the panel has ended, we transition in the text. So first we need to make sure that the open transition has actually ended:

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

the listener will pick up 2 events: the flex-grow and the text. The flex-grow is about the panel so that’s the one that we want to listen for. Wes points out that because of different browsers, mainly Safari this time, we need to make sure to listen for both flex and flex-grow to end. That’s where the includes() the method comes in:

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

In addition to the above project, I implemented a logger in my Django Web app👇

Logger in Django

So, it was straightforward for me to follow the Django documentation to implement it

The code is as follow:

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 (Today I Learned)

• Flexbox
• The toggle() method is a cool way to literally toggle classes
• Using includes() we can check if something has a certain word or character that we are looking for!
• Logger is really helpful in keeping track of API calls and of course while debugging!

That is all for Day05 ✅

Thanks for reading, See you tomorrow!