From b5a6ec32da946acce9cb49694cd6ef01b0fdffd3 Mon Sep 17 00:00:00 2001 From: samilkafa Date: Sat, 10 Jun 2023 14:01:35 +0300 Subject: [PATCH] Hafta-5-Challenge --- package-lock.json | 78 +++++++++++++++++-------------- "src/bile\305\237enler/card.js" | 45 ++++++++++++++++++ "src/bile\305\237enler/header.js" | 20 ++++++++ "src/bile\305\237enler/tablar.js" | 18 +++++++ 4 files changed, 126 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index ebd85a1b..cedddc76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "0.0.1", "dependencies": { "axios": "0.26.0", - "cors": "2.8.5", "express": "4.17.3" }, "devDependencies": { @@ -21,6 +20,7 @@ "@types/jest": "27.4.1", "babel-loader": "8.2.3", "concurrently": "7.0.0", + "cors": "^2.8.5", "cross-env": "7.0.3", "eslint": "8.10.0", "fkill-cli": "7.1.0", @@ -29,7 +29,7 @@ "jest": "27.5.1", "msw": "0.38.1", "webpack": "5.69.1", - "webpack-cli": "4.9.2", + "webpack-cli": "4.10.0", "webpack-dev-server": "4.7.4" } }, @@ -3236,9 +3236,9 @@ } }, "node_modules/@webpack-cli/configtest": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz", - "integrity": "sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz", + "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==", "dev": true, "peerDependencies": { "webpack": "4.x.x || 5.x.x", @@ -3246,9 +3246,9 @@ } }, "node_modules/@webpack-cli/info": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.1.tgz", - "integrity": "sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz", + "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==", "dev": true, "dependencies": { "envinfo": "^7.7.3" @@ -3258,9 +3258,9 @@ } }, "node_modules/@webpack-cli/serve": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.1.tgz", - "integrity": "sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz", + "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==", "dev": true, "peerDependencies": { "webpack-cli": "4.x.x" @@ -4725,6 +4725,7 @@ "version": "2.8.5", "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dev": true, "dependencies": { "object-assign": "^4", "vary": "^1" @@ -10209,6 +10210,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -12663,18 +12665,18 @@ } }, "node_modules/webpack-cli": { - "version": "4.9.2", - "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.2.tgz", - "integrity": "sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==", + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz", + "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==", "dev": true, "dependencies": { "@discoveryjs/json-ext": "^0.5.0", - "@webpack-cli/configtest": "^1.1.1", - "@webpack-cli/info": "^1.4.1", - "@webpack-cli/serve": "^1.6.1", + "@webpack-cli/configtest": "^1.2.0", + "@webpack-cli/info": "^1.5.0", + "@webpack-cli/serve": "^1.7.0", "colorette": "^2.0.14", "commander": "^7.0.0", - "execa": "^5.0.0", + "cross-spawn": "^7.0.3", "fastest-levenshtein": "^1.0.12", "import-local": "^3.0.2", "interpret": "^2.2.0", @@ -12687,6 +12689,10 @@ "engines": { "node": ">=10.13.0" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, "peerDependencies": { "webpack": "4.x.x || 5.x.x" }, @@ -15768,25 +15774,25 @@ } }, "@webpack-cli/configtest": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz", - "integrity": "sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz", + "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==", "dev": true, "requires": {} }, "@webpack-cli/info": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.1.tgz", - "integrity": "sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz", + "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==", "dev": true, "requires": { "envinfo": "^7.7.3" } }, "@webpack-cli/serve": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.1.tgz", - "integrity": "sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz", + "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==", "dev": true, "requires": {} }, @@ -16888,6 +16894,7 @@ "version": "2.8.5", "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dev": true, "requires": { "object-assign": "^4", "vary": "^1" @@ -20960,7 +20967,8 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true }, "object-is": { "version": "1.1.5", @@ -22828,18 +22836,18 @@ } }, "webpack-cli": { - "version": "4.9.2", - "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.2.tgz", - "integrity": "sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==", + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz", + "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==", "dev": true, "requires": { "@discoveryjs/json-ext": "^0.5.0", - "@webpack-cli/configtest": "^1.1.1", - "@webpack-cli/info": "^1.4.1", - "@webpack-cli/serve": "^1.6.1", + "@webpack-cli/configtest": "^1.2.0", + "@webpack-cli/info": "^1.5.0", + "@webpack-cli/serve": "^1.7.0", "colorette": "^2.0.14", "commander": "^7.0.0", - "execa": "^5.0.0", + "cross-spawn": "^7.0.3", "fastest-levenshtein": "^1.0.12", "import-local": "^3.0.2", "interpret": "^2.2.0", diff --git "a/src/bile\305\237enler/card.js" "b/src/bile\305\237enler/card.js" index dc34a360..2770eca2 100644 --- "a/src/bile\305\237enler/card.js" +++ "b/src/bile\305\237enler/card.js" @@ -1,3 +1,5 @@ +import axios from "axios"; + const Card = (makale) => { // GÖREV 5 // --------------------- @@ -17,6 +19,35 @@ const Card = (makale) => { // // // + 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 } diff --git "a/src/bile\305\237enler/header.js" "b/src/bile\305\237enler/header.js" index 221b1da1..25e91e7d 100644 --- "a/src/bile\305\237enler/header.js" +++ "b/src/bile\305\237enler/header.js" @@ -11,6 +11,22 @@ const Header = (baslik, tarih, yazi) => { // { yazi } // // + 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")); } diff --git "a/src/bile\305\237enler/tablar.js" "b/src/bile\305\237enler/tablar.js" index e43c98cf..89da103d 100644 --- "a/src/bile\305\237enler/tablar.js" +++ "b/src/bile\305\237enler/tablar.js" @@ -13,6 +13,18 @@ const Tablar = (konu) => { //
teknoloji
// // + + 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 }