From 686a1d56693a79a8cd44d665538e2f5c33d16f4e Mon Sep 17 00:00:00 2001
From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Date: Wed, 17 Jan 2024 20:49:28 -0800
Subject: [PATCH] fix(curriculum): updating explanation for sort method in
 music player project (#53203)

Co-authored-by: Mama Naomi <nhcarrigan@gmail.com>
---
 .../meta.json                                 | 150 ++--
 .../653283d07b8f9d294aafa83b.md               |  16 +-
 .../65362bfd67d61d517deef191.md               |  16 +-
 .../653635c731206b718659d3d5.md               |  16 +-
 .../653639d63a45a077333312c8.md               |  16 +-
 .../653641509b6e7681a9333245.md               |  16 +-
 .../65364566e84e378837fbaf2a.md               |  20 +-
 .../65422ba173a18b1bedef1bb6.md               |  16 +-
 .../6552127b2576c2fbc5ecc2ea.md               |  16 +-
 .../65521badc7b7470edf952372.md               |  15 +-
 .../65521ec3bb117c195c4f6cb5.md               |  15 +-
 .../655220a3fa5c3c200bc8e938.md               |  15 +-
 .../6552303a9a78704f8ff072e9.md               |  16 +-
 .../655235c2e607297f00316650.md               |  16 +-
 .../6552385244ccf89b77d6b332.md               |  16 +-
 .../655243068222c2c1166b90b0.md               |  16 +-
 .../655476e1ff522252fdcce5e4.md               |  16 +-
 .../655479aa3e1e0360ae38b7a6.md               |  16 +-
 .../65547ee197840478a1b95f4b.md               |  16 +-
 .../6554815fe2472f8bfdab7642.md               |  16 +-
 .../655482742cc5499726e3f347.md               |  16 +-
 .../655483ebf0096ba02b2c3d4c.md               |  16 +-
 .../655485321913feabbc5f00f8.md               |  16 +-
 .../6554860ea4dfbab2f4786fc8.md               |  16 +-
 .../655487f686aabfc2a10ba887.md               |  16 +-
 .../65548f747a4cdafd186948d1.md               |  16 +-
 .../655490f55c36900779336988.md               |  16 +-
 .../655492e6b90c7a198c587943.md               |  16 +-
 .../655494d5a15d6a2567e1ea60.md               |  16 +-
 .../655495a6bd96e42bc3baa795.md               |  16 +-
 .../6555d17af9ff06a14d399f6d.md               |  16 +-
 .../6555d458687cb3b357834df9.md               |  16 +-
 .../6555d729c9bfd7c3195f1948.md               |  16 +-
 .../6555d7e384056dc9c581fadf.md               |  16 +-
 .../6555d8faed60b9d3e4a6cefb.md               |  16 +-
 .../6555dd138e70cae6b546966d.md               |  16 +-
 .../6555de565387a2efe90a6ccc.md               |  16 +-
 .../6555e04aeb225bfbae237344.md               |  16 +-
 .../6555e0bfe4d69904410f7cd3.md               |  16 +-
 .../6555e39a5f4c6f138c7d9405.md               |  42 +-
 .../6555e57d3e6d9d221c4735be.md               |  16 +-
 .../6555e6cec786da2aadc11ea0.md               |  16 +-
 .../6555e7acdbae972d3e8e0f5b.md               |  16 +-
 .../6555e9197bf1d7416bdd76e0.md               |  16 +-
 .../6555ebf07ec610585a626f72.md               |  16 +-
 .../65571e742fbf4532d8f98e90.md               |  16 +-
 .../655720534347cb3f31cdfb3d.md               |  16 +-
 .../65572399a8e16d50bc2c1ff3.md               |  16 +-
 .../655724bac464795a0ad91082.md               |  16 +-
 .../655727b2e1e49d6adf584442.md               |  16 +-
 .../655729e68e49b277a6b448bd.md               |  16 +-
 .../65572bb34a7e488224b937fc.md               |  16 +-
 .../65572e5aaf022790fb4a81b1.md               |  16 +-
 .../655737cd004591b0271d6826.md               |  16 +-
 .../65573a97c59ddbbf028ca95e.md               |  16 +-
 .../65573d0abe4d38cd6fa13f44.md               |  16 +-
 .../6557421eb6a7a0f0500e3106.md               |  16 +-
 .../655b49333d9f265bc1512152.md               |  16 +-
 .../655b4bbff1dbf66cb2ed4dac.md               |  16 +-
 .../655b4c8f636d9675953a0388.md               |  18 +-
 .../655b4dad1d38ff7cdd65cbfe.md               |  28 +-
 .../656472ed8f552d2f2b3f7883.md               |  16 +-
 .../65671421254eeb489875cdd8.md               |  16 +-
 .../65672136535209761a5cf02b.md               |  16 +-
 .../65672adafbaa37a6cef886f7.md               |  16 +-
 .../659b0093d7db5a1a1122b7bd.md               |  16 +-
 .../65a608b7e7c75a04ccf0c23c.md               | 644 +++++++++++++++++
 .../65a6098a3405f206312e28f5.md               | 659 +++++++++++++++++
 .../65a609f6e23f3b06c608fb57.md               | 677 ++++++++++++++++++
 .../65a60aa3efd8fa079c2d1537.md               | 675 +++++++++++++++++
 .../65a60b0b8b4f96085ac23463.md               | 669 +++++++++++++++++
 71 files changed, 4340 insertions(+), 215 deletions(-)
 create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a608b7e7c75a04ccf0c23c.md
 create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a6098a3405f206312e28f5.md
 create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a609f6e23f3b06c608fb57.md
 create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60aa3efd8fa079c2d1537.md
 create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60b0b8b4f96085ac23463.md

diff --git a/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json b/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json
index a87a7aa1057..2eee62de18e 100644
--- a/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json
+++ b/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json
@@ -93,264 +93,284 @@
       "title": "Step 20"
     },
     {
-      "id": "653283d07b8f9d294aafa83b",
+      "id": "65a608b7e7c75a04ccf0c23c",
       "title": "Step 21"
     },
     {
-      "id": "65362bfd67d61d517deef191",
+      "id": "65a6098a3405f206312e28f5",
       "title": "Step 22"
     },
     {
-      "id": "653635c731206b718659d3d5",
+      "id": "65a609f6e23f3b06c608fb57",
       "title": "Step 23"
     },
     {
-      "id": "653639d63a45a077333312c8",
+      "id": "65a60aa3efd8fa079c2d1537",
       "title": "Step 24"
     },
     {
-      "id": "656472ed8f552d2f2b3f7883",
+      "id": "65a60b0b8b4f96085ac23463",
       "title": "Step 25"
     },
     {
-      "id": "653641509b6e7681a9333245",
+      "id": "653283d07b8f9d294aafa83b",
       "title": "Step 26"
     },
     {
-      "id": "655235c2e607297f00316650",
+      "id": "65362bfd67d61d517deef191",
       "title": "Step 27"
     },
     {
-      "id": "65364566e84e378837fbaf2a",
+      "id": "653635c731206b718659d3d5",
       "title": "Step 28"
     },
     {
-      "id": "65422ba173a18b1bedef1bb6",
+      "id": "653639d63a45a077333312c8",
       "title": "Step 29"
     },
     {
-      "id": "6552127b2576c2fbc5ecc2ea",
+      "id": "656472ed8f552d2f2b3f7883",
       "title": "Step 30"
     },
     {
-      "id": "65672136535209761a5cf02b",
+      "id": "653641509b6e7681a9333245",
       "title": "Step 31"
     },
     {
-      "id": "65521badc7b7470edf952372",
+      "id": "655235c2e607297f00316650",
       "title": "Step 32"
     },
     {
-      "id": "65521ec3bb117c195c4f6cb5",
+      "id": "65364566e84e378837fbaf2a",
       "title": "Step 33"
     },
     {
-      "id": "655220a3fa5c3c200bc8e938",
+      "id": "65422ba173a18b1bedef1bb6",
       "title": "Step 34"
     },
     {
-      "id": "6552303a9a78704f8ff072e9",
+      "id": "6552127b2576c2fbc5ecc2ea",
       "title": "Step 35"
     },
     {
-      "id": "655487f686aabfc2a10ba887",
+      "id": "65672136535209761a5cf02b",
       "title": "Step 36"
     },
     {
-      "id": "659b0093d7db5a1a1122b7bd",
+      "id": "65521badc7b7470edf952372",
       "title": "Step 37"
     },
     {
-      "id": "6552385244ccf89b77d6b332",
+      "id": "65521ec3bb117c195c4f6cb5",
       "title": "Step 38"
     },
     {
-      "id": "655243068222c2c1166b90b0",
+      "id": "655220a3fa5c3c200bc8e938",
       "title": "Step 39"
     },
     {
-      "id": "655476e1ff522252fdcce5e4",
+      "id": "6552303a9a78704f8ff072e9",
       "title": "Step 40"
     },
     {
-      "id": "655479aa3e1e0360ae38b7a6",
+      "id": "655487f686aabfc2a10ba887",
       "title": "Step 41"
     },
     {
-      "id": "65547ee197840478a1b95f4b",
+      "id": "659b0093d7db5a1a1122b7bd",
       "title": "Step 42"
     },
     {
-      "id": "6554815fe2472f8bfdab7642",
+      "id": "6552385244ccf89b77d6b332",
       "title": "Step 43"
     },
     {
-      "id": "655482742cc5499726e3f347",
+      "id": "655243068222c2c1166b90b0",
       "title": "Step 44"
     },
     {
-      "id": "655483ebf0096ba02b2c3d4c",
+      "id": "655476e1ff522252fdcce5e4",
       "title": "Step 45"
     },
     {
-      "id": "655485321913feabbc5f00f8",
+      "id": "655479aa3e1e0360ae38b7a6",
       "title": "Step 46"
     },
     {
-      "id": "6554860ea4dfbab2f4786fc8",
+      "id": "65547ee197840478a1b95f4b",
       "title": "Step 47"
     },
     {
-      "id": "65548f747a4cdafd186948d1",
+      "id": "6554815fe2472f8bfdab7642",
       "title": "Step 48"
     },
     {
-      "id": "655490f55c36900779336988",
+      "id": "655482742cc5499726e3f347",
       "title": "Step 49"
     },
     {
-      "id": "65671421254eeb489875cdd8",
+      "id": "655483ebf0096ba02b2c3d4c",
       "title": "Step 50"
     },
     {
-      "id": "655492e6b90c7a198c587943",
+      "id": "655485321913feabbc5f00f8",
       "title": "Step 51"
     },
     {
-      "id": "655494d5a15d6a2567e1ea60",
+      "id": "6554860ea4dfbab2f4786fc8",
       "title": "Step 52"
     },
     {
-      "id": "655495a6bd96e42bc3baa795",
+      "id": "65548f747a4cdafd186948d1",
       "title": "Step 53"
     },
     {
-      "id": "6555d17af9ff06a14d399f6d",
+      "id": "655490f55c36900779336988",
       "title": "Step 54"
     },
     {
-      "id": "6555d458687cb3b357834df9",
+      "id": "65671421254eeb489875cdd8",
       "title": "Step 55"
     },
     {
-      "id": "6555d729c9bfd7c3195f1948",
+      "id": "655492e6b90c7a198c587943",
       "title": "Step 56"
     },
     {
-      "id": "6555d7e384056dc9c581fadf",
+      "id": "655494d5a15d6a2567e1ea60",
       "title": "Step 57"
     },
     {
-      "id": "6555d8faed60b9d3e4a6cefb",
+      "id": "655495a6bd96e42bc3baa795",
       "title": "Step 58"
     },
     {
-      "id": "6555dd138e70cae6b546966d",
+      "id": "6555d17af9ff06a14d399f6d",
       "title": "Step 59"
     },
     {
-      "id": "6555de565387a2efe90a6ccc",
+      "id": "6555d458687cb3b357834df9",
       "title": "Step 60"
     },
     {
-      "id": "6555e04aeb225bfbae237344",
+      "id": "6555d729c9bfd7c3195f1948",
       "title": "Step 61"
     },
     {
-      "id": "6555e0bfe4d69904410f7cd3",
+      "id": "6555d7e384056dc9c581fadf",
       "title": "Step 62"
     },
     {
-      "id": "6555e39a5f4c6f138c7d9405",
+      "id": "6555d8faed60b9d3e4a6cefb",
       "title": "Step 63"
     },
     {
-      "id": "6555e57d3e6d9d221c4735be",
+      "id": "6555dd138e70cae6b546966d",
       "title": "Step 64"
     },
     {
-      "id": "6555e6cec786da2aadc11ea0",
+      "id": "6555de565387a2efe90a6ccc",
       "title": "Step 65"
     },
     {
-      "id": "6555e7acdbae972d3e8e0f5b",
+      "id": "6555e04aeb225bfbae237344",
       "title": "Step 66"
     },
     {
-      "id": "6555e9197bf1d7416bdd76e0",
+      "id": "6555e0bfe4d69904410f7cd3",
       "title": "Step 67"
     },
     {
-      "id": "6555ebf07ec610585a626f72",
+      "id": "6555e39a5f4c6f138c7d9405",
       "title": "Step 68"
     },
     {
-      "id": "65571e742fbf4532d8f98e90",
+      "id": "6555e57d3e6d9d221c4735be",
       "title": "Step 69"
     },
     {
-      "id": "655720534347cb3f31cdfb3d",
+      "id": "6555e6cec786da2aadc11ea0",
       "title": "Step 70"
     },
     {
-      "id": "65572399a8e16d50bc2c1ff3",
+      "id": "6555e7acdbae972d3e8e0f5b",
       "title": "Step 71"
     },
     {
-      "id": "6557421eb6a7a0f0500e3106",
+      "id": "6555e9197bf1d7416bdd76e0",
       "title": "Step 72"
     },
     {
-      "id": "655724bac464795a0ad91082",
+      "id": "6555ebf07ec610585a626f72",
       "title": "Step 73"
     },
     {
-      "id": "655727b2e1e49d6adf584442",
+      "id": "65571e742fbf4532d8f98e90",
       "title": "Step 74"
     },
     {
-      "id": "65672adafbaa37a6cef886f7",
+      "id": "655720534347cb3f31cdfb3d",
       "title": "Step 75"
     },
     {
-      "id": "655729e68e49b277a6b448bd",
+      "id": "65572399a8e16d50bc2c1ff3",
       "title": "Step 76"
     },
     {
-      "id": "65572bb34a7e488224b937fc",
+      "id": "6557421eb6a7a0f0500e3106",
       "title": "Step 77"
     },
     {
-      "id": "65572e5aaf022790fb4a81b1",
+      "id": "655724bac464795a0ad91082",
       "title": "Step 78"
     },
     {
-      "id": "655737cd004591b0271d6826",
+      "id": "655727b2e1e49d6adf584442",
       "title": "Step 79"
     },
     {
-      "id": "65573a97c59ddbbf028ca95e",
+      "id": "65672adafbaa37a6cef886f7",
       "title": "Step 80"
     },
     {
-      "id": "65573d0abe4d38cd6fa13f44",
+      "id": "655729e68e49b277a6b448bd",
       "title": "Step 81"
     },
     {
-      "id": "655b49333d9f265bc1512152",
+      "id": "65572bb34a7e488224b937fc",
       "title": "Step 82"
     },
     {
-      "id": "655b4bbff1dbf66cb2ed4dac",
+      "id": "65572e5aaf022790fb4a81b1",
       "title": "Step 83"
     },
     {
-      "id": "655b4c8f636d9675953a0388",
+      "id": "655737cd004591b0271d6826",
       "title": "Step 84"
     },
     {
-      "id": "655b4dad1d38ff7cdd65cbfe",
+      "id": "65573a97c59ddbbf028ca95e",
       "title": "Step 85"
+    },
+    {
+      "id": "65573d0abe4d38cd6fa13f44",
+      "title": "Step 86"
+    },
+    {
+      "id": "655b49333d9f265bc1512152",
+      "title": "Step 87"
+    },
+    {
+      "id": "655b4bbff1dbf66cb2ed4dac",
+      "title": "Step 88"
+    },
+    {
+      "id": "655b4c8f636d9675953a0388",
+      "title": "Step 89"
+    },
+    {
+      "id": "655b4dad1d38ff7cdd65cbfe",
+      "title": "Step 90"
     }
   ],
   "helpCategory": "JavaScript"
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653283d07b8f9d294aafa83b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653283d07b8f9d294aafa83b.md
index e1d229ef83b..beef7c8f403 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653283d07b8f9d294aafa83b.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653283d07b8f9d294aafa83b.md
@@ -1,8 +1,8 @@
 ---
 id: 653283d07b8f9d294aafa83b
-title: Step 21
+title: Step 26
 challengeType: 0
-dashedName: step-21
+dashedName: step-26
 ---
 
 # --description--
@@ -656,6 +656,18 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65362bfd67d61d517deef191.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65362bfd67d61d517deef191.md
index f13ad363700..1cb88c1e094 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65362bfd67d61d517deef191.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65362bfd67d61d517deef191.md
@@ -1,8 +1,8 @@
 ---
 id: 65362bfd67d61d517deef191
