Nov 10, 2020
JavaScript 30 Day 5 Study Notes
The JavaScript 30 Day 5 project involved working with CSS transitions and flexbox more so than JavaScript. We manipulated panels of images with text using JavaScript, but the CSS setup played a vital part.
Five panels were set up in a row. Each panel contained three child panels containing text. However, initially, only one child panel was visible. Upon mouse click, the other two child panels drop into view.
Bos set up the HTML as such:
<div class="panels"> <div class="panel panel1"> <p>Hey</p> <p>Let's</p> <p>Dance</p> </div> <div class="panel panel2"> <p>Give</p> <p>Take</p> <p>Receive</p> </div>...</div>
Then Bos nested a flexbox within a flexbox. I had never seen this done before.
.panels {
display: flex;
}.panel {
display:flex;
flex-direction: column;
}
He set up the first and last child of the .panel div to initially sit out of the viewport. Next, he set up a second sub-class, .panel.open-active, where they were in view.
.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);}
The JavaScript merely listened for a click event and toggled between the two sub-classes.
panels.forEach(panel => panel.addEventListener('click', toggleOpen));function toggleOpen() { this.classList.toggle('open');}
And a similar code sequence to re-set.
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));function toggleActive(e) { if(e.propertyName.includes('flex')) { this.classList.toggle('open-active');}}
The code was more familiar to me but nesting the flex divs created a neat visual effect I hadn’t seen before.
View my notes from Day 4
View my notes from the beginning.
