add a remove button in top right of each list button - Follow Up Deployment

index.html

@@ -12,7 +12,7 @@
     <style>
         .flashcard {
             perspective: 1000px;
-            min-height: 200px;
+            min-height: 80px;
         }
         .flashcard-inner {
             transition: transform 0.6s;
@@ -85,7 +85,7 @@
             </div>
         </div>
 
-        <div id="flashcards-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+        <div id="flashcards-container" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
             <!-- Flashcards will be inserted here by JavaScript -->
         </div>
     </div>
@@ -95,215 +95,8 @@
             feather.replace();
             AOS.init();
 
-            // Initial flashcards data
-            const initialFlashcards = [
-                { german: "Bad", english: "bath", mastered: false },
-                { german: "Sofa", english: "sofa", mastered: false },
-                { german: "mal", english: "time / once", mastered: false },
-                { german: "Banane", english: "banana", mastered: false },
-                { german: "nach", english: "after / to / toward", mastered: false },
-                { german: "Zahn", english: "tooth", mastered: false },
-                { german: "Bahn", english: "train / railway", mastered: false },
-                { german: "Aal", english: "eel", mastered: false },
-                { german: "Staat", english: "state / country", mastered: false },
-                { german: "man", english: "one / people (impersonal pronoun)", mastered: false },
-                { german: "Mann", english: "man", mastered: false },
-                { german: "Ball", english: "ball", mastered: false },
-                { german: "Apfel", english: "apple", mastered: false },
-                { german: "lesen", english: "to read", mastered: false },
-                { german: "eben", english: "just / exactly", mastered: false },
-                { german: "leben", english: "to live", mastered: false },
-                { german: "zehn", english: "ten", mastered: false },
-                { german: "sehen", english: "to see", mastered: false },
-                { german: "See", english: "lake / sea (context dependent)", mastered: false },
-                { german: "Tee", english: "tea", mastered: false },
-                { german: "Hemd", english: "shirt", mastered: false },
-                { german: "hell", english: "bright / light", mastered: false },
-                { german: "Küche", english: "kitchen", mastered: false },
-                { german: "Garage", english: "garage", mastered: false },
-                { german: "bitte", english: "please", mastered: false },
-                { german: "Treppe", english: "stairs", mastered: false },
-                { german: "gefallen", english: "to please / to like", mastered: false },
-                { german: "bekommen", english: "to get / to receive", mastered: false },
-                { german: "erzählen", english: "to tell / to narrate", mastered: false },
-                { german: "er", english: "he", mastered: false },
-                { german: "Meer", english: "sea", mastered: false },
-                { german: "sehr", english: "very", mastered: false },
-                { german: "schwer", english: "heavy / difficult", mastered: false },
-                { german: "Löcher", english: "holes", mastered: false },
-                { german: "Bücher", english: "books", mastered: false },
-                { german: "haben", english: "to have", mastered: false },
-                { german: "wir", english: "we", mastered: false },
-                { german: "Igel", english: "hedgehog", mastered: false },
-                { german: "ihr", english: "you (plural) / her", mastered: false },
-                { german: "ihm", english: "him", mastered: false },
-                { german: "Sie", english: "you (formal) / she (capitalized = You)", mastered: false },
-                { german: "sieben", english: "seven", mastered: false },
-                { german: "sieht", english: "sees", mastered: false },
-                { german: "Brille", english: "glasses", mastered: false },
-                { german: "holen", english: "to fetch / get", mastered: false },
-                { german: "bogen", english: "bow / curve / arch", mastered: false },
-                { german: "Obst", english: "fruit", mastered: false },
-                { german: "Ohr", english: "ear", mastered: false },
-                { german: "Bohne", english: "bean", mastered: false },
-                { german: "Boot", english: "boat", mastered: false },
-                { german: "doch", english: "but / however / indeed", mastered: false },
-                { german: "Loch", english: "hole", mastered: false },
-                { german: "kommen", english: "to come", mastered: false },
-                { german: "noch", english: "still / yet", mastered: false },
-                { german: "Mond", english: "moon", mastered: false },
-                { german: "Schule", english: "school", mastered: false },
-                { german: "Ufer", english: "shore / bank", mastered: false },
-                { german: "Buch", english: "book", mastered: false },
-                { german: "Stuhl", english: "chair", mastered: false },
-                { german: "Schuhe", english: "shoes", mastered: false },
-                { german: "Mutter", english: "mother", mastered: false },
-                { german: "Mund", english: "mouth", mastered: false },
-                { german: "Käse", english: "cheese", mastered: false },
-                { german: "Täter", english: "perpetrator / offender", mastered: false },
-                { german: "Zähne", english: "teeth", mastered: false },
-                { german: "Äpfel", english: "apples", mastered: false },
-                { german: "Männer", english: "men", mastered: false },
-                { german: "Löwe", english: "lion", mastered: false },
-                { german: "hören", english: "to hear", mastered: false },
-                { german: "Böse", english: "evil / bad", mastered: false },
-                { german: "Söhne", english: "sons", mastered: false },
-                { german: "Löhne", english: "wages", mastered: false },
-                { german: "völlig", english: "completely", mastered: false },
-                { german: "zwölf", english: "twelve", mastered: false },
-                { german: "Schüler", english: "student / pupil", mastered: false },
-                { german: "Übung", english: "exercise / practice", mastered: false },
-                { german: "Mühe", english: "effort / trouble", mastered: false },
-                { german: "Stühle", english: "chairs", mastered: false },
-                { german: "Glück", english: "luck / happiness", mastered: false },
-                { german: "fünf", english: "five", mastered: false },
-                { german: "Ei", english: "egg", mastered: false },
-                { german: "eins", english: "one", mastered: false },
-                { german: "Mai", english: "May", mastered: false },
-                { german: "Waise", english: "orphan", mastered: false },
-                { german: "Mayer / Meyer / Bayer", english: "surnames", mastered: false },
-                { german: "Auge", english: "eye", mastered: false },
-                { german: "Auto", english: "car", mastered: false },
-                { german: "Bauch", english: "belly / stomach", mastered: false },
-                { german: "Kakao", english: "cocoa", mastered: false },
-                { german: "Leute", english: "people", mastered: false },
-                { german: "neun", english: "nine", mastered: false },
-                { german: "heute", english: "today", mastered: false },
-                { german: "Bäuche", english: "bellies", mastered: false },
-                { german: "Häuser", english: "houses", mastered: false },
-                { german: "Mäuse", english: "mice", mastered: false },
-                { german: "Ball", english: "ball", mastered: false },
-                { german: "Berlin", english: "Berlin", mastered: false },
-                { german: "Hobby", english: "hobby", mastered: false },
-                { german: "abfahren", english: "to depart", mastered: false },
-                { german: "Urlaub", english: "vacation / holiday", mastered: false },
-                { german: "Cent", english: "cent", mastered: false },
-                { german: "circa", english: "approximately", mastered: false },
-                { german: "Café", english: "café", mastered: false },
-                { german: "Computer", english: "computer", mastered: false },
-                { german: "Clown", english: "clown", mastered: false },
-                { german: "du", english: "you (informal singular)", mastered: false },
-                { german: "danke", english: "thanks", mastered: false },
-                { german: "Ende", english: "end", mastered: false },
-                { german: "addieren", english: "to add (math)", mastered: false },
-                { german: "und", english: "and", mastered: false },
-                { german: "Hund", english: "dog", mastered: false },
-                { german: "Frau", english: "woman / Mrs.", mastered: false },
-                { german: "Fisch", english: "fish", mastered: false },
-                { german: "Hof", english: "courtyard / yard / farm", mastered: false },
-                { german: "Schiff", english: "ship", mastered: false },
-                { german: "gut", english: "good", mastered: false },
-                { german: "Giraffe", english: "giraffe", mastered: false },
-                { german: "Bagger", english: "excavator / digger", mastered: false },
-                { german: "montags", english: "on Mondays", mastered: false },
-                { german: "Tag", english: "day", mastered: false },
-                { german: "Weg", english: "way / path", mastered: false },
-                { german: "haben", english: "to have", mastered: false },
-                { german: "Hallo", english: "hello", mastered: false },
-                { german: "abholen", english: "to pick up", mastered: false },
-                { german: "Föhn", english: "hairdryer / foehn wind", mastered: false },
-                { german: "ja", english: "yes", mastered: false },
-                { german: "Jacke", english: "jacket", mastered: false },
-                { german: "Journal", english: "journal", mastered: false },
-                { german: "joggen", english: "to jog", mastered: false },
-                { german: "Katze", english: "cat", mastered: false },
-                { german: "Ecke", english: "corner", mastered: false },
-                { german: "Akkusativ", english: "accusative (grammar)", mastered: false },
-                { german: "wollen", english: "to want", mastered: false },
-                { german: "Lampe", english: "lampe", mastered: false },
-                { german: "kommen", english: "to come", mastered: false },
-                { german: "können", english: "can / to be able to", mastered: false },
-                { german: "nein", english: "no", mastered: false },
-                { german: "Papier", english: "paper", mastered: false },
-                { german: "Gruppe", english: "group", mastered: false },
-                { german: "rot", english: "red", mastered: false },
-                { german: "Rhein", english: "Rhine (river)", mastered: false },
-                { german: "Morgen", english: "morning / tomorrow", mastered: false },
-                { german: "Berlin", english: "Berlin", mastered: false },
-                { german: "mir", english: "me", mastered: false },
-                { german: "so", english: "so / like that", mastered: false },
-                { german: "Haus", english: "house", mastered: false },
-                { german: "Post", english: "post / mail", mastered: false },
-                { german: "müssen", english: "must / have to", mastered: false },
-                { german: "Tante", english: "aunt", mastered: false },
-                { german: "Theater", english: "theater", mastered: false },
-                { german: "Stadt", english: "city / town", mastered: false },
-                { german: "vier", english: "four", mastered: false },
-                { german: "Vater", english: "father", mastered: false },
-                { german: "Vogel", english: "bird", mastered: false },
-                { german: "Vase", english: "vase", mastered: false },
-                { german: "Kurve", english: "curve", mastered: false },
-                { german: "Wagen", english: "car / vehicle", mastered: false },
-                { german: "Xylophon", english: "xylophone", mastered: false },
-                { german: "Typ", english: "type / guy", mastered: false },
-                { german: "Ägypten", english: "Egypt", mastered: false },
-                { german: "Yacht", english: "yacht", mastered: false },
-                { german: "Yak", english: "yak", mastered: false },
-                { german: "Zug", english: "train", mastered: false },
-                { german: "Skizze", english: "sketch", mastered: false },
-                { german: "Satz", english: "sentence", mastered: false },
-                { german: "rechts", english: "right", mastered: false },
-                { german: "Straße", english: "street", mastered: false },
-                { german: "Fuß", english: "foot", mastered: false },
-                { german: "heißen", english: "to be called / to mean", mastered: false },
-                { german: "nach", english: "after / to", mastered: false },
-                { german: "acht", english: "eight", mastered: false },
-                { german: "Nacht", english: "night", mastered: false },
-                { german: "Nächte", english: "nights", mastered: false },
-                { german: "Milch", english: "milk", mastered: false },
-                { german: "China", english: "China", mastered: false },
-                { german: "Sachsen", english: "Saxony", mastered: false },
-                { german: "nächst", english: "next", mastered: false },
-                { german: "sechs", english: "six", mastered: false },
-                { german: "machst", english: "(you) do / make", mastered: false },
-                { german: "machen", english: "to do / to make", mastered: false },
-                { german: "Charakter", english: "character", mastered: false },
-                { german: "Chor", english: "choir", mastered: false },
-                { german: "Chance", english: "chance", mastered: false },
-                { german: "Chef", english: "boss", mastered: false },
-                { german: "Chile", english: "Chile", mastered: false },
-                { german: "Checkliste", english: "checklist", mastered: false },
-                { german: "Stadtbewohner", english: "city dweller", mastered: false },
-                { german: "Königreich", english: "kingdom", mastered: false },
-                { german: "König", english: "king", mastered: false },
-                { german: "Honig", english: "honey", mastered: false },
-                { german: "Photo", english: "photo", mastered: false },
-                { german: "Qualle", english: "jellyfish", mastered: false },
-                { german: "Quelle", english: "source / spring", mastered: false },
-                { german: "Quatsch", english: "nonsense", mastered: false },
-                { german: "schreiben", english: "to write", mastered: false },
-                { german: "Großstadt", english: "big city", mastered: false },
-                { german: "Radsport", english: "cycling", mastered: false },
-                { german: "später", english: "later", mastered: false },
-                { german: "Sport", english: "sport", mastered: false },
-                { german: "Pferd", english: "horse", mastered: false },
-                { german: "Nation", english: "nation", mastered: false },
-                { german: "Situation", english: "situation", mastered: false }
-            ];
-
-            // Get flashcards from localStorage or use initial data
-            let flashcards = JSON.parse(localStorage.getItem('germanFlashcards')) || initialFlashcards;
-            let customFlashcards = JSON.parse(localStorage.getItem('customGermanFlashcards')) || [];
+            // Get flashcards from localStorage
+            let flashcards = JSON.parse(localStorage.getItem('germanFlashcards')) || [];
 
             // Render flashcards
             function renderFlashcards() {
@@ -317,18 +110,18 @@
                     
                     flashcard.innerHTML = `
                         <div class="flashcard-inner h-full">
-                            <div class="flashcard-front bg-white rounded-lg shadow-md p-6 flex flex-col items-center justify-center cursor-pointer h-full">
-                                <h3 class="text-2xl font-bold text-center text-indigo-700">${card.german}</h3>
-                                <button class="speak-btn mt-2 p-1 bg-indigo-100 rounded-full hover:bg-indigo-200 transition">
-                                    <i data-feather="volume-2" class="text-indigo-700"></i>
+                            <div class="flashcard-front bg-white rounded-lg shadow-md p-3 flex flex-col items-center justify-center cursor-pointer h-full">
+                                <h3 class="text-sm font-bold text-center text-indigo-700">${card.german}</h3>
+                                <button class="speak-btn mt-1 p-1 bg-indigo-100 rounded-full hover:bg-indigo-200 transition">
+                                    <i data-feather="volume-2" class="text-indigo-700 w-3 h-3"></i>
                                 </button>
-                                <p class="text-gray-500 mt-2">Click to flip</p>
-                                ${card.mastered ? '<i data-feather="check-circle" class="text-green-500 mt-2"></i>' : ''}
+                                <p class="text-xs text-gray-500 mt-1">Click to flip</p>
+                                ${card.mastered ? '<i data-feather="check-circle" class="text-green-500 mt-1 w-3 h-3"></i>' : ''}
                             </div>
-                            <div class="flashcard-back bg-indigo-100 rounded-lg shadow-md p-6 flex flex-col items-center justify-center cursor-pointer h-full">
-                                <h3 class="text-xl font-semibold text-center text-gray-800">${card.english}</h3>
-                                <div class="mt-4 flex space-x-2">
-                                    <button class="master-btn px-3 py-1 ${card.mastered ? 'bg-green-500' : 'bg-gray-500'} text-white rounded text-sm">
+                            <div class="flashcard-back bg-indigo-100 rounded-lg shadow-md p-2 flex flex-col items-center justify-center cursor-pointer h-full">
+                                <h3 class="text-xs font-semibold text-center text-gray-800">${card.english}</h3>
+                                <div class="mt-1 flex space-x-1">
+                                    <button class="master-btn px-2 py-0.5 ${card.mastered ? 'bg-green-500' : 'bg-gray-500'} text-white rounded text-xs">
                                         ${card.mastered ? 'Mastered' : 'Mark as Mastered'}
                                     </button>
                                 </div>
@@ -384,12 +177,19 @@
                 renderFlashcards();
             });
 
-            // Reset progress
+            // Reset progress of current list
             document.getElementById('reset-btn').addEventListener('click', function() {
-                if (confirm('Are you sure you want to reset all progress?')) {
-                    flashcards = initialFlashcards.map(card => ({ ...card, mastered: false }));
-                    saveFlashcards();
-                    renderFlashcards();
+                if (confirm('Are you sure you want to reset progress for the current list?')) {
+                    const currentListName = getCurrentListName();
+                    if (currentListName && customLists[currentListName]) {
+                        // Reset all cards in the current list to not mastered
+                        customLists[currentListName] = customLists[currentListName].map(card => ({ ...card, mastered: false }));
+                        localStorage.setItem('customGermanLists', JSON.stringify(customLists));
+                        // Reload the current list
+                        flashcards = [...customLists[currentListName]];
+                        saveFlashcards();
+                        renderFlashcards();
+                    }
                 }
             });
 
@@ -405,11 +205,7 @@
 
 
             // Object to store all custom lists
-            let customLists = JSON.parse(localStorage.getItem('customGermanLists'));
-            if (!customLists) {
-                customLists = {};
-                localStorage.setItem('customGermanLists', JSON.stringify(customLists));
-            }
+            let customLists = JSON.parse(localStorage.getItem('customGermanLists')) || {};
 
             // Render custom list buttons
             function renderCustomListButtons() {
@@ -417,6 +213,9 @@
                 container.innerHTML = '';
                 
                 Object.keys(customLists).forEach(listName => {
+                    const buttonContainer = document.createElement('div');
+                    buttonContainer.className = 'relative group';
+                    
                     const button = document.createElement('button');
                     button.className = 'px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center';
                     button.innerHTML = `<i data-feather="list" class="mr-2"></i> ${listName}`;
@@ -424,16 +223,45 @@
                         flashcards = [...customLists[listName]];
                         renderFlashcards();
                     });
-                    container.appendChild(button);
+                    
+                    const removeBtn = document.createElement('button');
+                    removeBtn.className = 'absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-600';
+                    removeBtn.innerHTML = '×';
+                    removeBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        if (confirm(`Are you sure you want to delete the "${listName}" list?`)) {
+                            delete customLists[listName];
+                            localStorage.setItem('customGermanLists', JSON.stringify(customLists));
+                            renderCustomListButtons();
+                            // If we deleted the current list, load the first available list
+                            const listNames = Object.keys(customLists);
+                            if (listNames.length > 0) {
+                                flashcards = [...customLists[listNames[0]]];
+                                renderFlashcards();
+                            } else {
+                                flashcards = [];
+                                renderFlashcards();
+                            }
+                        }
+                    });
+                    
+                    buttonContainer.appendChild(button);
+                    buttonContainer.appendChild(removeBtn);
+                    container.appendChild(buttonContainer);
                 });
                 
                 feather.replace();
             }
 
-            // Show original flashcards
+            // Show original flashcards (first custom list or empty)
             document.getElementById('show-original-btn').addEventListener('click', function() {
-                flashcards = [...initialFlashcards];
-                renderFlashcards();
+                const listNames = Object.keys(customLists);
+                if (listNames.length > 0) {
+                    flashcards = [...customLists[listNames[0]]];
+                    renderFlashcards();
+                } else {
+                    alert('No custom lists available. Please create a list first.');
+                }
             });
 
             // Parse and add new flashcards
@@ -441,12 +269,8 @@
                 const input = document.getElementById('new-flashcards-input').value.trim();
                 const listName = document.getElementById('list-name-input').value.trim();
                 
-                if (!input) {
-                    alert('Please enter flashcards!');
-                    return;
-                }
-                if (!listName) {
-                    alert('Please enter a list name!');
+                if (!input || !listName) {
+                    alert('Please enter both a list name and flashcards!');
                     return;
                 }
 
@@ -465,11 +289,6 @@
                 });
 
                 if (newCards.length > 0) {
-                    // Initialize customLists if it doesn't exist
-                    if (!customLists) {
-                        customLists = {};
-                    }
-                    
                     // Add or update the custom list
                     customLists[listName] = newCards;
                     localStorage.setItem('customGermanLists', JSON.stringify(customLists));
@@ -498,6 +317,12 @@
 
             // Show only not mastered words
             document.getElementById('show-not-mastered-btn').addEventListener('click', function() {
+                // Reload current list from localStorage to get latest mastered status
+                const currentListName = getCurrentListName();
+                if (currentListName && customLists[currentListName]) {
+                    flashcards = [...customLists[currentListName]];
+                }
+                
                 const notMastered = flashcards.filter(card => !card.mastered);
                 if (notMastered.length === 0) {
                     alert('All words in this list are mastered!');
@@ -516,7 +341,88 @@
                 }
             });
 
-            // Initial render
+            // Helper function to get current list name
+            function getCurrentListName() {
+                const currentFlashcards = JSON.stringify(flashcards);
+                for (const [listName, listCards] of Object.entries(customLists)) {
+                    if (JSON.stringify(listCards) === currentFlashcards) {
+                        return listName;
+                    }
+                }
+                return null;
+            }
+
+            // Update custom list when flashcards change
+            function updateCurrentCustomList() {
+                const currentListName = getCurrentListName();
+                if (currentListName && customLists[currentListName]) {
+                    customLists[currentListName] = [...flashcards];
+                    localStorage.setItem('customGermanLists', JSON.stringify(customLists));
+                }
+            }
+
+            // Modified saveFlashcards to also update custom lists
+            function saveFlashcards() {
+                localStorage.setItem('germanFlashcards', JSON.stringify(flashcards));
+                updateCurrentCustomList();
+            }
+
+            // Modified renderCustomListButtons to load from current list when clicked
+            function renderCustomListButtons() {
+                const container = document.getElementById('custom-lists-container');
+                container.innerHTML = '';
+                
+                Object.keys(customLists).forEach(listName => {
+                    const buttonContainer = document.createElement('div');
+                    buttonContainer.className = 'relative group';
+                    
+                    const button = document.createElement('button');
+                    button.className = 'px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center';
+                    button.innerHTML = `<i data-feather="list" class="mr-2"></i> ${listName}`;
+                    button.addEventListener('click', () => {
+                        // Load the full list from localStorage (including mastered status)
+                        flashcards = [...customLists[listName]];
+                        saveFlashcards();
+                        renderFlashcards();
+                    });
+                    
+                    const removeBtn = document.createElement('button');
+                    removeBtn.className = 'absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-600';
+                    removeBtn.innerHTML = '×';
+                    removeBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        if (confirm(`Are you sure you want to delete the "${listName}" list?`)) {
+                            delete customLists[listName];
+                            localStorage.setItem('customGermanLists', JSON.stringify(customLists));
+                            renderCustomListButtons();
+                            // If we deleted the current list, load the first available list
+                            const listNames = Object.keys(customLists);
+                            if (listNames.length > 0) {
+                                flashcards = [...customLists[listNames[0]]];
+                                saveFlashcards();
+                                renderFlashcards();
+                            } else {
+                                flashcards = [];
+                                saveFlashcards();
+                                renderFlashcards();
+                            }
+                        }
+                    });
+                    
+                    buttonContainer.appendChild(button);
+                    buttonContainer.appendChild(removeBtn);
+                    container.appendChild(buttonContainer);
+                });
+                
+                feather.replace();
+            }
+
+            // Initial render - load first custom list if available
+            const listNames = Object.keys(customLists);
+            if (listNames.length > 0) {
+                flashcards = [...customLists[listNames[0]]];
+            }
+            
             renderFlashcards();
             renderCustomListButtons();
         });

prompts.txt

@@ -425,4 +425,24 @@ Please enter both a list name and flashcards!
 and no new button added 
 Just add a speaking voice for each german word, only speaks german, not english 
 
-also add a button to display not mastered words only of current list, this is applicable for all lists 
+also add a button to display not mastered words only of current list, this is applicable for all lists 
+remove the built in list in code, let the user insert it and then save it in local storage, read it on reloading, any update on the list update it in local storage as well 
+
+one thing more, when switching between list name and no mastered read from local storage and display it to keep the list updated 
+
+any new list link it to localstorage, the localstorage is your database 
+remove the built in list in code, let the user insert it and then save it in local storage, read it on reloading, any update on the list update it in local storage as well 
+
+one thing more, when switching between list name and no mastered read from local storage and display it to keep the list updated 
+
+any new list link it to localstorage, the localstorage is your database 
+remove the built in list in code, let the user insert it and then save it in local storage, read it on reloading, any update on the list update it in local storage as well 
+
+one thing more, when switching between list name and no mastered read from local storage and display it to keep the list updated 
+
+any new list link it to localstorage, the localstorage is your database 
+reset progress of current list and update local storage 
+still the current list rendered after resetting progress 
+decrease the card dimension by half 
+decrease the width by half and render as much as can in one row 
+add a remove button in top right of each list button