Refactor paletee history and update filename in the index

assets/js/palettehistory.js

@@ -3,20 +3,17 @@
   // populate history right away
   loadHistory();
 
+  // Bind history updates to the ratio submit button
   const actionButton = document.getElementById('brand-color-button');
-
   actionButton.addEventListener('click', () => {
     // add contents of the text entry to local storage
     const userInput = document.getElementById('brand-color-field').value.trim();
 
-    // todo: check if local storage available
-
     // prevent empty item
     if (userInput === '') {
       return;
     }
 
-    // todo: abstract this out to it's own method for re-use
     // Retrieve local storage or default to empty array
     let storage = JSON.parse(localStorage.getItem('palettes'));
     if (storage) {
@@ -30,13 +27,9 @@
       storage = [userInput];
     }
 
-    // add our item to it and store back to local storage
-    const itemsAsArray = extractValues(userInput);
     localStorage.setItem('palettes', JSON.stringify(storage));
-    // Update our history section
-    const markup = createPaletteFromValues(itemsAsArray);
 
-    updateHistory(markup);
+    loadHistory();
   });
 
   /**
@@ -138,7 +131,8 @@ console.log("empty", emptyText);
   function clearHistory () {
     localStorage.removeItem('palettes');
     // remove the palettes from the page
-    historyMarkupDelete();
+    // historyMarkupDelete();
+    loadHistory();
   }
 
   /**

index.html

@@ -83,6 +83,7 @@ <h3>Palette from image</h3>
           </div>
           <div id="input-history" class="input-history u__space__outer g--two">
             <h3>Palette History <span id="clear-history">[Clear]</span></h3>
+            <p class="empty-text">No saved palettes</p>
           </div>
         </div>
 
@@ -158,7 +159,7 @@ <h3>Check your hover text color vs. your body text color</h3>
       integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
       crossorigin="anonymous"></script>
     <script src="assets/js/serviceworker.js"></script>
-    <script src="assets/js/localstorage.js"></script>
+    <script src="assets/js/palettehistory.js"></script>
     <script src="assets/js/tinycolor.js"></script>
     <script src="assets/js/colorcube.js" ></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>