grgr
/
emergent-opera
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fetch data from the atlas api

Browse Source
master
km0 3 years ago
parent 7935d3a8da
commit 8fd15a86d2
3 changed files with 87 additions and 44 deletions
Show Stats Download Patch File Download Diff File

25
contents.js
Unescape Escape View File

@ -0,0 +1,25 @@
const reference = document.getElementById("reference");
const contributionsList = document.getElementById("contributions");
window.addEventListener("load", () => {
fetch("https://hub.xpub.nl/soupboat/atlas-api/contributions")
.then((response) => response.json())
.then((data) => populateContributions(data));
});
function populateContributions(contributions) {
contributions.forEach((contribution) => {
contributionsList.appendChild(createSection(contribution));
});
}
function createSection(contribution) {
let section = reference.cloneNode(true);
section.id = contribution.moment;
section.querySelector(".moment").innerHTML = contribution.moment;
section.querySelector(".title").innerHTML = contribution.title;
section.querySelector(".author").innerHTML = contribution.author;
section.querySelector(".description").innerHTML = contribution.description;
section.querySelector(".content").innerHTML = contribution.content_html;
return section;
}

95
index.html
Unescape Escape View File

@ -1,43 +1,58 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" />
<title>Emergent Opera</title> <script src="contents.js" defer></script>
</head> <title>Emergent Opera</title>
<body> </head>
<div class="container"> <body>
<div class="atlas"> <div class="container">
the atlas here <div class="atlas">
<div class="info"> the atlas here
<div class="title">Title</div> <div class="info">
<div class="filename">Filename.mp3</div> <div class="title">Title</div>
<div class="position">04:35</div> <div class="filename">Filename.mp3</div>
</div> <div class="position">04:35</div>
</div> </div>
<div class="libretto"> </div>
<header class="cover"> <div class="libretto">
<h3>SI18 Weekly Release #3</h3> <header class="cover">
<h1>Emergent Opera</h1> <h3>SI18 Weekly Release #3</h3>
<p>description</p> <h1>Emergent Opera</h1>
<h3>contribution by: <br> Kimberley, Chae, Kamo, Supi, Emma, Miri, Carmen, Alex, Gersande</h3> <p>description</p>
<h3>caretakers: <br> Erica, Gersande, Kamo</h3> <h3>
</header> contribution by: <br />
<section class="index"></section> Kimberley, Chae, Kamo, Supi, Emma, Miri, Carmen, Alex, Gersande
<section class="contribution"> </h3>
<h4>overture</h4> <h3>
<h1 class="title">Overture Atlas</h1> caretakers: <br />
<h3>description</h3> Erica, Gersande, Kamo
<p>the whole description</p> </h3>
<h3>contents</h3> </header>
<section class="index"></section>
<div class="contributions" id="contributions">
<!-- <section class="contribution">
<div class="moment">overture</div>
<h2 class="title">Overture Atlas</h2>
<div class="description">description</div>
<p>the whole description</p>
<h3>contents</h3>
</section> -->
</div>
</section> <!-- this is a reference for the js script, hidden by default with css -->
<!-- <section class="vocabulary"></section> --> <section class="contribution" id="reference">
</div> <div class="moment">overture</div>
<h2 class="title">Overture Atlas</h2>
</div> <div class="author"></div>
<div class="description">description</div>
</body> <div class="content"></div>
</html> </section>
<!-- <section class="vocabulary"></section> -->
</div>
</div>
</body>
</html>

11
style.css
Unescape Escape View File

@ -39,7 +39,6 @@ body{
.libretto{ .libretto{
overflow-y: scroll; overflow-y: scroll;
} }
.libretto > * { .libretto > * {
@ -48,9 +47,9 @@ body{
h3{ h3{
font-weight: normal; font-weight: normal;
} }
h4{
.moment{
text-transform: uppercase; text-transform: uppercase;
font-weight: normal;
} }
header{ header{
@ -62,6 +61,10 @@ header{
display: none; display: none;
} }
section{ /* section {
height: 100vh; height: 100vh;
} */
#reference {
display: none;
} }
Write Preview
Loading…
Cancel
Save