main

AzharAli-github · AzharAli-github · commit 8034a3ada33f · 2023-01-15T00:19:10.000+05:00
diff --git a/JavaScript/Advance/BOM/6.popUp/images/js-logo.png b/JavaScript/Advance/BOM/6.popUp/images/js-logo.png
diff --git a/JavaScript/Advance/BOM/6.popUp/index.html b/JavaScript/Advance/BOM/6.popUp/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>pop-up JS</title>
+    <link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>Pop-Up in JavaScript</h1>
+    <h2>There are three types of pop-up in JS Click on each button to check the pop-ups</h2>
+    <button onclick="firstDisplay()">Confirm Box</button>
+    <button onclick="secondDisplay()">Prompt</button>
+    <button onclick="thirdDisplay()">Alert</button>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/BOM/6.popUp/script.js b/JavaScript/Advance/BOM/6.popUp/script.js
@@ -0,0 +1,35 @@
+/*
+     There are three types of pop-ups in JavaScript
+       1. Confirm Box
+       2. Prompt
+       3. Alert
+
+       Understand the Examples Below to get Acknowledged about pop-ups
+*/
+function firstDisplay() {
+    window.confirm("Are you enjoying nowadays?")
+    if (confirm("Press a button!")) {
+        txt = "You pressed OK!";
+    } else {
+        txt = "You pressed Cancel!";
+    }
+}
+
+//  Example 2 we will discuss about prompt
+
+function secondDisplay() {
+    let person = window.prompt("What is your Name?");
+    let text;
+    if (person == null || person == "") {
+        alert("Don't Try to Skip, Click on Second Button and Enter your Name");
+    } else {
+        alert("Thanks " + person + "!")
+        console.log(person)
+    }
+}
+
+// Example 3 is very simple and which is alert
+
+function thirdDisplay() {
+    alert("Enjoy your Day!")
+}
diff --git a/JavaScript/Advance/BOM/6.popUp/style.css b/JavaScript/Advance/BOM/6.popUp/style.css
@@ -0,0 +1,23 @@
+h1 {
+    font-family: sans-serif;
+}
+
+h2 {
+    font-family: cursive;
+}
+
+button {
+    font-size: 22px;
+    margin: 0px 10px;
+    background-color: transparent;
+    cursor: pointer;
+    border-radius: 5px;
+    padding: 10px 15px;
+    font-weight: 700;
+    transition: all ease 0.5s;
+}
+
+button:hover {
+    background-color: black;
+    color: white;
+}
