Choose an external API and build a web page that communicates with the API using AJAX requests and displays the data returned in the webpage. The outcome should demonstrate your ability to retrieve data from the API, handle responses asynchronously, and dynamically update the DOM to display the retrieved data.

Question

Assignment #2: Web Services, APIs, AJAX, and DOM

Assignment

Choose an external API and build a web page that communicates with the API using AJAX requests and displays the data returned in the webpage. The outcome should demonstrate your ability to retrieve data from the API, handle responses asynchronously, and dynamically update the DOM to display the retrieved data.

Objectives

The purpose of this assignment is to learn about web services, APIs, AJAX (Asynchronous JavaScript and XML), and DOM (Document Object Model) manipulation. Through this assignment, students will gain hands-on experience in working with external APIs, making AJAX requests, and dynamically manipulating the DOM to create interactive web applications.

Instructions/Requirements

Task Requirements:

Select a unique and distinct API of your choice, ensuring that your API selection and implementation differ from your classmates. Put effort into choosing an API that aligns with your interests and consider creative ways to present the retrieved data on the web page.

You can create a single-page website or a multi-page website.

You must use at least three different event types. Follow this link for a full list of possible events: https://www.w3schools.com/jsref/dom_obj_event.asp

E.g., single click, double click, keyboard keyup.

The web application should successfully integrate with the chosen external API and retrieve data using AJAX to handle all communication with the API.

The DOM should be dynamically updated to display the retrieved data in an organized and user-friendly manner (i.e., no page refresh is required).

Your code must include at least a single dynamic creation and removal of DOM elements. For example, create a button to clear all API data, and another button to fetch the latest API data, or a button to pull the next random API data.

Your code must contain form elements that allow the user to interact with the

API. For example, if you’re using a weather API, ask the user to specify the city.

Your code must display at least 5 useful API data information on the page. For example, if you’re using the weather API, then from the API data, pull the 1)city name, 2)wind speed, 3)temperature, 4)feels like, 5)weather description.

The web application should demonstrate proper error handling, providing informative messages to the user when necessary.

The user interface should be visually appealing and responsive across different devices.

The code should be well-documented with clear comments explaining the functionality and logic of each section.

Where to find APIs?

To find a suitable API for your assignment, you can search for “free public API” on search engines like Google. Additionally, you can refer to this GitHub repository that contains a wide range of free APIs suitable for software and web development.

Since the list contains numerous APIs, you should ensure that your API selection is distinct from your classmates. Even if you and another student selected the same API, you must present the information and data retrieved from the API differently. Any submissions that closely match each other will be significantly penalized!

Submission Instructions:

You should submit the following:

A zipped file with a fully functional version of your assignment code.

o The zipped file name must contain your name and ID.

A PDF file with images of all page(s), code, available interactivity (e.g., show what happens when a button is clicked), and any error handling that was done (e.g., show the error messages). It should clearly show the implemented JavaScript behavior.

Answer

Assignment 2: Web Services, APIs, AJAX, and DOM

Assignment Overview

This assignment focuses on building a web page that interacts with an external API using AJAX requests and displays the retrieved data dynamically. The goal is to demonstrate proficiency in retrieving data from an API, handling asynchronous responses, and manipulating the DOM to create an interactive web application.

Objectives

  • Understand and apply the concepts of web services, APIs, AJAX, and DOM manipulation.
  • Gain hands-on experience in making AJAX requests to an external API and handling responses.
  • Develop a web application that dynamically updates the DOM to display retrieved data.
  • Implement event handling to enhance user interaction with the web application.

Instructions/Requirements

  1. API Selection: Choose a unique and distinct API from the provided list or explore other publicly available APIs. Ensure your selection differs from your classmates to avoid plagiarism. Prioritize APIs that align with your interests and consider creative ways to present the retrieved data.
  2. Website Structure: Decide whether to create a single-page or multi-page website.
  3. Event Handling: Incorporate at least three different event types to enhance user interaction. Refer to the provided link for a comprehensive list of event types: https://www.w3schools.com/jsref/dom_obj_event.asp
  4. API Integration: Successfully integrate the chosen API into your web application. Use AJAX to handle all communication with the API and retrieve the desired data.
  5. DOM Manipulation: Dynamically update the DOM to display the retrieved data in an organized and user-friendly manner. No page refresh should be required.
  6. DOM Element Manipulation: Include at least one instance of dynamic creation and removal of DOM elements. For example, create buttons to clear all API data, fetch the latest API data, or pull the next random API data.
  7. Form Elements: Implement form elements to allow user interaction with the API. Adapt this based on the chosen API. For instance, if using a weather API, provide a city input field.
  8. API Data Display: Display at least five useful API data points on the page. For a weather API, this could include city name, wind speed, temperature, feels like, and weather description.
  9. Error Handling: Implement proper error handling to provide informative messages to the user when necessary.
  10. Responsive Design: Ensure the web application’s user interface is visually appealing and responsive across various devices.
  11. Code Documentation: Thoroughly document your code with clear comments explaining the functionality and logic of each section.

Submission Instructions

  1. Zip File: Submit a zipped file containing the fully functional version of your assignment code. The zipped file name should follow the format: “[Your Name]-[Your ID].zip”.
  2. PDF File: Submit a PDF file containing images of all page(s), code, available interactivity, error handling messages, and a clear demonstration of the implemented JavaScript behavior.

Additional Notes

  • Carefully review the assignment instructions and requirements to ensure your submission meets all the specified criteria.
  • Demonstrate your understanding of the concepts and techniques involved in web services, APIs, AJAX, and DOM manipulation.
  • Create an engaging and user-friendly web application that showcases your ability to apply these concepts effectively.
  • Adhere to good coding practices, including proper code formatting, documentation, and error handling.

Leave a Comment