Add beer-table

2023-04-13 09:19:07 +02:00
parent e4e447f5a3
commit dceb024fab
1 changed files with 78 additions and 0 deletions
--- a/wap/beer-table/index.html
+++ b/wap/beer-table/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Beers</title>
+    <style>
+        html,
+        body {
+            padding: 0;
+            margin: 0;
+            border: none;
+        }
+
+        table {
+            font-family: arial, sans-serif;
+            border-collapse: collapse;
+            width: 100%;
+        }
+
+        td,
+        th {
+            border: 1px solid #dddddd;
+            text-align: left;
+            padding: 8px;
+        }
+
+        tr:nth-child(even) {
+            background-color: #dddddd;
+        }
+    </style>
+</head>
+
+<body>
+    <table>
+        <thead>
+            <th style="width:400px;">Name</th>
+            <th>Brand</th>
+            <th>Alcohol</th>
+        </thead>
+        <tbody id="beers"></tbody>
+    </table>
+</body>
+<script>
+    function fillTable(beers) {
+        beerTable = document.getElementById("beers");
+        beers.sort(function (x, y) {
+            xalk = parseFloat(x.alcohol.replace("%",""));
+            yalk = parseFloat(y.alcohol.replace("%",""));
+            if (xalk > yalk) {
+                return -1;
+            }
+            if (xalk < yalk) {
+                return 1;
+            }
+            return 0;
+        })
+        beerHtml = ""
+        beers.forEach(beer => {
+            //console.log(beer)
+            //beerHtml += "<tr><td>" + beer.brand + "</td><td>" + beer.name + "</td><td>" + beer.style + "</td><td>" + beer.hop + "</td><td>" + beer.yeast + "</td><td>" + beer.malts + "</td><td>" + beer.ibu + "</td><td>" + beer.alcohol + "</td><td>" + beer.blg + "</td></tr>";
+            beerHtml += "<tr><td>" + beer.name + "</td><td>" + beer.brand + "</td><td>" + beer.alcohol + "</td>";
+        })
+        beerTable.innerHTML = beerHtml;
+    }
+    async function getBeers() {
+        const response = await fetch("https://random-data-api.com/api/v2/beers?size=10");
+        const jsonData = await response.json();
+        //console.log(jsonData);
+        fillTable(jsonData)
+    }
+    getBeers()
+
+</script>
+
+</html>