Frontend Mentor - Weather app solution

This is a solution to the Weather app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Search for weather information by entering a location in the search bar
• View current weather conditions including temperature, weather icon, and location details
• See additional weather metrics like "feels like" temperature, humidity percentage, wind speed, and precipitation amounts
• Browse a 7-day weather forecast with daily high/low temperatures and weather icons
• View an hourly forecast showing temperature changes throughout the day
• Switch between different days of the week using the day selector in the hourly forecast section
• Toggle between different measurement units via the units dropdown:
  • Temperature units (Celsius and Fahrenheit)
  • Wind speed units (km/h and mph)
  • Precipitation units (millimeters and inches)
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

• LOADING STATE/SCREEN

• APP FULLY LOADED/DISPLAYED

• UNIT DROPDOWN

• SEARCH SUGGESTIONS

Links

• Solution URL: Add solution URL here
• Live Site URL: Frontend Mentor | Weather app

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vanilla JavaScript
• OpenWeatherMap API
• Responsive design

What I learned

This project helped me practice working with weather APIs and implementing dynamic unit conversion systems. I learned how to handle different measurement units for temperature, wind speed, and precipitation.

// Unit conversion for precipitation
function convertPrecipitation(value, unit) {
  if (unit === 'inch') {
    return (value * 0.0393701).toFixed(2);
  }
  return value.toFixed(1);
}

Continued development

I want to continue focusing on:

• API error handling and loading states
• More advanced weather data visualization
• Implementing weather alerts and notifications
• Adding geolocation functionality

Useful resources

• OpenWeatherMap API - Great weather data API with comprehensive documentation
• MDN Web Docs - Essential reference for JavaScript and web APIs

Author

• Github - @Joshbill-pixel
• LinkedIn - Ejiofor Joshua
• Frontend Mentor - @Joshbill-pixel

Acknowledgments

Thanks to Frontend Mentor for providing this realistic weather app challenge that helped improve my API integration and responsive design skills.