Merge pull request #41 from AzharAli-github/main

AzharAli-github · web-flow · commit ced23ea79df9 · 2023-01-21T12:03:06.000+05:00
web-history
diff --git a/JavaScript/Advance/Web API/web-history API/images/js-logo.png b/JavaScript/Advance/Web API/web-history API/images/js-logo.png
diff --git a/JavaScript/Advance/Web API/web-history API/index.html b/JavaScript/Advance/Web API/web-history API/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>web-history API</title>
+</head>
+
+<body>
+    <h1>Web History API</h1>
+    <button id="viewDoc">View Doc</button>
+    <p id="textOne"></p>
+    <!-- First Example -->
+    <h2>History back()</h2>
+    <button onclick="DisplayTwo()">Back</button>
+    <!-- Second Example -->
+    <h2>History go()</h2>
+    <button onclick="DisplayThree()">go 2 files back</button>
+    <!-- Third Example -->
+    <h2>History forward()</h2>
+    <button onclick="DisplayFour()">forward</button>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/Web API/web-history API/script.js b/JavaScript/Advance/Web API/web-history API/script.js
@@ -0,0 +1,42 @@
+// In this lesson we will learn about Web History API
+
+let textOne = document.getElementById('textOne');
+let viewDoc = document.getElementById('viewDoc');
+
+viewDoc.addEventListener("click", () => {
+    let x = true;
+    if (x == true) {
+        textOne.innerHTML = `
+    <p>The Web History API provides easy methods to access the windows.history object.</p>
+    <p>The window.history object contains the URLs (Web Sites) visited by the user.</p>
+    <h1>There are three main types of History API</h1>
+    <li>back()</li>
+    <li>go(-2)</li>
+    <li>forward()</li>
+    <h2>Check the Examples Below with the .js files for better Understanding</h2>
+    <p style ="font-family: monospace; color: red;">This will work when we are having more than one web pages in a website</p>
+    `
+        x = false;
+    } else {
+        textOne.innerHTML.style.display = "none";
+        x = true;
+    }
+})
+
+//  History back()
+
+function DisplayTwo() {
+    window.history.back();
+}
+
+//  History go()
+
+function DisplayThree() {
+    window.history.go(-2);
+}
+
+//   History forward()
+
+function DisplayFour() {
+    window.history.forward();
+}
