A creative weather experience for imaginary worlds
This project is a weather app that lets users check the weather in their favorite fictional cities from movies, series, and cartoons. It was designed to merge creativity with web development skills, offering a playful, immersive experience. Users can select a city from a dropdown menu, and the app dynamically updates the background and weather information to reflect the chosen fictional world. The goal was to build an engaging app that highlights my expertise in HTML, CSS, and JavaScript while showcasing my ability to create interactive and visually rich user interfaces.
To begin, I wanted to build something that was both fun and technically interesting. Fictional cities stood out as a great way to combine imaginative storytelling with UI design challenges. I created a moodboard inspired by the visual styles of various cartoons to guide the app’s aesthetic direction. This helped me choose colors, animations and elements that would capture the spirit of each fictional world and create a consistent, playful atmosphere throughout the app.
The core user experience centers around a dropdown menu where users can choose a fictional city. Upon clicking the “Check Weather” button, the app changes the background to a looping, animated image that represents the selected city—in this case, Bikini Bottom from SpongeBob SquarePants. I achieved the seamless looping effect by placing the same background image twice side by side and animating it with CSS, creating a smooth, continuous motion that feels alive. Fun facts about the chosen city appear animated from the bottom to the top, providing entertaining tidbits that deepen the immersive experience. Additionally, a “Play Music” button plays a piece of music associated with the city’s cartoon, adding an auditory dimension to the interaction. All these interactive features were built with vanilla JavaScript to handle UI updates, animations, and media playback. The app is fully responsive and optimized for a variety of screen sizes, ensuring a smooth and visually appealing experience whether on desktop or mobile.
This project helped me combine creativity with technical skills, especially improving CSS animations for smooth looping backgrounds. Syncing interactive elements like the dropdown, animated facts, and music strengthened my JavaScript event handling. Planning with moodboards also showed me how clear design goals lead to a more cohesive product. Next, I’m eager to add dynamic data and possibly integrate APIs to enhance the app further.
