Create a weather DASHBOARD | My Assignment Tutor

COMP 215 – Final Project: Create a weather DASHBOARD Application DUE: APRIL 27 2021 Project Overview Create a JavaScript application using HTML, CSS, JQuery and AJAX techniques to implement a client-side weather logger. Begin with your Lab 12 (or the demo code) and extend the application following the requirements detailed in the next sections. This is a formal assessment of your work. Although you may research and use online materials, you may not share your work with other students or submit the work of another student as your own. If you use online resources, be sure to make the work your own. Use code comments to carefully explain and demonstrate that you understand the code techniques you have used. You may be asked to explain unclear elements of your work during the project demonstration. No formal report is required for this project. When you have completed and tested your application, briefly demonstrate your running application to the instructor and double zip your project folder and email the archive to your Instructor for marking. Marking Scheme: Demonstration 20%Code format, clarity and comments 20%Dashboard functionality, layout and styles 20%Weather Search functionality 20%Weather Preferences LocalStorage functionality 20% 100% Requirments: Create A Client-side Weather DASHBOARD application Create your application in a web page named weatherdashboard.htm. Place your CSS rules in weather.css and your JavaScript in weather.jsYour application will consist of a “Weather Dashboard” for the user to select two favorite cities. The application will search and display the current and hourly weather report for those cities. The user’s preferred temperature units and the two favorite cities will be stored as preference settings in the browser’s local storage and retrieved when the page is loaded.Weather Dashboard Layout:Using a Bootstrap Grid, layout your dashboard user interface similar to the sample shown below:The screen sample is an example only – You may format your content as you like, but use Bootstrap classes and styles for a responsive design.The page should appear as shown in the sample on the left for medium and larger screens, and as on the right for small screens. For Medium and Larger Screens – Display the two cities horizontally: For Screens Smaller Than Medium – Display the two cities stacked vertically:Inputs and Outputs: Output the current date prominently in a row across the top of the dashboard along with a title such as “Weather Dashboard”. This is not an input – your application will display this date value.Below the current date place 2 radio buttons to allow the user to select the preferred temperature units (Celsius or Fahrenheit).Each of the two favorite city div “boxes” will have an input box to allow the user to type the name of the desired city.After the user types the city name, the weather data for that city will be searched and displayed in the region below the city name. Search Weather by City Name: Use the weather service to search for the current weather and 3 hour forecast.To do this you will need to make 2 calls to the openweathermap service – one to look up the city’s coordinates given the city name, and a second call to get the weather forecast from the coordinates. Unfortunately, the openweathermap service does not have a forecast api that can be searched by city name from a single search.Use the City Name input from the user to search the City’s latitude and longitude coordinates. This can be done from the Current Weather Data API: the city’s coordinates, the Current and the Forecast Weather for that location can be searched using the One Call API: this will require two separate “nested” XMLHttpRequest() objects where the second request (One Call API) is made from inside the onreadystatechange callback from the first request (Current Weather Data API).Display Current Weather and 3 Hour Forecast: Below the city input box, display the results from the weather search. You may use any reasonable format to output your results. Study the API documentation for the correct search response values and display the following data for the City:Current Weather: Latitude, Longitude, Current Time, Sunrise Time, Sunset Time, Temperature, Pressure, Wind Speed, Wind Direction, Weather Description, and Weather icon (see point 6 below)Hourly Forecast (for the next 3 hours): Temperature, Pressure, Wind Speed, Wind Direction, Weather Description, Probability of Precipitation (POP), and Weather icon (see point 6 below)Display Temperatures in the User’s Preferred Units: The openweathermap service provides temperatures in Kelvin. To display the temperature in the user’s selected units use: Celsius: C = K −273.15Fahrenheit: F = 9 / 5 * (K – 273.15) + 32 Displaying the Weather Icon: The Search results will contain an icon code. Build a URL to the weather icon from this code and display this image in an img element (see: )Dynamic Updates: Perform a fresh search and update the dashboard whenever:the user changes any input (the Temperature Units or either Favorite City)the user first loads the page or refreshes the browser button is required to start the search – perform the search as soon as the user changes any input.Save and Load the User’s City and Temperature Preferences “Automatically”: Load or Update the saved preferences in local storage whenever:the page is first loaded or refreshed – retrieve any previously saved temperature unit preference and favorite city names from Local Storage and display them in the dashboard. Also perform a fresh weather search for the cities and update the dashboard.Whenever the user changes the temperature unit preference, update the setting in the local storage.Whenever the user enters a city name resulting in a valid weather search, update that favorite city name in Local Storage. If the city name is invalid, do not save that city name in local storage.Invalid City Name or Search Errors: If the city name is not found or if the openweathermap service returns an error:If the city name is not found in the first search (Current Weather Data API) to retrieve the lat / long coordinates, then display a “city name not found” message to the user and clear out the weather data shown for that city.If the weather forecast in the second search (One Call API) does not return results then display an suitable error message such as “Weather forecast unavailable – please retry”.Code Comments and Documentation:Choose appropriate names for all variables, elements, functions and CSS classes etc. that clearly indicate the meaning and purpose of that object.For each function and object you declare, include brief code comments to describe the purpose and arguments for that function.You may problem-solve with other students. However – all coding, object naming, comments and features of your solution must be your own work. Do not submit code solutions from online sources as your own work!Code Samples: The lab demonstration code from labs 11 and 12 may be of use. (end of COMP215 Final Project requirements)


Leave a Reply

Your email address will not be published.