Update hamels/index.html

2026-02-05 11:07:00 +01:00
parent 8a0b4ae969
commit 8aa2016756
1 changed files with 50 additions and 9 deletions
--- a/hamels/index.html
+++ b/hamels/index.html
@@ -48,6 +48,28 @@ button {
 button:hover {
    background-color: #ddd;
 }
+
+#grafiek {
+    width: 300px;
+    margin: 20px auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    height: 150px;
+}
+
+.bar {
+    width: 100px;
+    background-color: #4CAF50;
+    text-align: center;
+    color: white;
+    font-weight: bold;
+    margin: 0 10px;
+}
+
+.bar.negative {
+    background-color: #f44336;
+}
 </style>
 </head>
 <body>
@@ -86,25 +108,44 @@ button:hover {

 <h2>Vond je deze site leuk?</h2>
 <div class="buttons">
-    <button onclick="like()">👍 Duimpje omhoog</button>
-    <button onclick="dislike()">👎 Duimpje omlaag</button>
+    <button onclick="stem('like')">👍 Duimpje omhoog</button>
+    <button onclick="stem('dislike')">👎 Duimpje omlaag</button>
 </div>

-<p id="resultaat"></p>
+<div id="grafiek">
+    <div class="bar" id="likeBar">0</div>
+    <div class="bar negative" id="dislikeBar">0</div>
+</div>

 <footer>
 <p>Gemaakt door Tristan – schoolproject</p>
 </footer>

 <script>
-function like() {
-    document.getElementById("resultaat").innerText =
-        "Bedankt! Fijn dat je het leuk vond 👍";
+let stemmen = {
+    like: 0,
+    dislike: 0
+};
+
+function stem(keuze) {
+    stemmen[keuze]++;
+    updateGrafiek();
 }

-function dislike() {
-    document.getElementById("resultaat").innerText =
-        "Jammer 😕 bedankt voor je mening!";
+function updateGrafiek() {
+    let totaal = stemmen.like + stemmen.dislike;
+    let likeBar = document.getElementById("likeBar");
+    let dislikeBar = document.getElementById("dislikeBar");
+
+    // hoogte in pixels (max 150px)
+    let likeHeight = (stemmen.like / Math.max(totaal,1)) * 150;
+    let dislikeHeight = (stemmen.dislike / Math.max(totaal,1)) * 150;
+
+    likeBar.style.height = likeHeight + "px";
+    likeBar.innerText = stemmen.like;
+
+    dislikeBar.style.height = dislikeHeight + "px";
+    dislikeBar.innerText = stemmen.dislike;
 }
 </script>