init app [project88]

pradipchaudhary · pradipchaudhary · commit 99a30c29cbf6 · 2024-02-12T16:17:51.000+05:45
diff --git a/88-High-Contrast Mode/index.html b/88-High-Contrast Mode/index.html
@@ -0,0 +1,18 @@
+<!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" />
+        <link rel="stylesheet" href="styles-high-contrast.css" />
+        <title>High-Contrast Mode Tool</title>
+    </head>
+    <body>
+        <div class="container">
+            <h1>High-Contrast Mode Tool</h1>
+            <button id="toggleBtn">Toggle High Contrast</button>
+            <p>This is a sample text for testing high-contrast mode.</p>
+        </div>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/88-High-Contrast Mode/script.js b/88-High-Contrast Mode/script.js
@@ -0,0 +1,10 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const toggleBtn = document.getElementById("toggleBtn");
+    const body = document.body;
+
+    toggleBtn.addEventListener("click", toggleHighContrast);
+
+    function toggleHighContrast() {
+        body.classList.toggle("high-contrast");
+    }
+});
diff --git a/88-High-Contrast Mode/styles-high-contrast.css b/88-High-Contrast Mode/styles-high-contrast.css
@@ -0,0 +1,14 @@
+body.high-contrast {
+    background-color: #000;
+    color: #fff;
+}
+
+body.high-contrast button {
+    background-color: #fff;
+    color: #000;
+}
+
+body.high-contrast p {
+    border: 2px solid #fff;
+    padding: 10px;
+}
diff --git a/88-High-Contrast Mode/styles.css b/88-High-Contrast Mode/styles.css
@@ -0,0 +1,21 @@
+body {
+    font-family: "Arial", sans-serif;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.container {
+    text-align: center;
+    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;
+}
