Building a Weather App Tutorial

Oct 8, 2024

View transcript

Weather App Development Tutorial

Introduction

  • Creating a weather app using HTML, CSS, and JavaScript.
  • Useful project for resume/portfolio.

Project Overview

  • Search box to enter city name.
  • Updates weather icon, temperature, city name, humidity, and wind speed.

Project Setup

  • Directory Structure:
    • HTML file
    • CSS file
    • Images folder (contains icons)
  • Recommended Code Editor: Visual Studio Code.

HTML Structure

  • Basic HTML structure established:
    • Linked CSS file.
    • Page title set to "Weather App Easy Tutorials".

Adding Search Box

  • Created a div with class card for styling.
  • Inside card:
    • div for search with an input box and search button.
    • Input: type="text", placeholder set to "enter city name".
    • Button includes search icon (IMG tag).

CSS Styling

Body Styles

  • Added margin, padding, font-family, and box-sizing.
  • Background color applied.

Card Styles

  • Max width and width set.
  • Background with linear gradient and color properties.
  • Centered with margin and border radius.

Search Box Styles

  • Set width to 100%.
  • Used flexbox for alignment of input and button.

Input Field Styles

  • Removed border and outline.
  • Set background color, padding, height, border radius, and font size.

Button Styles

  • Similar styles to input but circular shape.
  • Image width set to 16px.

Weather Details Display

  • Added weather details section:
    • Image for weather icon.
    • Temperature in h1 and city name in h2.
    • Humidity and wind speed displayed in separate columns.

API Integration

Getting an API Key

  • Register on openweathermap.org for free API.
  • API key needed for fetching weather data.

Fetch Weather Data

  • Created a function to fetch data from the API using city name.
  • Displayed data in console.
  • Required parameters:
    • City name
    • Unit (metric for Celsius).

Updating the Webpage

  • Selected elements to update with weather data:
    • City name, temperature, humidity, and wind speed.
  • Rounded temperature and added units to humidity and wind speed.

Error Handling

  • Added error message for invalid city names:
    • Hide weather details when invalid.
    • Display appropriate message when city name is invalid.

Finalizing the App

  • Code complete:
    • Weather information displayed based on user input.
    • Dynamic update of weather icon based on conditions.

Conclusion

  • Successfully built a weather app.
  • Encouraged viewers to like, share, and subscribe for more tutorials.

Full transcript