| Mobile Preview (375x812) | Desktop Preview (1440x960) |
|---|---|
 |
 |
 |
 |
RainDrop is a lightweight, accessible weather application built with vanilla HTML, CSS, and JavaScript.
It uses the freeCodeCamp Weather API to fetch a non-live weather data and displays it in a responsive, mobile-first interface.
Created and inspired from the lab challenges of freeCodeCamp.org JavaScript course.
RainDrop combines clean UI design, accessibility practices, and JavaScript modularization into one project.
The app demonstrates how to structure code across modules for easier maintainability, and how to integrate API data into a responsive web app.
- Fetches weather data from the freeCodeCamp Weather API
- Theme toggle support enabled
- Surprise button that plays/pauses a song track with ARIA state management
- Dynamic image and data loading
- Keyboard navigation with skip links and focus-visible states
- Fully responsive, mobile-first layout
- Accessibility-first approach (ARIA attributes, semantic HTML, reduced motion support)
- Strengthened my knowledge with JavaScript modules (
api.js,ui.js,weather.js,theme.js) - Handling asynchronous data fetching with
fetch()and error management - Improving UI/UX with loading states, transitions, and reduced motion handling
- The use of
<link rel="preload" />in HTML to preload immediately used assets such as fonts on first page load - Learned how to customized HTML elements such as
<select>and<option>based on the site's theme
- HTML5
- CSS3
- JavaScript
- Git
- GitHub
- Netlify
- Figma
- Clone the repository
- Open
index.htmlin your browser
Or you can check out the live website here
A Google Lighthouse audit was conducted on the final version of this project. You can view the full report here.
Created by Elmar Chavez
Month/Year: August 2025
Journey: 5th month of learning frontend web development.