const username = document.getElementById('username');
const password = document.getElementById('password');

document.getElementById('loginform').addEventListener('submit', () => {
    // add username and password to the 'logindata' object
    const logindata = {
        username: username.value,
        password: password.value,
    };
    // save 'logindata' to local storage
    localStorage.setItem('logindata', JSON.stringify(logindata));
});

window.addEventListener('load', () => {
    // get 'logindata' from local storage when the page is loaded
    // or make an empty object if the key don't exists in local storage
    const logindata = JSON.parse(localStorage.getItem('logindata')) || {};
    // get username and password and add it the the form
    // set te value to an empty string if the key does not exist in the object
    username.value = logindata.username || '';
    password.value = logindata.password || '';
});
 
        Copied!
    

const shoppingList = {
    key: 'shopping', // local storage key
    items: [
        {
            text: 'dummy item 1',
            isChecked: false,
        },
        {
            text: 'dummy item 2',
            isChecked: true,
        },
    ],

    init() {
        // get shopping items from local storage or use the default dummy items if the key don't exist in local storage
        if (localStorage.getItem('shopping')) {
            this.items = JSON.parse(localStorage.getItem(this.key));
        }
        this.drawList();
    },

    drawList() {
        // add the shopping list to div#.border-gray
        let list = '';
        this.items.forEach((item, index) => {
            list += `
              <div>
                <span class="fas fa-check"></span>
                <span class="fas fa-trash"></span>
                <div contenteditable class="${item.isChecked ? 'strike' : ''}">${item.text}</div>
            </div>  
            `;
        });
        document.querySelector('.border-gray').innerHTML = list;
        // save shopping list to local storage
        localStorage.setItem(this.key, JSON.stringify(this.items));

        // add event listeners to the newly created items (check icon, trash icon and contenteditable tag
        document.querySelectorAll('.fa-check').forEach(function (check, index) {
            check.addEventListener('click', function (e) {
                shoppingList.checkItem(index);
            });
        });
        document.querySelectorAll('.fa-trash').forEach(function (trash, index) {
            trash.addEventListener('click', function (e) {
                shoppingList.trashItem(index);
            });
        });
        document.querySelectorAll('[contenteditable]').forEach(function (update, index) {
            update.addEventListener('blur', function (e) {
                shoppingList.updateItem(index, e.target.innerHTML);
            });
        });
    },

    trashItem(index) {
        // delete one item from the shopping list
        // index === the index in the array
        this.items.splice(index, 1);
        this.drawList();
    },

    checkItem(index) {
        // toggle the state of `isChecked`
        this.items[index].isChecked = !this.items[index].isChecked;
        this.drawList();
    },

    updateItem(index, text) {
        // update the `text` value
        console.log(index, text);
        this.items[index].text = text;
        this.drawList();
    },

    addItem() {
        // add one item to te end of the shopping list
        console.log('add');
        this.items.push({
            text: '...',
            isChecked: false,
        });
        this.drawList();
    },
};

// initialize the shopping list when the page is loaded
shoppingList.init();
// add event listener to the 'Add item' button
document.getElementById('add').addEventListener('click', () => shoppingList.addItem());
 
        Copied!
    

class StoreTabs {
    constructor(key) {
        this.key = key; // local storage key
        this.checkboxes = document.querySelectorAll('[type=checkbox]'); // get all checkboxes on the page
        this.labels = document.querySelectorAll('label'); // get all labels on the page
        // run these methods when instantiating the object
        this.addIdToLabels();
        this.getOpenTabs();
        this.storeOpenTabs();
    }

    addIdToLabels() {
        // add an id to every label, based on his for attribute
        // e.g: <label for='abc'> -> <label for='abc' id='abcLabel'>
        this.labels.forEach((label) => {
            label.id = `${label.htmlFor}Label`;
        });
    }

    getOpenTabs() {
        // get array of open tabs from local storage or create an empty array if the key don't exist in local storage
        const openIds = JSON.parse(localStorage.getItem(this.key)) || [];
        openIds.forEach((id) => {
            const checkbox = document.getElementById(id);
            // if the checkbox still exists on the page: then check it
            if (checkbox) checkbox.checked = 'checked';
        });
    }

    storeOpenTabs() {
        // loop over all the checkboxes
        this.checkboxes.forEach((checkbox) => {
            // ad a click event listener on every checkbox
            checkbox.addEventListener('click', (e) => {
                const openIds = [];
                const checked = document.querySelectorAll('[type=checkbox]:checked');
                // push the id's of the checked checkboxes to the array
                checked.forEach((item) => {
                    openIds.push(item.id);
                });
                if (openIds.length === 0) {
                    // if array is empty, remove it from local storage
                    localStorage.removeItem(this.key);
                } else {
                    // store the array in local storage
                    localStorage.setItem(this.key, JSON.stringify(openIds));
                }
                // jump to the anker of the label e.g: 
                // <input id="abc"> jumps to <label for='abc' id='abcLabel'>
                window.location.href = `#${e.target.id}Label`;
            });
        });
    }
}
 
        Copied!