Section 1.1: Network Information API

The Network Information API provides web applications access to details about the user's network connection, including the connection type (e.g., WiFi, cellular) and effective bandwidth. It can be utilized for optimizing content delivery, managing offline caching, or offering a tailored experience based on network conditions.

To obtain network details, use the navigator.connection object:

const connection =

navigator.connection ||

navigator.mozConnection ||

navigator.webkitConnection;

const effectiveType = connection.effectiveType;

const downlink = connection.downlink;

console.log('Connection: ', connection);

console.log('Effective connection type:', effectiveType);

console.log('Downlink speed:', downlink);

Section 1.2: Geolocation API

The Geolocation API allows web applications to determine the geographical location of a user's device. This capability is essential for location-based services, mapping applications, and personalized content delivery. By acquiring the user's location, web applications can offer navigational assistance or location-specific features.

For example, to retrieve the user's current location, use the getCurrentPosition() method:

navigator.geolocation.getCurrentPosition(function success(position) {

const latitude = position.coords.latitude;

const longitude = position.coords.longitude;

console.log('Latitude:', latitude);

console.log('Longitude:', longitude);

});

The first video titled "Build and Deploy 5 JavaScript & React API Projects in 10 Hours - Full Course | RapidAPI" provides an extensive guide on creating and deploying JavaScript and React applications that utilize APIs.

Section 1.3: Media Capture API

The Media Capture API gives web applications the ability to access device media capture features, such as the camera and microphone. This API is particularly valuable for applications requiring photo or video uploads, video conferencing, or augmented reality functionalities.

To capture media through the device's camera, use the getUserMedia() method:

navigator.mediaDevices

.getUserMedia({ video: true, audio: false })

.then(function (stream) {

// Handle the media stream

})

.catch(function (error) {

// Manage the error

});

Section 1.4: Payment Request API

The Payment Request API streamlines the integration of secure payment processing into web applications. It provides a standardized method for collecting payment information and initiating transactions, enhancing the user's checkout experience—particularly useful for e-commerce platforms.

To initiate a payment request, create a PaymentRequest object:

const supportedPaymentMethods = [

{

supportedMethods: 'basic-card',

data: {

supportedNetworks: ['visa', 'mastercard'],

},

},

];

const paymentDetails = {

total: {

label: 'Total',

amount: { currency: 'USD', value: '10.00' },

},

};

const paymentRequest = new PaymentRequest(

supportedPaymentMethods,

paymentDetails,

);

paymentRequest

.show()

.then(function (paymentResponse) {

console.log('Payment Response: ', paymentResponse);

// Process the payment response

})

.catch(function (error) {

console.log('Error: ', error);

// Handle errors

});

Section 1.5: Battery Status API

The Battery Status API provides critical information regarding the device's battery level and charging status. It allows developers to assess whether the battery is charging, estimate the time remaining before depletion, and check the current battery percentage. For instance:

navigator.getBattery().then(console.log);

The second video "Build and Deploy 3 Modern API Applications in 7 Hours - Full Course - YouTube" offers insights into constructing and deploying modern web applications that effectively utilize various APIs.

Section 1.6: Web Bluetooth API

The Web Bluetooth API enables web applications to communicate with Bluetooth devices, facilitating interaction with IoT devices and innovative connected experiences. This API allows for the discovery of nearby Bluetooth devices, establishing connections, and data exchange.

To find and connect to nearby Bluetooth devices, use the requestDevice() method:

navigator.bluetooth

.requestDevice({ filters: [{ services: ['heart_rate'] }] })

.then(function (device) {

// Connect to the selected device

})

.catch(function (error) {

// Handle errors

});

Section 1.7: Ambient Light Sensor API

The Ambient Light Sensor API provides access to the device's ambient light sensor, enabling applications to adjust display settings based on light intensity. This is particularly useful for optimizing readability and energy efficiency.

To retrieve the current ambient light levels, create an instance and listen for changes:

var sensor = new AmbientLightSensor();

sensor.onreading = function() {

var illuminance = sensor.illuminance;

console.log('Illuminance:', illuminance);

};

sensor.start();

Section 1.8: Web Notification API

The Web Notification API standardizes the creation of notifications in web applications, allowing developers to alert users to important updates or events. While the appearance and behavior of notifications can vary across browsers, this API provides a uniform method for notification delivery.

Creating a notification is straightforward; simply construct an object with a title and body:

const notification = new Notification('Email received', { body: 'You received an email. Read it now!' });

Section 1.9: Accelerometer API

The Accelerometer API allows access to the device's accelerometer, providing data on acceleration across the x, y, and z axes. This capability is essential for applications that involve motion detection, gaming, or virtual reality experiences.

To obtain accelerometer data, create an Accelerometer object and listen for updates:

const accelerometer = new Accelerometer({ frequency: 60 });

accelerometer.addEventListener('reading', () => {

const { x, y, z } = accelerometer;

console.log('Acceleration X:', x);

console.log('Acceleration Y:', y);

console.log('Acceleration Z:', z);

});

accelerometer.start();

Section 1.10: Media Session API

The Media Session API offers a way for web applications to manage media playback, providing a cohesive media control experience across devices. It enables developers to customize media notifications and handle playback controls.

To manage playback actions, set up event listeners for various media events:

navigator.mediaSession.setActionHandler('play', function() {

// Handle play action

});

navigator.mediaSession.setActionHandler('pause', function() {

// Handle pause action

});

// Additional event listeners can be added for other media actions.

Section 1.11: Vibration API

The Vibration API allows web pages to utilize the device's vibration feature, enabling the creation of haptic feedback or simulating effects in games.

Using the Vibration API is straightforward; call the vibrate() method and specify the duration in milliseconds:

navigator.vibrate(3000); // Vibrate for three seconds

Section 1.12: Device Orientation API

The Device Orientation API provides insights into the physical orientation and movement of a device. This API is particularly beneficial for navigation applications or games that depend on device orientation.

To detect changes in device orientation, add an event listener to the deviceorientation event:

window.addEventListener('deviceorientation', function(event) {

console.log('Device orientation:', event.alpha, event.beta, event.gamma);

});