info overlay

2 years ago · 302ff7b1f8
parent f67bbbf857
commit 302ff7b1f8
3 changed files with 18 additions and 11 deletions
--- a/index.html
+++ b/index.html
@ -10,7 +10,7 @@
 </head>
 <body>
    <h1>The Jingle Board Parliament</h1>
-    <div class="btn" id="info-btn" value="hiding">?</div>
+    <div class="btn" id="info-btn" >?</div>
    <div class="info" id="info">
        <h2>SI18 - Weekly Release #4</h2>
        <p>The format of this week's release is a jingle board arranged in the layout of a parliament! Each seat is a button that plays an audio snippet when pressed. There is no linear or predefined outcome but the listener can create a unique parliament conference themselves. Therefore, the meaning of the audio contributions can be changed and recontextualised. The contributions include a range from self-made recordings, movie quotes, excerpts and re-enactments of political speeches, sound effects, audio snippets from well-known videos on the internet and covers of European anthems.</p>
--- a/script.js
+++ b/script.js
@ -57,17 +57,20 @@ function populateSeats(parliament) {
 }

 // info
-// btn.addEventListener("onclick", showInfo())
+btn.addEventListener("click", showInfo)

-// function showInfo(){
-//     if (btn.value == "hiding"){
-//         btn.innerHTML = "X"
-//         btn.value = "showing"
-//     } else {
-//         btn.innerHTML = "?"
-//         btn.value = "hiding"
-//     }
-// }
+
+function showInfo(){
+    
+    if (info.style.display === "none"){
+        btn.innerHTML = "X";
+        console.log("click");
+        info.style.display = "block";
+    } else {
+        btn.innerHTML = "?";
+        info.style.display = "none";
+    }
+}

 /*
 TODO
--- a/style.css
+++ b/style.css
@ -18,6 +18,7 @@ body, html{
    top: 16px;
    left: 16px;
    font-size: 36px;
+    font-family: sans-serif;
    text-align: center;
    border: solid 2px var(--color1);
    width: 48px;
@ -25,6 +26,9 @@ body, html{
    border-radius: 50%;
    background-color: white;
 }
+.btn:hover{
+    cursor: pointer;
+}
 .info{
    display: none;
    font-size: 3ch;