Save and validate hex color value

by Marventus

HTML

<input id="colorInput" type="text" />
<input id="saveColorBtn" type="button" value="Save color" /><span id="valMsg"></span>
<p>Input color: <span id="colorValue"></span></p>

CSS

input {
    margin:0 2px;
}
span {
    margin-left: 5px;
}
#valMsg {
    background: rgba(255,255,255, 0.5);
    padding: 5px 10px;
    
}

JavaScript

function init() {
    setHTMLObjects();
    setEvents();
    checkIfCookieExists();
}

function setEvents() {
    //saveCookieBtn.addEventListener("click", saveCookie);        
    //deleteCookieBtn.addEventListener("click", deleteCookie);
    saveColorBtn.addEventListener("click", saveColor);
}

function deleteCookie() {
    var dateObject = new Date();
    dateObject.setDate(dateObject.getDate() - 1);
    document.cookie = "text=;expires=" + dateObject.toUTCString();
    checkIfCookieExits();
}

function setHTMLObjects(){
    textTxt = document.getElementById("textTxt");
    saveCookieBtn = document.getElementById("saveCookieBtn");
    deleteCookieBtn = document.getElementById("deleteCookieBtn");
    cookieStatus = document.getElementById("cookiestatus");
    colorInput = document.getElementById("colorInput");
    colorValue = document.getElementById("colorValue");
    saveColorBtn = document.getElementById("saveColorBtn");
    valMsg = document.getElementById("valMsg");
}

function saveCookie() {
    var dateObject = new Date();
    dateObject.setDate(dateObject.getDate() + 7);
    document.cookie = "text=" + colorInput.value + ";expires=" + dateObject.toUTCString();
    checkIfCookieExists();
}

function checkIfCookieExists() {
    var message;
    if (document.cookie) {
        message = "Cookie exists";
    } else {
        message = "Cookie does not exist";
    }
    //cookiestatus.innerHTML = message;
}

function saveColor() {
    var color = colorInput.value,
        msg;
    if( isHex(color) ) {
        color = '#'+color;
        msg = '<em style="color:green;">Valid hex value!</em>';
        colorValue.innerHTML = color;
        document.body.style.background = color;
        saveCookie();
    } else {
        colorInput.value = '';
        msg = '<em style="color:red;">Invalid hex value!</em>';
    }
    valMsg.innerHTML = msg;
    valMsg.style.padding = "5px 10px";
    setTimeout(function() {
        valMsg.innerHTML = "";
       ...