Fetch from stackoverflow API

Fetches lists of questions from SO. Had a look at the PHP room's code but didn't really like it so I mostly ignored it. My code does a lot of looping and I tried to tone it down but it's still a bit messy in the name of having a clear way of seeing which questions are included in what categories and keeping the number of SO API calls down to one. I haven't styled it, I hate CSS. There's basically no error handling.
JavaScriptRoom · ivarni · Apr 25, 2015 · Apr 25, 2015 · Apr 25, 2015 · Apr 25, 2015
commit 62e10f048300bbcf6c8758af2b689b176e5c6470
diff --git a/canonicals.js b/canonicals.js
@@ -0,0 +1,53 @@
+var APP = APP || {};
+(function(app) {
+
+    var canonicals = {
+
+        closures: [750486],
+        asynchronous: [14220321],
+        inheritance: [11072556, 7486825]
+
+    };
+
+    var ids = Object.keys(canonicals).map(function(category) {
+        return canonicals[category].join(';');
+    });
+
+    app.xhr.fetch(ids.join(';')).then(function success(questions) {
+        questions.items.forEach(function(question) {
+            Object.keys(canonicals).forEach(function(category) {
+                canonicals[category].forEach(function(q, i) {
+                    //they see me nesting...
+                    if (q === question.question_id) {
+                        canonicals[category][i] = question;
+                    }
+                });
+            });
+        });
+
+        document.body.appendChild(app.dom.h1('List of canonicals'));
+
+        var sections = Object.keys(canonicals).map(function(category) {
+            return app.dom.section({ class: 'category' }, [
+                app.dom.h2(category),
+                app.dom.ul(canonicals[category].map(function(question) {
+                    return app.dom.li([createQuestionElement(question)]);
+                }))
+            ]);
+        });
+
+        document.body.appendChild(app.dom.div({ class: 'canonicals' }, sections));
+        document.body.appendChild(app.dom.div('Number of remaining API calls before meltdown: ' + questions.quota_remaining));
+    }, function error(reasons) {
+        document.body.appendChild(app.dom.div('Something went pearshaped because ' + reasons));
+    });
+
+    function createQuestionElement(question) {
+        return app.dom.div([
+            app.dom.span({ class: 'score' }, question.score),
+            app.dom.a({ href: question.link, target: '_blank' }, question.title),
+            app.dom.div({ class: 'tags' }, question.tags.map(function(tag) { return app.dom.span(tag) }))
+        ]);
+    }
+
+}(APP));
diff --git a/dom.js b/dom.js
@@ -0,0 +1,33 @@
+var APP = APP || {};
+(function(app) {
+
+    function element(name) {
+        return function() {
+            var e = document.createElement(name);
+            var args = Array.prototype.slice.call(arguments);
+            args.forEach(function(arg) {
+                var type = Object.prototype.toString.call(arg);
+                if (type.indexOf('Object') > -1) {
+                    for (var prop in arg) {
+                        if (arg.hasOwnProperty(prop)) {
+                            e.setAttribute(prop, arg[prop]);
+                        }
+                    }
+                } else if (type.indexOf('Array') > -1) {
+                    arg.forEach(function(child) {
+                        e.appendChild(child);
+                    });
+                } else if (type.indexOf('String') > -1 || type.indexOf('Number') > -1) {
+                    e.innerHTML = arg;
+                }
+            });
+            return e;
+        }
+    }
+
+    app.dom = {};
+    ['h1', 'h2', 'section', 'div', 'ul', 'li', 'span', 'a'].forEach(function(name) {
+        app.dom[name] = element(name);
+    });
+
+}(APP));
diff --git a/index.html b/index.html
@@ -2,11 +2,13 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Hello World - JavaScript room</title>
+  <title>JavaScript room</title>
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-
-Hello World!
-
+    <script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.min.js"></script>
+    <script src="xhr.js"></script>
+    <script src="dom.js"></script>
+    <script src="canonicals.js"></script>
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,29 @@
+.canonicals {
+    margin-left: 20px;
+}
+
+.canonicals ul {
+    list-style-type: none;
+}
+
+.canonicals li {
+    padding: 20px 0;
+    border-bottom: thin solid gray;
+}
+
+.canonicals .score {
+    width: 50px;
+    background-color: lightgray;
+    padding: 10px;
+    margin: 5px;
+}
+
+.canonicals .tags {
+    margin-top: 20px;
+}
+
+.canonicals .tags span {
+    padding: 5px;
+    background-color: lightgray;
+    margin: 0 5px 0 5px;
+}
diff --git a/xhr.js b/xhr.js
@@ -0,0 +1,30 @@
+var APP = APP || {};
+(function(app) {
+
+    var API_URLROOT = 'https://api.stackexchange.com/2.2/questions/';
+
+    app.xhr = {};
+
+    app.xhr.fetch = function(ids) {
+        return new Promise(function(resolve, reject) {
+            var req = new XMLHttpRequest();
+            var url = app.xhr.makeApiUrl(ids);
+            req.onreadystatechange = function() {
+                if (req.readyState === 4) {
+                    if (req.status === 200) {
+                        return resolve(JSON.parse(req.responseText));
+                    } else {
+                        return reject('shit dun goofed');
+                    }
+                }
+            };
+            req.open('GET', url);
+            req.send();
+        });
+    };
+
+    app.xhr.makeApiUrl = function(questionIds) {
+        return API_URLROOT + questionIds + '?site=stackoverflow';
+    };
+
+}(APP));