diff --git a/index.html b/index.html index 078a752..fea88e7 100644 --- a/index.html +++ b/index.html @@ -53,7 +53,7 @@ - + Filters diff --git a/main.css b/main.css index 8c94559..0ed2208 100644 --- a/main.css +++ b/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; diff --git a/main.js b/main.js index d3da50f..2f4ec47 100644 --- a/main.js +++ b/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,7 +68,7 @@ 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); @@ -61,7 +76,7 @@ function loadData() { } 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,11 +107,11 @@ 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) { @@ -106,11 +119,11 @@ function lockCardData(card_id) { } }); - 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) { @@ -118,11 +131,11 @@ function unlockCardData(card_id) { } }); - 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) {