Gorev Tamamlandı

src/bileşenler/card.js

@@ -1,3 +1,5 @@
+import axios from "axios";
+import { response } from "express";
 const Card = (makale) => {
   // GÖREV 5
   // ---------------------
@@ -17,7 +19,33 @@ const Card = (makale) => {
   //   </div>
   // </div>
   //
-}
+
+  const cardDiv = document.createElement("div");
+  cardDiv.classList.add("card");
+
+  const baslikDiv = document.createElement("div");
+  baslikDiv.classList.add("headline");
+  baslikDiv.append(makale.anabaslik);
+  cardDiv.append(baslikDiv);
+
+  const author = document.createElement("div");
+  author.classList.add("author");
+  cardDiv.append(author);
+
+  const imgCont = document.createElement("div");
+  imgCont.setAttribute("class","img-container");
+  cardDiv.append(imgCont);
+
+  const img = document.createElement("img");
+  img.src = makale.yazarFoto;
+  cardDiv.append(img);
+
+  const span = document.createElement("span");
+  span.textContent = makale.yazarAdi + `tarafından`;
+  author.append(span);
+
+  return cardDiv;
+};
 
 const cardEkleyici = (secici) => {
   // GÖREV 6
@@ -28,6 +56,16 @@ const cardEkleyici = (secici) => {
   // Card bileşenini kullanarak yanıttaki her makale nesnesinden bir kart oluşturun.
   // Her cardı, fonksiyona iletilen seçiciyle eşleşen DOM'daki öğeye ekleyin.
   //
-}
 
-export { Card, cardEkleyici }
+  const cardAdd = document.querySelector(secici);
+  axios.get(`http://localhost:5001/api/makaleler`).then((response) => {
+    let makaleler = response.data.makaleler;
+    for(let key in makaleler){
+      for(let i =0 ; i< makaleler[key].length; i++){
+        cardAdd.append(Card(makaleler[key][i]));
+      }
+    }
+  });
+};
+
+export { Card, cardEkleyici };

src/bileşenler/header.js

@@ -11,6 +11,23 @@ const Header = (baslik, tarih, yazi) => {
   //    <span class="temp">{ yazi }</span>
   //  </div>
   //
+  const headerDiv = document.createElement("div");
+  headerDiv.classList.add("header");
+
+  const headerSpan = document.createElement("span");
+  headerSpan.classList.add("date");
+  headerSpan.textContent = tarih;
+
+  const headerH1 = document.createElement("h1");
+  headerH1.textContent = baslik;
+
+  const headerSpan2 = document.createElement("span");
+  headerSpan2.classList.add("temp");
+  headerSpan2.textContent = yazi;
+
+  headerDiv.append(headerSpan,headerH1,headerSpan2);
+
+  return headerDiv;
 }
 
 const headerEkleyici = (secici) => {
@@ -24,6 +41,11 @@ const headerEkleyici = (secici) => {
   // İPUCU: querySelector bir string alabilir (bknz: querySelector("#wrapper")) 
   // fakat aynı zamanda bir değişken de alabilir (bknz: querySelector(secici))
 
-}
+  const header = document.querySelector(secici);
+  const baslik = "Teknoloji Zamanı";
+  const tarih = "11 Kasım 2022";
+  const yazi = "sağdaki yazı";
+  header.appendChild(Header(baslik,tarih,yazi));
+};
 
 export { Header, headerEkleyici }

src/bileşenler/tablar.js

@@ -1,3 +1,4 @@
+import axios from "axios";
 const Tablar = (konu) => {
   // GÖREV 3
   // ---------------------
@@ -13,7 +14,17 @@ const Tablar = (konu) => {
   //   <div class="tab">teknoloji</div>
   // </div>
   //
-}
+  const divTopics = document.createElement("div");
+  divTopics.setAttribute("class", "topics");
+
+  konu.forEach((element) => {
+    const tabDiv = document.createElement("div");
+    tabDiv.classList.add("tab");
+    tabDiv.textContent = element;
+    divTopics.appendChild(tabDiv);
+  });
+  return divTopics;
+};
 
 const tabEkleyici = (secici) => {
   // GÖREV 4
@@ -23,6 +34,14 @@ const tabEkleyici = (secici) => {
   // Yanıtın içindeki konu dizisini bulun ve Tablar bileşenini kullanarak tabları oluşturun.
   // Tabları, fonksiyona iletilen seçiciyle eşleşen DOM'daki öğeye ekleyin.
   //
-}
+  const addSecici = document.querySelector(secici);
+  axios
+    .get("http://localhost:5001/api/konular")
+
+    .then((response) => {
+      const tablar = Tablar(response.data.konular);
+      addSecici.appendChild(tablar);
+    });
+};
 
-export { Tablar, tabEkleyici }
+export { Tablar, tabEkleyici };