Glam Up My Markup: Beaches

#devchallenge #frontendchallenge #css #javascript

This is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches

What I Built

Here's my first JS / CSS challenge. In an era where everything is built using a framework or design system, it's been a long time since I've had any fun with css. After years of using JS frameworks, it's time to bring out the old js vanilla memories.

Demo

Journey

For this project, I used keyframes, transform, transition for the different animations.

I wanted to create double-sides cards :

sideA will show the beach name with a button that will triggered the rotation.
sideB will display the beach description.

Each time you click on the button trigger, the current item will rotate as the previous should go back to the default state

For this, I rework the DOM thanks to JS vanilla and add some classes to manage the css

This project is also responsive, we have a little zoom effect for the desktop query

I relearn to use some scss variables : mixin, maps, include

It was nice to participate in the challenge, now I'm going back to React and my company design system ✌🏽

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more