-title: Step 22
+title: Step 27
 challengeType: 0
-dashedName: step-22
+dashedName: step-27
 ---
 
 # --description--
@@ -664,6 +664,18 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653635c731206b718659d3d5.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653635c731206b718659d3d5.md
index 1cb3c6acc0c..61f21115b16 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653635c731206b718659d3d5.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653635c731206b718659d3d5.md
@@ -1,8 +1,8 @@
 ---
 id: 653635c731206b718659d3d5
-title: Step 23
+title: Step 28
 challengeType: 0
-dashedName: step-23
+dashedName: step-28
 ---
 
 # --description--
@@ -647,6 +647,18 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653639d63a45a077333312c8.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653639d63a45a077333312c8.md
index 393ed957abc..57e13d7a6bd 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653639d63a45a077333312c8.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653639d63a45a077333312c8.md
@@ -1,8 +1,8 @@
 ---
 id: 653639d63a45a077333312c8
-title: Step 24
+title: Step 29
 challengeType: 0
-dashedName: step-24
+dashedName: step-29
 ---
 
 # --description--
@@ -645,6 +645,18 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653641509b6e7681a9333245.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653641509b6e7681a9333245.md
index e1a051f939c..31baea291e3 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653641509b6e7681a9333245.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653641509b6e7681a9333245.md
@@ -1,8 +1,8 @@
 ---
 id: 653641509b6e7681a9333245
-title: Step 26
+title: Step 31
 challengeType: 0
-dashedName: step-26
+dashedName: step-31
 ---
 
 # --description--
@@ -643,6 +643,18 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65364566e84e378837fbaf2a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65364566e84e378837fbaf2a.md
index ccdc97b645d..1a35a2856c4 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65364566e84e378837fbaf2a.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65364566e84e378837fbaf2a.md
@@ -1,8 +1,8 @@
 ---
 id: 65364566e84e378837fbaf2a
-title: Step 28
+title: Step 33
 challengeType: 0
-dashedName: step-28
+dashedName: step-33
 ---
 
 # --description--
@@ -656,9 +656,21 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
-  --fcc-editable-region--
+--fcc-editable-region--
 
-  --fcc-editable-region--
+--fcc-editable-region--
+
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
   
 renderSongs(userData?.songs);
 
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65422ba173a18b1bedef1bb6.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65422ba173a18b1bedef1bb6.md
index f9593ed9fe7..4aaac3d1863 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65422ba173a18b1bedef1bb6.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65422ba173a18b1bedef1bb6.md
@@ -1,8 +1,8 @@
 ---
 id: 65422ba173a18b1bedef1bb6
-title: Step 29
+title: Step 34
 challengeType: 0
-dashedName: step-29
+dashedName: step-34
 ---
 
 # --description--
@@ -656,6 +656,18 @@ playButton.addEventListener("click", () => {
   --fcc-editable-region--
 });
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 
 renderSongs(userData?.songs);
 
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552127b2576c2fbc5ecc2ea.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552127b2576c2fbc5ecc2ea.md
index e1ddd57a7d7..60202d2804e 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552127b2576c2fbc5ecc2ea.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552127b2576c2fbc5ecc2ea.md
@@ -1,8 +1,8 @@
 ---
 id: 6552127b2576c2fbc5ecc2ea
-title: Step 30
+title: Step 35
 challengeType: 0
-dashedName: step-30
+dashedName: step-35
 ---
 
 # --description--
@@ -666,6 +666,18 @@ playButton.addEventListener("click", () => {
 --fcc-editable-region--
 });
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 
 renderSongs(userData?.songs);
 
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521badc7b7470edf952372.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521badc7b7470edf952372.md
index ccd79feb1ec..cbc421b9265 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521badc7b7470edf952372.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521badc7b7470edf952372.md
@@ -1,8 +1,8 @@
 ---
 id: 65521badc7b7470edf952372
-title: Step 32
+title: Step 37
 challengeType: 0
-dashedName: step-32
+dashedName: step-37
 ---
 
 # --description--
@@ -674,6 +674,17 @@ playButton.addEventListener("click", () => {
   }
 });
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
 
 renderSongs(userData?.songs);
 
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521ec3bb117c195c4f6cb5.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521ec3bb117c195c4f6cb5.md
index 1376179a11c..ca18b596a51 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521ec3bb117c195c4f6cb5.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521ec3bb117c195c4f6cb5.md
@@ -1,8 +1,8 @@
 ---
 id: 65521ec3bb117c195c4f6cb5
-title: Step 33
+title: Step 38
 challengeType: 0
-dashedName: step-33
+dashedName: step-38
 ---
 
 # --description--
@@ -662,6 +662,17 @@ playButton.addEventListener("click", () => {
   }
 });
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
 
 renderSongs(userData?.songs);
 
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655220a3fa5c3c200bc8e938.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655220a3fa5c3c200bc8e938.md
index d6af9b9f64a..56fa6621428 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655220a3fa5c3c200bc8e938.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655220a3fa5c3c200bc8e938.md
@@ -1,8 +1,8 @@
 ---
 id: 655220a3fa5c3c200bc8e938
-title: Step 34
+title: Step 39
 challengeType: 0
-dashedName: step-34
+dashedName: step-39
 ---
 
 # --description--
@@ -671,6 +671,17 @@ playButton.addEventListener("click", () => {
   }
 });
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
 
 renderSongs(userData?.songs);
 
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552303a9a78704f8ff072e9.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552303a9a78704f8ff072e9.md
index 7c916e6868e..8ea06df15c2 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552303a9a78704f8ff072e9.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552303a9a78704f8ff072e9.md
@@ -1,8 +1,8 @@
 ---
 id: 6552303a9a78704f8ff072e9
-title: Step 35
+title: Step 40
 challengeType: 0
-dashedName: step-35
+dashedName: step-40
 ---
 
 # --description--
