sprawdzian 18.10.2024 (Piątek 4 lekcja PAI)

2024-10-04 13:32:21 +02:00 · 2024-10-04 13:32:21 +02:00 · f81e2d0add
commit f81e2d0add
3 changed files with 91 additions and 0 deletions
--- a/gget.php
+++ b/gget.php
@ -0,0 +1,15 @@
+<?php
+
+$polaczenie = mysqli_connect("172.19.0.4", "root", "secret", "db");
+
+$kwerenda = mysqli_query($polaczenie, "SELECT * FROM liczby ORDER BY id DESC LIMIT 3;");
+
+$json = array();
+
+while($row = mysqli_fetch_assoc($kwerenda)) {
+    $json [] = $row;
+};
+
+echo json_encode($json);
+
+?>
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <script type="module" src="script.js"></script>
+
+</head>
+<body>
+    heeloo 
+</body>
+</html>
--- a/script.js
+++ 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);