Névsor

tanuloi_nevsor/ajax.js

@@ -0,0 +1,29 @@
+let request= new XMLHttpRequest();
+
+let valasz="";
+
+let root=document.getElementById('root');
+
+request.open('GET','https://jsonplaceholder.typicode.com/posts',true);
+
+request.onload=function(){
+    valasz=JSON.parse(this.response);
+    valasz.forEach(elem=>{
+        let p=document.createElement('p');
+        p.textContent=elem.title;
+        root.appendChild(p);
+    });
+}
+
+//request.send();
+
+fetch('https://jsonplaceholder.typicode.com/posts')
+.then(res=>res.json())
+.then(valasz=>{
+    valasz.forEach(elem=>{
+        let p=document.createElement('p');
+        p.textContent=elem.title;
+        root.appendChild(p);
+    })
+}).catch(err=>alert(err));
+

tanuloi_nevsor/index.html

@@ -4,11 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tanulói névsor</title>
-    <script src="nevsor.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <script defer src="ajax.js"></script>
 </head>
 <body>
-    <h1>Tanulói névsor</h1>
+    <h1 class="text-3xl font-bold text-center text-sky-600">Tanulói névsor</h1>
-    <div id="root">
+    <div class="flex flex-row flex-wrap items-center justify-center" id="root">
         
     </div>
     

tanuloi_nevsor/nevsor.js

@@ -42,6 +42,7 @@ for (let i = 0; i < darab; i++) {
 
 for (let i = 0; i < tanulok.length; i++) {
     let tanuloKontener=document.createElement('div');
+    tanuloKontener.setAttribute('class','m-5 text-sky-800 bg-sky-200 w-64 p-2 border-2 shadow-xl rounded-xl outline-green-300')
 
     let tanulo_veznev=document.createElement('p');
     tanulo_veznev.textContent=tanulok[i].vezeteknev;