Published
Edited
Mar 11, 2021
Importers
1 star
Insert cell
Insert cell
Insert cell
showConsole = {
sum;
eventsInConsole;
return html`<div style="border: 2px solid grey; padding: 10px">
<p style="margin: 0; margin-bottom: 5px; font-style: italic; font-weight: bold">Console</p>
${eventsInConsole.length === 0 ? html`<p style="margin: 0; margin-bottom: 5px; font-style: italic; font-weight: bold">Write any message with console.log() and it will be displayed</p>`: eventsInConsole.map((event) => getConsoleLikeOutput(event))}
<div>`
}
Insert cell
overridingConsoleLog = {
let initialConsoleLog = console.log;
console.log = (log) => {
let line = 0
mutable eventsInConsole.push(log);
mutable sum += 1
initialConsoleLog(log)};

let initialConsoleClear = console.clear;
console.clear = () => {
mutable eventsInConsole.splice(0, eventsInConsole.length);
initialConsoleClear();
}
}
Insert cell
{
overridingConsoleLog;
}
Insert cell
Insert cell
Insert cell
viewof test = getConsoleLikeOutput("myTest")
Insert cell
function getConsoleLikeOutput(message){
// Formatting messages
if (Array.isArray(message)){
message = `[${message.join(", ")}]`
}
if (typeof message === "string"){
message = `"${message}"`
}
return html`<p style="font-size:15px; margin: 0; border-bottom: 1px solid grey; padding-left: 10px; color: #707070"></span>${message}</p>`
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more