Weather App Development Tutorial

Overview

• Creating a weather app using HTML, CSS, and JavaScript.
• This project is great for your resume or portfolio.

Features of the App

• Search box to enter city names.
• Displays:
  • Weather icon
  • Temperature
  • City name
  • Humidity
  • Wind speed

Project Structure

• Folder contains:
  • HTML file
  • CSS file
  • Images folder (contains weather icons)

Setting Up the Project

1. Open the project folder in a code editor (e.g., Visual Studio Code).
2. Basic HTML structure is added in the HTML file.
3. CSS properties for margin, padding, font family, and box sizing are set in the CSS file.
4. Link style.css in the HTML.

CSS Styling

• Set body background color.
• Create a card class for the main container:
  • Max-width, width, background gradient, margin, border radius, and padding.
• Create a search class for the search input and button:
  • Use flexbox for layout.

Input Field and Button

• Add input field with placeholder "Enter city name".
• Add search button with an icon.
• Style input and button:
  • Input: border, outline, background color, padding, etc.
  • Button: border radius, width, height, cursor pointer.

Display Weather Details

• Add elements for weather details:
  • Weather icon
  • Temperature (H1 tag)
  • City name (H2 tag)
  • Humidity and wind speed details in a new div.

Fetching Weather Data

• Use OpenWeatherMap API:
  • Create an account and get an API key.
  • API URL structure includes:
    • City name
    • API key
    • Metric units for temperature.

JavaScript Functionality

1. Create a function to fetch weather data:

   • Use fetch to get data using the API.
   • Capture the response and convert it to JSON.
   • Log data to console for verification.

2. Update HTML with API data:

   • Use document.querySelector to select elements and update their innerHTML with API data.
   • Round temperature values as needed.

3. Error Handling:

   • Display error message for invalid city names.
   • Hide/show error message based on API response code (404).

Final Touches

• Ensure dynamic updates of icons based on weather conditions.
• Hide initial weather information until a valid city is searched.
• Add CSS for error messages: alignment, font size, and visibility settings.

Conclusion

• The app allows users to search for city weather dynamically.
• Encourages practice with HTML, CSS, and JavaScript.
• Students encouraged to ask questions in the comments and subscribe for more tutorials.