Hang tight! We're setting things up for you.
Hang tight! We're setting things up for you.
Build a clean and modern single-page weather application that delivers real-time weather information through a beautiful, responsive interface. The highlight of this challenge is a practical Bento Grid layout that presents weather insights in an organized and visually engaging way, creating a premium dashboard experience across all devices.
mid
+800 reps
Your task is to recreate a sleek weather application that allows users to search for a city and instantly view its current weather conditions. The interface should feel lightweight, polished, and intuitive while making effective use of a responsive Bento Grid to display key weather metrics such as temperature, humidity, wind speed, UV index, sunrise, and more. The design should adapt seamlessly from desktop to tablet and mobile screens.
Build a single-page weather application.
Create a clean and responsive layout using modern design principles.
Include a search input for users to search weather by city.
Display the current weather information prominently.
Design a responsive Bento Grid to showcase weather statistics such as:
Temperature
Weather condition
Humidity
Wind speed
Feels like temperature
UV Index
Visibility
Sunrise & Sunset
Use different card sizes to establish a clear visual hierarchy.
Display appropriate weather icons or illustrations based on the current condition.
Ensure the layout is fully responsive across desktop, tablet, and mobile devices.
Use semantic HTML and accessible form controls.
Maintain clean spacing, typography, and a modern visual style throughout the application.
Integrate a real weather API for live weather updates.
Automatically detect the user's current location (with permission).
Add smooth weather-specific animations such as rain, snow, clouds, or sunshine.
Include hourly or 7-day weather forecast cards.
Implement dark and light mode with seamless transitions.
Display dynamic backgrounds or gradients based on the current weather conditions.
Add subtle hover effects and micro-interactions to make the dashboard feel like a premium native application.
