<div class=" container-fluid console">
	<div class="row">
    <div class="col-lg-12"id="header">
	<span class="seperator">== == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == ==</span>
    </div> <!-- end of col-lg-12 -->
  </div> <!-- end of row -->
    <div class="row">
      <div class="col-lg-3">
    <p id="main-heading"> KAWAII CONSOLE 
        </p>
               <p> Browser implementation of:
     <ol>
   <li>console.log()</li>                       
       <li>console.clear()</li>               
       <li>console.warn()</li>                       
       <li>console.trace()</li>
      </ol>
</p>

  </div> <!-- end of  col-lg -4 -->
      <div class="col-lg-6">
        <div class="row">
          <div class="col-sm-4">
      <img src="https://media.giphy.com/media/FCAtVWWt1o4U192yer/giphy.gif" id="kawaii-kitty"> 
          </div> <!-- end of col-sm-6 -->
   <div class="col-sm-8">
      <ul>
        <li>Consoles can be boring to look at </li>
         <li>So here's a kawaii console</li>
    <li>Can use console.log(), console.clear(),console.warn() and console.trace()</li>
   <li> Console.log something to see it on the screen</li>
    <li>The console's logs the "typeof" of the value logged</li>
<li>The index of array items and property-value pairs in objects are also logged</li>        
 <li>*Now multi-line logs available*</li>
       

            </ul>
            
          </div><!-- end of col-sm-6 -->
          
        </div> <!-- end of nested row -->
      </div> <!-- end of col-lg-4 -->
     
  </div> <!-- end of row -->
      <div class="row">
        <div class="col-lg-12">
	<span class="seperator">== == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == ==</span></br>   
</div> <!-- end of col 12-->
</div> <!-- end of row -->
  <div class="row">
 <div class="col-lg-12" id="consolerow">
  
    <pre id="log"></pre>
</div> <!-- end of row -->
</div> <!-- end of container -->

@import url('https://fonts.googleapis.com/css?family=Overpass+Mono');
body{
  background-color:black;
color: #FFFFFF;
  font-family: 'Overpass Mono', monospace;
}

.seperator{
        -webkit-animation: color-change 25s infinite;
        -moz-animation: color-change 25s infinite;
        -o-animation: color-change 25s infinite;
        -ms-animation: color-change 25s infinite;
        animation: color-change 25s infinite;
    }

    @-webkit-keyframes color-change {
        0% { color: #ff92c4; }
        50% { color: #361800; }
        100% { color: #f2e8a8; }
    }
    @-moz-keyframes color-change {
           0% { color: #ff92c4; }
        50% { color: #361800; }
        100% { color: #f2e8a8; }
    }
    @-ms-keyframes color-change {
          0% { color: #ff92c4; }
        50% { color: #361800; }
        100% { color: #f2e8a8; }
    }
    @-o-keyframes color-change {
        0% { color: red; }
        50% { color: blue; }
        100% { color: red; }
    }
    @keyframes color-change {
         0% { color: #ff92c4; }
        50% { color: #361800; }
        100% { color: #f2e8a8; }
    }
#kawaii-kitty{
  height: 200px;
  width:100%;
}
#main-heading{
  font-size:35px;
}

#donut{
  height:75px;
}
#log{
color:#FFFFFF;
  text-
}

#cloud{
  width: 150px;

}
#clear-div{
  text-align: center;
  opacity: 0.65;
}
#line-number{
  color:#4891b6;
  margin-right: 10px;
  font-weight:900;
}
#warning-span{
  color:#4891b6;
  margin-right: 10px;
  font-weight:900;
}
#warning-img{
  width: 60px;
}
#warning-text{
background-color:#e55e3b;
}
#caller-span{
  color:#4891b6;
  margin-right: 10px;
  font-weight:900;
}
#caller-img{
  width: 60px;
}





/*-----------------------------------------------------------------------------------
       KAWAII CONSOLE CODE
 ---------------------------------------------------------------------------------*/      
