diff --git a/index.html b/index.html index 0c4ad8e529a46ba9bff3c15ec1894a1748bf773e..ef118dca58740ac10c564936713d7a7b10c177a4 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,13 @@ <!DOCTYPE html> <html lang="en"> - <head><title>TypeScript Dom Manipulation</title></head> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <title>TypeScript Dom Manipulation</title></head> <body> - <div id="app"></div> + <div id="app"> + + </div> <!-- Assume index.js is the compiled output of index.ts --> <script src="index.js"></script> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> diff --git a/index.js b/index.js index 3179c79e3f00e8a8f6d3c53cbd9956ee7f54271c..4c6192dbb1427d41978fbcbe8113a39d5946e83d 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,12 @@ // 1. Select the div element using the id property const app = document.getElementById("app"); +const viewer = document.createElement("div"); +viewer.setAttribute("width", "500px"); +viewer.setAttribute("height", "500px"); + // 2. Create a new <p></p> element programmatically -const description = document.createElement("p"); +const description = document.createElement("ul"); const bucketpath = document.createElement("p"); @@ -11,11 +15,24 @@ const userAction = async () => { // fetch record json const response = await fetch('https://www.fdr.uni-hamburg.de/api/records/863'); const recordjson = await response.json(); + // read metadata from json response const metadata = recordjson.metadata; - description.textContent = metadata.description; + + var jsondescription = metadata.description; + var s = jsondescription.split("<p>"); + + var list = s[1].split("<br>") + + list.forEach(element => { + var listnode = document.createElement("li"); + var listtext = document.createTextNode(element.replace(/(<([^>]+)>)/gi, "")); + listnode.appendChild(listtext); + description.appendChild(listnode) + }) + // get bucket path from record json const bucketresponse = await fetch(recordjson.links.bucket); @@ -27,15 +44,13 @@ const userAction = async () => { { if(element.key.includes('.glb')) { - console.log(element.key); const filelink = element.links.self; - console.log(filelink); const modelviewer = document.createElement("model-viewer"); modelviewer.setAttribute("src", filelink); modelviewer.setAttribute("auto-rotate", true); modelviewer.setAttribute("camera-controls", true); - app?.appendChild(modelviewer); + viewer.appendChild(modelviewer); } }); @@ -45,3 +60,4 @@ const userAction = async () => { // 4. Append the p element to the div element app?.appendChild(description); +app?.appendChild(viewer);