diff --git a/index.html b/index.html
index f4ddbb7..56b680e 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
-
+
diff --git a/tagslice.css b/tagslice.css
index e69de29..cd23982 100644
--- a/tagslice.css
+++ b/tagslice.css
@@ -0,0 +1,37 @@
+:root {
+ /* Highly approximate color names from our pallette */
+ --orange: rgb(255,153,0);
+ --black: rgb(66,66,66);
+ --white: rgb(233,233,233);
+ --grey: rgb(188,188,188);
+ --blue: rgb(50,153,187);
+}
+
+outer {
+ display: flex;
+
+ width: 100%;
+ height: 100%;
+
+ background-color: var(--white);
+
+ flex-direction: row;
+}
+
+taglist {
+ display: block;
+
+ padding: 5px;
+
+ border-right: 2px solid var(--orange);
+
+ flex-shrink: 0;
+}
+
+objectlist {
+ display: block;
+
+ padding: 5px;
+
+ flex-grow: 1;
+}
diff --git a/tagslice.js b/tagslice.js
index d9ffe71..6c985fc 100644
--- a/tagslice.js
+++ b/tagslice.js
@@ -2,12 +2,33 @@
class TagSlice {
constructor(container) {
+ this.buildDom_(container);
+ this.loadJson_();
+ }
+
+ buildDom_(container) {
+ let outer = document.createElement('outer');
+ container.appendChild(outer);
+
+ let taglist = document.createElement('taglist');
+ outer.appendChild(taglist);
+ taglist.innerText = 'tag!';
+
+ let objectlist = document.createElement('objectlist');
+ outer.appendChild(objectlist);
+ }
+
+ loadJson_() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'tagslice.json');
xhr.responseType = 'json';
xhr.onload = () => {
- console.log(xhr.response);
+ this.onJsonLoad_(xhr.response);
};
xhr.send();
}
+
+ onJsonLoad_(response) {
+ console.log('foo', response);
+ }
}