[JS Log] Vanilla JavaScript Log Function #js #function #log

javascript_log_function.htm

<!--

/* ----------------------------------------------------------- */  
/* [JS Log] Vanilla JavaScript Log Function #js #function #log */
/* ----------------------------------------------------------- */  

-->

<script>
    function log(msg, color) {
        var color_array = {
            primary: {text_color: "white", bg_color: '#007bff'}, // blue
            success: {text_color: 'white', bg_color: '#28a745'}, // green
            error:   {text_color: 'white', bg_color: '#dc3545'}, // red
            warning: {text_color: '#444',  bg_color: '#ffc107'}, // orange
            info:    {text_color: 'white', bg_color: '#17a2b8'}, // yellow
            message: {text_color: '#444',  bg_color: '#f8f9fa'}, // grey
        };
        if (!color_array.hasOwnProperty(color))
            color = 'message'; // set default colors if no color is given
        var text_color = color_array[color].text_color;
        var bg_color = color_array[color].bg_color;
        var css1 = 'color:' + text_color + ';font-weight:bold;background-color:' +
            bg_color + ';padding:3px 6px;border-radius:2px;';
        var css2 = 'color:white;font-weight:bold;background-color:black;padding:3px 6px;';
        console.log('%c' + color.toUpperCase() + '%c' + msg, css1, css2);
    }
    log('This message reports an event, not an error',  'primary');
    log('This message reports a success, not an error', 'success');
    log('This message reports an error, not an event',  'error');
    log('This message reports a warning, not an error', 'warning');
    log('This message reports an info, not an error',   'info');
    log('This message reports a hint');
</script>

<h1><tt><a target="blank" href="https://webmasters.stackexchange.com/a/77337/56765">
    OPEN YOU JAVASCRIPT CONSOLE IN YOU BROWSER TO CHECK THIS