Notification

const elements = {
    infoBox: document.querySelector('.notification.infoBox'),
    loadingBox: document.querySelector('.notification.loadingBox'),
    errorBox: document.querySelector('.notification.errorBox'),
}

elements.infoBox.addEventListener('click', hideInfo);
elements.errorBox.addEventListener('click', hideError);

function showError(msg) {
    if (msg.hasOwnProperty('message')) {
        msg = msg.message;
    }
    elements.errorBox.textContent = msg;
    elements.errorBox.style.display = 'block';
    setTimeout(hideError, 3000);
}

function showInfo(msg) {
    if (msg.hasOwnProperty('message')) {
        msg = msg.message;
    }
    elements.infoBox.textContent = msg;
    elements.infoBox.style.display = 'block';
    setTimeout(hideInfo, 3000);
}

function showLoading() {
    elements.loadingBox.textContent = 'Loading …';
    elements.loadingBox.style.display = 'block';
}

function hideLoading() {
    elements.loadingBox.style.display = 'none';
}

function hideError() {
    elements.errorBox.style.display = 'none';
}

function hideInfo() {
    elements.infoBox.style.display = 'none';
}