Overview This final assignment brings together the HTML, CSS, and JavaScript skills you have developed throughout the course. You will create a new page for your website that allows users to look up current weather

Overview This final assignment brings together the HTML, CSS, and JavaScript skills you have developed throughout the course. You will create a new page for your website that allows users to look up current weather conditions by entering geographic coordinates. The page will use JavaScript to call a free weather API and display the results.

For this assignment, you should use your preferred AI to investigate key JavaScript concepts and to help you write the JavaScript to retrieve and process the data.

Preparation

1. You will need a free API key from OpenWeatherMap to complete this assignment. Go to Open Weather to get your key, if you haven’t already done so.
2. On your desktop (or other location that you can find easily), create an empty folder named IT3240_Week_10. Copy all files from your previous assignments (including images, CSS files, and HTML pages). Open this folder in Visual Studio Code.
3. Create a new HTML file named weather.html that will serve as your weather lookup page. Use the same layout and styling as the other pages. Be sure to add the link for the new page to the navigation on the other pages.
4. Create a new JavaScript file named weather.js in the same directory as the HTML file and link it to your weather page using a <script> tag placed before the closing tag.
5. Using the AI chatbot of your choice, investigate how the JavaScript fetch() function works in JavaScript for making API calls. Also research how to work with JSON data returned from an API. You may have the AI provide sample code and help with the JavaScript, but it is important that you understand the code (do not just copy and paste).

HTML and CSS 5. Create a form that includes the following elements:

A text input field for latitude with an appropriate label and placeholder text. A text input field for longitude with an appropriate label and placeholder text. A submit button with text such as “Get Weather” or similar. 6. Create a section or

element to display status messages (such as “Loading…” or error messages). Give it an id so you can reference it from JavaScript.

7. Create a section orelement to display the weather results. This section should include elements for:

The location name (city and country). The current temperature (in degrees Fahrenheit). A brief description of the weather conditions. 8. Give each element that will display data a unique id so the JavaScript can update the content.

9. Add styles to your CSS file to handle the layout and style of the weather lookup page so that it matches the rest the site.

JavaScript 10. Consult your preferred AI to research how to use the OpenWeatherMap Current Weather API. The API documentation can be found at Open Weather. Pay attention to the URL structure and the data format returned.

11. In your weather.js file, write JavaScript code following these steps:

Store your API key in a constant at the top of your file. Get references to DOM elements. Use document.getElementById() to select the form, input fields, message area, and all elements that will display weather data. Store each in its own variable. Add an event listener. Attach a “submit” event listener to the form element. Prevent default form submission. In your event handler function, call event.preventDefault() to stop the form from reloading the page. Get the input values. Retrieve the latitude and longitude values from the input fields. Validate the inputs. Check that both fields have values that are valid. If not, display an appropriate error message to the user. Display a loading message. Update the message area to show “Loading weather data…” or similar text while the API request is in progress. Build the API URL. Construct the URL for the OpenWeatherMap API using the latitude, longitude, and your API key. Include the units=imperial parameter to get US units. Make the API call. Use the JavaScript fetch() function to send a request to the API URL. Process the response. Use .then() to handle the response. Call response.json() to parse the JSON data. Extract and display the data. From the returned data object, extract the city name, country code, temperature, and weather description. To access specific pieces of data, you use dot notation to navigate through the object structure. Here are the key properties you need to extract: Location name: The city name is stored in data.name and the country code is in data.sys.country. Temperature: The current temperature is in data.main.temp. Since you included units=imperial in your URL, this value will be in Fahrenheit. Weather conditions: The weather description is in data.weather[0].description. Note the [0]—the weather property is an array, and you access the first element using index 0. Update the appropriate HTML elements to display this information. Handle errors. Use .catch() to handle any errors that occur during the API request. Display a user-friendly error message if something goes wrong. Testing Your Work 12. Submit the form with empty fields and verify an appropriate error message appears. Then, enter valid coordinates and verify that the weather data displays correctly.

13. Check your weather page in 2 different browsers. In a Word document, state which browsers you tested the page in.
14. As with previous assignments, feel free to use your favorite AI (in chat mode) to help resolve issues in the code. It is important that you understand the code, so ask the AI questions about its suggestions.

Validation 15. Go to the Nu HTML Checker tool tool at validator.nu to verify the HTML for your weather page. When the page passes validation, take a screenshot of the successful validation and add it to your Word document. Also validate your CSS file using the service at CSS Validation Service. When the CSS passes the check, take a screenshot of the successful validation and add it to your Word document.

Submission Requirements Add the Word document containing your browser testing notes and validation screenshots to the folder with your complete website files. Your submission should include all of the HTML files (including the new weather.html), the CSS file, the JavaScript files for you site (including the weather.js file), all image files used on your site, and the Word document with browser testing notes and the validation screenshots

Compress the folder and submit the zip file as an attachment to your submission. Competencies Measured By successfully completing this assignment, you will demonstrate your proficiency in the following course competencies and rubric criteria:

Competency 1: Author well-structured, standards-compliant HTML. Confirm that the page’s HTML and CSS are correct and that the JavaScript functions correctly. Competency 3: Apply CSS web page layout techniques to organize page content. Create a weather page with an appropriate HTML form that is laid out and styled using CSS. Competency 5: Create interactive web page behaviors using JavaScript. Write code to validate the latitude and longitude entered and display appropriate messages. Add an external JavaScript file that handles the OpenWeatherMap API call. Write JavaScript to display the results and handle errors.