From f81e2d0adde62960e22e387d9431cf402a6ec43f Mon Sep 17 00:00:00 2001 From: mpabi Date: Fri, 4 Oct 2024 13:32:21 +0200 Subject: [PATCH] =?UTF-8?q?sprawdzian=2018.10.2024=20(Pi=C4=85tek=204=20le?= =?UTF-8?q?kcja=20PAI)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gget.php | 15 +++++++++++++ index.html | 14 ++++++++++++ script.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 91 insertions(+) create mode 100644 gget.php create mode 100644 index.html create mode 100644 script.js diff --git a/gget.php b/gget.php new file mode 100644 index 0000000..d344e40 --- /dev/null +++ b/gget.php @@ -0,0 +1,15 @@ + diff --git a/index.html b/index.html new file mode 100644 index 0000000..35c05c7 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + + + heeloo + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..36f3872 --- /dev/null +++ b/script.js @@ -0,0 +1,62 @@ + + const tbl = document.createElement("table"); + const tblBody = document.createElement("tbody"); + + +fetch("gget.php") + .then(response => response.json()) + .then(data => { + generateTable(data); + }) + + +function generateTable(data) { + + const row = document.createElement("tr"); + + data.forEach( element => { + + for (const [key, value] of Object.entries(element)) { + + const cell = document.createElement("td"); + + if (key == "b") { + // console.log(`${key}: ${value}`); + + const cellText = document.createTextNode(`${value} `); + cell.appendChild(cellText); + row.appendChild(cell); + + } + if (!isNaN(value) && value > 10) { + cell.classList.add("hover-effect"); + } + } + + tblBody.appendChild(row); + + tbl.appendChild(tblBody); + document.body.appendChild(tbl); + + tbl.setAttribute("border", "2"); + + }) + + // console.log("hello") +} + + +const style = document.createElement('style'); + +style.innerHTML = ` + .hover-effect { + // background-color: lightblue; + transition: background-color 0.3s; + } + + .hover-effect:hover { + background-color: yellow; + } +`; + +document.head.appendChild(style);