commit f81e2d0adde62960e22e387d9431cf402a6ec43f Author: mpabi Date: Fri Oct 4 13:32:21 2024 +0200 sprawdzian 18.10.2024 (Piątek 4 lekcja PAI) 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);