Add fade out for messages; Remove unused utility

src/js/utilities.js

@@ -136,31 +136,6 @@ export function getHomonymnNumber(word) {
   return 0;
 }
 
-export function generateRandomWords(numberOfWords) {
-  console.log('Generating', numberOfWords, 'words...');
-  const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
-  letters.forEach(letter => letters.push(letter.toUpperCase()));
-  const words = [];
-  while (words.length < numberOfWords) {
-    let word = '';
-    while (word === '' || words.includes(word)) {
-      word += letters[Math.floor(Math.random() * letters.length)];
-    }
-    words.push(word);
-  }
-  words.forEach((word, index) => {
-    addWord({
-      name: word,
-      pronunciation: '/' + word + '/',
-      partOfSpeech: Math.random() > 0.5 ? 'Noun' : 'Verb',
-      definition: word,
-      details: word + (index > 0 ? '\n\nRef: {{' + words[index - 1] + '}}' : ''),
-      wordId: getNextId(),
-    }, false);
-  });
-  console.log('done');
-}
-
 export function addMessage(messageText, time = 5000, extraClass = false) {
   const messagingSection = document.getElementById('messagingSection');
   const element = document.createElement('div');
@@ -174,7 +149,7 @@ export function addMessage(messageText, time = 5000, extraClass = false) {
   const closeButton = element.querySelector('.close-button');
   const closeMessage = () => {
     closeButton.removeEventListener('click', closeMessage);
-    messagingSection.removeChild(element);
+    fadeOutElement(element);
   };
   closeButton.addEventListener('click', closeMessage);
 
@@ -183,6 +158,13 @@ export function addMessage(messageText, time = 5000, extraClass = false) {
   }
 }
 
+export function fadeOutElement(element) {
+  element.classList.add('fadeout');
+  setTimeout(() => {
+    element.parentElement.removeChild(element);
+  }, 300);
+}
+
 export function hideAllModals() {
   const permanentModals = ['#searchModal', '#settingsModal', '#editModal'];
   const hideModals = document.querySelectorAll(permanentModals.join(',')),

src/scss/_elements.scss

@@ -212,6 +212,25 @@ span .tag {
   }
 }
 
+.fadeout {
+  overflow: hidden;
+  animation-name: shut;
+  animation-duration: 0.3s;
+  animation-timing-function: linear;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+}
+@keyframes shut {
+  0% {
+    opacity: 1;
+    max-height: 200px;
+  }
+  100% {
+    opacity: 0;
+    max-height: 0px;
+  }
+}
+
 .pagination {
   position: relative;
   text-align: center;