Creating a Weather App using HTML, CSS, and JavaScript

Introduction

• Goal: Create a weather app to enhance your resume/portfolio.
• The app will include features like search for city weather, updating weather icon, temperature, city name, humidity, and wind speed.

Components

• HTML: Structure of the app.
• CSS: Styling of the app.
• JavaScript: Functionality and fetching weather data using API.

Setting Up

• Files:
  • HTML file
  • CSS file
  • Images folder with icons
• Code Editor: Visual Studio Code or any preferred editor.

HTML Structure

• Basic HTML structure and linking CSS file.
• Title: Weather App - Easy Tutorials.
• Adding a div with class card.
• Inside card, a search box created with input and button elements.
• Weather details section including:
  • Weather icon
  • Temperature (temp)
  • City name (city)
  • Humidity and wind details

CSS Design

• General Properties: Ensure consistent margin, padding, box-sizing across elements.
• Styling card: Set dimensions, background gradient, centered alignment, padding, etc.
• Search Box and Button: Flex display, alignment, and styling for input and button.
• Weather Details: Flexbox design for layout, icons, text alignment, and individual component styling.

Display Weather Details

• Initially add static data for structure verification.
• Weather Icon, Temperature, City Name, Humidity, Wind Speed.

Fetching Weather Data (API Integration)

• API Source: OpenWeatherMap
• Steps:
  • Sign up for API key.
  • Familiarize with API documentation for current weather data.
  • Construct the API URL with city name and metric units.
  • Async function to fetch data.
  • Display data in the console for verification.
• Updating the App:
  • Select and update HTML elements with API data.
  • Use document.querySelector for managing DOM elements.

Handling Weather Icons

• Use different icons for different weather conditions.
• Conditional checks on weather data to change the icon accordingly.

Enhanced Interactions

• Search Functionality: Update data based on user input.
  • addEventListener for button click, update weather data based on input box value.
• Default and Error Handling:
  • Hide details by default, show only post valid search.
  • Display errors for invalid city names using response status check.

Final Adjustments

• Ensure error message for invalid cities.
• Dynamic display toggling between valid data and error messages.
• Add the function to show/hide appropriate sections based on API response.

Conclusion

• Full walkthrough of creating a functional, aesthetically pleasing weather app.
• Emphasis on practical coding with HTML, CSS, and JavaScript along with API usage.
• Next steps: Exploring more features and improving the app further.