DEV Community

Cover image for The Frontend Challenge: 1980s/Miami style Glam Up Beaches Around the World
DarrellRoberts
DarrellRoberts

Posted on

The Frontend Challenge: 1980s/Miami style Glam Up Beaches Around the World

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

I created a place where the user can easily locate on a world map where the best beaches in the world are located. The user can look on the world map and explore details of their selected beach.

I wanted to achieve this because I felt it gave a better sense of geography knowing where the best beaches in the world are, and it can serve as a travelling aid to check if you are near any of these beaches.

Demo

Screenshot
Link to project/GitHub page
Link to GitHub repository

Journey

Style

I started thinking about the design and how I would present it and what colour scheme I would use. I decided to use a 1980s/miami style, reflecting pink sand and turquoise blue ocean. In addition I wanted the background to move like the tide, which is why I added a tide animation which mimics the sea. This was hard to achieve as you can't animate the actual colour gradient, you have to instead animate the background sizes.

Positioning

I wanted to display the beaches on a world map. This meant researching where the beaches were actually located and presented the challenge of how I could position them. I used the map as a background image and made the beaches container a CSS grid. I experimented with different columns and rows but found on desktop, a 4x4 grid works well.

After this, I cycled through each beach using an id and chose in which row and column it should be located. Using properties such as justify-self and align-self, allowed me to be more accurate. In some cases I had to use margins in order to perfect its positioning further.

Although the points aren't 100% accurate, I'm proud that the grid system worked well.

JavaScript

I wanted to split the html page into two parts: introduction and map. This is why I added a click event listener on the homepage which transitions from the introduction to the map page.

I used a for loop to designate an id to each beach as well as a click event listener. For me it was easier and meant I wrote less code, and that is also why I made use of different CSS ids for visible and non-visible elements. I then used JavaScript to change its ids, depending on whether I wanted the element to display or not.

Each beach is shown on the world map as a red square. Its only when the user hovers over this red square, that the location is revealed and the user can click on it to see more details.

Responsiveness

As I am using a world map as the background image, I employed a desktop first approach for CSS-styling. This also meant it was very challenging to make responsive on mobile devices. For this, I changed the background image proportions on a media query, whilst making sure that the beach locations are still accurate.

What next

I had ideas of turning this into a game with an airplane. The user could control the airplane with a keyboard and maybe the map at first would be completely obscured. It would only be when the user moves that parts of the map would reveal itself.

So I thought I could turn this into a game, whereby the user is asked questions about particular beaches, and they have to find where it is located.

However, I knew this would be problematic on mobile devices.

This was my initial thoughts but I had to admit to myself it would be too ambitious for this entry.

Conclusion

Nevertheless, I'm proud that I achieved what I wanted and it certainly sharpened my CSS and JavaScript skills.

Let me know what you think below or if you have any criticisms.

I apologise for the lack of gifs in the description, they usually give me a headache, so I don't want to give anyone else one either. Also English is my first language, so be as brutal as you want.

Thank you!
Darrell

Top comments (1)

Collapse
 
jess profile image
Jess Lee

🙌