js

2 years ago · 054a0d0952
parent 580ab0da9d
commit 054a0d0952
2 changed files with 56 additions and 2 deletions
--- a/call.html
+++ b/call.html
@ -7,7 +7,32 @@
  <link rel="stylesheet" href="call.css" />
 </head>
 <body>
-<p>Hello world!</p>
+<pre>
+ ____ ____ ____ ____
+||X |||P |||U |||B ||
+||__|||__|||__|||__||
+|/__\|/__\|/__\|/__\|
+</pre>
+
+<div id="head">
+Master of Arts in Fine Art and Design: Experimental Publishing<br>
+at the Piet Zwart Institute (Rotterdam, Netherlands
+</div>
+
+<div id="call">
+  <div class="phrase">
+    <span class="actor"></span>
+    <span class="action"></span>
+    <span class="prefix"></span>
+    <span class="sort"></span>
+    <span class="media"></span>
+  </div>
+</div>
+<div id="footer">
+Applications deadlines: March 7, 2023 (non-EU) and May 10, 2023 (EU)<br>
+Online open day: February 11, 2023<br>
+<a href="https://xpub.nl">https://xpub.nl</a>
+</div>
 <script src="call.js"></script>
 </body>
 </html>
--- a/call.js
+++ b/call.js
@ -1,3 +1,32 @@
+function randint (from, to) {
+  return from + Math.floor((Math.random() * (to-from)));
+}
+
+function choice (arr) {
+  let ri = randint(0, arr.length-1);
+  let ret = arr[ri];
+  arr.splice(ri, 1);
+  return ret;
+}
+
 fetch("terms.json")
  .then(response => response.json())
-  .then(terms => console.log("terms", terms));
+  .then(terms => {
+    console.log("terms", terms);
+    let call = document.querySelector("#call");
+    let template = call.querySelector(".phrase");
+    for (var i=0; i<20; i++) {
+      let nn = template.cloneNode(true);
+      call.appendChild(nn);   
+      nn.querySelector(".actor").innerHTML = choice(terms['actor']);
+      nn.querySelector(".action").innerHTML = choice(terms['action']);
+      if (randint(0, 2) == 0) {
+        nn.querySelector(".prefix").innerHTML = choice(terms['prefix']);
+      } else {
+        nn.querySelector(".prefix").remove();
+      }
+      nn.querySelector(".sort").innerHTML = choice(terms['sort']);
+      nn.querySelector(".media").innerHTML = choice(terms['media']);
+    }
+    template.style.visibility = "hidden";
+  });