Network Information API Lab
In this lab, you'll be developing a simple but practical web page that uses the Network Information API to display network related information. You will create a "Get Network Info" button. When this button is clicked, it will retrieve and display information about the user's network, such as
- Network Information API: This API provides data about the network connection a device is using. It can include general connection types, speed, and whether data saving is enabled or not.
- DOM manipulation: In this lab, you will manipulate the DOM to display the network information on the web page.
- Begin by setting up a basic HTML structure in your
index.htmlfile. Be sure to give it a title in the
- Create a
buttonelement within the
bodyof your HTML document. Assign it an id of
getNetworkInfoand set its display text to "Get Network Info".
- Also in the
body, create a
divelement with an id of
networkInfoContainer. This will be used to display the network information.
scripttag at the end of your
bodytag in your
index.htmlfile. The source (
src) for this script will be
- In your
script.jsfile, start by adding an event listener to the "Get Network Info" button that listens for
- Inside the function that executes when a
clickevent occurs, use the Network Information API to retrieve the network information. Remember that the Network Information API is accessed through the
navigator.connection. However, some browsers may require a prefix, such as
- Create a string with the network information (format it according to the information you have) and set this data as the
- Keep in mind that not all web browsers support all properties of the Network Information API. Some may require prefix like
webkitConnection, consider these cases when retrieving the connection info.