profile.js

  
let usernameInput = document.querySelector("#usernameInput");
let statusInput = document.querySelector("#statusInput");
let profilePicInput = document.querySelector("#profilePicInput");
let profileSaveInput = document.querySelector("#profileSaveInput");

// setting the input values default
usernameInput.value = localStorage.getItem('userName');
statusInput.value = localStorage.getItem('userStatus');
userProfilePicDisplay.value = localStorage.getItem('profilePicInput')

function saveProfileImageLocally() {
    if (profilePicInput.files && profilePicInput.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            localStorage.setItem("userProfilePic", reader.result);
        }
        reader.readAsDataURL(profilePicInput.files[0]); 
    }
}

//set button colors when click
/* var count = 1;
    function setColor(btn, color) {
        var property = document.getElementById("profileSaveInput");
        if (count == 0) {
            property.style.backgroundColor = "#f9d861"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#3e2fae"
            count = 0;
        }
    } */



profileSaveInput.addEventListener( 'click', function(e) {
    e.preventDefault();
    localStorage.setItem("userName", usernameInput.value);
    localStorage.setItem("userStatus", statusInput.value);
    
    saveProfileImageLocally();
});
usernameDisplay.innerHTML = userName;
userStatusDisplay.innerHTML = userStatus;
userProfilePicDisplay.src = userProfilePic;