Add floating messaging system

index.html

@@ -152,11 +152,11 @@
           <label>Theme
             <select disabled>
               <option selected value="default">Default</option>
-              <option selected value="dark">Dark</option>
+              <option value="dark">Dark</option>
-              <option selected value="light">Light</option>
+              <option value="light">Light</option>
-              <option selected value="blue">Blue</option>
+              <option value="blue">Blue</option>
-              <option selected value="green">Green</option>
+              <option value="green">Green</option>
-              <option selected value="royal">Royal</option>
+              <option value="royal">Royal</option>
             </select>
           </label>
         </form>
@@ -303,5 +303,7 @@
       </footer>
     </div>
   </section>
+
+  <div id="messagingSection"></div>
 </body>
 </html>

src/index.js

@@ -2,15 +2,16 @@ import './main.scss';
 
 import setupListeners from './js/setupListeners';
 import { renderAll } from './js/render';
-import { generateRandomWords } from './js/utilities';
+import { generateRandomWords, addMessage } from './js/utilities';
 import { loadDictionary } from './js/dictionaryManagement';
 
 function initialize() {
-  console.log('initializing');
+  addMessage('Loading!');
   loadDictionary();
   // generateRandomWords(100);
   setupListeners();
   renderAll();
+  addMessage('Done Loading!');
   // console.log('Rendered!');
 }
 

src/js/utilities.js

@@ -1,4 +1,3 @@
-import { cloneObject } from '../helpers';
 import { addWord } from './wordManagement';
 
 export function getNextId() {
@@ -131,3 +130,20 @@ export function generateRandomWords(numberOfWords) {
   });
   console.log('done');
 }
+
+export function addMessage(messageText, time = 5000) {
+  const messagingSection = document.getElementById('messagingSection');
+  const element = document.createElement('div');
+  element.classList.add('message');
+  element.innerHTML = '<a class="close-button">&times;&#xFE0E;</a>' + messageText;
+  messagingSection.appendChild(element);
+
+  const closeButton = element.querySelector('.close-button');
+  const closeMessage = () => {
+    closeButton.removeEventListener('click', closeMessage);
+    messagingSection.removeChild(element);
+  };
+  closeButton.addEventListener('click', closeMessage);
+
+  setTimeout(closeMessage, time);
+}

src/scss/_structure.scss

@@ -266,6 +266,36 @@
   }
 }
 
+#messagingSection {
+  position: fixed;
+  bottom: $general-padding;
+  right: $general-padding;
+  max-width: 250px;
+
+  .message {
+    position: relative;
+    display: block;
+    padding: $general-padding ($general-padding * 2) $general-padding $general-padding;
+    background-color: $light;
+    border: $border;
+    border-radius: 5px;
+    margin-bottom: 5px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .close-button {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      font-size: 25px;
+      line-height: 10px;
+      cursor: pointer;
+    }
+  }
+}
+
 #bottom {
   text-align: center;