From 3fe9d27053d5b5f949f0a72c89af6a057d2d6965 Mon Sep 17 00:00:00 2001 From: ouyazici Date: Sun, 26 Mar 2023 16:23:09 +0300 Subject: [PATCH] =?UTF-8?q?Gorev=20Tamamland=C4=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + package-lock.json | 70 ++++++++++++++++--------------- "src/bile\305\237enler/card.js" | 40 +++++++++++++++++- "src/bile\305\237enler/header.js" | 25 ++++++++++- 4 files changed, 100 insertions(+), 36 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..3c3629e6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/package-lock.json b/package-lock.json index ebd85a1b..cbe642cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" @@ -12663,18 +12663,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 +12687,10 @@ "engines": { "node": ">=10.13.0" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, "peerDependencies": { "webpack": "4.x.x || 5.x.x" }, @@ -15768,25 +15772,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": {} }, @@ -22828,18 +22832,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..4828c6a2 100644 --- "a/src/bile\305\237enler/card.js" +++ "b/src/bile\305\237enler/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) => { // // // -} + 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 } diff --git "a/src/bile\305\237enler/header.js" "b/src/bile\305\237enler/header.js" index 221b1da1..4f27b472 100644 --- "a/src/bile\305\237enler/header.js" +++ "b/src/bile\305\237enler/header.js" @@ -11,6 +11,23 @@ const Header = (baslik, tarih, yazi) => { // { yazi } // // + 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 }