Skip to content

Instantly share code, notes, and snippets.

@stevenventimiglia
Created April 27, 2022 20:04
Show Gist options
  • Save stevenventimiglia/836ca2a9f6f35a1990f8b52b097377b4 to your computer and use it in GitHub Desktop.
Save stevenventimiglia/836ca2a9f6f35a1990f8b52b097377b4 to your computer and use it in GitHub Desktop.
List of Elements
<div id="mainContainer">
<div id="page" class="wrapper">
<h2>List of Elements</h2>
<div id="list"></div>
<!--
<ul>
<li id="1">List Item 001</li>
<li id="2">List Item 002
<ul>
<li id="1">List Item 001</li>
<li id="2">List Item 002</li>
<li id="3">List Item 003</li>
<li id="4">List Item 004
<ul>
<li id="1">List Item 001</li>
<li id="2">List Item 002</li>
<li id="3">List Item 003</li>
<li id="4">List Item 004</li>
<li id="5">List Item 005</li>
<li id="6">List Item 006
<ul>
<li id="1">List Item 001</li>
<li id="2">List Item 002</li>
<li id="3">List Item 003</li>
<li id="4">List Item 004</li>
<li id="5">List Item 005</li>
<li id="6">List Item 006</li>
</ul>
</li>
</ul>
</li>
<li id="5">List Item 005</li>
<li id="6">List Item 006</li>
</ul>
</li>
<li id="3">List Item 003</li>
<li id="4">List Item 004</li>
<li id="5">List Item 005</li>
<li id="6">List Item 006</li>
</ul>
-->
</div>
</div>
const list = document.getElementById('list');
const elements = [
div: {
id: null,
class: {},
props: {},
data: {},
content: '!!!' },
span: {
id: null,
class: {},
props: {},
data: {},
content: '!!!' },
div: {
id: null,
class: {},
props: {},
data: {},
content: '!!!' }
];
let tree = '';
for (let i=0; i < elements.length; i++) {
tree += `<div>${elements[i].el}</div>`;
}
list.insertAdjacentHTML('beforeend', tree);
// list.insertAdjacentHTML('beforeend', JSON.stringify(elements));
// Sass
$space: 20px;
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/183117/baseDark.css';
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/183117/icons.css';
// Pen
h2 {
color: #ccc;
font-size: 1.85em;
padding-bottom: $space;
margin-bottom: $space;
border-bottom: 1px solid #777;
}
#page {
display: block;
position: relative;
min-height: $space*20;
padding: $space;
margin: $space auto;
border-radius: $space/4;
box-shadow: 0 0 6px rgba(0,0,0,0.15);
background: #444;
overflow: hidden;
}
ul li > ul {
margin: $space;
margin-right: 0;
}
#list {
font-size: 1.5em;
line-height: 1.35em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment