From 010845611d793c8ef6d87eae0e728a72cb9c5067 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Thu, 28 Mar 2024 09:20:53 +0100
Subject: [PATCH] feat: implement dynamic error box visibility

Introduced a `.hidden` CSS class to control the visibility of elements
and initially applied it to the error box, making it hidden by default.
JavaScript logic was added to remove this class dynamically, allowing
for the error box to be shown conditionally based on specific criteria.
This change enhances user experience by preventing immediate display of
error messages on page load, instead allowing for dynamic visibility
control based on application state or user actions.
---
 index.css    | 3 +++
 index.html   | 6 +++---
 src/index.js | 3 +++
 3 files changed, 9 insertions(+), 3 deletions(-)
diff --git a/index.css b/index.css
index 303f35f..3677714 100644
--- a/index.css
+++ b/index.css
@@ -18,4 +18,7 @@ body {
   font-size: 2em;
   margin: 0;
   color: red;
+}
+.hidden {
+  display: none;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index de22405..62fd614 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
     />
   </head>
   <body>
-    <div class="error-box">
+    <div class="error-box hidden">
       <h1 class="mb-4">
         FATAL ERROR: <span class="browser"></span> Detected
       </h1>
@@ -18,14 +18,14 @@
       </p>
       <p class="mb-4">
         I apologize for the inaccessibility. As this site is now public I will
-        be revisiting this bug to try and find a work around. If I fail, I
+        be revisiting this bug to try and find a workaround. If I fail, I
         believe there is a PR currently in review for
         <span class="browser"></span> that attempts to fix the regression.
         Whether or not that will fix the bug is unknown. Updates will be posted
         here.
       </p>
       <p class="mb-4">
-        In the mean time if you want to access this site you will need to use a
+        In the meantime if you want to access this site you will need to use a
         different browser.
       </p>
       <p>Thank you - Kumi</p>
diff --git a/src/index.js b/src/index.js
index de78f00..78476e0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,3 +14,6 @@ console.log(spans);
 spans.forEach((span) => {
   span.textContent = browser;
 });
+
+const box = document.querySelector(".error-box");
+box.classList.remove("hidden");
\ No newline at end of file