(function() {
  var old = console.log;
  var logger = document.getElementById('log');
   var lineNum = -1;
  console.log = function(msg) {
    lineNum++;
    var span = document.createElement("span");
    span.setAttribute("id", "line-number");
    var numText = document.createTextNode(lineNum + ".");
    span.appendChild(numText);
    var image = document.createElement("img");
    image.setAttribute("src", "https://media.giphy.com/media/5jWIqTzFUXlSaXN21a/giphy.gif");
    image.setAttribute("id", "donut");
    logger.appendChild(span);
    logger.appendChild(image);

    if (typeof msg === 'undefined' ) {
      image.setAttribute("src", "https://media.giphy.com/media/3o6fJ8bYYnCW95ST0A/giphy.gif");
    }   else if ( msg === null && typeof msg === 'object') {
      msg.toString();
      image.setAttribute("src", "https://media.giphy.com/media/5SzpVxeeBUTUi6s0Eg/giphy.gif");
    }else if (typeof msg === 'boolean') {
      image.setAttribute("src", "https://media.giphy.com/media/l0HlQ3G4QVZJsKvte/giphy.gif");
    } else if (typeof msg === 'number') {
      image.setAttribute("src", "https://media.giphy.com/media/9Pmf3dqpfxX3XRC3il/giphy.gif");
    } else if (typeof msg === 'function') {
      image.setAttribute("src", "https://media.giphy.com/media/24FIh2qQLsTVyAL03I/giphy.gif");
    } else if (msg instanceof Array) {
      image.setAttribute("src", "https://media.giphy.com/media/2sfDnHIEFe7aAbArdZ/giphy.gif");
    } else if (msg instanceof Object) {
      image.setAttribute("src", "https://media.giphy.com/media/5Ypzkp2Ia3vI9ieJjK/giphy.gif");
    } 

   for (var i = 0; i < arguments.length; i++) {
      if (typeof arguments[i] == 'object') {
        var foo = arguments[i];
        logger.innerHTML += " " + JSON.stringify(arguments[i]) + " (Type of value:" + typeof arguments[i] + ")" + "</br>";
        for (var k = 0; k < foo.length; k++) {
          logger.innerHTML += "</br>" + JSON.stringify(foo[k]) + " is at index: " + k + " (Type of value is " + typeof foo[k] + ")" + "</br>"
        } // end of nested for
      } else {
        logger.innerHTML += " " + arguments[i] + " (Type of value:" + typeof arguments[i] + ")" + '<br />';
      } // end of else
    } // end of for
    for (var i = 0; i < arguments.length; i++) {
      if (msg == "[object Object]") {
        var indexProp = 0;
        for (var key in msg) {
          logger.innerHTML += key + ': ' + msg[key] + " (The index of this key:value pair is " + indexProp + ")" + "</br>"
          indexProp++;
        } // end of for
      } // end of if
    } // end of for
  } // end of console.log function
  console.clear = function() {
    var clearText = document.createTextNode("Clearing console..");
    var cloudImage = document.createElement("img");
    cloudImage.setAttribute("id", "cloud");
    cloudImage.setAttribute("src", "https://media.giphy.com/media/5e3IozdPgJY9f6HPxY/giphy.gif");
    var div = document.createElement("div");
    div.setAttribute("class", "col-lg-12");
    div.setAttribute("id", "clear-div");
    var consoleRow = document.getElementById("consolerow");
    div.appendChild(clearText);
    div.appendChild(cloudImage);
    document.body.appendChild(div)
    setTimeout(function() {
      div.innerHTML = "";
      logger.innerHTML = "";
    }, 3000);
  } //end of console clear

    console.warn = function(msg) {
     lineNum = lineNum + 1;
    var span2 = document.createElement("span");
    span2.setAttribute("id", "warning-span");
    var numText = document.createTextNode(lineNum + ".");
    var warningImage = document.createElement("img");
      warningImage.setAttribute("id","warning-img");
      warningImage.setAttribute("src","https://media.giphy.com/media/l4pTa6TmeYyYjD9ss/giphy.gif");
      var warningP= document.createElement("span");
      warningP.setAttribute("id","warning-text")
    var warningText =  document.createTextNode("If this is logging then it's a warning..");
      warningP.appendChild(warningText)
    span2.appendChild(numText);
      logger.appendChild(span2)
      logger.appendChild(warningP);
            logger.appendChild(warningImage);
      logger.innerHTML+= "</br>"
  } // end of console warn
 console.trace = function(funcName){
   lineNum = lineNum + 1;
   var span3 = document.createElement('span');
   span3.setAttribute('id',"caller-span");
   var numText = document.createTextNode(lineNum + ".");
   var callerImage= document.createElement("img");
   callerImage.setAttribute("id","caller-img");
   callerImage.setAttribute('src', "https://media.giphy.com/media/9xyQPqOG9oJjimtua3/giphy.gif");
   span3.appendChild(numText);
   logger.appendChild(span3);
   logger.appendChild(callerImage);
  logger.innerHTML+= " The caller of this function is traced to:" +"</br>" + funcName.caller + "</br>";
}// end of console trace
})();


/*-----------------------------------------------------------------------------------
      YOUR CONSOLE CODE
 ---------------------------------------------------------------------------------*/ 


console.log("joy");
console.log(100);
console.log(false);
var dog = 1;
console.log(dog);
var cat;
console.log(cat);
console.log("     Joy          ");
//var x = null;
//console.log(x);
var elephant = 20;
var lion = 30;
var animals =  elephant + lion; 
console.log(animals);
var planet = "saturn";
var sun = 10;
var total =  planet + sun;
console.log(total);
console.log("joy" + false);
console.log(true + false);
var person = "joy";
var person1 = "joy";
if(person !== person1){ 
   console.log(person);
   } else {
     console.log("not equal");
   }
//var x = null;
//console.log(x)
var a =1;
console.log(a)
console.warn("This is a warning")







External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js