Hafta-5-Challenge

src/bileşenler/card.js

@@ -1,3 +1,5 @@
+import axios from "axios";
+
 const Card = (makale) => {
   // GÖREV 5
   // ---------------------
@@ -17,6 +19,35 @@ const Card = (makale) => {
   //   </div>
   // </div>
   //
+  const card = document.createElement("div");
+  card.classList.add("card");
+
+  const headline = document.createElement("div");
+  headline.classList.add("headline");
+  headline.textContent = makale.anabaslik;
+  card.appendChild(headline);
+
+  const author = document.createElement("div");
+  author.classList.add("author");
+  card.appendChild(author);
+
+  const imgContainer = document.createElement("div");
+  author.classList.add("img-container");
+  author.appendChild(imgContainer);
+
+  const img = document.createElement("img");
+  img.setAttribute("src",`${makale.yazarFoto}`);
+  imgContainer.appendChild(img);
+
+  const yazar = document.createElement("span");
+  yazar.textContent = `${makale.yazarAdi} tarafından`;
+  author.appendChild(yazar);
+
+  card.addEventListener("click",(e)=> {
+    console.log(e.target.querySelector(".headline").textContent);
+  })
+
+  return card;
 }
 
 const cardEkleyici = (secici) => {
@@ -28,6 +59,20 @@ 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.
   //
+  const cardContainer = document.querySelector(secici);
+
+  axios.get("http://localhost:5001/api/makaleler")
+  .then((res) => {
+    console.log(res.data);
+    for(let e in res.data.makaleler) {
+      for (let i = 0; i < res.data.makaleler[e].length; i++) {
+        cardContainer.appendChild(Card(res.data.makaleler[e][i]));
+      }
+    }
+  })
+  .catch((error) => {
+    console.log(error);
+  });
 }
 
 export { Card, cardEkleyici }

src/bileşenler/header.js

@@ -11,6 +11,22 @@ const Header = (baslik, tarih, yazi) => {
   //    <span class="temp">{ yazi }</span>
   //  </div>
   //
+  const header = document.createElement("div");
+  header.classList.add("header");
+
+  const date = document.createElement("span");
+  date.classList.add("date");
+  date.textContent = tarih;
+
+  const h1 = document.createElement("h1");
+  h1.textContent = baslik;
+
+  const temp = document.createElement("span");
+  temp.classList.add("temp");
+  temp.textContent = yazi;
+  header.appendChild(date);
+  header.appendChild(h1);
+  header.appendChild(temp);
 }
 
 const headerEkleyici = (secici) => {
@@ -23,6 +39,10 @@ const headerEkleyici = (secici) => {
 
   // İPUCU: querySelector bir string alabilir (bknz: querySelector("#wrapper")) 
   // fakat aynı zamanda bir değişken de alabilir (bknz: querySelector(secici))
+
+  const headerContainer = document.querySelector(secici);
+
+  headerContainer.append(Header("Teknoloji Zamanı", "24 Şubat 2023", "Blog"));
 
 }
 

src/bileşenler/tablar.js

@@ -13,6 +13,18 @@ const Tablar = (konu) => {
   //   <div class="tab">teknoloji</div>
   // </div>
   //
+
+  const topicsDiv = document.createElement('div')
+  topicsDiv.classList.add('topics')
+
+  konu.forEach(element => {
+    const tab = document.createElement('div')
+    tab.classList.add('tab')
+    tab.textContent = element
+    topicsDiv.append(tab)
+  });
+
+  return topicsDiv
 }
 
 const tabEkleyici = (secici) => {
@@ -23,6 +35,12 @@ 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 tabYeri = document.querySelector(secici)
+
+  axios.get(`http://localhost:5001/api/konular`).then(res => res.data.konular).then(konular => {
+    tabYeri.append(Tablar(konular))
+  })
 }
 
 export { Tablar, tabEkleyici }