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

@ -19,3 +19,6 @@ body {
margin: 0; margin: 0;
color: red; color: red;
} }
.hidden {
display: none;
}

2
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>

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");