6. görev dışında çözüldü

src/bileşenler/card.js

@@ -1,4 +1,39 @@
+import axios from "axios";
+
 const Card = (makale) => {
+
+  const cardDiv = document.createElement("div");
+  cardDiv.classList.add("card");
+
+  const headlineDiv = document.createElement("div");
+  headlineDiv.classList.add("headline");
+  headlineDiv.textContent = makale.anabaslik;
+
+  const authorDiv = document.createElement("div");
+  authorDiv.classList.add("author");
+
+  const imgContainerDiv = document.createElement("div");
+  imgContainerDiv.classList.add("img-container");
+
+  const authorImg = document.createElement("img");
+  authorImg.setAttribute("src", makale.yazarFoto);
+
+  const authorNameSpan = document.createElement("span");
+  authorNameSpan.textContent = makale.yazarAdi + " tarafından";
+
+  imgContainerDiv.append(authorImg);
+  authorDiv.append(imgContainerDiv);
+  authorDiv.append(authorNameSpan);
+
+  cardDiv.append(headlineDiv);
+  cardDiv.append(authorDiv);
+
+  cardDiv.addEventListener("click", () => console.log(makale.anabaslik));
+
+  return cardDiv;
+
+
+
   // GÖREV 5
   // ---------------------
   // Aşağıda gördüğünüz işaretlemeyi döndürmesi gereken bu fonksiyonu uygulayın.
@@ -20,6 +55,20 @@ const Card = (makale) => {
 }
 
 const cardEkleyici = (secici) => {
+  const selector = document.querySelector(secici);
+
+  axios
+  .get("http://localhost:5001/api/makaleler")
+  .then(response => {
+    const articles = response.data.makaleler;
+    for (const key in articles) {
+      articles[key].forEach((makale) => {
+        const card = Card(makale);
+        selector.append(card);
+      });
+    };
+  });
+
   // GÖREV 6
   // ---------------------
   // Tek bağımsız değişkeni olarak bir css seçici alan bu fonksiyonu uygulayın.

src/bileşenler/header.js

@@ -1,4 +1,26 @@
 const Header = (baslik, tarih, yazi) => {
+
+  let headerDiv = document.createElement("div");
+  headerDiv.classList.add("header");
+
+  let dateSpan = document.createElement("span");
+  dateSpan.classList.add("date");
+  dateSpan.textContent = tarih;
+
+  let h1 = document.createElement("h1");
+  h1.textContent = baslik;
+
+  let tempSpan = document.createElement("span");
+  tempSpan.classList.add("temp");
+  tempSpan.textContent = yazi;
+
+  headerDiv.append(dateSpan);
+  headerDiv.append(h1);
+  headerDiv.append(tempSpan);
+
+  return headerDiv;
+
+
   // GÖREV 1
   // ---------------------
   // Bu fonksiyon argüman olarak `baslik`, `tarih` ve `temp` alarak aşağıdaki yapıyı döndürecek.
@@ -14,6 +36,19 @@ const Header = (baslik, tarih, yazi) => {
 }
 
 const headerEkleyici = (secici) => {
+
+  let selector = document.querySelector(secici);
+
+  const header = Header(
+    "Teknoloji Zamanı",
+    "12 Ekim 2023",
+    "Teknoloji Güncesi" 
+  );
+
+  selector.append(header);
+
+
+
   // GÖREV 2
   // ---------------------
   // Tek argümanı olarak bir css seçici alan bu fonksiyonu uygulayın.

src/bileşenler/tablar.js

@@ -1,4 +1,19 @@
+import axios from "axios";
+
 const Tablar = (konu) => {
+
+  let topicsDiv = document.createElement("div");
+  topicsDiv.classList.add("topics");
+
+  for (let i=0; i < konu.length; i++) {
+    let tab = document.createElement("div");
+    tab.classList.add("tab");
+    tab.textContent = konu[i];
+    topicsDiv.append(tab);
+  };
+
+  return topicsDiv;
+
   // GÖREV 3
   // ---------------------
   // Tek argümanı bir dizi ("konu") olan bu fonksiyonu uygulayın.
@@ -15,7 +30,20 @@ const Tablar = (konu) => {
   //
 }
 
+
+
 const tabEkleyici = (secici) => {
+
+  let selector = document.querySelector(secici);
+  axios
+  .get("http://localhost:5001/api/konular")
+  .then(response => {
+    const topics = response.data.konular;
+    const tabs = Tablar(topics);
+    selector.append(tabs);
+
+    });
+
   // GÖREV 4
   // ---------------------
   // Tek argümanı olarak bir css seçici alan bu işlevi uygulayın.