Javascript 30 - Gün 17

11 Mayıs 2023

Projenin demosu : Demo

Başlangıç dosyalarını bulabileceğiniz repom: js-30 | github

Bugünün görevi oldukça basit: Elimizde 13 adet rock grubu ismi var bunları sıralamak istiyoruz ancak sıralamayı yaparken grup isimleri içerisinde geçen "a/an/the" gibi belirteçlerin sıralamaya etki etmemesini istiyoruz. Bunu da JS'de bir string metodu olan replace ile gerçekleştireceğiz.

Çözümüm

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sort Without Articles</title>
  <link rel="icon" href="https://fav.farm/✅" />
</head>
<body>
 
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
      background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
      background-size: cover;
      display: flex;
      align-items: center;
      min-height: 100vh;
    }
 
    #bands {
      list-style: inside square;
      font-size: 20px;
      background: white;
      width: 500px;
      margin: auto;
      padding: 0;
      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
    }
 
    #bands li {
      border-bottom: 1px solid #efefef;
      padding: 20px;
    }
 
    #bands li:last-child {
      border-bottom: 0;
    }
 
    a {
      color: #ffc600;
      text-decoration: none;
    }
 
  </style>
 
  <ul id="bands"></ul>
 
<script>
// rock gruplarının olduğu arrayi oluşturalım
const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
// rock gruplarının adının ekleneceği ul elementini seçelim
const bandsList = document.querySelector('#bands')
 
// strip fonksiyonu grup isminden a/an ve the belirteçlerini siler.
function strip(bandName) {
  return bandName.replace(/^(a |the |an )/i, '').trim();
}
 
// burada sıralamayı grup isimlerinin a/an ve the belirteçlerinden ayrılmış haline göre yapıyoruz.
const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
// her bir grup icin bir li olusturup seçtiğimiz ul elementinin içerisine ekleyelim.
bandsList.innerHTML =
  sortedBands
    .map(band => `<li>${band}</li>`)
    .join('');
</script>
</body>
</html>

Bu sayfayı düzenle