@@ -675,5 +675,17 @@ playButton.addEventListener("click", () => {
 
 --fcc-editable-region--
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655235c2e607297f00316650.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655235c2e607297f00316650.md
index 1247fbaf8fe..91d2d1e94fb 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655235c2e607297f00316650.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655235c2e607297f00316650.md
@@ -1,8 +1,8 @@
 ---
 id: 655235c2e607297f00316650
-title: Step 27
+title: Step 32
 challengeType: 0
-dashedName: step-27
+dashedName: step-32
 ---
 
 # --description--
@@ -651,6 +651,18 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552385244ccf89b77d6b332.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552385244ccf89b77d6b332.md
index 1f0907eb9f1..aafe1844c77 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552385244ccf89b77d6b332.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552385244ccf89b77d6b332.md
@@ -1,8 +1,8 @@
 ---
 id: 6552385244ccf89b77d6b332
-title: Step 38
+title: Step 43
 challengeType: 0
-dashedName: step-38
+dashedName: step-43
 ---
 
 # --description--
@@ -685,5 +685,17 @@ playButton.addEventListener("click", () => {
 
 pauseButton.addEventListener("click",  pauseSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655243068222c2c1166b90b0.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655243068222c2c1166b90b0.md
index 294397bf5fe..3ab71fb0ef5 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655243068222c2c1166b90b0.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655243068222c2c1166b90b0.md
@@ -1,8 +1,8 @@
 ---
 id: 655243068222c2c1166b90b0
-title: Step 39
+title: Step 44
 challengeType: 0
-dashedName: step-39
+dashedName: step-44
 ---
 
 # --description--
@@ -685,5 +685,17 @@ playButton.addEventListener("click", () => {
 
 pauseButton.addEventListener("click",  pauseSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655476e1ff522252fdcce5e4.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655476e1ff522252fdcce5e4.md
index 95629bea240..ce1b56f8e25 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655476e1ff522252fdcce5e4.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655476e1ff522252fdcce5e4.md
@@ -1,8 +1,8 @@
 ---
 id: 655476e1ff522252fdcce5e4
-title: Step 40
+title: Step 45
 challengeType: 0
-dashedName: step-40
+dashedName: step-45
 ---
 
 # --description--
@@ -690,5 +690,17 @@ playButton.addEventListener("click", () => {
 
 pauseButton.addEventListener("click",  pauseSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655479aa3e1e0360ae38b7a6.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655479aa3e1e0360ae38b7a6.md
index 469cab46669..aed32fb47aa 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655479aa3e1e0360ae38b7a6.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655479aa3e1e0360ae38b7a6.md
@@ -1,8 +1,8 @@
 ---
 id: 655479aa3e1e0360ae38b7a6
-title: Step 41
+title: Step 46
 challengeType: 0
-dashedName: step-41
+dashedName: step-46
 ---
 
 # --description--
@@ -695,5 +695,17 @@ playButton.addEventListener("click", () => {
 
 pauseButton.addEventListener("click",  pauseSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65547ee197840478a1b95f4b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65547ee197840478a1b95f4b.md
index d3fb646739a..83a9c2d5587 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65547ee197840478a1b95f4b.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65547ee197840478a1b95f4b.md
@@ -1,8 +1,8 @@
 ---
 id: 65547ee197840478a1b95f4b
-title: Step 42
+title: Step 47
 challengeType: 0
-dashedName: step-42
+dashedName: step-47
 ---
 
 # --description--
@@ -691,5 +691,17 @@ pauseButton.addEventListener("click",  pauseSong);
   
 --fcc-editable-region--
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554815fe2472f8bfdab7642.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554815fe2472f8bfdab7642.md
index cb7b8a31627..61223168742 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554815fe2472f8bfdab7642.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554815fe2472f8bfdab7642.md
@@ -1,8 +1,8 @@
 ---
 id: 6554815fe2472f8bfdab7642
-title: Step 43
+title: Step 48
 challengeType: 0
-dashedName: step-43
+dashedName: step-48
 ---
 
 # --description--
@@ -697,5 +697,17 @@ pauseButton.addEventListener("click",  pauseSong);
 
 nextButton.addEventListener("click", playNextSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655482742cc5499726e3f347.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655482742cc5499726e3f347.md
index 528e71741be..1074b904cb6 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655482742cc5499726e3f347.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655482742cc5499726e3f347.md
@@ -1,8 +1,8 @@
 ---
 id: 655482742cc5499726e3f347
-title: Step 44
+title: Step 49
 challengeType: 0
-dashedName: step-44
+dashedName: step-49
 ---
 
 # --description--
@@ -709,5 +709,17 @@ pauseButton.addEventListener("click",  pauseSong);
 
 nextButton.addEventListener("click", playNextSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655483ebf0096ba02b2c3d4c.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655483ebf0096ba02b2c3d4c.md
index 2d83755f3b9..c7eaeb789cf 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655483ebf0096ba02b2c3d4c.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655483ebf0096ba02b2c3d4c.md
@@ -1,8 +1,8 @@
 ---
 id: 655483ebf0096ba02b2c3d4c
-title: Step 45
+title: Step 50
 challengeType: 0
-dashedName: step-45
+dashedName: step-50
 ---
 
 # --description--
@@ -697,5 +697,17 @@ pauseButton.addEventListener("click",  pauseSong);
 
 nextButton.addEventListener("click", playNextSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
index a4eb744a4f3..f704dd1b38b 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
@@ -1,8 +1,8 @@
 ---
 id: 655485321913feabbc5f00f8
-title: Step 46
+title: Step 51
 challengeType: 0
-dashedName: step-46
+dashedName: step-51
 ---
 
 # --description--
@@ -701,5 +701,17 @@ nextButton.addEventListener("click", playNextSong);
 
 --fcc-editable-region--
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554860ea4dfbab2f4786fc8.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554860ea4dfbab2f4786fc8.md
index f260cacb59b..bc8e9135cff 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554860ea4dfbab2f4786fc8.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554860ea4dfbab2f4786fc8.md
@@ -1,8 +1,8 @@
 ---
 id: 6554860ea4dfbab2f4786fc8
-title: Step 47
+title: Step 52
 challengeType: 0
-dashedName: step-47
+dashedName: step-52
 ---
 
 # --description--
@@ -716,5 +716,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655487f686aabfc2a10ba887.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655487f686aabfc2a10ba887.md
index 2ae8826c092..15a70205648 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655487f686aabfc2a10ba887.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655487f686aabfc2a10ba887.md
@@ -1,8 +1,8 @@
 ---
 id: 655487f686aabfc2a10ba887
-title: Step 36
+title: Step 41
 challengeType: 0
-dashedName: step-36
+dashedName: step-41
 ---
 
 # --description--
@@ -671,5 +671,17 @@ playButton.addEventListener("click", () => {
 
 pauseButton.addEventListener("click",  pauseSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65548f747a4cdafd186948d1.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65548f747a4cdafd186948d1.md
index e6d00adf2a0..2c530aa3a30 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65548f747a4cdafd186948d1.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65548f747a4cdafd186948d1.md
@@ -1,8 +1,8 @@
 ---
 id: 65548f747a4cdafd186948d1
-title: Step 48
+title: Step 53
 challengeType: 0
-dashedName: step-48
+dashedName: step-53
 ---
 
 # --description--
@@ -708,5 +708,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655490f55c36900779336988.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655490f55c36900779336988.md
index 4d5f681f5a2..2fd199a7d5c 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655490f55c36900779336988.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655490f55c36900779336988.md
@@ -1,8 +1,8 @@
 ---
 id: 655490f55c36900779336988
-title: Step 49
+title: Step 54
 challengeType: 0
-dashedName: step-49
+dashedName: step-54
 ---
 
 # --description--
@@ -722,5 +722,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655492e6b90c7a198c587943.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655492e6b90c7a198c587943.md
index 3d2d4f2ed88..2d23300ad00 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655492e6b90c7a198c587943.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655492e6b90c7a198c587943.md
@@ -1,8 +1,8 @@
 ---
 id: 655492e6b90c7a198c587943
-title: Step 51
+title: Step 56
 challengeType: 0
-dashedName: step-51
+dashedName: step-56
 ---
 
 # --description--
@@ -715,5 +715,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655494d5a15d6a2567e1ea60.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655494d5a15d6a2567e1ea60.md
index abf687386af..7fca5cb43cb 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655494d5a15d6a2567e1ea60.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655494d5a15d6a2567e1ea60.md
@@ -1,8 +1,8 @@
 ---
 id: 655494d5a15d6a2567e1ea60
-title: Step 52
+title: Step 57
 challengeType: 0
-dashedName: step-52
+dashedName: step-57
 ---
 
 # --description--
@@ -704,5 +704,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655495a6bd96e42bc3baa795.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655495a6bd96e42bc3baa795.md
index ce27c95c2a5..c7090fd8b02 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655495a6bd96e42bc3baa795.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655495a6bd96e42bc3baa795.md
@@ -1,8 +1,8 @@
 ---
 id: 655495a6bd96e42bc3baa795
-title: Step 53
+title: Step 58
 challengeType: 0
-dashedName: step-53
+dashedName: step-58
 ---
 
 # --description--
@@ -722,5 +722,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d17af9ff06a14d399f6d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d17af9ff06a14d399f6d.md
index d9903e0bed5..2bf257d345c 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d17af9ff06a14d399f6d.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d17af9ff06a14d399f6d.md
@@ -1,8 +1,8 @@
 ---
 id: 6555d17af9ff06a14d399f6d
-title: Step 54
+title: Step 59
 challengeType: 0
-dashedName: step-54
+dashedName: step-59
 ---
 
 # --description--
@@ -732,5 +732,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
index 9afb4bf147c..3166dceaec0 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
@@ -1,8 +1,8 @@
 ---
 id: 6555d458687cb3b357834df9
-title: Step 55
+title: Step 60
 challengeType: 0
-dashedName: step-55
+dashedName: step-60
 ---
 
 # --description--
@@ -726,5 +726,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d729c9bfd7c3195f1948.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d729c9bfd7c3195f1948.md
index 2a9d697e213..9f1d7b1e5b6 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d729c9bfd7c3195f1948.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d729c9bfd7c3195f1948.md
@@ -1,8 +1,8 @@
 ---
 id: 6555d729c9bfd7c3195f1948
-title: Step 56
+title: Step 61
 challengeType: 0
-dashedName: step-56
+dashedName: step-61
 ---
 
 # --description--
@@ -741,5 +741,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d7e384056dc9c581fadf.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d7e384056dc9c581fadf.md
index ba9c94b41ac..c6b44365452 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d7e384056dc9c581fadf.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d7e384056dc9c581fadf.md
@@ -1,8 +1,8 @@
 ---
 id: 6555d7e384056dc9c581fadf
-title: Step 57
+title: Step 62
 challengeType: 0
-dashedName: step-57
+dashedName: step-62
 ---
 
 # --description--
@@ -715,5 +715,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d8faed60b9d3e4a6cefb.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d8faed60b9d3e4a6cefb.md
index 31113f3b263..dffcad554fb 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d8faed60b9d3e4a6cefb.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d8faed60b9d3e4a6cefb.md
@@ -1,8 +1,8 @@
 ---
 id: 6555d8faed60b9d3e4a6cefb
-title: Step 58
+title: Step 63
 challengeType: 0
-dashedName: step-58
+dashedName: step-63
 ---
 
 # --description--
@@ -735,5 +735,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
index dfa562a59b3..7d48fb027be 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
@@ -1,8 +1,8 @@
 ---
 id: 6555dd138e70cae6b546966d
-title: Step 59
+title: Step 64
 challengeType: 0
-dashedName: step-59
+dashedName: step-64
 ---
 
 # --description--
@@ -731,5 +731,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
index 4e9759f3e82..41a5b96aab0 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
@@ -1,8 +1,8 @@
 ---
 id: 6555de565387a2efe90a6ccc
-title: Step 60
+title: Step 65
 challengeType: 0
-dashedName: step-60
+dashedName: step-65
 ---
 
 # --description--
@@ -738,5 +738,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
index f1c44ff3888..7c0bfa42f55 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
@@ -1,8 +1,8 @@
 ---
 id: 6555e04aeb225bfbae237344
-title: Step 61
+title: Step 66
 challengeType: 0
-dashedName: step-61
+dashedName: step-66
 ---
 
 # --description--
@@ -723,5 +723,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
index ac052e5a138..518b7c1bd41 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
@@ -1,8 +1,8 @@
 ---
 id: 6555e0bfe4d69904410f7cd3
-title: Step 62
+title: Step 67
 challengeType: 0
-dashedName: step-62
+dashedName: step-67
 ---
 
 # --description--
@@ -745,5 +745,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e39a5f4c6f138c7d9405.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e39a5f4c6f138c7d9405.md
index 4d39361950b..7804e8398de 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e39a5f4c6f138c7d9405.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e39a5f4c6f138c7d9405.md
@@ -1,38 +1,30 @@
 ---
 id: 6555e39a5f4c6f138c7d9405
-title: Step 63
+title: Step 68
 challengeType: 0
-dashedName: step-63
+dashedName: step-68
 ---
 
 # --description--
 
-The `sort()` method converts elements of an array into strings and sorts them based on their `UTF-16` code units values.
+In earlier steps, you learned how to work with the `sort()` method to sort the songs in alphabetical order. Another use case for the callback function is to randomize an array. 
+
+One way to randomize an array of items would be to subtract `0.5` from `Math.random()` which produces random values that are either positive or negative. This makes the comparison result a mix of positive and negative values, leading to a random ordering of elements.
 
 ```js
-const numbers = [4, 2, 5, 100, 1, 3];
-
-numbers.sort();
-console.log(numbers); // Output: [1, 100, 2, 3, 4, 5]
+const names = ["Tom", "Jessica", "Quincy", "Naomi"];
+names.sort(() => Math.random() - 0.5);
 ```
 
-You can see `100` comes right after 1, which is not supposed to happen. This is a default behavior of the `sort()` method you can fix by passing in a callback this way:
+Use the `sort()` method on the `userData?.songs` array. Pass a callback to the method, and return the result of `Math.random() - 0.5`.
 
-```js
-const numbers = [4, 2, 5, 100, 1, 3];
-
-numbers.sort((a, b) => a - b);
-console.log(numbers); // Output: [1, 2, 3, 4, 5, 100]
-```
-
-Use the `sort()` method on the `userData?.songs` array. For the callback, introduce `Math.random()`, and subtract `0.5`.
 
 # --hints--
 
 You should not modify the existing `shuffle` function.
 
 ```js
-assert.match(code, /const\s+shuffle\s*=\s*\(\)\s*=>\s*\{\s*.*\s*\};?/)
+assert.match(code, /const\s+shuffle\s*=\s*\(\)\s*=>\s*{\s*[\s\S]*?\};?/);
 ```
 
 You should use the `sort()` method on `userData?.songs`.
@@ -47,10 +39,10 @@ Your `sort()` method should have a callback function that uses arrow syntax.
 assert.match(code, /userData\?\.songs\.sort\(\s*\(\s*\)\s*=>\s*/)
 ```
 
-The callback of your `sort()` method should implicitly return `Math.random() - 0.5`
+The callback of your `sort()` method should return `Math.random() - 0.5`.
 
 ```js
-assert.match(code, /userData\?\.songs\.sort\(\s*\(\s*\)\s*=>\s*Math\.random\(\)\s*-\s*0\.5\);?/)
+assert.match(code, /userData\?.songs\.sort\s*\(\(\)\s*=>(\s*{\s*return\s+Math\.random\(\)\s*-\s*0\.5\s*;?\s*}\s*)|(\s*Math\.random\(\)\s*-\s*0\.5\s*)\);?/);
 ```
 
 # --seed--
@@ -763,5 +755,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
index 7c917248d15..83251ef94df 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
@@ -1,8 +1,8 @@
 ---
 id: 6555e57d3e6d9d221c4735be
-title: Step 64
+title: Step 69
 challengeType: 0
-dashedName: step-64
+dashedName: step-69
 ---
 
 # --description--
@@ -736,5 +736,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
index 71e196fba39..b474cd8650f 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
@@ -1,8 +1,8 @@
 ---
 id: 6555e6cec786da2aadc11ea0
-title: Step 65
+title: Step 70
 challengeType: 0
-dashedName: step-65
+dashedName: step-70
 ---
 
 # --description--
@@ -757,5 +757,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e7acdbae972d3e8e0f5b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e7acdbae972d3e8e0f5b.md
index 5091a124b73..260ada66a36 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e7acdbae972d3e8e0f5b.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e7acdbae972d3e8e0f5b.md
@@ -1,8 +1,8 @@
 ---
 id: 6555e7acdbae972d3e8e0f5b
-title: Step 66
+title: Step 71
 challengeType: 0
-dashedName: step-66
+dashedName: step-71
 ---
 
 # --description--
@@ -750,5 +750,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 --fcc-editable-region--
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e9197bf1d7416bdd76e0.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e9197bf1d7416bdd76e0.md
index 3668e69ebd1..cf6a8d41f88 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e9197bf1d7416bdd76e0.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e9197bf1d7416bdd76e0.md
@@ -1,8 +1,8 @@
 ---
 id: 6555e9197bf1d7416bdd76e0
-title: Step 67
+title: Step 72
 challengeType: 0
-dashedName: step-67
+dashedName: step-72
 ---
 
 # --description--
@@ -764,5 +764,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555ebf07ec610585a626f72.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555ebf07ec610585a626f72.md
index 0f7432be6ef..f39a2be6098 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555ebf07ec610585a626f72.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555ebf07ec610585a626f72.md
@@ -1,8 +1,8 @@
 ---
 id: 6555ebf07ec610585a626f72
-title: Step 68
+title: Step 73
 challengeType: 0
-dashedName: step-68
+dashedName: step-73
 ---
 
 # --description--
@@ -775,5 +775,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65571e742fbf4532d8f98e90.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65571e742fbf4532d8f98e90.md
index 502e93c7ecb..a96220ab2ab 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65571e742fbf4532d8f98e90.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65571e742fbf4532d8f98e90.md
@@ -1,8 +1,8 @@
 ---
 id: 65571e742fbf4532d8f98e90
-title: Step 69
+title: Step 74
 challengeType: 0
-dashedName: step-69
+dashedName: step-74
 ---
 
 # --description--
@@ -763,5 +763,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655720534347cb3f31cdfb3d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655720534347cb3f31cdfb3d.md
index 7153616595c..679a05c94a8 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655720534347cb3f31cdfb3d.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655720534347cb3f31cdfb3d.md
@@ -1,8 +1,8 @@
 ---
 id: 655720534347cb3f31cdfb3d
-title: Step 70
+title: Step 75
 challengeType: 0
-dashedName: step-70
+dashedName: step-75
 ---
 
 # --description--
@@ -748,5 +748,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
index 7c895d19f46..081fdf5bf3b 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
@@ -1,8 +1,8 @@
 ---
 id: 65572399a8e16d50bc2c1ff3
-title: Step 71
+title: Step 76
 challengeType: 0
-dashedName: step-71
+dashedName: step-76
 ---
 
 # --description--
@@ -773,5 +773,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
index bb22741d74c..a3d06aa482d 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
@@ -1,8 +1,8 @@
 ---
 id: 655724bac464795a0ad91082
-title: Step 73
+title: Step 78
 challengeType: 0
-dashedName: step-73
+dashedName: step-78
 ---
 
 # --description--
@@ -756,5 +756,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655727b2e1e49d6adf584442.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655727b2e1e49d6adf584442.md
index be4f7e81479..dd696481d1f 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655727b2e1e49d6adf584442.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655727b2e1e49d6adf584442.md
@@ -1,8 +1,8 @@
 ---
 id: 655727b2e1e49d6adf584442
-title: Step 74
+title: Step 79
 challengeType: 0
-dashedName: step-74
+dashedName: step-79
 ---
 
 # --description--
@@ -787,5 +787,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
index 8553900a035..b239e5a2afa 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
@@ -1,8 +1,8 @@
 ---
 id: 655729e68e49b277a6b448bd
-title: Step 76
+title: Step 81
 challengeType: 0
-dashedName: step-76
+dashedName: step-81
 ---
 
 # --description--
@@ -775,5 +775,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
index 22e186d9ab6..0291ac1c4c9 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
@@ -1,8 +1,8 @@
 ---
 id: 65572bb34a7e488224b937fc
-title: Step 77
+title: Step 82
 challengeType: 0
-dashedName: step-77
+dashedName: step-82
 ---
 
 # --description--
@@ -791,5 +791,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
index fd0c140349d..8a765890a00 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
@@ -1,8 +1,8 @@
 ---
 id: 65572e5aaf022790fb4a81b1
-title: Step 78
+title: Step 83
 challengeType: 0
-dashedName: step-78
+dashedName: step-83
 ---
 
 # --description--
@@ -778,5 +778,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655737cd004591b0271d6826.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655737cd004591b0271d6826.md
index 5ecae2ca46c..a48205d9960 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655737cd004591b0271d6826.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655737cd004591b0271d6826.md
@@ -1,8 +1,8 @@
 ---
 id: 655737cd004591b0271d6826
-title: Step 79
+title: Step 84
 challengeType: 0
-dashedName: step-79
+dashedName: step-84
 ---
 
 # --description--
@@ -775,5 +775,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
index ac05cd05bce..c246c97b71c 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
@@ -1,8 +1,8 @@
 ---
 id: 65573a97c59ddbbf028ca95e
-title: Step 80
+title: Step 85
 challengeType: 0
-dashedName: step-80
+dashedName: step-85
 ---
 
 # --description--
@@ -794,5 +794,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md
index d1d0722b47a..2306bdb58fc 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md
@@ -1,8 +1,8 @@
 ---
 id: 65573d0abe4d38cd6fa13f44
-title: Step 81
+title: Step 86
 challengeType: 0
-dashedName: step-81
+dashedName: step-86
 ---
 
 # --description--
@@ -790,6 +790,18 @@ shuffleButton.addEventListener("click", shuffle);
 
 --fcc-editable-region--
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 setPlayButtonAccessibleText();
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
index 4a3f8eecd9d..4b69b8e746f 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
@@ -1,8 +1,8 @@
 ---
 id: 6557421eb6a7a0f0500e3106
-title: Step 72
+title: Step 77
 challengeType: 0
-dashedName: step-72
+dashedName: step-77
 ---
 
 # --description--
@@ -752,5 +752,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b49333d9f265bc1512152.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b49333d9f265bc1512152.md
index 41aea23ce95..1bb939500d9 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b49333d9f265bc1512152.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b49333d9f265bc1512152.md
@@ -1,8 +1,8 @@
 ---
 id: 655b49333d9f265bc1512152
-title: Step 82
+title: Step 87
 challengeType: 0
-dashedName: step-82
+dashedName: step-87
 ---
 
 # --description--
@@ -756,6 +756,18 @@ audio.addEventListener("ended", () => {
 });
 --fcc-editable-region--
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 setPlayButtonAccessibleText();
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4bbff1dbf66cb2ed4dac.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4bbff1dbf66cb2ed4dac.md
index be27d78cb2a..a4faaa3bc95 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4bbff1dbf66cb2ed4dac.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4bbff1dbf66cb2ed4dac.md
@@ -1,8 +1,8 @@
 ---
 id: 655b4bbff1dbf66cb2ed4dac
-title: Step 83
+title: Step 88
 challengeType: 0
-dashedName: step-83
+dashedName: step-88
 ---
 
 # --description--
@@ -748,6 +748,18 @@ audio.addEventListener("ended", () => {
 --fcc-editable-region--
 });
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 setPlayButtonAccessibleText();
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
index 507b2af4ae7..c3f9c17cee9 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
@@ -1,13 +1,13 @@
 ---
 id: 655b4c8f636d9675953a0388
-title: Step 84
+title: Step 89
 challengeType: 0
-dashedName: step-84
+dashedName: step-89
 ---
 
 # --description--
 
-If there is no next song in the playlist, use the `else` block to reset the `currentSong` key of `userData` to null, and its `songCurrentTime` property to `0`.
+If there is no next song in the playlist, use the `else` block to reset the `currentSong` key of `userData` to `null`, and its `songCurrentTime` property to `0`.
 
 # --hints--
 
@@ -764,6 +764,18 @@ audio.addEventListener("ended", () => {
 --fcc-editable-region--
 });
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 setPlayButtonAccessibleText();
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
index c5965a2f11a..28f3c895e77 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
@@ -1,8 +1,8 @@
 ---
 id: 655b4dad1d38ff7cdd65cbfe
-title: Step 85
+title: Step 90
 challengeType: 0
-dashedName: step-85
+dashedName: step-90
 ---
 
 # --description--
@@ -809,6 +809,18 @@ audio.addEventListener("ended", () => {
     }
 });
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 setPlayButtonAccessibleText();
 ```
@@ -1580,6 +1592,18 @@ audio.addEventListener("ended", () => {
     }
 });
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 setPlayButtonAccessibleText();
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
index ed975a7b1af..ab976eab4f8 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
@@ -1,8 +1,8 @@
 ---
 id: 656472ed8f552d2f2b3f7883
-title: Step 25
+title: Step 30
 challengeType: 0
-dashedName: step-25
+dashedName: step-30
 ---
 
 # --description--
@@ -654,6 +654,18 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65671421254eeb489875cdd8.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65671421254eeb489875cdd8.md
index 963129ead2b..0eab1ec7e0a 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65671421254eeb489875cdd8.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65671421254eeb489875cdd8.md
@@ -1,8 +1,8 @@
 ---
 id: 65671421254eeb489875cdd8
-title: Step 50
+title: Step 55
 challengeType: 0
-dashedName: step-50
+dashedName: step-55
 ---
 
 # --description--
@@ -707,5 +707,17 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672136535209761a5cf02b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672136535209761a5cf02b.md
index 5637a8b2319..8ce5d69916e 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672136535209761a5cf02b.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672136535209761a5cf02b.md
@@ -1,8 +1,8 @@
 ---
 id: 65672136535209761a5cf02b
-title: Step 31
+title: Step 36
 challengeType: 0
-dashedName: step-31
+dashedName: step-36
 ---
 
 # --description--
@@ -654,6 +654,18 @@ playButton.addEventListener("click", () => {
   }
 });
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 
 renderSongs(userData?.songs);
 
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672adafbaa37a6cef886f7.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672adafbaa37a6cef886f7.md
index c7c7da1bbe9..bba417c9e19 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672adafbaa37a6cef886f7.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672adafbaa37a6cef886f7.md
@@ -1,8 +1,8 @@
 ---
 id: 65672adafbaa37a6cef886f7
-title: Step 75
+title: Step 80
 challengeType: 0
-dashedName: step-75
+dashedName: step-80
 ---
 
 # --description--
@@ -784,5 +784,17 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md
index d178d5a5a2b..4b6d62364e4 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md
@@ -1,8 +1,8 @@
 ---
 id: 659b0093d7db5a1a1122b7bd
-title: Step 37
+title: Step 42
 challengeType: 0
-dashedName: step-37
+dashedName: step-42
 ---
 
 # --description--
@@ -678,5 +678,17 @@ playButton.addEventListener("click", () => {
 
 pauseButton.addEventListener("click",  pauseSong);
 
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+  return 0;
+});
+
 renderSongs(userData?.songs);
 ```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a608b7e7c75a04ccf0c23c.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a608b7e7c75a04ccf0c23c.md
new file mode 100644
index 00000000000..2685acd6967
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a608b7e7c75a04ccf0c23c.md
@@ -0,0 +1,644 @@
+---
+id: 65a608b7e7c75a04ccf0c23c
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Now that you have the list of songs displayed on the screen, it would be nice to sort them in alphabetical order by title. You could manually update the `allSongs` array, but JavaScript has an array method you can use called <dfn>sort()</dfn>.
+
+The `sort()` method converts elements of an array into strings and sorts them in place based on their values in the `UTF-16` encoding.
+
+```js
+const names = ["Tom", "Jessica", "Quincy", "Naomi"];
+names.sort() // ["Jessica", "Naomi", "Quincy", "Tom"]
+```
+
+Add the `sort()` method to `userData?.songs`. 
+
+# --hints--
+
+You should add the `sort()` method to `userData?.songs`.
+
+```js
+assert.match(code, /userData\?\.songs\.sort\(*.\);?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+    <title>
+      Learn Basic String and Array Methods by Building a Music Player App
+    </title>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="player">
+        <div class="player-bar">
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+          <h1 class="fcc-title">freeCodeCamp</h1>
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+        <div class="player-content">
+          <div id="player-album-art">
+            <img
+              src="https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/quincy-larson-album-art.jpg"
+              alt="song cover art"
+            />
+          </div>
+          <div class="player-display">
+            <div class="player-display-song-artist">
+              <p id="player-song-title"></p>
+              <p id="player-song-artist"></p>
+            </div>
+            <div class="player-buttons">
+              <button id="previous" class="previous" aria-label="Previous">
+                <svg
+                  width="24"
+                  height="19"
+                  viewBox="0 0 24 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" /><rect
+                    width="4.63633"
+                    height="18.5453"
+                    transform="matrix(-1 0 0 1 4.63633 0)"/></svg>
+              </button>
+              <button id="play" class="play" aria-label="Play">
+                <svg
+                  width="17"
+                  height="19"
+                  viewBox="0 0 17 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                > <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /></svg>
+              </button>
+              <button id="pause" class="pause" aria-label="Pause">
+                <svg
+                  width="17"
+                  height="19"
+                  viewBox="0 0 17 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" /> <path d="M11.4 0H16.15V19H11.4V0Z" /></svg>
+              </button>
+              <button id="next" class="next" aria-label="Next">
+                <svg
+                  width="24"
+                  height="19"
+                  viewBox="0 0 24 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /> <rect x="18.5885" width="4.63633" height="18.5453" /></svg>
+              </button>
+              <button id="shuffle" class="shuffle" aria-label="Shuffle">
+                <svg
+                  width="17"
+                  height="14"
+                  viewBox="0 0 17 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M12.2127 0L17 2.9219L12.0759 5.60686L12.1321 3.30594C11.9081 3.30997 11.7043 3.3165 11.528 3.326C11.3777 3.3341 11.2523 3.34411 11.1542 3.35578C11.1053 3.3616 11.0661 3.36749 11.036 3.37309C11.0211 3.37587 11.0095 3.37835 11.001 3.38041C10.9967 3.38143 10.9936 3.38227 10.9913 3.38289C10.989 3.38352 10.988 3.38385 10.9881 3.38382C10.9266 3.40381 10.7572 3.5014 10.4637 3.73265C10.1895 3.94866 9.85452 4.24234 9.47614 4.59282C8.81462 5.20556 8.03912 5.97461 7.25609 6.76752C8.03912 7.56043 8.81462 8.32948 9.47614 8.94223C9.85452 9.29271 10.1895 9.58639 10.4637 9.80239C10.7572 10.0336 10.9266 10.1312 10.9881 10.1512C10.988 10.1512 10.989 10.1515 10.9913 10.1522C10.9936 10.1528 10.9967 10.1536 11.001 10.1546C11.0095 10.1567 11.0211 10.1592 11.036 10.162C11.0661 10.1676 11.1053 10.1734 11.1542 10.1793C11.2523 10.1909 11.3777 10.2009 11.528 10.209C11.7043 10.2185 11.9081 10.2251 12.1321 10.2291L12.0759 7.92819L17 10.6131L12.2127 13.535L12.1558 11.2011C11.9071 11.197 11.677 11.1899 11.4757 11.1791C11.175 11.1629 10.8757 11.1361 10.6878 11.0751C10.4405 10.9947 10.1465 10.7892 9.86244 10.5654C9.55904 10.3263 9.20251 10.0129 8.81601 9.6549C8.14192 9.03051 7.35822 8.2533 6.57518 7.46052C6.2731 7.76927 5.9736 8.07675 5.68453 8.37353C5.24051 8.8294 4.82109 9.26001 4.45467 9.63114C4.10458 9.98574 3.79502 10.2941 3.54834 10.5285C3.42516 10.6455 3.31437 10.7473 3.22005 10.8285C3.13287 10.9035 3.03686 10.9812 2.94938 11.0324C2.46156 11.3178 1.79381 11.3751 1.32395 11.3812C1.07514 11.3845 0.852462 11.3732 0.692065 11.3611C0.611577 11.3551 0.546037 11.3488 0.499864 11.344C0.476761 11.3415 0.458455 11.3394 0.445496 11.3379L0.43012 11.336L0.425557 11.3355L0.423542 11.3352C0.423448 11.3352 0.423143 11.3352 0.485767 10.8535L0.423542 11.3352C0.157529 11.3006 -0.0304782 11.0569 0.00410824 10.7909C0.0386807 10.525 0.282182 10.3374 0.548069 10.3718C0.548087 10.3718 0.548051 10.3718 0.548069 10.3718L0.549944 10.372L0.559616 10.3732C0.568682 10.3743 0.582871 10.3759 0.60165 10.3779C0.639243 10.3818 0.695017 10.3872 0.764728 10.3924C0.90473 10.4029 1.09799 10.4127 1.31133 10.4099C1.76571 10.404 2.20705 10.3412 2.4587 10.194C2.45847 10.1941 2.4583 10.1942 2.4587 10.194C2.46075 10.1926 2.47161 10.1855 2.49271 10.1693C2.51674 10.1508 2.54777 10.1254 2.58634 10.0922C2.66358 10.0258 2.7615 9.93612 2.87917 9.82431C3.11419 9.60097 3.41488 9.30164 3.76339 8.94864C4.1317 8.57559 4.54478 8.15147 4.98424 7.70025C5.27761 7.39904 5.58273 7.08575 5.89415 6.76752C5.58272 6.44928 5.27759 6.13598 4.98421 5.83476C4.54476 5.38355 4.1317 4.95944 3.76339 4.5864C3.41488 4.2334 3.11419 3.93407 2.87917 3.71074C2.7615 3.59892 2.66358 3.50929 2.58634 3.44281C2.54777 3.40961 2.51674 3.38425 2.49271 3.36577C2.4716 3.34954 2.46099 3.34258 2.45894 3.34123C2.45868 3.34108 2.45853 3.34096 2.45894 3.34123C2.2073 3.19405 1.76572 3.13106 1.31133 3.12515C1.09799 3.12238 0.90473 3.13211 0.764728 3.14261C0.695017 3.14784 0.639243 3.15321 0.60165 3.15717C0.582871 3.15915 0.568682 3.16077 0.559616 3.16184L0.549944 3.16301L0.548391 3.1632C0.282436 3.1977 0.0386882 3.01013 0.00410824 2.74417C-0.0304782 2.47816 0.15713 2.23447 0.423143 2.19989L0.485767 2.68154C0.423143 2.19989 0.423048 2.1999 0.423143 2.19989L0.425557 2.19958L0.43012 2.199L0.445496 2.19714C0.458455 2.19561 0.476761 2.19352 0.499864 2.19109C0.546037 2.18622 0.611577 2.17995 0.692065 2.17391C0.852462 2.16188 1.07514 2.15058 1.32395 2.15381C1.79381 2.15992 2.46156 2.21726 2.94938 2.50267C3.03686 2.55385 3.13287 2.63152 3.22005 2.70655C3.31437 2.78773 3.42516 2.8895 3.54834 3.00655C3.79502 3.24097 4.10458 3.54931 4.45467 3.9039C4.82109 4.27504 5.24052 4.70565 5.68455 5.16153C5.97361 5.4583 6.2731 5.76578 6.57518 6.07452C7.35822 5.28174 8.14192 4.50454 8.81601 3.88014C9.20251 3.52214 9.55904 3.20872 9.86244 2.96964C10.1465 2.74581 10.4405 2.54035 10.6878 2.45997C10.8757 2.39892 11.175 2.37219 11.4757 2.35598C11.677 2.34514 11.9071 2.33807 12.1558 2.33396L12.2127 0Z"
+                  /></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="playlist">
+        <div class="playlist-bar">
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+          <h2 class="playlist-title" id="playlist">Playlist</h2>
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+        <ul id="playlist-songs"></ul>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  /* colors */
+  --primary-color: #dfdfe2;
+  --secondary-color: #ffffff;
+  --app-background-color: #4d4d62;
+  --background-color: #1b1b32;
+  --foreground-color: #3b3b4f;
+  --highlight-color: #f1be32;
+
+  /* font sizes */
+  --root-font-size: 16px;
+  font-size: var(--root-font-size);
+
+  /* font-families */
+  --font-headline: "Roboto Mono", monospace;
+  --font-family: "Lato", sans-serif;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--app-background-color);
+  color: var(--primary-color);
+  font-family: var(--font-family);
+}
+
+h1 {
+  font-size: 1.125rem;
+  line-height: 1.6;
+}
+
+h2 {
+  font-size: var(--root-font-size);
+}
+
+ul {
+  margin: 0;
+}
+
+.container {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: 5px;
+}
+
+.player,
+.playlist {
+  width: 450px;
+  background-color: var(--background-color);
+  border: 3px solid var(--foreground-color);
+}
+
+.player {
+  height: 260px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 10px;
+}
+
+.player-bar,
+.playlist-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+  width: 100%;
+  height: 30px;
+  background-color: var(--foreground-color);
+}
+
+.parallel-lines {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 6px;
+  padding: 0 5px;
+}
+
+.parallel-lines > div {
+  height: 2px;
+  width: 100%;
+  min-width: 75px;
+  background-color: var(--highlight-color);
+}
+
+.fcc-title,
+.playlist-title {
+  color: var(--secondary-color);
+  margin: 0 10px;
+  font-family: var(--font-headline);
+}
+
+.player-content {
+  display: flex;
+  background-color: var(--foreground-color);
+  width: 430px;
+  height: 200px;
+  column-gap: 13px;
+  align-items: center;
+  justify-content: center;
+}
+
+#player-album-art {
+  background-color: var(--secondary-color);
+  border: 6px solid var(--background-color);
+}
+
+#player-album-art img {
+  width: 150px;
+  display: block;
+}
+
+.player-display {
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+  padding: 14px;
+  background-color: var(--background-color);
+  height: 153px;
+  width: 226px;
+}
+
+.player-display-song-artist {
+  height: 80px;
+}
+
+.player-buttons svg {
+  fill: var(--primary-color);
+}
+
+.playing > svg {
+  fill: var(--highlight-color);
+}
+
+.player-buttons {
+  display: flex;
+  justify-content: space-around;
+}
+
+button {
+  background: transparent;
+  border: none;
+  color: var(--primary-color);
+  cursor: pointer;
+  font-size: var(--root-font-size);
+  outline-color: var(--highlight-color);
+  text-align: center;
+}
+
+.playlist-song {
+  outline-color: var(--highlight-color);
+}
+
+.playlist li:not(:last-child) {
+  border-bottom: 1px solid var(--background-color);
+}
+
+button:focus,
+.playlist-song:focus {
+  outline-style: dashed;
+  outline-width: 2px;
+}
+
+/* Playlist */
+.playlist {
+  height: auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 10px;
+}
+
+#playlist-songs {
+  width: 430px;
+  height: 100%;
+  background-color: var(--foreground-color);
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+  padding: 8px 9px;
+  visibility: visible;
+  justify-content: start;
+  list-style: none;
+}
+
+.playlist-song {
+  display: flex;
+  height: 55px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+}
+
+[aria-current="true"] {
+  background-color: var(--background-color);
+}
+
+[aria-current="true"] p {
+  color: var(--highlight-color);
+}
+
+.playlist-song-info {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  column-gap: 7px;
+  padding: 5px 0;
+  font-family: var(--font-family);
+}
+
+#player-song-title,
+#player-song-artist {
+  margin: 0;
+}
+
+#player-song-artist {
+  color: var(--highlight-color);
+  font-size: 0.75rem;
+}
+
+#player-song-title {
+  font-size: 1.125rem;
+}
+
+.playlist-song-title {
+  font-size: 0.85rem;
+  width: 241px;
+  text-align: left;
+}
+
+.playlist-song-artist {
+  font-size: 0.725rem;
+  width: 80px;
+}
+
+.playlist-song-duration {
+  font-size: 0.725rem;
+  margin: auto;
+  font-family: var(--font-headline);
+  width: 30px;
+}
+
+.playlist-song-delete {
+  padding: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.playlist-song-delete,
+.playlist-song-delete {
+  fill: var(--foreground-color);
+}
+
+.playlist-song-delete:hover circle,
+.playlist-song-delete:focus circle {
+  fill: #ff0000;
+}
+
+@media (max-width: 700px) {
+  .player,
+  .playlist {
+    width: 300px;
+  }
+
+  .player {
+    height: 340px;
+  }
+
+  #playlist-songs {
+    height: 280px;
+    padding: 5px 6px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scrollbar-color: var(--background-color) var(--secondary-color);
+    scrollbar-width: thin;
+  }
+
+  #playlist-songs::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  #playlist-songs::-webkit-scrollbar-track {
+    background: var(--background-color);
+  }
+
+  #playlist-songs::-webkit-scrollbar-thumb {
+    background: var(--secondary-color);
+  }
+
+  h1 {
+    font-size: 0.813rem;
+  }
+
+  h2 {
+    font-size: 0.75rem;
+  }
+
+  .player-bar,
+  .playlist-bar,
+  .player-content,
+  #playlist-songs {
+    width: 280px;
+  }
+
+  .playlist-song {
+    justify-content: space-between;
+  }
+
+  .playlist-song-title {
+    width: 140px;
+  }
+
+  .playlist-song-artist {
+    width: 40px;
+  }
+
+  .playlist-song-duration > button {
+    padding: 0;
+  }
+
+  .player-content {
+    display: inline;
+    position: relative;
+    justify-items: center;
+    height: 100%;
+  }
+
+  #player-album-art {
+    z-index: -100;
+    height: 280px;
+    box-shadow: none;
+    background: #000;
+  }
+
+  #player-album-art img {
+    width: 100%;
+    opacity: 0.6;
+  }
+
+  .player-display-song-artist {
+    padding: 0 10px;
+  }
+
+  .player-display-song-artist > p {
+    white-space: pre-wrap;
+  }
+
+  .player-display {
+    position: absolute;
+    width: 100%;
+    z-index: 1000;
+    background-color: transparent;
+    top: 0;
+    height: 280px;
+    justify-content: space-between;
+    text-align: center;
+  }
+}
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const shuffleButton = document.getElementById("shuffle");
+
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+let userData = {
+  songs: [...allSongs],
+  currentSong: null,
+  songCurrentTime: 0,
+};
+
+const renderSongs = (array) => {
+  const songsHTML = array
+    .map((song)=> {
+      return `
+      <li id="song-${song.id}" class="playlist-song">
+      <button class="playlist-song-info">
+          <span class="playlist-song-title">${song.title}</span>
+          <span class="playlist-song-artist">${song.artist}</span>
+          <span class="playlist-song-duration">${song.duration}</span>
+      </button>
+      <button class="playlist-song-delete" aria-label="Delete ${song.title}">
+          <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#4d4d62"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32587 5.18571C5.7107 4.90301 6.28333 4.94814 6.60485 5.28651L8 6.75478L9.39515 5.28651C9.71667 4.94814 10.2893 4.90301 10.6741 5.18571C11.059 5.4684 11.1103 5.97188 10.7888 6.31026L9.1832 7.99999L10.7888 9.68974C11.1103 10.0281 11.059 10.5316 10.6741 10.8143C10.2893 11.097 9.71667 11.0519 9.39515 10.7135L8 9.24521L6.60485 10.7135C6.28333 11.0519 5.7107 11.097 5.32587 10.8143C4.94102 10.5316 4.88969 10.0281 5.21121 9.68974L6.8168 7.99999L5.21122 6.31026C4.8897 5.97188 4.94102 5.4684 5.32587 5.18571Z" fill="white"/></svg>
+        </button>
+      </li>
+      `;
+    })
+    .join("");
+
+  playlistSongs.innerHTML = songsHTML;
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+renderSongs(userData?.songs);
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a6098a3405f206312e28f5.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a6098a3405f206312e28f5.md
new file mode 100644
index 00000000000..c27642fe968
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a6098a3405f206312e28f5.md
@@ -0,0 +1,659 @@
+---
+id: 65a6098a3405f206312e28f5
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+To sort the songs in alphabetical order by title, you will need to pass in a compare callback function into your `sort()` method.
+
+Here is an example of sorting a list of fruits by name. 
+
+```js
+const fruits = [
+  { name: "Apples", price: 0.99 },
+  { name: "Blueberries", price: 1.49 },
+  { name: "Grapes", price: 2.99 },
+];
+
+fruits.sort((a, b) => {
+  if (a.name < b.name) {
+    return -1;
+  }
+
+  if (a.name > b.name) {
+    return 1;
+  }
+
+  return 0;
+});
+```
+
+In the next few steps, you will learn what each of those `if` statements is doing inside that callback function. But for now, add an empty callback function to your `sort()` method and use `a` and `b` for the parameter names.
+
+# --hints--
+
+You should have an empty callback function `()=>{}` inside your `sort()` method with `a` and `b` for the parameter names.
+
+```js
+assert.match(code, /userData\?\.songs\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*{\s*}\s*\);?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+    <title>
+      Learn Basic String and Array Methods by Building a Music Player App
+    </title>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="player">
+        <div class="player-bar">
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+          <h1 class="fcc-title">freeCodeCamp</h1>
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+        <div class="player-content">
+          <div id="player-album-art">
+            <img
+              src="https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/quincy-larson-album-art.jpg"
+              alt="song cover art"
+            />
+          </div>
+          <div class="player-display">
+            <div class="player-display-song-artist">
+              <p id="player-song-title"></p>
+              <p id="player-song-artist"></p>
+            </div>
+            <div class="player-buttons">
+              <button id="previous" class="previous" aria-label="Previous">
+                <svg
+                  width="24"
+                  height="19"
+                  viewBox="0 0 24 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" /><rect
+                    width="4.63633"
+                    height="18.5453"
+                    transform="matrix(-1 0 0 1 4.63633 0)"/></svg>
+              </button>
+              <button id="play" class="play" aria-label="Play">
+                <svg
+                  width="17"
+                  height="19"
+                  viewBox="0 0 17 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                > <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /></svg>
+              </button>
+              <button id="pause" class="pause" aria-label="Pause">
+                <svg
+                  width="17"
+                  height="19"
+                  viewBox="0 0 17 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" /> <path d="M11.4 0H16.15V19H11.4V0Z" /></svg>
+              </button>
+              <button id="next" class="next" aria-label="Next">
+                <svg
+                  width="24"
+                  height="19"
+                  viewBox="0 0 24 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /> <rect x="18.5885" width="4.63633" height="18.5453" /></svg>
+              </button>
+              <button id="shuffle" class="shuffle" aria-label="Shuffle">
+                <svg
+                  width="17"
+                  height="14"
+                  viewBox="0 0 17 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M12.2127 0L17 2.9219L12.0759 5.60686L12.1321 3.30594C11.9081 3.30997 11.7043 3.3165 11.528 3.326C11.3777 3.3341 11.2523 3.34411 11.1542 3.35578C11.1053 3.3616 11.0661 3.36749 11.036 3.37309C11.0211 3.37587 11.0095 3.37835 11.001 3.38041C10.9967 3.38143 10.9936 3.38227 10.9913 3.38289C10.989 3.38352 10.988 3.38385 10.9881 3.38382C10.9266 3.40381 10.7572 3.5014 10.4637 3.73265C10.1895 3.94866 9.85452 4.24234 9.47614 4.59282C8.81462 5.20556 8.03912 5.97461 7.25609 6.76752C8.03912 7.56043 8.81462 8.32948 9.47614 8.94223C9.85452 9.29271 10.1895 9.58639 10.4637 9.80239C10.7572 10.0336 10.9266 10.1312 10.9881 10.1512C10.988 10.1512 10.989 10.1515 10.9913 10.1522C10.9936 10.1528 10.9967 10.1536 11.001 10.1546C11.0095 10.1567 11.0211 10.1592 11.036 10.162C11.0661 10.1676 11.1053 10.1734 11.1542 10.1793C11.2523 10.1909 11.3777 10.2009 11.528 10.209C11.7043 10.2185 11.9081 10.2251 12.1321 10.2291L12.0759 7.92819L17 10.6131L12.2127 13.535L12.1558 11.2011C11.9071 11.197 11.677 11.1899 11.4757 11.1791C11.175 11.1629 10.8757 11.1361 10.6878 11.0751C10.4405 10.9947 10.1465 10.7892 9.86244 10.5654C9.55904 10.3263 9.20251 10.0129 8.81601 9.6549C8.14192 9.03051 7.35822 8.2533 6.57518 7.46052C6.2731 7.76927 5.9736 8.07675 5.68453 8.37353C5.24051 8.8294 4.82109 9.26001 4.45467 9.63114C4.10458 9.98574 3.79502 10.2941 3.54834 10.5285C3.42516 10.6455 3.31437 10.7473 3.22005 10.8285C3.13287 10.9035 3.03686 10.9812 2.94938 11.0324C2.46156 11.3178 1.79381 11.3751 1.32395 11.3812C1.07514 11.3845 0.852462 11.3732 0.692065 11.3611C0.611577 11.3551 0.546037 11.3488 0.499864 11.344C0.476761 11.3415 0.458455 11.3394 0.445496 11.3379L0.43012 11.336L0.425557 11.3355L0.423542 11.3352C0.423448 11.3352 0.423143 11.3352 0.485767 10.8535L0.423542 11.3352C0.157529 11.3006 -0.0304782 11.0569 0.00410824 10.7909C0.0386807 10.525 0.282182 10.3374 0.548069 10.3718C0.548087 10.3718 0.548051 10.3718 0.548069 10.3718L0.549944 10.372L0.559616 10.3732C0.568682 10.3743 0.582871 10.3759 0.60165 10.3779C0.639243 10.3818 0.695017 10.3872 0.764728 10.3924C0.90473 10.4029 1.09799 10.4127 1.31133 10.4099C1.76571 10.404 2.20705 10.3412 2.4587 10.194C2.45847 10.1941 2.4583 10.1942 2.4587 10.194C2.46075 10.1926 2.47161 10.1855 2.49271 10.1693C2.51674 10.1508 2.54777 10.1254 2.58634 10.0922C2.66358 10.0258 2.7615 9.93612 2.87917 9.82431C3.11419 9.60097 3.41488 9.30164 3.76339 8.94864C4.1317 8.57559 4.54478 8.15147 4.98424 7.70025C5.27761 7.39904 5.58273 7.08575 5.89415 6.76752C5.58272 6.44928 5.27759 6.13598 4.98421 5.83476C4.54476 5.38355 4.1317 4.95944 3.76339 4.5864C3.41488 4.2334 3.11419 3.93407 2.87917 3.71074C2.7615 3.59892 2.66358 3.50929 2.58634 3.44281C2.54777 3.40961 2.51674 3.38425 2.49271 3.36577C2.4716 3.34954 2.46099 3.34258 2.45894 3.34123C2.45868 3.34108 2.45853 3.34096 2.45894 3.34123C2.2073 3.19405 1.76572 3.13106 1.31133 3.12515C1.09799 3.12238 0.90473 3.13211 0.764728 3.14261C0.695017 3.14784 0.639243 3.15321 0.60165 3.15717C0.582871 3.15915 0.568682 3.16077 0.559616 3.16184L0.549944 3.16301L0.548391 3.1632C0.282436 3.1977 0.0386882 3.01013 0.00410824 2.74417C-0.0304782 2.47816 0.15713 2.23447 0.423143 2.19989L0.485767 2.68154C0.423143 2.19989 0.423048 2.1999 0.423143 2.19989L0.425557 2.19958L0.43012 2.199L0.445496 2.19714C0.458455 2.19561 0.476761 2.19352 0.499864 2.19109C0.546037 2.18622 0.611577 2.17995 0.692065 2.17391C0.852462 2.16188 1.07514 2.15058 1.32395 2.15381C1.79381 2.15992 2.46156 2.21726 2.94938 2.50267C3.03686 2.55385 3.13287 2.63152 3.22005 2.70655C3.31437 2.78773 3.42516 2.8895 3.54834 3.00655C3.79502 3.24097 4.10458 3.54931 4.45467 3.9039C4.82109 4.27504 5.24052 4.70565 5.68455 5.16153C5.97361 5.4583 6.2731 5.76578 6.57518 6.07452C7.35822 5.28174 8.14192 4.50454 8.81601 3.88014C9.20251 3.52214 9.55904 3.20872 9.86244 2.96964C10.1465 2.74581 10.4405 2.54035 10.6878 2.45997C10.8757 2.39892 11.175 2.37219 11.4757 2.35598C11.677 2.34514 11.9071 2.33807 12.1558 2.33396L12.2127 0Z"
+                  /></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="playlist">
+        <div class="playlist-bar">
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+          <h2 class="playlist-title" id="playlist">Playlist</h2>
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+        <ul id="playlist-songs"></ul>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  /* colors */
+  --primary-color: #dfdfe2;
+  --secondary-color: #ffffff;
+  --app-background-color: #4d4d62;
+  --background-color: #1b1b32;
+  --foreground-color: #3b3b4f;
+  --highlight-color: #f1be32;
+
+  /* font sizes */
+  --root-font-size: 16px;
+  font-size: var(--root-font-size);
+
+  /* font-families */
+  --font-headline: "Roboto Mono", monospace;
+  --font-family: "Lato", sans-serif;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--app-background-color);
+  color: var(--primary-color);
+  font-family: var(--font-family);
+}
+
+h1 {
+  font-size: 1.125rem;
+  line-height: 1.6;
+}
+
+h2 {
+  font-size: var(--root-font-size);
+}
+
+ul {
+  margin: 0;
+}
+
+.container {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: 5px;
+}
+
+.player,
+.playlist {
+  width: 450px;
+  background-color: var(--background-color);
+  border: 3px solid var(--foreground-color);
+}
+
+.player {
+  height: 260px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 10px;
+}
+
+.player-bar,
+.playlist-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+  width: 100%;
+  height: 30px;
+  background-color: var(--foreground-color);
+}
+
+.parallel-lines {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 6px;
+  padding: 0 5px;
+}
+
+.parallel-lines > div {
+  height: 2px;
+  width: 100%;
+  min-width: 75px;
+  background-color: var(--highlight-color);
+}
+
+.fcc-title,
+.playlist-title {
+  color: var(--secondary-color);
+  margin: 0 10px;
+  font-family: var(--font-headline);
+}
+
+.player-content {
+  display: flex;
+  background-color: var(--foreground-color);
+  width: 430px;
+  height: 200px;
+  column-gap: 13px;
+  align-items: center;
+  justify-content: center;
+}
+
+#player-album-art {
+  background-color: var(--secondary-color);
+  border: 6px solid var(--background-color);
+}
+
+#player-album-art img {
+  width: 150px;
+  display: block;
+}
+
+.player-display {
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+  padding: 14px;
+  background-color: var(--background-color);
+  height: 153px;
+  width: 226px;
+}
+
+.player-display-song-artist {
+  height: 80px;
+}
+
+.player-buttons svg {
+  fill: var(--primary-color);
+}
+
+.playing > svg {
+  fill: var(--highlight-color);
+}
+
+.player-buttons {
+  display: flex;
+  justify-content: space-around;
+}
+
+button {
+  background: transparent;
+  border: none;
+  color: var(--primary-color);
+  cursor: pointer;
+  font-size: var(--root-font-size);
+  outline-color: var(--highlight-color);
+  text-align: center;
+}
+
+.playlist-song {
+  outline-color: var(--highlight-color);
+}
+
+.playlist li:not(:last-child) {
+  border-bottom: 1px solid var(--background-color);
+}
+
+button:focus,
+.playlist-song:focus {
+  outline-style: dashed;
+  outline-width: 2px;
+}
+
+/* Playlist */
+.playlist {
+  height: auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 10px;
+}
+
+#playlist-songs {
+  width: 430px;
+  height: 100%;
+  background-color: var(--foreground-color);
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+  padding: 8px 9px;
+  visibility: visible;
+  justify-content: start;
+  list-style: none;
+}
+
+.playlist-song {
+  display: flex;
+  height: 55px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+}
+
+[aria-current="true"] {
+  background-color: var(--background-color);
+}
+
+[aria-current="true"] p {
+  color: var(--highlight-color);
+}
+
+.playlist-song-info {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  column-gap: 7px;
+  padding: 5px 0;
+  font-family: var(--font-family);
+}
+
+#player-song-title,
+#player-song-artist {
+  margin: 0;
+}
+
+#player-song-artist {
+  color: var(--highlight-color);
+  font-size: 0.75rem;
+}
+
+#player-song-title {
+  font-size: 1.125rem;
+}
+
+.playlist-song-title {
+  font-size: 0.85rem;
+  width: 241px;
+  text-align: left;
+}
+
+.playlist-song-artist {
+  font-size: 0.725rem;
+  width: 80px;
+}
+
+.playlist-song-duration {
+  font-size: 0.725rem;
+  margin: auto;
+  font-family: var(--font-headline);
+  width: 30px;
+}
+
+.playlist-song-delete {
+  padding: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.playlist-song-delete,
+.playlist-song-delete {
+  fill: var(--foreground-color);
+}
+
+.playlist-song-delete:hover circle,
+.playlist-song-delete:focus circle {
+  fill: #ff0000;
+}
+
+@media (max-width: 700px) {
+  .player,
+  .playlist {
+    width: 300px;
+  }
+
+  .player {
+    height: 340px;
+  }
+
+  #playlist-songs {
+    height: 280px;
+    padding: 5px 6px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scrollbar-color: var(--background-color) var(--secondary-color);
+    scrollbar-width: thin;
+  }
+
+  #playlist-songs::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  #playlist-songs::-webkit-scrollbar-track {
+    background: var(--background-color);
+  }
+
+  #playlist-songs::-webkit-scrollbar-thumb {
+    background: var(--secondary-color);
+  }
+
+  h1 {
+    font-size: 0.813rem;
+  }
+
+  h2 {
+    font-size: 0.75rem;
+  }
+
+  .player-bar,
+  .playlist-bar,
+  .player-content,
+  #playlist-songs {
+    width: 280px;
+  }
+
+  .playlist-song {
+    justify-content: space-between;
+  }
+
+  .playlist-song-title {
+    width: 140px;
+  }
+
+  .playlist-song-artist {
+    width: 40px;
+  }
+
+  .playlist-song-duration > button {
+    padding: 0;
+  }
+
+  .player-content {
+    display: inline;
+    position: relative;
+    justify-items: center;
+    height: 100%;
+  }
+
+  #player-album-art {
+    z-index: -100;
+    height: 280px;
+    box-shadow: none;
+    background: #000;
+  }
+
+  #player-album-art img {
+    width: 100%;
+    opacity: 0.6;
+  }
+
+  .player-display-song-artist {
+    padding: 0 10px;
+  }
+
+  .player-display-song-artist > p {
+    white-space: pre-wrap;
+  }
+
+  .player-display {
+    position: absolute;
+    width: 100%;
+    z-index: 1000;
+    background-color: transparent;
+    top: 0;
+    height: 280px;
+    justify-content: space-between;
+    text-align: center;
+  }
+}
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const shuffleButton = document.getElementById("shuffle");
+
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+let userData = {
+  songs: [...allSongs],
+  currentSong: null,
+  songCurrentTime: 0,
+};
+
+const renderSongs = (array) => {
+  const songsHTML = array
+    .map((song)=> {
+      return `
+      <li id="song-${song.id}" class="playlist-song">
+      <button class="playlist-song-info">
+          <span class="playlist-song-title">${song.title}</span>
+          <span class="playlist-song-artist">${song.artist}</span>
+          <span class="playlist-song-duration">${song.duration}</span>
+      </button>
+      <button class="playlist-song-delete" aria-label="Delete ${song.title}">
+          <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#4d4d62"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32587 5.18571C5.7107 4.90301 6.28333 4.94814 6.60485 5.28651L8 6.75478L9.39515 5.28651C9.71667 4.94814 10.2893 4.90301 10.6741 5.18571C11.059 5.4684 11.1103 5.97188 10.7888 6.31026L9.1832 7.99999L10.7888 9.68974C11.1103 10.0281 11.059 10.5316 10.6741 10.8143C10.2893 11.097 9.71667 11.0519 9.39515 10.7135L8 9.24521L6.60485 10.7135C6.28333 11.0519 5.7107 11.097 5.32587 10.8143C4.94102 10.5316 4.88969 10.0281 5.21121 9.68974L6.8168 7.99999L5.21122 6.31026C4.8897 5.97188 4.94102 5.4684 5.32587 5.18571Z" fill="white"/></svg>
+        </button>
+      </li>
+      `;
+    })
+    .join("");
+
+  playlistSongs.innerHTML = songsHTML;
+};
+
+--fcc-editable-region--
+userData?.songs.sort();
+--fcc-editable-region--
+
+renderSongs(userData?.songs);
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a609f6e23f3b06c608fb57.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a609f6e23f3b06c608fb57.md
new file mode 100644
index 00000000000..80fa8a91f63
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a609f6e23f3b06c608fb57.md
@@ -0,0 +1,677 @@
+---
+id: 65a609f6e23f3b06c608fb57
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+The `sort()` method accepts a compare callback function that defines the sort order. 
+
+In this example, the first condition `(a.name < b.name)` checks if the name of the first fruit is less than the name of the second fruit. If so, the first fruit is sorted before the second fruit.
+
+Strings are compared lexicographically which means they are compared character by character. For example, `"Apples"` is less than `"Bananas"` because `"A"` comes before `"B"` in the alphabet.
+
+The reason why this example is returning numbers is because the `sort()` method is expecting a number to be returned. If you return a negative number, the first item is sorted before the second item. 
+
+```js
+const fruits = [
+  { name: "Apples", price: 0.99 },
+  { name: "Blueberries", price: 1.49 },
+  { name: "Grapes", price: 2.99 },
+];
+
+fruits.sort((a, b) => {
+  if (a.name < b.name) {
+    return -1;
+  }
+
+  if (a.name > b.name) {
+    return 1;
+  }
+
+  return 0;
+});
+```
+
+Inside your callback function, add an `if` statement to check if `a.title` is less than `b.title`. If so, return `-1`. 
+
+# --hints--
+
+You should have an `if` statement inside your callback function.
+
+```js
+assert.match(code, /if\s*\(/);
+```
+
+Your `if` statement should check if `a.title` is less than `b.title`.
+
+```js
+assert.match(code, /if\s*\(\s*a\.title\s*<\s*b\.title\s*\)/);
+``` 
+
+Your `if` statement should return `-1` if `a.title` is less than `b.title`.
+
+```js
+assert.match(code, /if\s*\(\s*a\.title\s*<\s*b\.title\s*\)\s*{\s*return\s*-1;?\s*}|if\s*\(\s*a\.title\s*<\s*b\.title\s*\)\s*return\s*-1;?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+    <title>
+      Learn Basic String and Array Methods by Building a Music Player App
+    </title>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="player">
+        <div class="player-bar">
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+          <h1 class="fcc-title">freeCodeCamp</h1>
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+        <div class="player-content">
+          <div id="player-album-art">
+            <img
+              src="https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/quincy-larson-album-art.jpg"
+              alt="song cover art"
+            />
+          </div>
+          <div class="player-display">
+            <div class="player-display-song-artist">
+              <p id="player-song-title"></p>
+              <p id="player-song-artist"></p>
+            </div>
+            <div class="player-buttons">
+              <button id="previous" class="previous" aria-label="Previous">
+                <svg
+                  width="24"
+                  height="19"
+                  viewBox="0 0 24 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" /><rect
+                    width="4.63633"
+                    height="18.5453"
+                    transform="matrix(-1 0 0 1 4.63633 0)"/></svg>
+              </button>
+              <button id="play" class="play" aria-label="Play">
+                <svg
+                  width="17"
+                  height="19"
+                  viewBox="0 0 17 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                > <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /></svg>
+              </button>
+              <button id="pause" class="pause" aria-label="Pause">
+                <svg
+                  width="17"
+                  height="19"
+                  viewBox="0 0 17 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" /> <path d="M11.4 0H16.15V19H11.4V0Z" /></svg>
+              </button>
+              <button id="next" class="next" aria-label="Next">
+                <svg
+                  width="24"
+                  height="19"
+                  viewBox="0 0 24 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /> <rect x="18.5885" width="4.63633" height="18.5453" /></svg>
+              </button>
+              <button id="shuffle" class="shuffle" aria-label="Shuffle">
+                <svg
+                  width="17"
+                  height="14"
+                  viewBox="0 0 17 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M12.2127 0L17 2.9219L12.0759 5.60686L12.1321 3.30594C11.9081 3.30997 11.7043 3.3165 11.528 3.326C11.3777 3.3341 11.2523 3.34411 11.1542 3.35578C11.1053 3.3616 11.0661 3.36749 11.036 3.37309C11.0211 3.37587 11.0095 3.37835 11.001 3.38041C10.9967 3.38143 10.9936 3.38227 10.9913 3.38289C10.989 3.38352 10.988 3.38385 10.9881 3.38382C10.9266 3.40381 10.7572 3.5014 10.4637 3.73265C10.1895 3.94866 9.85452 4.24234 9.47614 4.59282C8.81462 5.20556 8.03912 5.97461 7.25609 6.76752C8.03912 7.56043 8.81462 8.32948 9.47614 8.94223C9.85452 9.29271 10.1895 9.58639 10.4637 9.80239C10.7572 10.0336 10.9266 10.1312 10.9881 10.1512C10.988 10.1512 10.989 10.1515 10.9913 10.1522C10.9936 10.1528 10.9967 10.1536 11.001 10.1546C11.0095 10.1567 11.0211 10.1592 11.036 10.162C11.0661 10.1676 11.1053 10.1734 11.1542 10.1793C11.2523 10.1909 11.3777 10.2009 11.528 10.209C11.7043 10.2185 11.9081 10.2251 12.1321 10.2291L12.0759 7.92819L17 10.6131L12.2127 13.535L12.1558 11.2011C11.9071 11.197 11.677 11.1899 11.4757 11.1791C11.175 11.1629 10.8757 11.1361 10.6878 11.0751C10.4405 10.9947 10.1465 10.7892 9.86244 10.5654C9.55904 10.3263 9.20251 10.0129 8.81601 9.6549C8.14192 9.03051 7.35822 8.2533 6.57518 7.46052C6.2731 7.76927 5.9736 8.07675 5.68453 8.37353C5.24051 8.8294 4.82109 9.26001 4.45467 9.63114C4.10458 9.98574 3.79502 10.2941 3.54834 10.5285C3.42516 10.6455 3.31437 10.7473 3.22005 10.8285C3.13287 10.9035 3.03686 10.9812 2.94938 11.0324C2.46156 11.3178 1.79381 11.3751 1.32395 11.3812C1.07514 11.3845 0.852462 11.3732 0.692065 11.3611C0.611577 11.3551 0.546037 11.3488 0.499864 11.344C0.476761 11.3415 0.458455 11.3394 0.445496 11.3379L0.43012 11.336L0.425557 11.3355L0.423542 11.3352C0.423448 11.3352 0.423143 11.3352 0.485767 10.8535L0.423542 11.3352C0.157529 11.3006 -0.0304782 11.0569 0.00410824 10.7909C0.0386807 10.525 0.282182 10.3374 0.548069 10.3718C0.548087 10.3718 0.548051 10.3718 0.548069 10.3718L0.549944 10.372L0.559616 10.3732C0.568682 10.3743 0.582871 10.3759 0.60165 10.3779C0.639243 10.3818 0.695017 10.3872 0.764728 10.3924C0.90473 10.4029 1.09799 10.4127 1.31133 10.4099C1.76571 10.404 2.20705 10.3412 2.4587 10.194C2.45847 10.1941 2.4583 10.1942 2.4587 10.194C2.46075 10.1926 2.47161 10.1855 2.49271 10.1693C2.51674 10.1508 2.54777 10.1254 2.58634 10.0922C2.66358 10.0258 2.7615 9.93612 2.87917 9.82431C3.11419 9.60097 3.41488 9.30164 3.76339 8.94864C4.1317 8.57559 4.54478 8.15147 4.98424 7.70025C5.27761 7.39904 5.58273 7.08575 5.89415 6.76752C5.58272 6.44928 5.27759 6.13598 4.98421 5.83476C4.54476 5.38355 4.1317 4.95944 3.76339 4.5864C3.41488 4.2334 3.11419 3.93407 2.87917 3.71074C2.7615 3.59892 2.66358 3.50929 2.58634 3.44281C2.54777 3.40961 2.51674 3.38425 2.49271 3.36577C2.4716 3.34954 2.46099 3.34258 2.45894 3.34123C2.45868 3.34108 2.45853 3.34096 2.45894 3.34123C2.2073 3.19405 1.76572 3.13106 1.31133 3.12515C1.09799 3.12238 0.90473 3.13211 0.764728 3.14261C0.695017 3.14784 0.639243 3.15321 0.60165 3.15717C0.582871 3.15915 0.568682 3.16077 0.559616 3.16184L0.549944 3.16301L0.548391 3.1632C0.282436 3.1977 0.0386882 3.01013 0.00410824 2.74417C-0.0304782 2.47816 0.15713 2.23447 0.423143 2.19989L0.485767 2.68154C0.423143 2.19989 0.423048 2.1999 0.423143 2.19989L0.425557 2.19958L0.43012 2.199L0.445496 2.19714C0.458455 2.19561 0.476761 2.19352 0.499864 2.19109C0.546037 2.18622 0.611577 2.17995 0.692065 2.17391C0.852462 2.16188 1.07514 2.15058 1.32395 2.15381C1.79381 2.15992 2.46156 2.21726 2.94938 2.50267C3.03686 2.55385 3.13287 2.63152 3.22005 2.70655C3.31437 2.78773 3.42516 2.8895 3.54834 3.00655C3.79502 3.24097 4.10458 3.54931 4.45467 3.9039C4.82109 4.27504 5.24052 4.70565 5.68455 5.16153C5.97361 5.4583 6.2731 5.76578 6.57518 6.07452C7.35822 5.28174 8.14192 4.50454 8.81601 3.88014C9.20251 3.52214 9.55904 3.20872 9.86244 2.96964C10.1465 2.74581 10.4405 2.54035 10.6878 2.45997C10.8757 2.39892 11.175 2.37219 11.4757 2.35598C11.677 2.34514 11.9071 2.33807 12.1558 2.33396L12.2127 0Z"
+                  /></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="playlist">
+        <div class="playlist-bar">
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+          <h2 class="playlist-title" id="playlist">Playlist</h2>
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+        <ul id="playlist-songs"></ul>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  /* colors */
+  --primary-color: #dfdfe2;
+  --secondary-color: #ffffff;
+  --app-background-color: #4d4d62;
+  --background-color: #1b1b32;
+  --foreground-color: #3b3b4f;
+  --highlight-color: #f1be32;
+
+  /* font sizes */
+  --root-font-size: 16px;
+  font-size: var(--root-font-size);
+
+  /* font-families */
+  --font-headline: "Roboto Mono", monospace;
+  --font-family: "Lato", sans-serif;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--app-background-color);
+  color: var(--primary-color);
+  font-family: var(--font-family);
+}
+
+h1 {
+  font-size: 1.125rem;
+  line-height: 1.6;
+}
+
+h2 {
+  font-size: var(--root-font-size);
+}
+
+ul {
+  margin: 0;
+}
+
+.container {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: 5px;
+}
+
+.player,
+.playlist {
+  width: 450px;
+  background-color: var(--background-color);
+  border: 3px solid var(--foreground-color);
+}
+
+.player {
+  height: 260px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 10px;
+}
+
+.player-bar,
+.playlist-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+  width: 100%;
+  height: 30px;
+  background-color: var(--foreground-color);
+}
+
+.parallel-lines {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 6px;
+  padding: 0 5px;
+}
+
+.parallel-lines > div {
+  height: 2px;
+  width: 100%;
+  min-width: 75px;
+  background-color: var(--highlight-color);
+}
+
+.fcc-title,
+.playlist-title {
+  color: var(--secondary-color);
+  margin: 0 10px;
+  font-family: var(--font-headline);
+}
+
+.player-content {
+  display: flex;
+  background-color: var(--foreground-color);
+  width: 430px;
+  height: 200px;
+  column-gap: 13px;
+  align-items: center;
+  justify-content: center;
+}
+
+#player-album-art {
+  background-color: var(--secondary-color);
+  border: 6px solid var(--background-color);
+}
+
+#player-album-art img {
+  width: 150px;
+  display: block;
+}
+
+.player-display {
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+  padding: 14px;
+  background-color: var(--background-color);
+  height: 153px;
+  width: 226px;
+}
+
+.player-display-song-artist {
+  height: 80px;
+}
+
+.player-buttons svg {
+  fill: var(--primary-color);
+}
+
+.playing > svg {
+  fill: var(--highlight-color);
+}
+
+.player-buttons {
+  display: flex;
+  justify-content: space-around;
+}
+
+button {
+  background: transparent;
+  border: none;
+  color: var(--primary-color);
+  cursor: pointer;
+  font-size: var(--root-font-size);
+  outline-color: var(--highlight-color);
+  text-align: center;
+}
+
+.playlist-song {
+  outline-color: var(--highlight-color);
+}
+
+.playlist li:not(:last-child) {
+  border-bottom: 1px solid var(--background-color);
+}
+
+button:focus,
+.playlist-song:focus {
+  outline-style: dashed;
+  outline-width: 2px;
+}
+
+/* Playlist */
+.playlist {
+  height: auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 10px;
+}
+
+#playlist-songs {
+  width: 430px;
+  height: 100%;
+  background-color: var(--foreground-color);
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+  padding: 8px 9px;
+  visibility: visible;
+  justify-content: start;
+  list-style: none;
+}
+
+.playlist-song {
+  display: flex;
+  height: 55px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+}
+
+[aria-current="true"] {
+  background-color: var(--background-color);
+}
+
+[aria-current="true"] p {
+  color: var(--highlight-color);
+}
+
+.playlist-song-info {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  column-gap: 7px;
+  padding: 5px 0;
+  font-family: var(--font-family);
+}
+
+#player-song-title,
+#player-song-artist {
+  margin: 0;
+}
+
+#player-song-artist {
+  color: var(--highlight-color);
+  font-size: 0.75rem;
+}
+
+#player-song-title {
+  font-size: 1.125rem;
+}
+
+.playlist-song-title {
+  font-size: 0.85rem;
+  width: 241px;
+  text-align: left;
+}
+
+.playlist-song-artist {
+  font-size: 0.725rem;
+  width: 80px;
+}
+
+.playlist-song-duration {
+  font-size: 0.725rem;
+  margin: auto;
+  font-family: var(--font-headline);
+  width: 30px;
+}
+
+.playlist-song-delete {
+  padding: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.playlist-song-delete,
+.playlist-song-delete {
+  fill: var(--foreground-color);
+}
+
+.playlist-song-delete:hover circle,
+.playlist-song-delete:focus circle {
+  fill: #ff0000;
+}
+
+@media (max-width: 700px) {
+  .player,
+  .playlist {
+    width: 300px;
+  }
+
+  .player {
+    height: 340px;
+  }
+
+  #playlist-songs {
+    height: 280px;
+    padding: 5px 6px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scrollbar-color: var(--background-color) var(--secondary-color);
+    scrollbar-width: thin;
+  }
+
+  #playlist-songs::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  #playlist-songs::-webkit-scrollbar-track {
+    background: var(--background-color);
+  }
+
+  #playlist-songs::-webkit-scrollbar-thumb {
+    background: var(--secondary-color);
+  }
+
+  h1 {
+    font-size: 0.813rem;
+  }
+
+  h2 {
+    font-size: 0.75rem;
+  }
+
+  .player-bar,
+  .playlist-bar,
+  .player-content,
+  #playlist-songs {
+    width: 280px;
+  }
+
+  .playlist-song {
+    justify-content: space-between;
+  }
+
+  .playlist-song-title {
+    width: 140px;
+  }
+
+  .playlist-song-artist {
+    width: 40px;
+  }
+
+  .playlist-song-duration > button {
+    padding: 0;
+  }
+
+  .player-content {
+    display: inline;
+    position: relative;
+    justify-items: center;
+    height: 100%;
+  }
+
+  #player-album-art {
+    z-index: -100;
+    height: 280px;
+    box-shadow: none;
+    background: #000;
+  }
+
+  #player-album-art img {
+    width: 100%;
+    opacity: 0.6;
+  }
+
+  .player-display-song-artist {
+    padding: 0 10px;
+  }
+
+  .player-display-song-artist > p {
+    white-space: pre-wrap;
+  }
+
+  .player-display {
+    position: absolute;
+    width: 100%;
+    z-index: 1000;
+    background-color: transparent;
+    top: 0;
+    height: 280px;
+    justify-content: space-between;
+    text-align: center;
+  }
+}
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const shuffleButton = document.getElementById("shuffle");
+
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+let userData = {
+  songs: [...allSongs],
+  currentSong: null,
+  songCurrentTime: 0,
+};
+
+const renderSongs = (array) => {
+  const songsHTML = array
+    .map((song)=> {
+      return `
+      <li id="song-${song.id}" class="playlist-song">
+      <button class="playlist-song-info">
+          <span class="playlist-song-title">${song.title}</span>
+          <span class="playlist-song-artist">${song.artist}</span>
+          <span class="playlist-song-duration">${song.duration}</span>
+      </button>
+      <button class="playlist-song-delete" aria-label="Delete ${song.title}">
+          <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#4d4d62"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32587 5.18571C5.7107 4.90301 6.28333 4.94814 6.60485 5.28651L8 6.75478L9.39515 5.28651C9.71667 4.94814 10.2893 4.90301 10.6741 5.18571C11.059 5.4684 11.1103 5.97188 10.7888 6.31026L9.1832 7.99999L10.7888 9.68974C11.1103 10.0281 11.059 10.5316 10.6741 10.8143C10.2893 11.097 9.71667 11.0519 9.39515 10.7135L8 9.24521L6.60485 10.7135C6.28333 11.0519 5.7107 11.097 5.32587 10.8143C4.94102 10.5316 4.88969 10.0281 5.21121 9.68974L6.8168 7.99999L5.21122 6.31026C4.8897 5.97188 4.94102 5.4684 5.32587 5.18571Z" fill="white"/></svg>
+        </button>
+      </li>
+      `;
+    })
+    .join("");
+
+  playlistSongs.innerHTML = songsHTML;
+};
+
+--fcc-editable-region--
+userData?.songs.sort((a,b) => {
+
+});
+--fcc-editable-region--
+
+renderSongs(userData?.songs);
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60aa3efd8fa079c2d1537.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60aa3efd8fa079c2d1537.md
new file mode 100644
index 00000000000..9e2709b718d
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60aa3efd8fa079c2d1537.md
@@ -0,0 +1,675 @@
+---
+id: 65a60aa3efd8fa079c2d1537
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+The second condition in this example checks if `a.name > b.name`. If so, the function returns `1`, which sorts the first fruit after the second fruit.
+
+```js
+const fruits = [
+  { name: "Apples", price: 0.99 },
+  { name: "Blueberries", price: 1.49 },
+  { name: "Grapes", price: 2.99 },
+];
+
+fruits.sort((a, b) => {
+  if (a.name < b.name) {
+    return -1;
+  }
+
+  if (a.name > b.name) {
+    return 1;
+  }
+
+  return 0;
+});
+```
+
+Inside your callback function, add another `if` statement to check if `a.title` is greater than `b.title`. If so, return the number `1`. 
+
+# --hints--
+
+You should have an `if` statement inside your callback function.
+
+```js
+assert.match(code, /if\s*\(/);
+```
+
+Your `if` statement should check if `a.title` is greater than `b.title`.
+
+```js
+assert.match(code, /if\s*\(\s*a\.title\s*>\s*b\.title\s*\)/);
+``` 
+
+Your `if` statement should return the number `1` if `a.title` is greater than `b.title`.
+
+```js
+assert.match(code, /if\s*\(\s*a\.title\s*>\s*b\.title\s*\)\s*{\s*return\s*1;?\s*}|if\s*\(\s*a\.title\s*>\s*b\.title\s*\)\s*return\s*1;?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+    <title>
+      Learn Basic String and Array Methods by Building a Music Player App
+    </title>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="player">
+        <div class="player-bar">
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+          <h1 class="fcc-title">freeCodeCamp</h1>
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+        <div class="player-content">
+          <div id="player-album-art">
+            <img
+              src="https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/quincy-larson-album-art.jpg"
+              alt="song cover art"
+            />
+          </div>
+          <div class="player-display">
+            <div class="player-display-song-artist">
+              <p id="player-song-title"></p>
+              <p id="player-song-artist"></p>
+            </div>
+            <div class="player-buttons">
+              <button id="previous" class="previous" aria-label="Previous">
+                <svg
+                  width="24"
+                  height="19"
+                  viewBox="0 0 24 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" /><rect
+                    width="4.63633"
+                    height="18.5453"
+                    transform="matrix(-1 0 0 1 4.63633 0)"/></svg>
+              </button>
+              <button id="play" class="play" aria-label="Play">
+                <svg
+                  width="17"
+                  height="19"
+                  viewBox="0 0 17 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                > <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /></svg>
+              </button>
+              <button id="pause" class="pause" aria-label="Pause">
+                <svg
+                  width="17"
+                  height="19"
+                  viewBox="0 0 17 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" /> <path d="M11.4 0H16.15V19H11.4V0Z" /></svg>
+              </button>
+              <button id="next" class="next" aria-label="Next">
+                <svg
+                  width="24"
+                  height="19"
+                  viewBox="0 0 24 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /> <rect x="18.5885" width="4.63633" height="18.5453" /></svg>
+              </button>
+              <button id="shuffle" class="shuffle" aria-label="Shuffle">
+                <svg
+                  width="17"
+                  height="14"
+                  viewBox="0 0 17 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M12.2127 0L17 2.9219L12.0759 5.60686L12.1321 3.30594C11.9081 3.30997 11.7043 3.3165 11.528 3.326C11.3777 3.3341 11.2523 3.34411 11.1542 3.35578C11.1053 3.3616 11.0661 3.36749 11.036 3.37309C11.0211 3.37587 11.0095 3.37835 11.001 3.38041C10.9967 3.38143 10.9936 3.38227 10.9913 3.38289C10.989 3.38352 10.988 3.38385 10.9881 3.38382C10.9266 3.40381 10.7572 3.5014 10.4637 3.73265C10.1895 3.94866 9.85452 4.24234 9.47614 4.59282C8.81462 5.20556 8.03912 5.97461 7.25609 6.76752C8.03912 7.56043 8.81462 8.32948 9.47614 8.94223C9.85452 9.29271 10.1895 9.58639 10.4637 9.80239C10.7572 10.0336 10.9266 10.1312 10.9881 10.1512C10.988 10.1512 10.989 10.1515 10.9913 10.1522C10.9936 10.1528 10.9967 10.1536 11.001 10.1546C11.0095 10.1567 11.0211 10.1592 11.036 10.162C11.0661 10.1676 11.1053 10.1734 11.1542 10.1793C11.2523 10.1909 11.3777 10.2009 11.528 10.209C11.7043 10.2185 11.9081 10.2251 12.1321 10.2291L12.0759 7.92819L17 10.6131L12.2127 13.535L12.1558 11.2011C11.9071 11.197 11.677 11.1899 11.4757 11.1791C11.175 11.1629 10.8757 11.1361 10.6878 11.0751C10.4405 10.9947 10.1465 10.7892 9.86244 10.5654C9.55904 10.3263 9.20251 10.0129 8.81601 9.6549C8.14192 9.03051 7.35822 8.2533 6.57518 7.46052C6.2731 7.76927 5.9736 8.07675 5.68453 8.37353C5.24051 8.8294 4.82109 9.26001 4.45467 9.63114C4.10458 9.98574 3.79502 10.2941 3.54834 10.5285C3.42516 10.6455 3.31437 10.7473 3.22005 10.8285C3.13287 10.9035 3.03686 10.9812 2.94938 11.0324C2.46156 11.3178 1.79381 11.3751 1.32395 11.3812C1.07514 11.3845 0.852462 11.3732 0.692065 11.3611C0.611577 11.3551 0.546037 11.3488 0.499864 11.344C0.476761 11.3415 0.458455 11.3394 0.445496 11.3379L0.43012 11.336L0.425557 11.3355L0.423542 11.3352C0.423448 11.3352 0.423143 11.3352 0.485767 10.8535L0.423542 11.3352C0.157529 11.3006 -0.0304782 11.0569 0.00410824 10.7909C0.0386807 10.525 0.282182 10.3374 0.548069 10.3718C0.548087 10.3718 0.548051 10.3718 0.548069 10.3718L0.549944 10.372L0.559616 10.3732C0.568682 10.3743 0.582871 10.3759 0.60165 10.3779C0.639243 10.3818 0.695017 10.3872 0.764728 10.3924C0.90473 10.4029 1.09799 10.4127 1.31133 10.4099C1.76571 10.404 2.20705 10.3412 2.4587 10.194C2.45847 10.1941 2.4583 10.1942 2.4587 10.194C2.46075 10.1926 2.47161 10.1855 2.49271 10.1693C2.51674 10.1508 2.54777 10.1254 2.58634 10.0922C2.66358 10.0258 2.7615 9.93612 2.87917 9.82431C3.11419 9.60097 3.41488 9.30164 3.76339 8.94864C4.1317 8.57559 4.54478 8.15147 4.98424 7.70025C5.27761 7.39904 5.58273 7.08575 5.89415 6.76752C5.58272 6.44928 5.27759 6.13598 4.98421 5.83476C4.54476 5.38355 4.1317 4.95944 3.76339 4.5864C3.41488 4.2334 3.11419 3.93407 2.87917 3.71074C2.7615 3.59892 2.66358 3.50929 2.58634 3.44281C2.54777 3.40961 2.51674 3.38425 2.49271 3.36577C2.4716 3.34954 2.46099 3.34258 2.45894 3.34123C2.45868 3.34108 2.45853 3.34096 2.45894 3.34123C2.2073 3.19405 1.76572 3.13106 1.31133 3.12515C1.09799 3.12238 0.90473 3.13211 0.764728 3.14261C0.695017 3.14784 0.639243 3.15321 0.60165 3.15717C0.582871 3.15915 0.568682 3.16077 0.559616 3.16184L0.549944 3.16301L0.548391 3.1632C0.282436 3.1977 0.0386882 3.01013 0.00410824 2.74417C-0.0304782 2.47816 0.15713 2.23447 0.423143 2.19989L0.485767 2.68154C0.423143 2.19989 0.423048 2.1999 0.423143 2.19989L0.425557 2.19958L0.43012 2.199L0.445496 2.19714C0.458455 2.19561 0.476761 2.19352 0.499864 2.19109C0.546037 2.18622 0.611577 2.17995 0.692065 2.17391C0.852462 2.16188 1.07514 2.15058 1.32395 2.15381C1.79381 2.15992 2.46156 2.21726 2.94938 2.50267C3.03686 2.55385 3.13287 2.63152 3.22005 2.70655C3.31437 2.78773 3.42516 2.8895 3.54834 3.00655C3.79502 3.24097 4.10458 3.54931 4.45467 3.9039C4.82109 4.27504 5.24052 4.70565 5.68455 5.16153C5.97361 5.4583 6.2731 5.76578 6.57518 6.07452C7.35822 5.28174 8.14192 4.50454 8.81601 3.88014C9.20251 3.52214 9.55904 3.20872 9.86244 2.96964C10.1465 2.74581 10.4405 2.54035 10.6878 2.45997C10.8757 2.39892 11.175 2.37219 11.4757 2.35598C11.677 2.34514 11.9071 2.33807 12.1558 2.33396L12.2127 0Z"
+                  /></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="playlist">
+        <div class="playlist-bar">
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+          <h2 class="playlist-title" id="playlist">Playlist</h2>
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+        <ul id="playlist-songs"></ul>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  /* colors */
+  --primary-color: #dfdfe2;
+  --secondary-color: #ffffff;
+  --app-background-color: #4d4d62;
+  --background-color: #1b1b32;
+  --foreground-color: #3b3b4f;
+  --highlight-color: #f1be32;
+
+  /* font sizes */
+  --root-font-size: 16px;
+  font-size: var(--root-font-size);
+
+  /* font-families */
+  --font-headline: "Roboto Mono", monospace;
+  --font-family: "Lato", sans-serif;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--app-background-color);
+  color: var(--primary-color);
+  font-family: var(--font-family);
+}
+
+h1 {
+  font-size: 1.125rem;
+  line-height: 1.6;
+}
+
+h2 {
+  font-size: var(--root-font-size);
+}
+
+ul {
+  margin: 0;
+}
+
+.container {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: 5px;
+}
+
+.player,
+.playlist {
+  width: 450px;
+  background-color: var(--background-color);
+  border: 3px solid var(--foreground-color);
+}
+
+.player {
+  height: 260px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 10px;
+}
+
+.player-bar,
+.playlist-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+  width: 100%;
+  height: 30px;
+  background-color: var(--foreground-color);
+}
+
+.parallel-lines {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 6px;
+  padding: 0 5px;
+}
+
+.parallel-lines > div {
+  height: 2px;
+  width: 100%;
+  min-width: 75px;
+  background-color: var(--highlight-color);
+}
+
+.fcc-title,
+.playlist-title {
+  color: var(--secondary-color);
+  margin: 0 10px;
+  font-family: var(--font-headline);
+}
+
+.player-content {
+  display: flex;
+  background-color: var(--foreground-color);
+  width: 430px;
+  height: 200px;
+  column-gap: 13px;
+  align-items: center;
+  justify-content: center;
+}
+
+#player-album-art {
+  background-color: var(--secondary-color);
+  border: 6px solid var(--background-color);
+}
+
+#player-album-art img {
+  width: 150px;
+  display: block;
+}
+
+.player-display {
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+  padding: 14px;
+  background-color: var(--background-color);
+  height: 153px;
+  width: 226px;
+}
+
+.player-display-song-artist {
+  height: 80px;
+}
+
+.player-buttons svg {
+  fill: var(--primary-color);
+}
+
+.playing > svg {
+  fill: var(--highlight-color);
+}
+
+.player-buttons {
+  display: flex;
+  justify-content: space-around;
+}
+
+button {
+  background: transparent;
+  border: none;
+  color: var(--primary-color);
+  cursor: pointer;
+  font-size: var(--root-font-size);
+  outline-color: var(--highlight-color);
+  text-align: center;
+}
+
+.playlist-song {
+  outline-color: var(--highlight-color);
+}
+
+.playlist li:not(:last-child) {
+  border-bottom: 1px solid var(--background-color);
+}
+
+button:focus,
+.playlist-song:focus {
+  outline-style: dashed;
+  outline-width: 2px;
+}
+
+/* Playlist */
+.playlist {
+  height: auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 10px;
+}
+
+#playlist-songs {
+  width: 430px;
+  height: 100%;
+  background-color: var(--foreground-color);
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+  padding: 8px 9px;
+  visibility: visible;
+  justify-content: start;
+  list-style: none;
+}
+
+.playlist-song {
+  display: flex;
+  height: 55px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+}
+
+[aria-current="true"] {
+  background-color: var(--background-color);
+}
+
+[aria-current="true"] p {
+  color: var(--highlight-color);
+}
+
+.playlist-song-info {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  column-gap: 7px;
+  padding: 5px 0;
+  font-family: var(--font-family);
+}
+
+#player-song-title,
+#player-song-artist {
+  margin: 0;
+}
+
+#player-song-artist {
+  color: var(--highlight-color);
+  font-size: 0.75rem;
+}
+
+#player-song-title {
+  font-size: 1.125rem;
+}
+
+.playlist-song-title {
+  font-size: 0.85rem;
+  width: 241px;
+  text-align: left;
+}
+
+.playlist-song-artist {
+  font-size: 0.725rem;
+  width: 80px;
+}
+
+.playlist-song-duration {
+  font-size: 0.725rem;
+  margin: auto;
+  font-family: var(--font-headline);
+  width: 30px;
+}
+
+.playlist-song-delete {
+  padding: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.playlist-song-delete,
+.playlist-song-delete {
+  fill: var(--foreground-color);
+}
+
+.playlist-song-delete:hover circle,
+.playlist-song-delete:focus circle {
+  fill: #ff0000;
+}
+
+@media (max-width: 700px) {
+  .player,
+  .playlist {
+    width: 300px;
+  }
+
+  .player {
+    height: 340px;
+  }
+
+  #playlist-songs {
+    height: 280px;
+    padding: 5px 6px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scrollbar-color: var(--background-color) var(--secondary-color);
+    scrollbar-width: thin;
+  }
+
+  #playlist-songs::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  #playlist-songs::-webkit-scrollbar-track {
+    background: var(--background-color);
+  }
+
+  #playlist-songs::-webkit-scrollbar-thumb {
+    background: var(--secondary-color);
+  }
+
+  h1 {
+    font-size: 0.813rem;
+  }
+
+  h2 {
+    font-size: 0.75rem;
+  }
+
+  .player-bar,
+  .playlist-bar,
+  .player-content,
+  #playlist-songs {
+    width: 280px;
+  }
+
+  .playlist-song {
+    justify-content: space-between;
+  }
+
+  .playlist-song-title {
+    width: 140px;
+  }
+
+  .playlist-song-artist {
+    width: 40px;
+  }
+
+  .playlist-song-duration > button {
+    padding: 0;
+  }
+
+  .player-content {
+    display: inline;
+    position: relative;
+    justify-items: center;
+    height: 100%;
+  }
+
+  #player-album-art {
+    z-index: -100;
+    height: 280px;
+    box-shadow: none;
+    background: #000;
+  }
+
+  #player-album-art img {
+    width: 100%;
+    opacity: 0.6;
+  }
+
+  .player-display-song-artist {
+    padding: 0 10px;
+  }
+
+  .player-display-song-artist > p {
+    white-space: pre-wrap;
+  }
+
+  .player-display {
+    position: absolute;
+    width: 100%;
+    z-index: 1000;
+    background-color: transparent;
+    top: 0;
+    height: 280px;
+    justify-content: space-between;
+    text-align: center;
+  }
+}
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const shuffleButton = document.getElementById("shuffle");
+
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+let userData = {
+  songs: [...allSongs],
+  currentSong: null,
+  songCurrentTime: 0,
+};
+
+const renderSongs = (array) => {
+  const songsHTML = array
+    .map((song)=> {
+      return `
+      <li id="song-${song.id}" class="playlist-song">
+      <button class="playlist-song-info">
+          <span class="playlist-song-title">${song.title}</span>
+          <span class="playlist-song-artist">${song.artist}</span>
+          <span class="playlist-song-duration">${song.duration}</span>
+      </button>
+      <button class="playlist-song-delete" aria-label="Delete ${song.title}">
+          <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#4d4d62"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32587 5.18571C5.7107 4.90301 6.28333 4.94814 6.60485 5.28651L8 6.75478L9.39515 5.28651C9.71667 4.94814 10.2893 4.90301 10.6741 5.18571C11.059 5.4684 11.1103 5.97188 10.7888 6.31026L9.1832 7.99999L10.7888 9.68974C11.1103 10.0281 11.059 10.5316 10.6741 10.8143C10.2893 11.097 9.71667 11.0519 9.39515 10.7135L8 9.24521L6.60485 10.7135C6.28333 11.0519 5.7107 11.097 5.32587 10.8143C4.94102 10.5316 4.88969 10.0281 5.21121 9.68974L6.8168 7.99999L5.21122 6.31026C4.8897 5.97188 4.94102 5.4684 5.32587 5.18571Z" fill="white"/></svg>
+        </button>
+      </li>
+      `;
+    })
+    .join("");
+
+  playlistSongs.innerHTML = songsHTML;
+};
+
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+});
+
+renderSongs(userData?.songs);
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60b0b8b4f96085ac23463.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60b0b8b4f96085ac23463.md
new file mode 100644
index 00000000000..042fc880597
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60b0b8b4f96085ac23463.md
@@ -0,0 +1,669 @@
+---
+id: 65a60b0b8b4f96085ac23463
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+In the example, if `a.name` is equal to `b.name`, then the function returns `0`. This means that nothing changes and the order of `a` and `b` remains the same.
+
+```js
+const fruits = [
+  { name: "Apples", price: 0.99 },
+  { name: "Blueberries", price: 1.49 },
+  { name: "Grapes", price: 2.99 },
+];
+
+fruits.sort((a, b) => {
+  if (a.name < b.name) {
+    return -1;
+  }
+
+  if (a.name > b.name) {
+    return 1;
+  }
+
+  return 0;
+});
+```
+
+Below your `if` statements, return the number `0` to leave the order of the two elements unchanged.
+
+Now you should see the songs in alphabetical order in the playlist.
+
+# --hints--
+
+You should return the number `0` below your `if` statements.
+
+```js
+assert.match(code, /return\s+0\s*;?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+    <title>
+      Learn Basic String and Array Methods by Building a Music Player App
+    </title>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="player">
+        <div class="player-bar">
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+          <h1 class="fcc-title">freeCodeCamp</h1>
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+        <div class="player-content">
+          <div id="player-album-art">
+            <img
+              src="https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/quincy-larson-album-art.jpg"
+              alt="song cover art"
+            />
+          </div>
+          <div class="player-display">
+            <div class="player-display-song-artist">
+              <p id="player-song-title"></p>
+              <p id="player-song-artist"></p>
+            </div>
+            <div class="player-buttons">
+              <button id="previous" class="previous" aria-label="Previous">
+                <svg
+                  width="24"
+                  height="19"
+                  viewBox="0 0 24 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" /><rect
+                    width="4.63633"
+                    height="18.5453"
+                    transform="matrix(-1 0 0 1 4.63633 0)"/></svg>
+              </button>
+              <button id="play" class="play" aria-label="Play">
+                <svg
+                  width="17"
+                  height="19"
+                  viewBox="0 0 17 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                > <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /></svg>
+              </button>
+              <button id="pause" class="pause" aria-label="Pause">
+                <svg
+                  width="17"
+                  height="19"
+                  viewBox="0 0 17 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" /> <path d="M11.4 0H16.15V19H11.4V0Z" /></svg>
+              </button>
+              <button id="next" class="next" aria-label="Next">
+                <svg
+                  width="24"
+                  height="19"
+                  viewBox="0 0 24 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /> <rect x="18.5885" width="4.63633" height="18.5453" /></svg>
+              </button>
+              <button id="shuffle" class="shuffle" aria-label="Shuffle">
+                <svg
+                  width="17"
+                  height="14"
+                  viewBox="0 0 17 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M12.2127 0L17 2.9219L12.0759 5.60686L12.1321 3.30594C11.9081 3.30997 11.7043 3.3165 11.528 3.326C11.3777 3.3341 11.2523 3.34411 11.1542 3.35578C11.1053 3.3616 11.0661 3.36749 11.036 3.37309C11.0211 3.37587 11.0095 3.37835 11.001 3.38041C10.9967 3.38143 10.9936 3.38227 10.9913 3.38289C10.989 3.38352 10.988 3.38385 10.9881 3.38382C10.9266 3.40381 10.7572 3.5014 10.4637 3.73265C10.1895 3.94866 9.85452 4.24234 9.47614 4.59282C8.81462 5.20556 8.03912 5.97461 7.25609 6.76752C8.03912 7.56043 8.81462 8.32948 9.47614 8.94223C9.85452 9.29271 10.1895 9.58639 10.4637 9.80239C10.7572 10.0336 10.9266 10.1312 10.9881 10.1512C10.988 10.1512 10.989 10.1515 10.9913 10.1522C10.9936 10.1528 10.9967 10.1536 11.001 10.1546C11.0095 10.1567 11.0211 10.1592 11.036 10.162C11.0661 10.1676 11.1053 10.1734 11.1542 10.1793C11.2523 10.1909 11.3777 10.2009 11.528 10.209C11.7043 10.2185 11.9081 10.2251 12.1321 10.2291L12.0759 7.92819L17 10.6131L12.2127 13.535L12.1558 11.2011C11.9071 11.197 11.677 11.1899 11.4757 11.1791C11.175 11.1629 10.8757 11.1361 10.6878 11.0751C10.4405 10.9947 10.1465 10.7892 9.86244 10.5654C9.55904 10.3263 9.20251 10.0129 8.81601 9.6549C8.14192 9.03051 7.35822 8.2533 6.57518 7.46052C6.2731 7.76927 5.9736 8.07675 5.68453 8.37353C5.24051 8.8294 4.82109 9.26001 4.45467 9.63114C4.10458 9.98574 3.79502 10.2941 3.54834 10.5285C3.42516 10.6455 3.31437 10.7473 3.22005 10.8285C3.13287 10.9035 3.03686 10.9812 2.94938 11.0324C2.46156 11.3178 1.79381 11.3751 1.32395 11.3812C1.07514 11.3845 0.852462 11.3732 0.692065 11.3611C0.611577 11.3551 0.546037 11.3488 0.499864 11.344C0.476761 11.3415 0.458455 11.3394 0.445496 11.3379L0.43012 11.336L0.425557 11.3355L0.423542 11.3352C0.423448 11.3352 0.423143 11.3352 0.485767 10.8535L0.423542 11.3352C0.157529 11.3006 -0.0304782 11.0569 0.00410824 10.7909C0.0386807 10.525 0.282182 10.3374 0.548069 10.3718C0.548087 10.3718 0.548051 10.3718 0.548069 10.3718L0.549944 10.372L0.559616 10.3732C0.568682 10.3743 0.582871 10.3759 0.60165 10.3779C0.639243 10.3818 0.695017 10.3872 0.764728 10.3924C0.90473 10.4029 1.09799 10.4127 1.31133 10.4099C1.76571 10.404 2.20705 10.3412 2.4587 10.194C2.45847 10.1941 2.4583 10.1942 2.4587 10.194C2.46075 10.1926 2.47161 10.1855 2.49271 10.1693C2.51674 10.1508 2.54777 10.1254 2.58634 10.0922C2.66358 10.0258 2.7615 9.93612 2.87917 9.82431C3.11419 9.60097 3.41488 9.30164 3.76339 8.94864C4.1317 8.57559 4.54478 8.15147 4.98424 7.70025C5.27761 7.39904 5.58273 7.08575 5.89415 6.76752C5.58272 6.44928 5.27759 6.13598 4.98421 5.83476C4.54476 5.38355 4.1317 4.95944 3.76339 4.5864C3.41488 4.2334 3.11419 3.93407 2.87917 3.71074C2.7615 3.59892 2.66358 3.50929 2.58634 3.44281C2.54777 3.40961 2.51674 3.38425 2.49271 3.36577C2.4716 3.34954 2.46099 3.34258 2.45894 3.34123C2.45868 3.34108 2.45853 3.34096 2.45894 3.34123C2.2073 3.19405 1.76572 3.13106 1.31133 3.12515C1.09799 3.12238 0.90473 3.13211 0.764728 3.14261C0.695017 3.14784 0.639243 3.15321 0.60165 3.15717C0.582871 3.15915 0.568682 3.16077 0.559616 3.16184L0.549944 3.16301L0.548391 3.1632C0.282436 3.1977 0.0386882 3.01013 0.00410824 2.74417C-0.0304782 2.47816 0.15713 2.23447 0.423143 2.19989L0.485767 2.68154C0.423143 2.19989 0.423048 2.1999 0.423143 2.19989L0.425557 2.19958L0.43012 2.199L0.445496 2.19714C0.458455 2.19561 0.476761 2.19352 0.499864 2.19109C0.546037 2.18622 0.611577 2.17995 0.692065 2.17391C0.852462 2.16188 1.07514 2.15058 1.32395 2.15381C1.79381 2.15992 2.46156 2.21726 2.94938 2.50267C3.03686 2.55385 3.13287 2.63152 3.22005 2.70655C3.31437 2.78773 3.42516 2.8895 3.54834 3.00655C3.79502 3.24097 4.10458 3.54931 4.45467 3.9039C4.82109 4.27504 5.24052 4.70565 5.68455 5.16153C5.97361 5.4583 6.2731 5.76578 6.57518 6.07452C7.35822 5.28174 8.14192 4.50454 8.81601 3.88014C9.20251 3.52214 9.55904 3.20872 9.86244 2.96964C10.1465 2.74581 10.4405 2.54035 10.6878 2.45997C10.8757 2.39892 11.175 2.37219 11.4757 2.35598C11.677 2.34514 11.9071 2.33807 12.1558 2.33396L12.2127 0Z"
+                  /></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="playlist">
+        <div class="playlist-bar">
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+          <h2 class="playlist-title" id="playlist">Playlist</h2>
+          <div class="parallel-lines">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+        <ul id="playlist-songs"></ul>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  /* colors */
+  --primary-color: #dfdfe2;
+  --secondary-color: #ffffff;
+  --app-background-color: #4d4d62;
+  --background-color: #1b1b32;
+  --foreground-color: #3b3b4f;
+  --highlight-color: #f1be32;
+
+  /* font sizes */
+  --root-font-size: 16px;
+  font-size: var(--root-font-size);
+
+  /* font-families */
+  --font-headline: "Roboto Mono", monospace;
+  --font-family: "Lato", sans-serif;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--app-background-color);
+  color: var(--primary-color);
+  font-family: var(--font-family);
+}
+
+h1 {
+  font-size: 1.125rem;
+  line-height: 1.6;
+}
+
+h2 {
+  font-size: var(--root-font-size);
+}
+
+ul {
+  margin: 0;
+}
+
+.container {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: 5px;
+}
+
+.player,
+.playlist {
+  width: 450px;
+  background-color: var(--background-color);
+  border: 3px solid var(--foreground-color);
+}
+
+.player {
+  height: 260px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 10px;
+}
+
+.player-bar,
+.playlist-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+  width: 100%;
+  height: 30px;
+  background-color: var(--foreground-color);
+}
+
+.parallel-lines {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 6px;
+  padding: 0 5px;
+}
+
+.parallel-lines > div {
+  height: 2px;
+  width: 100%;
+  min-width: 75px;
+  background-color: var(--highlight-color);
+}
+
+.fcc-title,
+.playlist-title {
+  color: var(--secondary-color);
+  margin: 0 10px;
+  font-family: var(--font-headline);
+}
+
+.player-content {
+  display: flex;
+  background-color: var(--foreground-color);
+  width: 430px;
+  height: 200px;
+  column-gap: 13px;
+  align-items: center;
+  justify-content: center;
+}
+
+#player-album-art {
+  background-color: var(--secondary-color);
+  border: 6px solid var(--background-color);
+}
+
+#player-album-art img {
+  width: 150px;
+  display: block;
+}
+
+.player-display {
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+  padding: 14px;
+  background-color: var(--background-color);
+  height: 153px;
+  width: 226px;
+}
+
+.player-display-song-artist {
+  height: 80px;
+}
+
+.player-buttons svg {
+  fill: var(--primary-color);
+}
+
+.playing > svg {
+  fill: var(--highlight-color);
+}
+
+.player-buttons {
+  display: flex;
+  justify-content: space-around;
+}
+
+button {
+  background: transparent;
+  border: none;
+  color: var(--primary-color);
+  cursor: pointer;
+  font-size: var(--root-font-size);
+  outline-color: var(--highlight-color);
+  text-align: center;
+}
+
+.playlist-song {
+  outline-color: var(--highlight-color);
+}
+
+.playlist li:not(:last-child) {
+  border-bottom: 1px solid var(--background-color);
+}
+
+button:focus,
+.playlist-song:focus {
+  outline-style: dashed;
+  outline-width: 2px;
+}
+
+/* Playlist */
+.playlist {
+  height: auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 10px;
+}
+
+#playlist-songs {
+  width: 430px;
+  height: 100%;
+  background-color: var(--foreground-color);
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+  padding: 8px 9px;
+  visibility: visible;
+  justify-content: start;
+  list-style: none;
+}
+
+.playlist-song {
+  display: flex;
+  height: 55px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+}
+
+[aria-current="true"] {
+  background-color: var(--background-color);
+}
+
+[aria-current="true"] p {
+  color: var(--highlight-color);
+}
+
+.playlist-song-info {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  column-gap: 7px;
+  padding: 5px 0;
+  font-family: var(--font-family);
+}
+
+#player-song-title,
+#player-song-artist {
+  margin: 0;
+}
+
+#player-song-artist {
+  color: var(--highlight-color);
+  font-size: 0.75rem;
+}
+
+#player-song-title {
+  font-size: 1.125rem;
+}
+
+.playlist-song-title {
+  font-size: 0.85rem;
+  width: 241px;
+  text-align: left;
+}
+
+.playlist-song-artist {
+  font-size: 0.725rem;
+  width: 80px;
+}
+
+.playlist-song-duration {
+  font-size: 0.725rem;
+  margin: auto;
+  font-family: var(--font-headline);
+  width: 30px;
+}
+
+.playlist-song-delete {
+  padding: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.playlist-song-delete,
+.playlist-song-delete {
+  fill: var(--foreground-color);
+}
+
+.playlist-song-delete:hover circle,
+.playlist-song-delete:focus circle {
+  fill: #ff0000;
+}
+
+@media (max-width: 700px) {
+  .player,
+  .playlist {
+    width: 300px;
+  }
+
+  .player {
+    height: 340px;
+  }
+
+  #playlist-songs {
+    height: 280px;
+    padding: 5px 6px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scrollbar-color: var(--background-color) var(--secondary-color);
+    scrollbar-width: thin;
+  }
+
+  #playlist-songs::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  #playlist-songs::-webkit-scrollbar-track {
+    background: var(--background-color);
+  }
+
+  #playlist-songs::-webkit-scrollbar-thumb {
+    background: var(--secondary-color);
+  }
+
+  h1 {
+    font-size: 0.813rem;
+  }
+
+  h2 {
+    font-size: 0.75rem;
+  }
+
+  .player-bar,
+  .playlist-bar,
+  .player-content,
+  #playlist-songs {
+    width: 280px;
+  }
+
+  .playlist-song {
+    justify-content: space-between;
+  }
+
+  .playlist-song-title {
+    width: 140px;
+  }
+
+  .playlist-song-artist {
+    width: 40px;
+  }
+
+  .playlist-song-duration > button {
+    padding: 0;
+  }
+
+  .player-content {
+    display: inline;
+    position: relative;
+    justify-items: center;
+    height: 100%;
+  }
+
+  #player-album-art {
+    z-index: -100;
+    height: 280px;
+    box-shadow: none;
+    background: #000;
+  }
+
+  #player-album-art img {
+    width: 100%;
+    opacity: 0.6;
+  }
+
+  .player-display-song-artist {
+    padding: 0 10px;
+  }
+
+  .player-display-song-artist > p {
+    white-space: pre-wrap;
+  }
+
+  .player-display {
+    position: absolute;
+    width: 100%;
+    z-index: 1000;
+    background-color: transparent;
+    top: 0;
+    height: 280px;
+    justify-content: space-between;
+    text-align: center;
+  }
+}
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const shuffleButton = document.getElementById("shuffle");
+
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+let userData = {
+  songs: [...allSongs],
+  currentSong: null,
+  songCurrentTime: 0,
+};
+
+const renderSongs = (array) => {
+  const songsHTML = array
+    .map((song)=> {
+      return `
+      <li id="song-${song.id}" class="playlist-song">
+      <button class="playlist-song-info">
+          <span class="playlist-song-title">${song.title}</span>
+          <span class="playlist-song-artist">${song.artist}</span>
+          <span class="playlist-song-duration">${song.duration}</span>
+      </button>
+      <button class="playlist-song-delete" aria-label="Delete ${song.title}">
+          <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#4d4d62"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32587 5.18571C5.7107 4.90301 6.28333 4.94814 6.60485 5.28651L8 6.75478L9.39515 5.28651C9.71667 4.94814 10.2893 4.90301 10.6741 5.18571C11.059 5.4684 11.1103 5.97188 10.7888 6.31026L9.1832 7.99999L10.7888 9.68974C11.1103 10.0281 11.059 10.5316 10.6741 10.8143C10.2893 11.097 9.71667 11.0519 9.39515 10.7135L8 9.24521L6.60485 10.7135C6.28333 11.0519 5.7107 11.097 5.32587 10.8143C4.94102 10.5316 4.88969 10.0281 5.21121 9.68974L6.8168 7.99999L5.21122 6.31026C4.8897 5.97188 4.94102 5.4684 5.32587 5.18571Z" fill="white"/></svg>
+        </button>
+      </li>
+      `;
+    })
+    .join("");
+
+  playlistSongs.innerHTML = songsHTML;
+};
+
+userData?.songs.sort((a,b) => {
+  if (a.title < b.title) {
+    return -1;
+  }
+
+  if (a.title > b.title) {
+    return 1;
+  }
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+});
+
+renderSongs(userData?.songs);
+```