Gorev Tamamlandı

.gitignore

@@ -0,0 +1 @@
+node_modules

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,32 @@ 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 +55,15 @@ 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 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,12 @@ 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 }