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

DarrellRoberts — Sun, 09 Jun 2024 14:42:53 +0000

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

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

Forem: DarrellRoberts