Created
October 14, 2017 13:20
-
-
Save kennasoft/20f5c9535194062749c0cfc2037b5163 to your computer and use it in GitHub Desktop.
Javascript for emulating a rudimentary console in jsfiddle
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document.addEventListener('DOMContentLoaded', function(){ | |
document.querySelector('head').innerHTML +='<link type="text/css" href="https://gist.githubusercontent.com/kennasoft/d4f8594f7a06751b73dfb6a6cf4390ed/raw/524aa1bf26da6c2f336872ffe98fdfd89106412f/console.css" rel="stylesheet"/>' | |
var consoleHTML = ` | |
<footer id="console-toggle"> | |
<div class="console"></div> | |
</footer> | |
`; | |
document.body.innerHTML += consoleHTML; | |
if (!Element.prototype.matches) | |
Element.prototype.matches = | |
Element.prototype.msMatchesSelector || | |
Element.prototype.webkitMatchesSelector; | |
document.querySelector('#console-toggle').addEventListener('click', function(evt){ | |
let target = document.querySelector('#console-toggle'); | |
if(target.matches('.open')){ | |
target.classList.remove('open') | |
}else{ | |
target.classList.add('open'); | |
} | |
}) | |
window.console = { | |
log: (output) => { | |
if (typeof output !== 'string' && typeof output !== 'number') { | |
output = JSON.stringify(output); | |
} | |
document.querySelector('.console').innerHTML += `<p class="console-log">${output}</p>` | |
}, | |
error: (output) => { | |
if (typeof output !== 'string' && typeof output !== 'number') { | |
output = JSON.stringify(output); | |
} | |
document.querySelector('.console').innerHTML += `<p class="console-error">${output}</p>` | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment