BOM-Sceen

AzharAli-github · AzharAli-github · commit e8051c6a649a · 2023-01-12T14:58:16.000+05:00
diff --git a/JavaScript/Advance/DOM/2.screen/images/js-logo.png b/JavaScript/Advance/DOM/2.screen/images/js-logo.png
diff --git a/JavaScript/Advance/DOM/2.screen/index.html b/JavaScript/Advance/DOM/2.screen/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>screen-BOM</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
+</head>
+
+<body>
+    <h1>Screen in BOM</h1>
+    <button id="button" onclick="DisplayOne()">Click Here to view your screen Size</button>
+    <div id="textOne">
+
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/DOM/2.screen/script.js b/JavaScript/Advance/DOM/2.screen/script.js
@@ -0,0 +1,15 @@
+let textOne = document.getElementById('textOne');
+let button = document.getElementById('button');
+
+button.addEventListener("click", () => {
+    return (
+        textOne.innerHTML = `
+    <p>Windows Screen: ${window.screen}</p>
+    <p>Windows Screen: ${screen.height}</p>
+    <p>Windows Screen: ${screen.width}</p>
+    <p>Available Screen Width: ${screen.availWidth}</p>
+    <p>Available Screen Height: ${screen.availHeight}</p>
+    <p>Screen Color Depth: ${screen.colorDepth}</p>
+    <p>Screen Pixel Depth: ${screen.pixelDepth}</p>
+    `)
+})
diff --git a/JavaScript/Advance/DOM/2.screen/style.css b/JavaScript/Advance/DOM/2.screen/style.css
@@ -0,0 +1,17 @@
+p {
+    font-family: cursive;
+}
+
+button {
+    background-color: transparent;
+    border: 1px solid green;
+    font-size: 25px;
+    padding: 10px 20px;
+    border-radius: 8px;
+}
+
+button:hover {
+    background-color: green;
+    color: white;
+    transition: all ease 0.5s;
+}
