added Smooth Transitions for letters and answers

Author: adhamhaithameid

script.js

@@ -6,12 +6,15 @@ let romajiButton = document.getElementById("romaji");
 const blockquote = document.getElementById('letter');
 const answer = document.getElementById('answer');
 let main = document.getElementById('main');
+const instructionText = document.querySelector('.main p');
 
 let ind = Math.floor(Math.random() * kanaList.length);
 
 document.addEventListener("DOMContentLoaded", () => {
     const savedMode = localStorage.getItem('kanaMode');
 
+    instructionText.textContent = "Click to reveal";
+
     if (savedMode === 'katakana') {
         katakanaButton.click();
     } else if (savedMode === 'romaji') {
@@ -28,6 +31,7 @@ hiraganaButton.addEventListener("click", () => {
         answer.classList.remove('shown');
         hiraganaButton.classList.toggle('clicked');
         blockquote.textContent = kanaList[ind][0];
+        instructionText.textContent = "Click to reveal";
     }
     katakanaButton.classList.remove('clicked');
     romajiButton.classList.remove('clicked');
@@ -40,6 +44,7 @@ katakanaButton.addEventListener("click", () => {
         answer.classList.remove('shown');
         katakanaButton.classList.toggle('clicked');
         blockquote.textContent = kanaList[ind][1];
+        instructionText.textContent = "Click to reveal";
     }
     hiraganaButton.classList.remove('clicked');
     romajiButton.classList.remove('clicked');
@@ -52,6 +57,7 @@ romajiButton.addEventListener("click", () => {
         answer.classList.remove('shown');
         romajiButton.classList.toggle('clicked');
         blockquote.textContent = kanaList[ind][2];
+        instructionText.textContent = "Click to reveal";
     }
     hiraganaButton.classList.remove('clicked');
     katakanaButton.classList.remove('clicked');
@@ -60,23 +66,42 @@ romajiButton.addEventListener("click", () => {
 main.addEventListener("click", () => {
     if(!answer.classList.contains('shown')){
         answer.classList.add('shown');
+        instructionText.textContent = "Click for next";
     }
     else{
-        answer.classList.remove('shown');
-        ind = Math.floor(Math.random() * kanaList.length);
-        
-        if(hiraganaButton.classList.contains('clicked')){   
-            blockquote.textContent = kanaList[ind][0];
-            answer.textContent = kanaList[ind][2];
-        }
-        else if(katakanaButton.classList.contains('clicked')){   
-            blockquote.textContent = kanaList[ind][1];
-            answer.textContent = kanaList[ind][2];
-        }
-        else{
-            blockquote.textContent = kanaList[ind][2];
-            answer.textContent = kanaList[ind][0] + " " + kanaList[ind][1];
-        }
+        blockquote.classList.add('fade-out');
+        answer.classList.add('fade-out');
+        instructionText.classList.add('fade-out');
+
+        setTimeout(() => {
+            ind = Math.floor(Math.random() * kanaList.length);
+            
+            answer.style.transition = 'none'; 
+            answer.classList.remove('shown');
+            
+            instructionText.textContent = "Click to reveal";
+
+            if(hiraganaButton.classList.contains('clicked')){   
+                blockquote.textContent = kanaList[ind][0];
+                answer.textContent = kanaList[ind][2];
+            }
+            else if(katakanaButton.classList.contains('clicked')){   
+                blockquote.textContent = kanaList[ind][1];
+                answer.textContent = kanaList[ind][2];
+            }
+            else{
+                blockquote.textContent = kanaList[ind][2];
+                answer.textContent = kanaList[ind][0] + " " + kanaList[ind][1];
+            }
+
+            void answer.offsetWidth; 
+
+            answer.style.transition = '';
+
+            blockquote.classList.remove('fade-out');
+            answer.classList.remove('fade-out');
+            instructionText.classList.remove('fade-out');
+        }, 100);
     }
 })
 

style.css

@@ -1,5 +1,5 @@
 * {
-  box-sizing: border-box;
+  box-sizing: border-box; 
 }
 
 ::-webkit-scrollbar {
@@ -15,6 +15,21 @@
   --text-hover: #ffffff;
 }
 
+body:focus-visible {
+  outline: none;
+}
+
+html:focus-visible {
+  outline: none;
+}
+
+button:focus-visible, 
+a:focus-visible,
+.main:focus-visible {
+  outline: none;
+  outline-offset: none;
+}
+
 html, body {
   margin: 0;
   padding: 0;
@@ -85,7 +100,7 @@ html, body {
   width: 24px;
   height: 24px;
   transition: transform 0.2s ease;
-  display: block;
+  display: block; 
 }
 
 .github svg {
@@ -130,7 +145,6 @@ html, body {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-  
   align-items: center;
   justify-content: center;
   display: flex;
@@ -146,18 +160,24 @@ html, body {
   transition: all 0.2s ease-in-out;
   margin: 0;
   padding: 0;
+  box-shadow: 0px 4px 0px rgba(0,0,0,0.2);
 }
 
 .buttons button:hover {
   cursor: pointer;
   background-color: #262a2b;
-  transform: scale(1.05);
 }
 
 .buttons button:active {
   transform: scale(0.95);
 }
 
+.buttons button:active,
+.buttons button.clicked {
+  transform: translateY(2px) scale(0.98);
+  box-shadow: 0px 1px 0px rgba(0,0,0,0.2);
+}
+
 #hiragana.clicked,
 #katakana.clicked,
 #romaji.clicked {
@@ -193,10 +213,19 @@ html, body {
   align-items: center;
   justify-content: center;
   display: flex;
-  font-size: 100px; 
+  font-size: 100px;
   font-size: clamp(80px, 25vw, 150px);
 }
 
+#letter {
+  font-family: "Zen Maru Gothic", sans-serif;
+}
+
+#letter.fade-out {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
 .submain {
   display: flex;
   flex-direction: column;
@@ -213,23 +242,37 @@ html, body {
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: 10px; 
+  border: 2px dashed rgba(255, 255, 255, 0.1);
+}
+
+#answer.fade-out {
+  opacity: 0;
+  transform: scale(0.9);
 }
 
 #answer.shown {
-  transition: ease 0.2s;
   text-align: center;
   padding: 0 15px;
   font-size: 25px;
   font-family: "Comic Neue", sans-serif;
   color: white;
   background-color: var(--buttons);
-  border-radius: 10px;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+  border: 2px solid var(--buttons);
 }
 
-#letter {
-  transition: all ease 0.2s;
-  font-family: "Zen Maru Gothic", sans-serif;
+.main p, 
+#letter, 
+#answer {
+  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+  opacity: 1;
+  transform: scale(1);
+}
+
+.fade-out {
+  opacity: 0 !important;
+  transform: scale(0.9) !important;
 }
 
 @media (max-width: 600px) {