Project Title: Weather Website
Overview: This project is a simple, interactive weather website that allows users to check current weather conditions and basic forecasts for different cities. Users will enter a location, and the site will retrieve weather data, displaying temperature, conditions (e.g., sunny, rainy), and additional details. It will also provide a map view of the selected location.
Goals:
- Create a functional, user-friendly weather lookup tool.
- Practice skills in HTML, CSS, JavaScript, and working with web APIs.
Features:
- Location search with input validation
- Embedded map for visual location display
- Dynamic weather data loading with Ajax
- User-friendly components, such as a date picker for future forecasts
- Data persistence with local storage (recently searched locations)
-
Setup Basic Page Structure
- Create HTML for both pages: the main search page and the results page.
- Add basic styling with CSS for layout and appearance.
-
JavaScript and Input Validation
- Add JavaScript to handle the search form, ensuring the user enters a valid location.
- Implement functions to handle validation errors (e.g., alerts for incorrect input).
-
Weather Data Fetching (Ajax and JSON)
- Connect to a weather API (e.g., OpenWeatherMap) to retrieve JSON data.
- Write JavaScript to parse and display the data on the results page.
-
DOM Manipulation for Dynamic Content
- Use JavaScript and the DOM API to create and display elements like temperature, weather icon, humidity, and wind speed dynamically.
-
Embedded Map and Video
- Embed an iframe displaying a Google Map or OpenStreetMap focused on the searched location.
-
jQuery UI Component
- Integrate a jQuery date picker component to allow users to select a date for a weather forecast.
-
Local Storage Setup
- Use local storage to save the user’s last searched location and retrieve it when they return to the site.
-
Testing and Debugging
- Test each component to ensure it works as expected.
- Validate functionality across different browsers and devices.