Barely presentable dynamic javascript frontpage

frontend.js

@@ -0,0 +1,97 @@
+class TPDF {
+
+    static display() {
+        console.log(TPDF.xhr.responseText);
+
+        if (TPDF.xhr.readyState == 4 && TPDF.xhr.status == 200) {
+            TPDF.output.removeChild(TPDF.output.childNodes[0]);
+            var results = JSON.parse(TPDF.xhr.responseText);
+
+            for (var i in results['books']) {
+                var dtAuthors = document.createElement('dt');
+                dtAuthors.appendChild(document.createTextNode('Authors'));
+                var dtPublisher = document.createElement('dt');
+                dtPublisher.appendChild(document.createTextNode('Publisher'));
+                var dtYear = document.createElement('dt');
+                dtYear.appendChild(document.createTextNode('Year'));
+                var dtPages = document.createElement('dt');
+                dtPages.appendChild(document.createTextNode('Pages'));
+                var dtISBN = document.createElement('dt');
+                dtISBN.appendChild(document.createTextNode('ISBN'));
+                var dtId = document.createElement('dt');
+                dtId.appendChild(document.createTextNode('ID'));
+
+                var ddAuthors = document.createElement('dd');
+                var authorsString = '';
+                for (var j in results['books'][i]['authors']) {
+                    authorsString += results['books'][i]['authors'][j];
+                    if (j < results['books'][i]['authors'].length - 1) authorsString += ', ';
+                }
+                ddAuthors.appendChild(document.createTextNode(authorsString));
+
+                var ddPublisher = document.createElement('dd');
+                ddPublisher.appendChild(document.createTextNode(results['books'][i]['publisher']));
+                var ddYear = document.createElement('dd');
+                ddYear.appendChild(document.createTextNode(results['books'][i]['year']));
+                var ddPages = document.createElement('dd');
+                ddPages.appendChild(document.createTextNode(results['books'][i]['page']));
+                var ddISBN = document.createElement('dd');
+                ddISBN.appendChild(document.createTextNode(results['books'][i]['isbn']));
+                var ddId = document.createElement('dd');
+                ddId.appendChild(document.createTextNode(results['books'][i]['id']));
+
+
+                var bookElement = document.createElement('section');
+                var titleElement = document.createElement('h2');
+                var coverElement = document.createElement('img');
+
+                var dlElement = document.createElement('dl');
+                var authorsElement = document.createElement('ul');
+
+                dlElement.appendChild(dtAuthors);
+                dlElement.appendChild(ddAuthors);
+                dlElement.appendChild(dtPublisher);
+                dlElement.appendChild(ddPublisher);
+                dlElement.appendChild(dtYear);
+                dlElement.appendChild(ddYear);
+                dlElement.appendChild(dtPages);
+                dlElement.appendChild(ddPages);
+                dlElement.appendChild(dtISBN);
+                dlElement.appendChild(ddISBN);
+                dlElement.appendChild(dtId);
+                dlElement.appendChild(ddId);
+
+
+
+                titleElement.appendChild(document.createTextNode(results['books'][i]['title']));
+                coverElement.src = 'https://golem.linux.it/cgi/tpdf/output/images/' + results['books'][i]['cover'];
+                coverElement.alt = 'Cover of «' + results['books'][i]['title'] + '»';
+
+                bookElement.appendChild(titleElement);
+                bookElement.appendChild(coverElement);
+                bookElement.appendChild(dlElement);
+
+
+                TPDF.output.appendChild(bookElement);
+            }
+        }
+        else {
+            TPDF.output.childNodes[0].textContent = 'API Error. Try later.';
+        }
+
+    }
+
+    static submit() {
+        TPDF.xhr = new XMLHttpRequest();
+        TPDF.xhr.onload = TPDF.display;
+        TPDF.xhr.open('GET', 'https://golem.linux.it/cgi/tpdf/main.py?format=json')
+        TPDF.xhr.send(null);
+
+        TPDF.output = document.getElementById('tpdfOutput');
+        TPDF.output.childNodes[0].textContent = 'Searching...';
+    }
+
+}
+
+TPDF.xhr = null;
+TPDF.output = null;

index.html

@@ -3,11 +3,12 @@
     <head>
         <meta charset="utf-8" />
         <link rel="stylesheet" media="all" type="text/css" href="style.css" />
+        <script type="text/javascript" src="frontend.js"></script>
         <title>TPDF - Tellico Parser anD Finder</title>
     </head>
 
     <body>
-        <main>
+        <div id="tpdfSearchDiv">
             <h1>TPDF - Tellico Parser anD Finder</h1>
 
             <form action="main.py" method="get">
@@ -19,9 +20,14 @@
                 <input type="text" name="author" />
                 <br />
 
-                <input type="submit" />
+                <input type="button" value="Submit" onclick="TPDF.submit();"/>
                 <input type="reset" />
             </form>
+        </div>
+
+        <main>
+            <div id="tpdfOutput">
+            </div>
         </main>
 
     </body>

main.py

@@ -45,6 +45,7 @@ if format == 'html':
     print('Content-Type: text/html; charset=utf-8')
 else:
     print('Content-Type: text/json; charset=utf-8')
+    print('Access-Control-Allow-Origin: *')
 
 print()
 

style.css

@@ -4,14 +4,15 @@
 body {
     font-family: sans-serif;
     color: black;
-    background-color: #DEDEDE;
-}
-
-main {
-    text-align: center;
+    background-color: #fff1ca;
 }
 
 /******* Search form *******/
+#tpdfSearchDiv {
+    padding: 10px;
+    border: 1px solid green;
+}
+
 form label {
     display: inline-block;
     width: 10em;