* {
	box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
}
body {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.app {
	width: 75%;
	display: flex;
	flex-direction: column;
	font-family: sans-serif;
	font-weight: 100;
}

.app h1 {
	font-size: 14pt;
	font-weight: 500;
	margin: 5px 0;
}
.app h2 {
	font-size: 13pt;
	font-weight: 400;
	margin: 5px;
}
.app h3 {
	font-size: 12pt;
	font-weight: 300;
	margin: 15px 0 5px;
}

.app_desc {
	margin: 5px 0 15px;
}
.app_input {
	padding: 10px;
	font-size: 12pt;
	font-family: monospace;
	font-weight: 100;
}
.app_example {
	font-size: 10pt;
	text-decoration: none;
	align-self: flex-end;
	padding-top: 5px;
}
.app_html {
	font-family: monospace;
	padding: 5px;
}

.app_rendered-html {
	outline: solid 1px #aaa;
	padding: 5px;
}

// quick tip: an import alias that loads npm modules!
const npm = p => import(`https://unpkg.com/${p}?module`);

(async () => {
 const title =
  "Pulling and using NPM package Emmet as javascript module and using it in the browser";
 const desc =
  "This pen has no written HTML, as it is generated using ";
 const linkText = "Get random example";

 const appAbbr = `.app>(h1.app_title{${title}}+(blockquote.app_desc{${desc}}>a[href="https://www.npmjs.com/package/emmet" target="_blank"]{Emmet})+h2{Enter CSS abbreviation}+input.app_input[placeholder="Enter a CSS abbreviation" value=""]+a.app_example[href="#"]{${linkText}}+h3{HTML}+textarea.app_html+h3{Rendered HTML}+.app_rendered-html)`;
 const abbrs = [".test>table>thead>tr*3>th{$}","html:5", "table>tbody>tr*4>td*3{col $$}","#id.class{Div is default tag}", "h1{h1}+h2{h2}+h3{h3}+h4{h4}+h5{h5}+h6{h6}","#d$$*3","(.block>h2.block_title{Block $$}+img[src=https://dummyimage.com/190x80])*3"];
 const emmet = await npm("emmet"); // Fetch the Emmet package from NPM as js module
 const html = emmet.default(appAbbr); // The abbrs[0] is this pen :-)
 // Add the app to the body
 const eleApp = (document.body.innerHTML = html);

 const appInput = document.querySelector(".app_input");
 const appHtml = document.querySelector(".app_html");
 const appExample = document.querySelector(".app_example");
 const appRenderedHtml = document.querySelector(".app_rendered-html");

 const action = () => {
  appHtml.value = emmet.default(appInput.value);
	 appRenderedHtml.innerHTML = appHtml.value;
 };
	
const getRandom = (evt) => {
  if (evt) {
		evt.preventDefault();
	}
  const no = parseInt(Math.random() * abbrs.length);
  appInput.value = abbrs[no];
  action();
 }

 // Add eventlistener to the input
 appInput.addEventListener("input", action);
 // Add eventlistener to the get random example
 appExample.addEventListener("click", (evt) => {getRandom(evt)});
	getRandom();
	action();
})();