Glammed Up The Beaches With Blurry Animations.

zaihl — Mon, 10 Jun 2024 00:13:38 +0000

Submission for Frontend Challenge v24.04.17, Glam Up My Markup: Beaches 🏖️

What I Built

For this challenge, I created a dynamic, animated web page featuring a day/night mode toggle 🌞🌜, an infinite carousel 🔄, and several other interactive elements. My goal was to brush up on my HTML, CSS, and vanilla JavaScript skills while experimenting with animations and DOM manipulation. This project was a deep dive into pure JavaScript without relying on any external libraries (except for Font Awesome), pushing me to understand and leverage core web technologies.

There are five main sections in the website:

Intro Page: The intro page welcomes you with a "Take me to the beach" button at the center. Here, you can toggle between day and night mode and enjoy the animations.
Beach Carousel: Clicking "Take me to the beach" transports you to a serene, animated beach scene with an infinite carousel of beach images.
Carousel Items: Each item in the carousel can be expanded for a closer look at the beautiful beaches 🏝️.
Return to Intro: If you missed the day/night toggle animations, you can go back by clicking the 'eye' icon on the top right 👁️.
Hide Carousel: A button to hide the carousel and fully appreciate the background animations.

Demo

I have pushed the website on GitHub and Vercel. Here is the link in case you want to check it out:
GitHub

Or you can just look at my CodePen below:

I recommend visiting this link if you are on a mobile.

Journey

Here is my journey of building a completely vanilla JavaScript project. I hope you enjoy the read 📖.

The Moment of Discovery

It all started on June 6th. Up until that moment, I was a wanderer on dev.to without an account, simply breezing through the website. Suddenly, a "dev challenges" section caught my eye 👀. Intrigued, I clicked on it, not fully understanding what was expected in the challenge. After some contemplation, I decided to participate. This marked my first foray into a development challenge, driven by a deep-seated pursuit of knowledge 📚.

Embarking on a Tutorial Spree

Hi, I'm a pre-final year undergraduate college student. The programming industry is incredibly competitive, and standing out is crucial. During my summer vacation, I decided to dive into learning as much as possible. I purposefully entered what many call "tutorial hell" 🔥. There were numerous concepts I couldn't grasp, a common struggle for novice full-stack developers. I'm the type of person who prefers to understand everything before moving forward rather than reverse-engineering tutorials.

Recently, I dabbled in Next.js with TypeScript and noticed my JavaScript skills deteriorating. Despite being in college for three years, I had never built a full-fledged project from scratch. Shocking, right? So, I challenged myself. Even though I had forgotten much about DOM manipulation with JavaScript and had many gaps in my CSS knowledge, I took on this challenge. It took me over 15 hours ⏱️, but I'm proud of what I've built. It's not perfect, but it's a significant accomplishment for me.

The Tale of Two Versions

This project you are viewing is actually the second version. My initial attempt was based on a misconception: I thought I couldn't modify the HTML at all, even with JavaScript. It was only after reviewing the previous winners' projects that I realized my mistake 🤦. This revelation led to a complete disappointment. I did not touch this challenge for the next two days. Finally, after coming to terms with myself, I created a version that leverages extensive DOM manipulation. The second version employs techniques like appendChild, insertAdjacentElement, createElement, and classList manipulations to dynamically create and manage elements.

I apologize if you've taken a look at my JavaScript. It's messy 🌀. In my defense, I wrote most of it while sleep-deprived 😴.

Challenges and Obsessions

The journey wasn't without its hurdles. I wasted an entire day on a self-imposed challenge that existed only in my mind. Transitioning to the second version was both exhausting and exhilarating. I had never developed a project with DOM manipulation before; I had only seen others do it. Naturally, I became deeply interested. I developed an obsession with animations, despite having little prior experience. I wanted to recreate the SAO link start animation... but yeah, that's inhumanely difficult 🚀. Learning to implement animations and transitions had its learning curve, but in hindsight, I'm proud of the results – even if I might have overused them a bit! The dark mode and light mode toggles are my favorite. After approximately 15 hours of work, including learning, I was finally finished. Yes, it sounds excessive, but being a perfectionist, I couldn't help myself.

Take a look at my favorite part:

JavaScript Magic: Dynamic HTML Creation

I didn't alter the .html file directly but used JavaScript to create numerous elements dynamically. Here's a breakdown of what I achieved:

Meta Tag & Font Library: I modified the <meta> tag to prevent double-tap zooming and added the Font Awesome library.
Day/Night Mode Container: I created a container for toggling between dark and light modes.
Infinite Carousel: An infinite carousel was born, with a working next button and a previous button that needs some tweaks. There's a bug that might cause storage issues, which I couldn't quite resolve.
Expanded Container: Clicking on any carousel item expands it into a detailed container.
Hide Carousel Button: I added a button to hide the carousel, allowing users to fully appreciate the animations.

Mobile-First Approach 📱

I adopted a mobile-first approach, ensuring the design and functionality worked seamlessly on smaller screens before scaling up to desktop. I tackled each of the five major features one at a time, meticulously refining each element. Testing on various devices, from phones to iPads, was crucial. Unfortunately, I don't have a screen larger than 1440p, so we'll need to see how it performs on larger displays 🖥️.

When all the features were implemented, that's when the real bug-solving began. There were countless adjustments, media queries, and keyframes. I was nearly burnt out 🔥.

Code Organization

Let's be honest – my code is a bit (a lot) messy. Feel free to dive in and see for yourself, or perhaps ask ChatGPT or Gemini to clean it up 🧹!

Vanilla Challenge: No Libraries Allowed

I set myself the challenge of using no external libraries, aiming to become fully proficient in vanilla JavaScript. The only exception was the Font Awesome library. This self-imposed rule pushed me to deeply understand the core technologies and enhance my problem-solving skills 🧠.

Growth in CSS Skills 🎨

My CSS skills have definitely improved through this project. As a relatively new front-end developer, I lacked hands-on practice. This project served as a valuable opportunity to hone my skills, especially in crafting complex animations and responsive layouts.

Final Thoughts

Ultimately, my advice to anyone taking on a similar challenge is simple: have fun 🎉. Don't do it solely for the first place; do it to push your limits, learn something new, and challenge yourself to solve problems. Each feature I developed wasn't pre-planned. I'd sit there, often clueless at first, but the moments of deep thought and problem-solving led to my work flourishing 🌱.

Before I end this, I would like to visually show the features.

Intro: This is where you start.
Infinite Carousel: Built with pure vanilla JavaScript.
Expanding Each Beach: Each beach can be expanded for a closer look.
Hiding the Carousel: See the intro again by hiding the carousel.

Thank you for taking the time to read about my journey. I hope it inspires you to embark on your own projects, pushing past your boundaries and discovering the joy of creating something from scratch ✨.

PS. Finally got over my 'first post phobia'. Now I won't feel nervous to make more posts 😌.
PSS. I can finally sleep now! A good night's sleep 🛌.

Forem: zaihl