From bc494a6133f27352cdddbf87bfce4b9c0062eb3f Mon Sep 17 00:00:00 2001 From: Yarne Coppens Date: Thu, 8 Aug 2024 16:32:05 +0200 Subject: [PATCH] Table now loads boardgame thumbnails --- index.html | 23 +++++++++++++---------- scripts/main.js | 16 +++++++++++----- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 9354c69..bee371f 100644 --- a/index.html +++ b/index.html @@ -13,16 +13,19 @@ - - - - - - - - - -
NaamBeschrijving
+
+ + + + + + + + + + +
ThumbnailNaamBeschrijving
+
diff --git a/scripts/main.js b/scripts/main.js index 7017c8a..184352a 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -13,11 +13,17 @@ async function makeAPIRequest(request) { } } -function add_boardgame_row(html_table, boardgame_json) { - var row = html_table.insertRow() +function add_boardgame_row(html_tbody, boardgame_json) { + var row = html_tbody.insertRow(); + var icon_cell = row.insertCell(); var name_cell = row.insertCell(); - var description_cell = row.insertCell() + var description_cell = row.insertCell(); + var icon_image = document.createElement('img') + icon_image.src = boardgame_json.thumbnail_url + icon_image.classList.add("img-thumbnail") + + icon_cell.appendChild(icon_image) name_cell.innerHTML = boardgame_json.name description_cell.innerHTML = boardgame_json.description } @@ -27,9 +33,9 @@ async function loadOwnedGames() { all_owned_games = await makeAPIRequest(loadGamesRequest) console.log("Loaded owned games:", all_owned_games) - var boardgame_table = document.getElementById("boardgame_table") + var boardgame_tbody = document.getElementById("boardgame_table_tbody") for (index = 0; index < all_owned_games.length; index++) { - add_boardgame_row(boardgame_table, all_owned_games[index]) + add_boardgame_row(boardgame_tbody, all_owned_games[index]) } } \ No newline at end of file