Skip to content

Latest commit

 

History

History
37 lines (29 loc) · 2.55 KB

Day 24 - Project 1 - Weather App Assignment.md

File metadata and controls

37 lines (29 loc) · 2.55 KB

Day 24: Project 1 - Weather App

Tasks/Activities:

Activity 1: Setting Up the Project

  • Task 1: Initialize a new project directory and set up the basic HTML structure for the weather app.
  • Task 2: Add a basic CSS file to style the weather app, including a container for displaying weather information.

Activity 2: Fetching Weather Data

  • Task 3: Use the fetch API to get current weather data from a public weather API (e.g., OpenWeatherMap). Log the response data to the console.
  • Task 4: Parse the weather data and display the current temperature, weather condition, and city name on the web page.

Activity 3: Adding Search Functionality

  • Task 5: Add an input field and a search button to the HTML structure. Style the input and button using CSS.
  • Task 6: Write a function to fetch and display weather data for a city entered in the search input field. Log any errors to the console.

Activity 4: Displaying a 5-Day Forecast

  • Task 7: Use the fetch API to get a 5-day weather forecast from the public weather API. Log the response data to the console.
  • Task 8: Parse the forecast data and display the temperature and weather condition for each day in the forecast on the web page.

Activity 5: Enhancing the UI

  • Task 9: Add icons or images to represent different weather conditions (e.g., sunny, rainy, cloudy) based on the weather data.
  • Task 10: Add CSS animations or transitions to make the weather app more interactive and visually appealing.

Feature Request:

  1. Weather Data Fetching Script: Write a script that fetches current weather data from a public API and displays the temperature, weather condition, and city name on the web page.
  2. Search Functionality Script: Create a script that allows users to search for weather information by city name and displays the results.
  3. 5-Day Forecast Script: Write a script that fetches and displays a 5-day weather forecast on the web page.
  4. UI Enhancement Script: Create a script that adds icons for different weather conditions and includes CSS animations or transitions for a better user experience.

Achievement:

By the end of these activities, students will:

  • Set up a basic project structure with HTML and CSS.
  • Use the fetch API to retrieve and display weather data from a public API.
  • Implement search functionality to fetch weather data for different cities.
  • Display a 5-day weather forecast using data from a public API.
  • Enhance the user interface with icons and animations to make the weather app more interactive and visually appealing.