@weyvern/dom-logger
v1.2.0
Published
Small utility to log to a DOM element, used for education purposes to teach aspiring developers
Downloads
4
Maintainers
weyvernReadme
DOM Logger
A simple JavaScript utility to log to a DOM element instead of the console
Install
npm i @weyvern/dom-loggerUsage
import DOMLogger from '@weyvern/dom-logger';
// a valid HTML element that allows InnerHTML
const element = document.getElementById('output');
/*
instantiate the class passing the HTML element and a second optional boolean
parameter, if this this parameter is set to true, the messages will be logged
to the native console as well, it defaults to false.
*/
const logger = new DOMLogger(element, true);
logger.log('Hello World!');
logger.info('Hello World!');
logger.warn('Hello World!');
logger.error('Hello World!');You can also use the CDN directly within a JS Module
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>001-Intro-to-JS</title>
</head>
<body>
<main>
<div id="output"></div>
</main>
<script type="module" src="index.js"></script>
</body>
</html>import DOMLogger from 'https://unpkg.com/@weyvern/[email protected]/index.js';
// a valid HTML element that allows IinnerHTML
const element = document.getElementById('output');
const logger = new DOMLogger(element);
logger.log('Hello World!');
logger.info('Hello World!');
logger.warn('Hello World!');
logger.error('Hello World!');You can additionally style the message CSS, e.g:
.info {
background-color: #1da4cd;
}
.warn {
background-color: #f0d16b;
color: #251919;
}
.error {
background-color: #f8485e;
}