Beginner JavaScript Project - Expanding Cards
This project is taken from the 50days50projects course by Traversy Media on Udemy!
Whenever I learn something, the most interesting part about it is the amazing things I get to build!
In this Article, we are building a simple expanding card project. So let's get into it!
This is how the project looks in the end
Getting Started
This is a very beginner-friendly project with a minimal usage of JavaScript. First step would be to create the boilerplate code and connect the stylesheet and the javascript.
The HTML Part
HTML of the code is pretty simple. The body is divided into divs, each containing an image with inline styling.
The CSS Part
The components are put in a flexbox and we have also added media queries so as to make the website responsive and compatible for mobile devices.
The JavaScript
We have added an eventListener for 'click'. Whenever, we click the card, a class of 'active' is added onto the card and it is expanded in full-view. If another card is clicked, the 'active' class from the previous card is removed.
And Voilà! Your mini-expanding card project is ready!
Change your content, add your own style and make it about you! Good Luck and do share your feedback with me!