init app [project89]

pradipchaudhary · pradipchaudhary · commit b3f8a7a2bd4e · 2024-02-12T16:24:23.000+05:45
diff --git a/89-Aria Role Implementation/index.html b/89-Aria Role Implementation/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="styles.css" />
+        <title>ARIA Role Implementation App</title>
+    </head>
+    <body>
+        <div id="main" role="main" aria-labelledby="main-heading">
+            <h1 id="main-heading">ARIA Role Implementation App</h1>
+            <p>This is a simple example demonstrating ARIA roles.</p>
+            <button
+                id="alertBtn"
+                role="button"
+                aria-label="Click me to show an alert"
+            >
+                Show Alert
+            </button>
+        </div>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/89-Aria Role Implementation/script.js b/89-Aria Role Implementation/script.js
@@ -0,0 +1,7 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const alertBtn = document.getElementById("alertBtn");
+
+    alertBtn.addEventListener("click", function () {
+        alert("Hello, this is an alert!");
+    });
+});
diff --git a/89-Aria Role Implementation/styles.css b/89-Aria Role Implementation/styles.css
@@ -0,0 +1,22 @@
+body {
+    font-family: "Arial", sans-serif;
+    text-align: center;
+    padding: 20px;
+}
+
+#main {
+    background-color: #f4f4f4;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #ddd;
+}
