BOM-navigator

AzharAli-github · AzharAli-github · commit ab17ac7ff75d · 2023-01-14T00:11:20.000+05:00
diff --git a/JavaScript/Advance/BOM/5.navigator/index.html b/JavaScript/Advance/BOM/5.navigator/index.html
@@ -0,0 +1,19 @@
+<!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>navigation-BOM</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>Navigation in BOM</h1>
+    <button onclick="Display()">Navigate</button>
+    <p id="textOne"></p>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/BOM/5.navigator/script.js b/JavaScript/Advance/BOM/5.navigator/script.js
@@ -0,0 +1,24 @@
+let textOne = document.querySelector('#textOne');
+
+function Display() {
+    return (
+        textOne.innerHTML =
+        `
+        <p>--> Windows Navigator: ${window.navigator}</p>
+        <p>-->  CookieEnabled: ${navigator.cookieEnabled}</p>
+        <p>--> Navigator Language: ${navigator.language}</p>
+        <p>--> Navigator userAgent: ${navigator.userAgent}</p>
+        <p>--> Navigator onLine: ${navigator.onLine}</p>
+        <p>--> Some of the navigation does not work for seecurity reasons like</p>
+        <p>--> Navigator JavaEnabled: ${navigator.javaEnabled}</p>
+        <p>--> Navigator Platform: ${navigator.platform}</p>
+        <p>--> Navigator appVersion: ${navigator.appVersion}</p>
+        <p>--> Navigator Product: ${navigator.product}</p>
+        <p>--> Navigator appCodeName: ${navigator.appCodeName}</p>
+        <p>--> Navigator appName: ${navigator.appName}</p>
+        <p>--> and many others...</p>
+        
+
+        `
+    );
+}
diff --git a/JavaScript/Advance/BOM/5.navigator/style.css b/JavaScript/Advance/BOM/5.navigator/style.css
@@ -0,0 +1,20 @@
+h1 {
+    font-family: cursive;
+}
+
+p {
+    font-family: monospace;
+}
+
+button {
+    background-color: transparent;
+    border: 2px solid rgb(15, 240, 15);
+    border-radius: 5px;
+    font-size: 20px;
+    padding: 10px 20px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: rgb(15, 240, 15);
+}
