Fixed bugs with data storage, fixed bug where content won't show. Cha…

…nged font and size of loading screen title. Changed data storage channel. It is now: "localStorage -> KanbanCloneData" and is more unique choice of name.

index.html

@@ -53,7 +53,7 @@
                             </div>
                         </div>
                     </div>
-                    
+
                     <span class="tooltip">
                         Filters
                     </span>

main.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css?family=Pacifico');
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap');
 
@@ -10,9 +11,6 @@
     }
 }
 
-@keyframes height-decrease {
-}
-
 :root {
     --primary-color: #343a40;
     --secondary-color: #6c757d;
@@ -36,6 +34,7 @@
 
     --font-family-sans-serif: 'Open Sans', sans-serif;
     --font-family-monospace: 'JetBrains Mono', monospace;
+    --font-family-cursive: 'Pacifico', cursive;
 
     --color-1: #dc3545;
     --color-2: #ffc107;
@@ -68,6 +67,7 @@
 
     --font-family-sans-serif: 'Open Sans', sans-serif;
     --font-family-monospace: 'JetBrains Mono', monospace;
+    --font-family-cursive: 'Pacifico', cursive;
 
     --color-1: #dc3545;
     --color-2: #ffc107;
@@ -100,6 +100,7 @@
 
     --font-family-sans-serif: 'Open Sans', sans-serif;
     --font-family-monospace: 'JetBrains Mono', monospace;
+    --font-family-cursive: 'Pacifico', cursive;
 
     --color-1: #dc3545;
     --color-2: #ffc107;
@@ -193,8 +194,8 @@ body {
 }
 
 .loader-title {
-    font-size: 2rem;
-    font-family: var(--font-family-monospace);
+    font-size: 4rem;
+    font-family: var(--font-family-cursive);
     color: var(--light-color);
     user-select: none;
     pointer-events: none;
@@ -625,7 +626,6 @@ body:not(:has(.card)) .cards-container:not(:has(.card)) > * {
     display: flex;
     flex-wrap: wrap;
     transition: all 0.3s ease-in-out;
-    animation: height-decrease 0.3s ease-in-out;
     justify-content: center;
     align-items: flex-start;
     align-content: flex-start;

main.js

@@ -1,4 +1,19 @@
 var currentFilter = "all";
+var lsAddress = "KanbanCloneData";
+
+function getLocalStorage() {
+    try {
+        JSON.parse(localStorage.getItem(lsAddress));
+    } catch (error) {
+        localStorage.setItem(lsAddress, "[]");
+    }
+
+    return localStorage.getItem(lsAddress) || "[]";
+}
+
+function setLocalStorage(data) {
+    localStorage.setItem(lsAddress, data);
+}
 
 function reloadPage() {
     document.getElementById("loader").classList.remove("off");
@@ -53,15 +68,15 @@ function toggleTheme() {
 }
 
 function loadData() {
-    let data = JSON.parse(localStorage.getItem("data")) || [];
+    let data = JSON.parse(getLocalStorage()) || [];
 
     data.forEach(card => {
         addCard(card.id, card.content, card.color, card.locked, card.column, false);
     });
 }
 
 function saveCardData(card_id, content, color) {
-    let data = JSON.parse(localStorage.getItem("data")) || [];
+    let data = JSON.parse(getLocalStorage()) || [];
 
     data.push({
         id: card_id,
@@ -71,19 +86,17 @@ function saveCardData(card_id, content, color) {
         column: null
     });
 
-    localStorage.setItem("data", JSON.stringify(data));
+    setLocalStorage(JSON.stringify(data));
 }
 
 function removeData(card_id) {
-    let data = JSON.parse(localStorage.getItem("data")) || [];
-
+    let data = JSON.parse(getLocalStorage()) || [];
     data = data.filter(card => card.id != card_id);
-
-    localStorage.setItem("data", JSON.stringify(data));
+    setLocalStorage(JSON.stringify(data));
 }
 
 function swapColorData(card_id) {
-    let data = JSON.parse(localStorage.getItem("data")) || [];
+    let data = JSON.parse(getLocalStorage()) || [];
 
     data.forEach(card => {
         if (card.id == card_id) {
@@ -94,35 +107,35 @@ function swapColorData(card_id) {
         }
     });
 
-    localStorage.setItem("data", JSON.stringify(data));
+    setLocalStorage(JSON.stringify(data));
 }
 
 function lockCardData(card_id) {
-    let data = JSON.parse(localStorage.getItem("data")) || [];
+    let data = JSON.parse(getLocalStorage()) || [];
 
     data.forEach(card => {
         if (card.id == card_id) {
             card.locked = true;
         }
     });
 
-    localStorage.setItem("data", JSON.stringify(data));
+    setLocalStorage(JSON.stringify(data));
 }
 
 function unlockCardData(card_id) {
-    let data = JSON.parse(localStorage.getItem("data")) || [];
+    let data = JSON.parse(getLocalStorage()) || [];
 
     data.forEach(card => {
         if (card.id == card_id) {
             card.locked = false;
         }
     });
 
-    localStorage.setItem("data", JSON.stringify(data));
+    setLocalStorage(JSON.stringify(data));
 }
 
 function putCardInColumn(card_id, column) {
-    let data = JSON.parse(localStorage.getItem("data")) || [];
+    let data = JSON.parse(getLocalStorage()) || [];
     let temp = null;
 
     data.forEach(card => {
@@ -135,7 +148,7 @@ function putCardInColumn(card_id, column) {
     data = data.filter(card => card.id != card_id);
     data.unshift(temp);
 
-    localStorage.setItem("data", JSON.stringify(data));
+    setLocalStorage(JSON.stringify(data));
 }
 
 function generateID(length) {