The Frontend Challenge: 1980s/Miami style Glam Up Beaches Around the World
Tags: devchallenge, frontendchallenge, css, javascript
Published: 2024-06-09 14:42:53

_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

<!-- Tell us what you built and what you were looking to achieve. -->
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
<!-- Show us your project! You can directly embed an editor into this post (see the FAQ section from the challenge page) or you can share an image of your project and share a public link to the code. -->
![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k29p2r7svmwnrecu3qqr.jpg)
[Link to project/GitHub page](https://darrellroberts.github.io/beaches_frontendchallenge/)
[Link to GitHub repository](https://github.com/DarrellRoberts/beaches_frontendchallenge)

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->
###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

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

<!-- Thanks for participating! -->