A sleek, responsive flip clock with real-time weather for Columbia, MD. Displays current time, date, and temperature with a smooth flip animation. Features fullscreen mode and modern styling using Montserrat font and a dark gradient background. Powered by JavaScript and the OpenWeatherMap API.
This project features a sleek, full-screen flip clock that dynamically displays the current time and date. In addition, it integrates real-time weather information for Columbia, Maryland, showing the current temperature and weather conditions beneath the clock.
Features: Responsive Design: The clock and weather information adjust to fit any screen size, ensuring a consistent and attractive display whether on a desktop or mobile device.
Flip Animation: The seconds box includes a smooth flip animation, creating a classic flip clock effect.
Real-Time Weather: Using the OpenWeatherMap API, the project fetches and displays the current weather conditions, including temperature and description (e.g., cloudy, sunny).
Modern Styling: The clock uses the Montserrat font for a clean, modern look, with a dark gradient background to enhance readability and aesthetics.
Fullscreen Mode: Double-click anywhere on the clock to enter fullscreen mode for a more immersive experience.
Technologies Used:
HTML5: Structure of the clock and weather display.
CSS3: Styling, including custom fonts, colors, and responsive design.
JavaScript: Logic for time updating, weather data fetching, and fullscreen functionality.
OpenWeatherMap API: Integration for real-time weather data.