Merge pull request #30 from AzharAli-github/main

AzharAli-github · web-flow · commit 72a792fbd14b · 2023-01-14T00:07:41.000+05:00
history
diff --git a/JavaScript/Advance/BOM/4.history/images/js-logo.png b/JavaScript/Advance/BOM/4.history/images/js-logo.png
diff --git a/JavaScript/Advance/BOM/4.history/index.html b/JavaScript/Advance/BOM/4.history/index.html
@@ -0,0 +1,22 @@
+<!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>history-BOM</title>
+    <link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>History in BOM</h1>
+    <button onclick="Display()">Click to Show History</button>
+    <div id="textOne">
+
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/BOM/4.history/script.js b/JavaScript/Advance/BOM/4.history/script.js
@@ -0,0 +1,11 @@
+let textOne = document.getElementById('textOne');
+
+function Display() {
+    return (textOne.innerHTML =
+        `
+        <p>Windows History: ${window.history}</p>
+        <p>History Back: ${history.back()}</p>
+        <p>History Forward: ${history.forward()}</p>
+        <p>Windows History: ${window.history}</p>
+    `)
+}
diff --git a/JavaScript/Advance/BOM/4.history/style.css b/JavaScript/Advance/BOM/4.history/style.css
@@ -0,0 +1,18 @@
+p {
+    font-size: 25px;
+    font-family: cursive;
+}
+
+button {
+    background-color: transparent;
+    border: 2px solid rgb(30, 30, 126);
+    padding: 10px 20px;
+    font-size: 20px;
+    border-radius: 5px;
+}
+
+button:hover {
+    background-color: rgb(30, 30, 126);
+    color: white;
+    cursor: pointer;
+}
