IAE 1

Problem Scenario: Weather Dashboard Application Problem Description: You are asked to build a dynamic weather dashboard application that shows the current weather data for a selected city. The application should retrieve the weather data from an API using HTTP requests, dynamically display the information in a user-friendly format, and use responsive design principles. The user interface should include HTML5 structure, CSS styling (with external stylesheets), Bootstrap for responsive layout, and animations for smooth transitions. Tasks: Task 1: HTML Layout Design HTML Structure: Create an HTML5 page with a header that says "Weather Dashboard". Include an input field to allow the user to enter the name of a city. Add a button labeled "Get Weather" that, when clicked, will fetch the weather data for the entered city. Create a section to display the weather information, including: City Name Temperature (in Celsius) Weather Description (e.g., "Sunny", "Cloudy", etc.) Humidity Percentage Wind Speed Include a footer section with a copyright notice. Task 2: CSS Styling Styling with External Stylesheet: Create an external CSS file and link it to the HTML page. Apply a background color and text color to the body to make the page visually appealing. Style the input field and button to make them look attractive and consistent with the overall theme. The weather information section should be displayed in a card-like container with a border, padding, and shadow effects. Use CSS Shadows and CSS Transformations to add subtle effects to the weather card when hovered over. Use CSS Animations to smoothly transition the display of the weather information when it loads. Mobile-First Design: Ensure that the application is responsive. On smaller screens, the layout should stack vertically, while on larger screens, it should be horizontally aligned. Use Bootstrap grid system to create a responsive layout for the weather card and input field. Task 3: HTTP Communication (Fetching Weather Data) API Integration: Use JavaScript to send an HTTP GET request to a weather API (for example, OpenWeatherMap or any other mock API). When the user clicks on the "Get Weather" button, the app should send a request to the API with the city name entered by the user. Display the weather information in the section below the button after a successful API response. Handle API Response: The API response will return a JSON object with the following data: city: Name of the city temperature: Temperature in Celsius description: Weather description (e.g., "Clear", "Cloudy") humidity: Humidity percentage wind_speed: Wind speed in meters per second. Extract the relevant data from the response and dynamically populate the weather information on the webpage. Error Handling: If the API request fails (e.g., invalid city name or network error), show an error message like "Unable to fetch weather data. Please try again." Task 4: Enhancing the User Interface with Bootstrap Responsive Form: Use Bootstrap Form components for the city input field and the button to ensure they are styled properly and respond to different screen sizes. Implement Bootstrap's Grid System for responsive design, ensuring the weather information is displayed neatly across all screen sizes. Display Weather Info in a Card: Utilize Bootstrap Cards to display the weather information in a visually appealing format. The card should have a light background color and rounded corners, with a shadow to make it stand out. Weather Icons: Based on the weather description (e.g., "Clear", "Cloudy", "Rainy"), display a corresponding weather icon next to the temperature. Use an external icon library (e.g., Font Awesome) to add icons to your webpage. Task 5: CSS Transitions and Animations Smooth Transition for Weather Info: Implement CSS Animations to smoothly fade in the weather information when the user retrieves the data. When a new city is searched, use CSS Transitions to smoothly hide the previous weather data before the new data appears. Hover Effects: Use CSS Hover Effects to animate the button when the user hovers over it (e.g., change the color or add a shadow). Example API Response (for HTTP request): json Copy { "city": "London", "temperature": 15.5, "description": "Clear", "humidity": 73, "wind_speed": 3.4 } Evaluation Criteria: HTML Structure: Proper use of semantic HTML elements like <header>, <footer>, <form>, <input>, and <button>. The weather data is displayed dynamically on the webpage after the API request. CSS Styling: Effective use of external CSS for styling the page. Proper use of CSS Shadows, Transformations, Animations, and Hover Effects. Responsive layout achieved using Bootstrap Grid System. Bootstrap: Correct use of Bootstrap components for layout (e.g., cards, forms, buttons). Responsive design principles applied. HTTP Communication: Correct use of JavaScript fetch() (or XMLHttpRequest) for HTTP requests to fetch weather data. Proper handling of the API response and error scenarios. Interactivity and User Experience: Smooth transitions when the weather data loads. Weather icons corresponding to the weather description. Error message handling when data cannot be fetched.