ben/ben.de-roo.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update hamels/index.html

Browse Source
This commit is contained in:
Ben de Roo
2026-02-05 11:07:00 +01:00
parent 8a0b4ae969
commit 8aa2016756
1 changed files with 50 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
hamels/index.html
View File

@@ -48,6 +48,28 @@ button {
button:hover { button:hover {
background-color: #ddd; 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> </style>
</head> </head>
<body> <body>
@@ -86,25 +108,44 @@ button:hover {
<h2>Vond je deze site leuk?</h2> <h2>Vond je deze site leuk?</h2>
<div class="buttons"> <div class="buttons">
<button onclick="like()">👍 Duimpje omhoog</button> <button onclick="stem('like')">👍 Duimpje omhoog</button>
<button onclick="dislike()">👎 Duimpje omlaag</button> <button onclick="stem('dislike')">👎 Duimpje omlaag</button>
</div> </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> <footer>
<p>Gemaakt door Tristan – schoolproject</p> <p>Gemaakt door Tristan – schoolproject</p>
</footer> </footer>
<script> <script>
function like() { let stemmen = {
document.getElementById("resultaat").innerText = like: 0,
"Bedankt! Fijn dat je het leuk vond 👍"; dislike: 0
};
function stem(keuze) {
stemmen[keuze]++;
updateGrafiek();
} }
function dislike() { function updateGrafiek() {
document.getElementById("resultaat").innerText = let totaal = stemmen.like + stemmen.dislike;
"Jammer 😕 bedankt voor je mening!"; 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> </script>