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
Top comments (1)
🙌