50projectsIn50days – Day 1: Expanding Cards
The first day of the project is about expanding cards. It’s a nice introductory projects if you don’t know anything about JavaScript. It’s easily reusable and I enjoyed while I was doing it.
The images are hardcoded in the html file. That is a good point of improvement.
<div class="container">
<div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1663123878927-ff25c560a682?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDI3fEZ6bzN6dU9ITjZ3fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60')">
<h3>Explore the world</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1663085295900-782a65e0ccdb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDI4fEZ6bzN6dU9ITjZ3fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60')">
<h3>Explore the world</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1662917043489-a12d4202f6cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDF8RnpvM3p1T0hONnd8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60')">
<h3>Explore the world</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1638163501547-555fde68f650?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDR8RnpvM3p1T0hONnd8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60')">
<h3>Explore the world</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1663072811252-157a3293ca8b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDJ8RnpvM3p1T0hONnd8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60')">
<h3>Explore the world</h3>
</div>
</div>
I could create an API that gives a random image.
But, the upside of the project is about the JavaScript that the only work that has to do is remove the “active” classes from the DOM for the card. So, this change of state produce the effect created in the CSS. Especially because flex change.
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: #fff;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
}
.panel.active {
flex: 5;
}