init

2025-09-11 11:00:04 +02:00 · 2025-09-11 11:00:04 +02:00 · 04475fc929
commit 04475fc929
3 changed files with 75 additions and 0 deletions
--- a/data/data.json
+++ b/data/data.json
@ -0,0 +1,8 @@
+{
+    "title":"Template",
+    "Author":"mpabi",
+    "lst":[
+        {"id":1, "name":"el1"},
+        {"id":2, "name":"el2"}
+    ]
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+        }
+        #list-wrapper {
+            max-width: 400px;
+            margin-top: 15px;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            background-color: #f9f9f9;
+        }
+        ul {
+            list-style-type: none;
+            padding: 0;
+        }
+        li {
+            padding: 8px;
+            margin: 4px 0;
+            background-color: #fff;
+            border: 1px solid #eee;
+            border-radius: 4px;
+        }
+    </style>
+    <script src="js/script.js" defer> </script>
+</head>
+<body>
+
+    <h1>Loading Data...</h1>
+    
+    <!-- Lista opakowana w div z id -->
+    <div id="list-wrapper">
+        <ul id="item-list"></ul>
+    </div>
+
+</body>
+</body>
+</html>
--- a/js/script.js
+++ b/js/script.js
@ -0,0 +1,22 @@
+console.log("Hello world");
+                                                                                                                  
+fetch ("./data/data.json")
+    .then ( response => {
+        return response.json();
+    })
+    .then (data => {
+
+        console.log("ok")
+            // Nadaj tytuł z danych
+            document.querySelector("h1").textContent = data.title;
+
+            const listContainer = document.getElementById("item-list");
+
+            // Wypełnij listę elementami z 'lst'
+            data.lst.forEach(item => {
+            const li = document.createElement("li");
+            li.textContent = `ID: ${item.id}, Name: ${item.name}`;
+            listContainer.appendChild(li);
+            });
+
+     })