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";
  });