Javascript 30 - Gün 4
20 Mart 2023Bugünkü projede ilgi çekici bir şey yok. Yalnızca array metodları ile ilgili alıştırmalar mevcut.
Projenin bitmiş hali: Array Antrenmanı Gün 1
Başlangıç dosyalarını bulabileceğiniz repom: js-30 | github
Çözümlerim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Array Cardio 💪</title>
<link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
<h1>Wikipedia'dan kopyalanan liste</h1>
<div class="mw-category">
<div class="mw-category-group">
<h3>*</h3>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/City_gates_of_Paris"
title="City gates of Paris"
>City gates of Paris</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Haussmann%27s_renovation_of_Paris"
title="Haussmann's renovation of Paris"
>Haussmann's renovation of Paris</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevards_of_the_Marshals"
title="Boulevards of the Marshals"
>Boulevards of the Marshals</a
>
</li>
</ul>
</div>
<div class="mw-category-group">
<h3>A</h3>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_Auguste-Blanqui"
title="Boulevard Auguste-Blanqui"
>Boulevard Auguste-Blanqui</a
>
</li>
</ul>
</div>
<div class="mw-category-group">
<h3>B</h3>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_Barb%C3%A8s"
title="Boulevard Barbès"
>Boulevard Barbès</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_Beaumarchais"
title="Boulevard Beaumarchais"
>Boulevard Beaumarchais</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_de_l%27Amiral-Bruix"
title="Boulevard de l'Amiral-Bruix"
>Boulevard de l'Amiral-Bruix</a
>
</li>
</ul>
</div>
<div class="mw-category-group">
<h3>C</h3>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_des_Capucines"
title="Boulevard des Capucines"
>Boulevard des Capucines</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_de_la_Chapelle"
title="Boulevard de la Chapelle"
>Boulevard de la Chapelle</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_de_Clichy"
title="Boulevard de Clichy"
>Boulevard de Clichy</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_du_Crime"
title="Boulevard du Crime"
>Boulevard du Crime</a
>
</li>
</ul>
</div>
<div class="mw-category-group">
<h3>H</h3>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_Haussmann"
title="Boulevard Haussmann"
>Boulevard Haussmann</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_de_l%27H%C3%B4pital"
title="Boulevard de l'Hôpital"
>Boulevard de l'Hôpital</a
>
</li>
</ul>
</div>
<div class="mw-category-group">
<h3>I</h3>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_des_Italiens"
title="Boulevard des Italiens"
>Boulevard des Italiens</a
>
</li>
</ul>
</div>
<div class="mw-category-group">
<h3>M</h3>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_de_la_Madeleine"
title="Boulevard de la Madeleine"
>Boulevard de la Madeleine</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_de_Magenta"
title="Boulevard de Magenta"
>Boulevard de Magenta</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_Montmartre"
title="Boulevard Montmartre"
>Boulevard Montmartre</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_du_Montparnasse"
title="Boulevard du Montparnasse"
>Boulevard du Montparnasse</a
>
</li>
</ul>
</div>
<div class="mw-category-group">
<h3>R</h3>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_Raspail"
title="Boulevard Raspail"
>Boulevard Raspail</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_Richard-Lenoir"
title="Boulevard Richard-Lenoir"
>Boulevard Richard-Lenoir</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_de_Rochechouart"
title="Boulevard de Rochechouart"
>Boulevard de Rochechouart</a
>
</li>
</ul>
</div>
<div class="mw-category-group">
<h3>S</h3>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_Saint-Germain"
title="Boulevard Saint-Germain"
>Boulevard Saint-Germain</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_Saint-Michel"
title="Boulevard Saint-Michel"
>Boulevard Saint-Michel</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_de_S%C3%A9bastopol"
title="Boulevard de Sébastopol"
>Boulevard de Sébastopol</a
>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_de_Strasbourg"
title="Boulevard de Strasbourg"
>Boulevard de Strasbourg</a
>
</li>
</ul>
</div>
<div class="mw-category-group">
<h3>T</h3>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_du_Temple"
title="Boulevard du Temple"
>Boulevard du Temple</a
>
</li>
</ul>
</div>
<div class="mw-category-group">
<h3>V</h3>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_Voltaire"
title="Boulevard Voltaire"
>Boulevard Voltaire</a
>
</li>
</ul>
</div>
<div class="mw-category-group">
<h3>Z</h3>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/Boulevard_de_la_Zone"
title="Boulevard de la Zone"
>Boulevard de la Zone</a
>
</li>
</ul>
</div>
</div>
</div>
<script>
// Get your shorts on - this is an array workout!
// ## Array Cardio Day 1
// Kemerlerinizi bağlayın, array antrenmanı başlıyor!
// ## Array Antrenmanı Gün 1
// Some data we can work with (Çalışmak için bazı veriler oluşturalım.)
const inventors = [
{ first: "Albert", last: "Einstein", year: 1879, passed: 1955 },
{ first: "Isaac", last: "Newton", year: 1643, passed: 1727 },
{ first: "Galileo", last: "Galilei", year: 1564, passed: 1642 },
{ first: "Marie", last: "Curie", year: 1867, passed: 1934 },
{ first: "Johannes", last: "Kepler", year: 1571, passed: 1630 },
{ first: "Nicolaus", last: "Copernicus", year: 1473, passed: 1543 },
{ first: "Max", last: "Planck", year: 1858, passed: 1947 },
{ first: "Katherine", last: "Blodgett", year: 1898, passed: 1979 },
{ first: "Ada", last: "Lovelace", year: 1815, passed: 1852 },
{ first: "Sarah E.", last: "Goode", year: 1855, passed: 1905 },
{ first: "Lise", last: "Meitner", year: 1878, passed: 1968 },
{ first: "Hanna", last: "Hammarström", year: 1829, passed: 1909 },
];
const people = [
"Bernhard, Sandra",
"Bethea, Erin",
"Becker, Carl",
"Bentsen, Lloyd",
"Beckett, Samuel",
"Blake, William",
"Berger, Ric",
"Beddoes, Mick",
"Beethoven, Ludwig",
"Belloc, Hilaire",
"Begin, Menachem",
"Bellow, Saul",
"Benchley, Robert",
"Blair, Robert",
"Benenson, Peter",
"Benjamin, Walter",
"Berlin, Irving",
"Benn, Tony",
"Benson, Leana",
"Bent, Silas",
"Berle, Milton",
"Berry, Halle",
"Biko, Steve",
"Beck, Glenn",
"Bergman, Ingmar",
"Black, Elk",
"Berio, Luciano",
"Berne, Eric",
"Berra, Yogi",
"Berry, Wendell",
"Bevan, Aneurin",
"Ben-Gurion, David",
"Bevel, Ken",
"Biden, Joseph",
"Bennington, Chester",
"Bierce, Ambrose",
"Billings, Josh",
"Birrell, Augustine",
"Blair, Tony",
"Beecher, Henry",
"Biondo, Frank",
];
console.log("%c ====Görev 1====", "color:red;font-weight:bold");
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
// 1. 1500'lü yıllarda doğan mucitlerden oluşan yeni bir array oluştur.
const fifteens = inventors.filter((person) => {
return person.year > 1499 && person.year < 1600;
});
console.table(fifteens);
console.log("%c ====Görev 2====", "color:red;font-weight:bold");
// Array.prototype.map()
// 2. Give us an array of the inventors first and last names
// 2. Her bir mucitin ad ve soyadından oluşan yeni bir array oluştur
const names = inventors.map(
(inventor) => `${inventor.first} ${inventor.last}`
);
console.table(names);
console.log("%c ====Görev 3====", "color:red;font-weight:bold");
// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
// 3. Mucitleri doğum tarihlerine göre, en yaşlıdan en gence doğru sırala
const orderedInventors = inventors.sort((a, b) => a.year - b.year);
console.table(orderedInventors);
console.log("%c ====Görev 4====", "color:red;font-weight:bold");
// Array.prototype.reduce()
// 4. How many years did all the inventors live all together?
// 4. Mucitlerin yaşadıkları yıl toplamı kaçtır?
const totalAge = inventors.reduce((total, inventor) => {
return (total += inventor.passed - inventor.year);
}, 0);
console.log(totalAge);
console.log("%c ====Görev 5====", "color:red;font-weight:bold");
// Array.prototype.sort()
// 5. Sort the inventors by years lived
// 5. Mucitleri yaşadıkları yıla göre sırala
const inventorsSortedByYearsLived = inventors.sort((a, b) => {
const ageA = a.passed - a.year;
const ageB = b.passed - b.year;
return ageB - ageA;
});
console.table(inventorsSortedByYearsLived);
console.log("%c ====Görev 6====", "color:red;font-weight:bold");
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// aşağıdaki vikipedi sayfasından kopyalanan htmli kullanarak Paristeki bulvarların adının olduğu bir array oluşturun
// ardından bunlardan yalnızca herhangi bir yerinde "de" geçenlerin olduğu yeni bir array elde edin
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
// dom'dan bulvarların listesi oluşturalım
const category = document.querySelector('.mw-category')
const links = category.querySelectorAll('a')
const boulevards = []
links.forEach((link)=> {
boulevards.push(link.textContent)
})
// bu listede içinde yalnızca "de" olanların olduğu yeni bir liste yaratalım
const deBoulevards = boulevards.filter((boulevard)=> boulevard.includes('de'))
console.log(deBoulevards);
console.log("%c ====Görev 7====", "color:red;font-weight:bold");
// 7. sort Exercise
// Sort the people alphabetically by last name
// people arrayini soyadına göre alfabetik olarak sıralayın
// bu satırı değiştirin
const orderedByLastName = people.sort((a,b) => {
const [lastA,] = a.split(', ')
const [lastB,] = b.split(', ')
return lastA > lastB ? 1 : -1
})
console.table(orderedByLastName);
console.log("%c ====Görev 8====", "color:red;font-weight:bold");
// 8. Reduce Exercise
// Sum up the instances of each of these
// Aşağıdaki arraydeki her elemanın arrayde görüldüğü sayıyı belirtin
// örnek çıktı
// {car:X,truck:Y,van:Z...}
const data = [
"car",
"car",
"truck",
"truck",
"bike",
"walk",
"car",
"van",
"bike",
"walk",
"car",
"van",
"car",
"truck",
];
const vehicles = data.reduce((acc,currentVehicle) => {
if(currentVehicle in acc){
acc[currentVehicle]++
}else{
acc[currentVehicle] = 1
}
return acc
},{})
console.log(vehicles);
</script>
</body>
</html>