kumi/great-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: implement dynamic error box visibility

Browse source 
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.
This commit is contained in:
Kumi 2024-03-28 09:20:53 +01:00
parent a8e856ba17
commit 010845611d
Signed by: kumi
GPG key ID: ECBCC9082395383F
3 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.css
View file

@ -18,4 +18,7 @@ body {
font-size: 2em; font-size: 2em;
margin: 0; margin: 0;
color: red; color: red;
}
.hidden {
display: none;
} }

6
index.html
View file

@ -8,7 +8,7 @@
/> />
</head> </head>
<body> <body>
<div class="error-box"> <div class="error-box hidden">
<h1 class="mb-4"> <h1 class="mb-4">
FATAL ERROR: <span class="browser"></span> Detected FATAL ERROR: <span class="browser"></span> Detected
</h1> </h1>
@ -18,14 +18,14 @@
</p> </p>
<p class="mb-4"> <p class="mb-4">
I apologize for the inaccessibility. As this site is now public I will 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 believe there is a PR currently in review for
<span class="browser"></span> that attempts to fix the regression. <span class="browser"></span> that attempts to fix the regression.
Whether or not that will fix the bug is unknown. Updates will be posted Whether or not that will fix the bug is unknown. Updates will be posted
here. here.
</p> </p>
<p class="mb-4"> <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. different browser.
</p> </p>
<p>Thank you - Kumi</p> <p>Thank you - Kumi</p>

3
src/index.js
View file

@ -14,3 +14,6 @@ console.log(spans);
spans.forEach((span) => { spans.forEach((span) => {
span.textContent = browser; span.textContent = browser;
}); });
const box = document.querySelector(".error-box");
box.classList.remove("hidden");