JS 30 Day 5

Live Demo

The Task:

Flex Panels with CSS Variables and JS. Most of this project I would say was Flex panels... which all was an entirely new concept to me. Once all the Flex was set up, all that was left was adding javascript event listeners.

Thoughts:

Key take aways for me on this assignment (Apart from how aswesome flex is with CSS and I need spend more time with it) would have to be .toggle method on classList. Which also has a handy method of .contains so you can check whats on there and run conditionals on. I set it up this way first and had it add and remove based on what was returned by the .contains method. However this can all be handled with the single .toggle method which will apply a class or remove it. (Pretty self explainatory by its name).

The javascript for this one is pretty short. I added on a feature out of personal preference to only allow one panel to be opened at a time. Other than that, javascript is feeling better. I am feeling a lot more comfortable with grabbing classes and elements out of the DOM and applying event listeners, grabbing onto classes etc. I am starting to feel less comfortable with how well I know CSS now!

The only main concern I had with this assignment was the ease of the transitions. After talking it over with another developer, we realized that since I used such large images for the backgrounds it was actually creating a performance issue. (at least while running on my machine). If the screen height is small it wont be as noticable as setting the browser window to a full screen size of a monitor. I left all the dog images in for now.. again, courtesy of unsplash.com

            
'use strict';

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

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

panels.forEach(panel => panel.addEventListener("click", togglePanel));
panels.forEach(panel => panel.addEventListener("transitionend", toggleActive));
            
        

Short and sweet post. Here is the source for day 5.