From 51782ba15d00aa3f56edbd541c398f9745519a35 Mon Sep 17 00:00:00 2001 From: srishti-coder Date: Wed, 3 Jul 2024 04:02:35 +0530 Subject: [PATCH 1/5] Add Web APIs section with examples --- web-apis.md | 92 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 web-apis.md diff --git a/web-apis.md b/web-apis.md new file mode 100644 index 00000000..80de232c --- /dev/null +++ b/web-apis.md @@ -0,0 +1,92 @@ +# Web APIs + +## Introduction to Web APIs + +Web APIs are interfaces provided by the browser that allow you to interact with the browser and the underlying operating system. + +## DOM Manipulation + +The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. + +### Example Code: Changing the Content of an Element + +```javascript +document.getElementById("demo").innerHTML = "Hello, World!";``` + +##Fetch API + +The Fetch API provides an interface for fetching resources (including across the network). + +###Example Code: Simple Fetch Request + +```fetch('https://api.example.com/data') + .then(response => response.json()) + .then(data => console.log(data)) + .catch(error => console.error('Error:'));``` + +##Geolocation API + +The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information. + +###Example Code: Getting User Location + +```if ("geolocation" in navigator) { + navigator.geolocation.getCurrentPosition(function(position) { + console.log("Latitude: " + position.coords.latitude); + console.log("Longitude: " + position.coords.longitude); + }); +} else { + console.log("Geolocation is not supported by this browser."); +}``` + +##Canvas API + +The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. + +###Example Code: Drawing Shapes on Canvas + +```var canvas = document.getElementById('myCanvas'); +var context = canvas.getContext('2d'); + +// Draw a rectangle +context.fillStyle = '#FF0000'; +context.fillRect(10, 10, 150, 100);``` + +##Storage API + +The Web Storage API provides mechanisms by which browsers can store key-value pairs, in a much more intuitive fashion than using cookies. + +###Example Code: Storing Data in localStorage + +####Local stoage +```// Save data to local storage +localStorage.setItem('key', 'value'); + +// Retrieve data from local storage +let value = localStorage.getItem('key'); +console.log(value);``` + +####Session Storage + +```// Save data to session storage +sessionStorage.setItem('key', 'value'); + +// Retrieve data from session storage +let value = sessionStorage.getItem('key'); +console.log(value);``` + +##Notification API + +The Notification API allows web pages to control the display of system notifications to the end user. + +###Example Code: Displaying a Notification + +```if (Notification.permission === "granted") { + new Notification("Hello, World!"); +} else if (Notification.permission !== "denied") { + Notification.requestPermission().then(permission => { + if (permission === "granted") { + new Notification("Hello, World!"); + } + }); +}``` From 4c3a15392c9e6e496fd2db953438b185c0944083 Mon Sep 17 00:00:00 2001 From: Srishti Mishra <55997954+srishti-coder@users.noreply.github.com> Date: Wed, 3 Jul 2024 04:10:34 +0530 Subject: [PATCH 2/5] Update web-apis.md --- web-apis.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web-apis.md b/web-apis.md index 80de232c..8dd1ab5f 100644 --- a/web-apis.md +++ b/web-apis.md @@ -10,8 +10,7 @@ The Document Object Model (DOM) is a programming interface for web documents. It ### Example Code: Changing the Content of an Element -```javascript -document.getElementById("demo").innerHTML = "Hello, World!";``` +```document.getElementById("demo").innerHTML = "Hello, World!";``` ##Fetch API @@ -19,7 +18,8 @@ The Fetch API provides an interface for fetching resources (including across the ###Example Code: Simple Fetch Request -```fetch('https://api.example.com/data') +``` +fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:'));``` From f4a5824ee93448bb49bc1c8b1f89fc4160ceb557 Mon Sep 17 00:00:00 2001 From: Srishti Mishra <55997954+srishti-coder@users.noreply.github.com> Date: Wed, 3 Jul 2024 04:12:23 +0530 Subject: [PATCH 3/5] Update web-apis.md --- web-apis.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/web-apis.md b/web-apis.md index 8dd1ab5f..f779e5e8 100644 --- a/web-apis.md +++ b/web-apis.md @@ -30,7 +30,8 @@ The Geolocation API allows the user to provide their location to web application ###Example Code: Getting User Location -```if ("geolocation" in navigator) { +``` +if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition(function(position) { console.log("Latitude: " + position.coords.latitude); console.log("Longitude: " + position.coords.longitude); @@ -45,7 +46,8 @@ The Canvas API provides a means for drawing graphics via JavaScript and the HTML ###Example Code: Drawing Shapes on Canvas -```var canvas = document.getElementById('myCanvas'); +``` +var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Draw a rectangle @@ -59,7 +61,8 @@ The Web Storage API provides mechanisms by which browsers can store key-value pa ###Example Code: Storing Data in localStorage ####Local stoage -```// Save data to local storage +``` +// Save data to local storage localStorage.setItem('key', 'value'); // Retrieve data from local storage @@ -68,7 +71,8 @@ console.log(value);``` ####Session Storage -```// Save data to session storage +``` +// Save data to session storage sessionStorage.setItem('key', 'value'); // Retrieve data from session storage @@ -81,7 +85,8 @@ The Notification API allows web pages to control the display of system notificat ###Example Code: Displaying a Notification -```if (Notification.permission === "granted") { +``` +if (Notification.permission === "granted") { new Notification("Hello, World!"); } else if (Notification.permission !== "denied") { Notification.requestPermission().then(permission => { From 42f9fa4e398e9f9dfed6365519f7650e83ee8bfe Mon Sep 17 00:00:00 2001 From: srishti-coder Date: Thu, 4 Jul 2024 03:12:28 +0530 Subject: [PATCH 4/5] Corrected markdown syntax and added more context to Fetch API section --- web-apis.md | 79 +++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 59 insertions(+), 20 deletions(-) diff --git a/web-apis.md b/web-apis.md index 80de232c..3e7a956a 100644 --- a/web-apis.md +++ b/web-apis.md @@ -4,33 +4,68 @@ Web APIs are interfaces provided by the browser that allow you to interact with the browser and the underlying operating system. +Some common Web APIs include: + +- **DOM API**: Allows for dynamic manipulation of HTML and CSS. +- **Fetch API**: Enables network requests to retrieve resources from servers. +- **Geolocation API**: Provides the user's location. +- **Canvas API**: Used for drawing graphics via JavaScript. +- **Storage API**: Allows for storing data on the client-side. + +### Why Use Web APIs? + +Web APIs are essential for modern web development because they: +- **Enable Rich User Experiences**: They allow developers to create interactive and dynamic web applications. +- **Provide Access to Browser Capabilities**: Web APIs offer access to features like geolocation, notifications, and local storage. +- **Facilitate Communication with Servers**: They make it easy to fetch data from servers, submit forms, and interact with web services. + +### How Web APIs Work? + +Web APIs work by providing a set of functions and properties that developers can use to interact with the browser. These functions are exposed by the browser and can be called using JavaScript. When a function is called, the browser performs the corresponding action, such as fetching data from a server or updating the DOM. + +#### Example Workflow + +1.User Action: The user interacts with the web application, such as clicking a button. + +2.API Call: JavaScript code in the web application makes a call to a Web API. + +3.Browser Action: The browser performs the requested action, such as retrieving data or updating the display. + +4.Response Handling: The web application handles the response from the API and updates the user interface accordingly. + + ## DOM Manipulation The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. ### Example Code: Changing the Content of an Element +````md ```javascript -document.getElementById("demo").innerHTML = "Hello, World!";``` - -##Fetch API +document.getElementById("demo").innerHTML = "Hello, World!"; +``` +```` + +## Fetch API The Fetch API provides an interface for fetching resources (including across the network). -###Example Code: Simple Fetch Request +### Example Code: Simple Fetch Request -```fetch('https://api.example.com/data') +```javascript +fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:'));``` -##Geolocation API +## Geolocation API The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information. -###Example Code: Getting User Location +### Example Code: Getting User Location -```if ("geolocation" in navigator) { +```javascript +if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition(function(position) { console.log("Latitude: " + position.coords.latitude); console.log("Longitude: " + position.coords.longitude); @@ -39,49 +74,53 @@ The Geolocation API allows the user to provide their location to web application console.log("Geolocation is not supported by this browser."); }``` -##Canvas API +## Canvas API The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. ###Example Code: Drawing Shapes on Canvas -```var canvas = document.getElementById('myCanvas'); -var context = canvas.getContext('2d'); +```javascript +let canvas = document.getElementById('myCanvas'); +let context = canvas.getContext('2d'); // Draw a rectangle context.fillStyle = '#FF0000'; context.fillRect(10, 10, 150, 100);``` -##Storage API +## Storage API The Web Storage API provides mechanisms by which browsers can store key-value pairs, in a much more intuitive fashion than using cookies. -###Example Code: Storing Data in localStorage +### Example Code: Storing Data in localStorage -####Local stoage -```// Save data to local storage +#### Local stoage +```javascript +// Save data to local storage localStorage.setItem('key', 'value'); // Retrieve data from local storage let value = localStorage.getItem('key'); console.log(value);``` -####Session Storage +#### Session Storage -```// Save data to session storage +```javascript +// Save data to session storage sessionStorage.setItem('key', 'value'); // Retrieve data from session storage let value = sessionStorage.getItem('key'); console.log(value);``` -##Notification API +## Notification API The Notification API allows web pages to control the display of system notifications to the end user. -###Example Code: Displaying a Notification +### Example Code: Displaying a Notification -```if (Notification.permission === "granted") { +```javascript +if (Notification.permission === "granted") { new Notification("Hello, World!"); } else if (Notification.permission !== "denied") { Notification.requestPermission().then(permission => { From 2788102921488f922dd3d0918089cef5e01817e4 Mon Sep 17 00:00:00 2001 From: Suman Kunwar Date: Sun, 14 Jul 2024 06:39:51 -0500 Subject: [PATCH 5/5] Update web-apis.md fix merge conflicts --- web-apis.md | 60 ++++++++++++++--------------------------------------- 1 file changed, 16 insertions(+), 44 deletions(-) diff --git a/web-apis.md b/web-apis.md index 5dcc9c96..6f41f10d 100644 --- a/web-apis.md +++ b/web-apis.md @@ -1,7 +1,5 @@ # Web APIs -## Introduction to Web APIs - Web APIs are interfaces provided by the browser that allow you to interact with the browser and the underlying operating system. Some common Web APIs include: @@ -40,33 +38,25 @@ The Document Object Model (DOM) is a programming interface for web documents. It ### Example Code: Changing the Content of an Element -<<<<<<< HEAD -````md + ```javascript document.getElementById("demo").innerHTML = "Hello, World!"; ``` -```` ## Fetch API -======= -```document.getElementById("demo").innerHTML = "Hello, World!";``` -##Fetch API ->>>>>>> f4a5824ee93448bb49bc1c8b1f89fc4160ceb557 The Fetch API provides an interface for fetching resources (including across the network). ### Example Code: Simple Fetch Request -<<<<<<< HEAD + ```javascript -======= -``` ->>>>>>> f4a5824ee93448bb49bc1c8b1f89fc4160ceb557 fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) - .catch(error => console.error('Error:'));``` + .catch(error => console.error('Error:')); +``` ## Geolocation API @@ -74,11 +64,7 @@ The Geolocation API allows the user to provide their location to web application ### Example Code: Getting User Location -<<<<<<< HEAD ```javascript -======= -``` ->>>>>>> f4a5824ee93448bb49bc1c8b1f89fc4160ceb557 if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition(function(position) { console.log("Latitude: " + position.coords.latitude); @@ -86,27 +72,22 @@ if ("geolocation" in navigator) { }); } else { console.log("Geolocation is not supported by this browser."); -}``` - +} +``` ## Canvas API The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. ###Example Code: Drawing Shapes on Canvas -<<<<<<< HEAD ```javascript let canvas = document.getElementById('myCanvas'); let context = canvas.getContext('2d'); -======= -``` -var canvas = document.getElementById('myCanvas'); -var context = canvas.getContext('2d'); ->>>>>>> f4a5824ee93448bb49bc1c8b1f89fc4160ceb557 // Draw a rectangle context.fillStyle = '#FF0000'; -context.fillRect(10, 10, 150, 100);``` +context.fillRect(10, 10, 150, 100); +``` ## Storage API @@ -114,33 +95,26 @@ The Web Storage API provides mechanisms by which browsers can store key-value pa ### Example Code: Storing Data in localStorage -<<<<<<< HEAD + #### Local stoage ```javascript -======= -####Local stoage -``` ->>>>>>> f4a5824ee93448bb49bc1c8b1f89fc4160ceb557 // Save data to local storage localStorage.setItem('key', 'value'); // Retrieve data from local storage let value = localStorage.getItem('key'); -console.log(value);``` - +console.log(value); +``` #### Session Storage -<<<<<<< HEAD ```javascript -======= -``` ->>>>>>> f4a5824ee93448bb49bc1c8b1f89fc4160ceb557 // Save data to session storage sessionStorage.setItem('key', 'value'); // Retrieve data from session storage let value = sessionStorage.getItem('key'); -console.log(value);``` +console.log(value); +``` ## Notification API @@ -148,11 +122,8 @@ The Notification API allows web pages to control the display of system notificat ### Example Code: Displaying a Notification -<<<<<<< HEAD ```javascript -======= -``` ->>>>>>> f4a5824ee93448bb49bc1c8b1f89fc4160ceb557 + if (Notification.permission === "granted") { new Notification("Hello, World!"); } else if (Notification.permission !== "denied") { @@ -161,4 +132,5 @@ if (Notification.permission === "granted") { new Notification("Hello, World!"); } }); -}``` +} +```