refactor(curriculum): sorting songs functionality in music player project (#53675)

curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json

@@ -93,284 +93,296 @@
       "title": "Step 20"
     },
     {
-      "id": "65a608b7e7c75a04ccf0c23c",
+      "id": "65c64fe6c770a22db893e931",
       "title": "Step 21"
     },
     {
-      "id": "65a6098a3405f206312e28f5",
+      "id": "65a608b7e7c75a04ccf0c23c",
       "title": "Step 22"
     },
     {
-      "id": "65a609f6e23f3b06c608fb57",
+      "id": "65a6098a3405f206312e28f5",
       "title": "Step 23"
     },
     {
-      "id": "65a60aa3efd8fa079c2d1537",
+      "id": "65a609f6e23f3b06c608fb57",
       "title": "Step 24"
     },
     {
-      "id": "65a60b0b8b4f96085ac23463",
+      "id": "65a60aa3efd8fa079c2d1537",
       "title": "Step 25"
     },
     {
-      "id": "653283d07b8f9d294aafa83b",
+      "id": "65a60b0b8b4f96085ac23463",
       "title": "Step 26"
     },
     {
-      "id": "65362bfd67d61d517deef191",
+      "id": "65cf1f2cd796c06057bf3f3c",
       "title": "Step 27"
     },
     {
-      "id": "653635c731206b718659d3d5",
+      "id": "65c6532520cf4f323329b2c6",
       "title": "Step 28"
     },
     {
-      "id": "653639d63a45a077333312c8",
+      "id": "653283d07b8f9d294aafa83b",
       "title": "Step 29"
     },
     {
-      "id": "656472ed8f552d2f2b3f7883",
+      "id": "65362bfd67d61d517deef191",
       "title": "Step 30"
     },
     {
-      "id": "653641509b6e7681a9333245",
+      "id": "653635c731206b718659d3d5",
       "title": "Step 31"
     },
     {
-      "id": "655235c2e607297f00316650",
+      "id": "653639d63a45a077333312c8",
       "title": "Step 32"
     },
     {
-      "id": "65364566e84e378837fbaf2a",
+      "id": "656472ed8f552d2f2b3f7883",
       "title": "Step 33"
     },
     {
-      "id": "65422ba173a18b1bedef1bb6",
+      "id": "653641509b6e7681a9333245",
       "title": "Step 34"
     },
     {
-      "id": "6552127b2576c2fbc5ecc2ea",
+      "id": "655235c2e607297f00316650",
       "title": "Step 35"
     },
     {
-      "id": "65672136535209761a5cf02b",
+      "id": "65364566e84e378837fbaf2a",
       "title": "Step 36"
     },
     {
-      "id": "65521badc7b7470edf952372",
+      "id": "65422ba173a18b1bedef1bb6",
       "title": "Step 37"
     },
     {
-      "id": "65521ec3bb117c195c4f6cb5",
+      "id": "6552127b2576c2fbc5ecc2ea",
       "title": "Step 38"
     },
     {
-      "id": "655220a3fa5c3c200bc8e938",
+      "id": "65672136535209761a5cf02b",
       "title": "Step 39"
     },
     {
-      "id": "6552303a9a78704f8ff072e9",
+      "id": "65521badc7b7470edf952372",
       "title": "Step 40"
     },
     {
-      "id": "655487f686aabfc2a10ba887",
+      "id": "65521ec3bb117c195c4f6cb5",
       "title": "Step 41"
     },
     {
-      "id": "659b0093d7db5a1a1122b7bd",
+      "id": "655220a3fa5c3c200bc8e938",
       "title": "Step 42"
     },
     {
-      "id": "6552385244ccf89b77d6b332",
+      "id": "6552303a9a78704f8ff072e9",
       "title": "Step 43"
     },
     {
-      "id": "655243068222c2c1166b90b0",
+      "id": "655487f686aabfc2a10ba887",
       "title": "Step 44"
     },
     {
-      "id": "655476e1ff522252fdcce5e4",
+      "id": "659b0093d7db5a1a1122b7bd",
       "title": "Step 45"
     },
     {
-      "id": "655479aa3e1e0360ae38b7a6",
+      "id": "6552385244ccf89b77d6b332",
       "title": "Step 46"
     },
     {
-      "id": "65547ee197840478a1b95f4b",
+      "id": "655243068222c2c1166b90b0",
       "title": "Step 47"
     },
     {
-      "id": "6554815fe2472f8bfdab7642",
+      "id": "655476e1ff522252fdcce5e4",
       "title": "Step 48"
     },
     {
-      "id": "655482742cc5499726e3f347",
+      "id": "655479aa3e1e0360ae38b7a6",
       "title": "Step 49"
     },
     {
-      "id": "655483ebf0096ba02b2c3d4c",
+      "id": "65547ee197840478a1b95f4b",
       "title": "Step 50"
     },
     {
-      "id": "655485321913feabbc5f00f8",
+      "id": "6554815fe2472f8bfdab7642",
       "title": "Step 51"
     },
     {
-      "id": "6554860ea4dfbab2f4786fc8",
+      "id": "655482742cc5499726e3f347",
       "title": "Step 52"
     },
     {
-      "id": "65548f747a4cdafd186948d1",
+      "id": "655483ebf0096ba02b2c3d4c",
       "title": "Step 53"
     },
     {
-      "id": "655490f55c36900779336988",
+      "id": "655485321913feabbc5f00f8",
       "title": "Step 54"
     },
     {
-      "id": "65671421254eeb489875cdd8",
+      "id": "6554860ea4dfbab2f4786fc8",
       "title": "Step 55"
     },
     {
-      "id": "655492e6b90c7a198c587943",
+      "id": "65548f747a4cdafd186948d1",
       "title": "Step 56"
     },
     {
-      "id": "655494d5a15d6a2567e1ea60",
+      "id": "655490f55c36900779336988",
       "title": "Step 57"
     },
     {
-      "id": "655495a6bd96e42bc3baa795",
+      "id": "65671421254eeb489875cdd8",
       "title": "Step 58"
     },
     {
-      "id": "6555d17af9ff06a14d399f6d",
+      "id": "655492e6b90c7a198c587943",
       "title": "Step 59"
     },
     {
-      "id": "6555d458687cb3b357834df9",
+      "id": "655494d5a15d6a2567e1ea60",
       "title": "Step 60"
     },
     {
-      "id": "6555d729c9bfd7c3195f1948",
+      "id": "655495a6bd96e42bc3baa795",
       "title": "Step 61"
     },
     {
-      "id": "6555d7e384056dc9c581fadf",
+      "id": "6555d17af9ff06a14d399f6d",
       "title": "Step 62"
     },
     {
-      "id": "6555d8faed60b9d3e4a6cefb",
+      "id": "6555d458687cb3b357834df9",
       "title": "Step 63"
     },
     {
-      "id": "6555dd138e70cae6b546966d",
+      "id": "6555d729c9bfd7c3195f1948",
       "title": "Step 64"
     },
     {
-      "id": "6555de565387a2efe90a6ccc",
+      "id": "6555d7e384056dc9c581fadf",
       "title": "Step 65"
     },
     {
-      "id": "6555e04aeb225bfbae237344",
+      "id": "6555d8faed60b9d3e4a6cefb",
       "title": "Step 66"
     },
     {
-      "id": "6555e0bfe4d69904410f7cd3",
+      "id": "6555dd138e70cae6b546966d",
       "title": "Step 67"
     },
     {
-      "id": "6555e39a5f4c6f138c7d9405",
+      "id": "6555de565387a2efe90a6ccc",
       "title": "Step 68"
     },
     {
-      "id": "6555e57d3e6d9d221c4735be",
+      "id": "6555e04aeb225bfbae237344",
       "title": "Step 69"
     },
     {
-      "id": "6555e6cec786da2aadc11ea0",
+      "id": "6555e0bfe4d69904410f7cd3",
       "title": "Step 70"
     },
     {
-      "id": "6555e7acdbae972d3e8e0f5b",
+      "id": "6555e39a5f4c6f138c7d9405",
       "title": "Step 71"
     },
     {
-      "id": "6555e9197bf1d7416bdd76e0",
+      "id": "6555e57d3e6d9d221c4735be",
       "title": "Step 72"
     },
     {
-      "id": "6555ebf07ec610585a626f72",
+      "id": "6555e6cec786da2aadc11ea0",
       "title": "Step 73"
     },
     {
-      "id": "65571e742fbf4532d8f98e90",
+      "id": "6555e7acdbae972d3e8e0f5b",
       "title": "Step 74"
     },
     {
-      "id": "655720534347cb3f31cdfb3d",
+      "id": "6555e9197bf1d7416bdd76e0",
       "title": "Step 75"
     },
     {
-      "id": "65572399a8e16d50bc2c1ff3",
+      "id": "6555ebf07ec610585a626f72",
       "title": "Step 76"
     },
     {
-      "id": "6557421eb6a7a0f0500e3106",
+      "id": "65571e742fbf4532d8f98e90",
       "title": "Step 77"
     },
     {
-      "id": "655724bac464795a0ad91082",
+      "id": "655720534347cb3f31cdfb3d",
       "title": "Step 78"
     },
     {
-      "id": "655727b2e1e49d6adf584442",
+      "id": "65572399a8e16d50bc2c1ff3",
       "title": "Step 79"
     },
     {
-      "id": "65672adafbaa37a6cef886f7",
+      "id": "6557421eb6a7a0f0500e3106",
       "title": "Step 80"
     },
     {
-      "id": "655729e68e49b277a6b448bd",
+      "id": "655724bac464795a0ad91082",
       "title": "Step 81"
     },
     {
-      "id": "65572bb34a7e488224b937fc",
+      "id": "655727b2e1e49d6adf584442",
       "title": "Step 82"
     },
     {
-      "id": "65572e5aaf022790fb4a81b1",
+      "id": "65672adafbaa37a6cef886f7",
       "title": "Step 83"
     },
     {
-      "id": "655737cd004591b0271d6826",
+      "id": "655729e68e49b277a6b448bd",
       "title": "Step 84"
     },
     {
-      "id": "65573a97c59ddbbf028ca95e",
+      "id": "65572bb34a7e488224b937fc",
       "title": "Step 85"
     },
     {
-      "id": "65573d0abe4d38cd6fa13f44",
+      "id": "65572e5aaf022790fb4a81b1",
       "title": "Step 86"
     },
     {
-      "id": "655b49333d9f265bc1512152",
+      "id": "655737cd004591b0271d6826",
       "title": "Step 87"
     },
     {
-      "id": "655b4bbff1dbf66cb2ed4dac",
+      "id": "65573a97c59ddbbf028ca95e",
       "title": "Step 88"
     },
     {
-      "id": "655b4c8f636d9675953a0388",
+      "id": "65573d0abe4d38cd6fa13f44",
       "title": "Step 89"
     },
     {
-      "id": "655b4dad1d38ff7cdd65cbfe",
+      "id": "655b49333d9f265bc1512152",
       "title": "Step 90"
+    },
+    {
+      "id": "655b4bbff1dbf66cb2ed4dac",
+      "title": "Step 91"
+    },
+    {
+      "id": "655b4c8f636d9675953a0388",
+      "title": "Step 92"
+    },
+    {
+      "id": "655b4dad1d38ff7cdd65cbfe",
+      "title": "Step 93"
     }
   ],
   "helpCategory": "JavaScript"

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 26
+title: Step 29
 challengeType: 0
-dashedName: step-26
+dashedName: step-29
 ---
 
 # --description--
@@ -656,18 +656,22 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 
 ```

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 27
+title: Step 30
 challengeType: 0
-dashedName: step-27
+dashedName: step-30
 ---
 
 # --description--
@@ -664,18 +664,22 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 
 ```

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 28
+title: Step 31
 challengeType: 0
-dashedName: step-28
+dashedName: step-31
 ---
 
 # --description--
@@ -647,18 +647,22 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 
 ```

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 29
+title: Step 32
 challengeType: 0
-dashedName: step-29
+dashedName: step-32
 ---
 
 # --description--
@@ -645,18 +645,22 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 
 ```

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 31
+title: Step 34
 challengeType: 0
-dashedName: step-31
+dashedName: step-34
 ---
 
 # --description--
@@ -645,18 +645,22 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 
 ```

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 33
+title: Step 36
 challengeType: 0
-dashedName: step-33
+dashedName: step-36
 ---
 
 # --description--
@@ -660,18 +660,22 @@ const renderSongs = (array) => {
 
 --fcc-editable-region--
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
-  
-renderSongs(userData?.songs);
+    return 0;
+  });
+
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 
 ```

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 34
+title: Step 37
 challengeType: 0
-dashedName: step-34
+dashedName: step-37
 ---
 
 # --description--
@@ -656,17 +656,21 @@ playButton.addEventListener("click", () => {
   --fcc-editable-region--
 });
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
+
+  return userData?.songs;
+};
 
 
 renderSongs(userData?.songs);

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 35
+title: Step 38
 challengeType: 0
-dashedName: step-35
+dashedName: step-38
 ---
 
 # --description--
@@ -666,17 +666,21 @@ playButton.addEventListener("click", () => {
 --fcc-editable-region--
 });
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
+
+  return userData?.songs;
+};
 
 
 renderSongs(userData?.songs);

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 37
+title: Step 40
 challengeType: 0
-dashedName: step-37
+dashedName: step-40
 ---
 
 # --description--
@@ -674,18 +674,22 @@ playButton.addEventListener("click", () => {
   }
 });
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 
 ```

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 38
+title: Step 41
 challengeType: 0
-dashedName: step-38
+dashedName: step-41
 ---
 
 # --description--
@@ -664,18 +664,22 @@ playButton.addEventListener("click", () => {
   }
 });
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 
 ```

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 39
+title: Step 42
 challengeType: 0
-dashedName: step-39
+dashedName: step-42
 ---
 
 # --description--
@@ -671,18 +671,22 @@ playButton.addEventListener("click", () => {
   }
 });
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 
 ```

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 40
+title: Step 43
 challengeType: 0
-dashedName: step-40
+dashedName: step-43
 ---
 
 # --description--
@@ -677,17 +677,21 @@ playButton.addEventListener("click", () => {
 
 --fcc-editable-region--
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 32
+title: Step 35
 challengeType: 0
-dashedName: step-32
+dashedName: step-35
 ---
 
 # --description--
@@ -651,18 +651,22 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 
 ```

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 43
+title: Step 46
 challengeType: 0
-dashedName: step-43
+dashedName: step-46
 ---
 
 # --description--
@@ -685,17 +685,21 @@ playButton.addEventListener("click", () => {
 
 pauseButton.addEventListener("click",  pauseSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 44
+title: Step 47
 challengeType: 0
-dashedName: step-44
+dashedName: step-47
 ---
 
 # --description--
@@ -685,17 +685,21 @@ playButton.addEventListener("click", () => {
 
 pauseButton.addEventListener("click",  pauseSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 45
+title: Step 48
 challengeType: 0
-dashedName: step-45
+dashedName: step-48
 ---
 
 # --description--
@@ -690,17 +690,21 @@ playButton.addEventListener("click", () => {
 
 pauseButton.addEventListener("click",  pauseSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 46
+title: Step 49
 challengeType: 0
-dashedName: step-46
+dashedName: step-49
 ---
 
 # --description--
@@ -695,17 +695,21 @@ playButton.addEventListener("click", () => {
 
 pauseButton.addEventListener("click",  pauseSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 47
+title: Step 50
 challengeType: 0
-dashedName: step-47
+dashedName: step-50
 ---
 
 # --description--
@@ -693,17 +693,21 @@ pauseButton.addEventListener("click",  pauseSong);
   
 --fcc-editable-region--
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 48
+title: Step 51
 challengeType: 0
-dashedName: step-48
+dashedName: step-51
 ---
 
 # --description--
@@ -697,17 +697,21 @@ pauseButton.addEventListener("click",  pauseSong);
 
 nextButton.addEventListener("click", playNextSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 49
+title: Step 52
 challengeType: 0
-dashedName: step-49
+dashedName: step-52
 ---
 
 # --description--
@@ -709,17 +709,21 @@ pauseButton.addEventListener("click",  pauseSong);
 
 nextButton.addEventListener("click", playNextSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 50
+title: Step 53
 challengeType: 0
-dashedName: step-50
+dashedName: step-53
 ---
 
 # --description--
@@ -697,17 +697,21 @@ pauseButton.addEventListener("click",  pauseSong);
 
 nextButton.addEventListener("click", playNextSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 51
+title: Step 54
 challengeType: 0
-dashedName: step-51
+dashedName: step-54
 ---
 
 # --description--
@@ -701,17 +701,21 @@ nextButton.addEventListener("click", playNextSong);
 
 --fcc-editable-region--
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 52
+title: Step 55
 challengeType: 0
-dashedName: step-52
+dashedName: step-55
 ---
 
 # --description--
@@ -716,17 +716,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 41
+title: Step 44
 challengeType: 0
-dashedName: step-41
+dashedName: step-44
 ---
 
 # --description--
@@ -671,17 +671,21 @@ playButton.addEventListener("click", () => {
 
 pauseButton.addEventListener("click",  pauseSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 53
+title: Step 56
 challengeType: 0
-dashedName: step-53
+dashedName: step-56
 ---
 
 # --description--
@@ -708,17 +708,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 54
+title: Step 57
 challengeType: 0
-dashedName: step-54
+dashedName: step-57
 ---
 
 # --description--
@@ -722,17 +722,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 56
+title: Step 59
 challengeType: 0
-dashedName: step-56
+dashedName: step-59
 ---
 
 # --description--
@@ -715,17 +715,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 57
+title: Step 60
 challengeType: 0
-dashedName: step-57
+dashedName: step-60
 ---
 
 # --description--
@@ -704,17 +704,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 58
+title: Step 61
 challengeType: 0
-dashedName: step-58
+dashedName: step-61
 ---
 
 # --description--
@@ -722,17 +722,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 59
+title: Step 62
 challengeType: 0
-dashedName: step-59
+dashedName: step-62
 ---
 
 # --description--
@@ -732,17 +732,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 60
+title: Step 63
 challengeType: 0
-dashedName: step-60
+dashedName: step-63
 ---
 
 # --description--
@@ -726,17 +726,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 61
+title: Step 64
 challengeType: 0
-dashedName: step-61
+dashedName: step-64
 ---
 
 # --description--
@@ -741,17 +741,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 62
+title: Step 65
 challengeType: 0
-dashedName: step-62
+dashedName: step-65
 ---
 
 # --description--
@@ -715,17 +715,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 63
+title: Step 66
 challengeType: 0
-dashedName: step-63
+dashedName: step-66
 ---
 
 # --description--
@@ -735,17 +735,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 64
+title: Step 67
 challengeType: 0
-dashedName: step-64
+dashedName: step-67
 ---
 
 # --description--
@@ -731,17 +731,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 65
+title: Step 68
 challengeType: 0
-dashedName: step-65
+dashedName: step-68
 ---
 
 # --description--
@@ -738,17 +738,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 66
+title: Step 69
 challengeType: 0
-dashedName: step-66
+dashedName: step-69
 ---
 
 # --description--
@@ -723,17 +723,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 67
+title: Step 70
 challengeType: 0
-dashedName: step-67
+dashedName: step-70
 ---
 
 # --description--
@@ -745,17 +745,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e39a5f4c6f138c7d9405.md

@@ -1,8 +1,8 @@
 ---
 id: 6555e39a5f4c6f138c7d9405
-title: Step 68
+title: Step 71
 challengeType: 0
-dashedName: step-68
+dashedName: step-71
 ---
 
 # --description--
@@ -755,17 +755,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 69
+title: Step 72
 challengeType: 0
-dashedName: step-69
+dashedName: step-72
 ---
 
 # --description--
@@ -738,17 +738,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 70
+title: Step 73
 challengeType: 0
-dashedName: step-70
+dashedName: step-73
 ---
 
 # --description--
@@ -757,17 +757,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 71
+title: Step 74
 challengeType: 0
-dashedName: step-71
+dashedName: step-74
 ---
 
 # --description--
@@ -750,17 +750,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 --fcc-editable-region--
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 72
+title: Step 75
 challengeType: 0
-dashedName: step-72
+dashedName: step-75
 ---
 
 # --description--
@@ -764,17 +764,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 73
+title: Step 76
 challengeType: 0
-dashedName: step-73
+dashedName: step-76
 ---
 
 # --description--
@@ -777,17 +777,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 74
+title: Step 77
 challengeType: 0
-dashedName: step-74
+dashedName: step-77
 ---
 
 # --description--
@@ -763,17 +763,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 75
+title: Step 78
 challengeType: 0
-dashedName: step-75
+dashedName: step-78
 ---
 
 # --description--
@@ -748,17 +748,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 76
+title: Step 79
 challengeType: 0
-dashedName: step-76
+dashedName: step-79
 ---
 
 # --description--
@@ -773,17 +773,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 78
+title: Step 81
 challengeType: 0
-dashedName: step-78
+dashedName: step-81
 ---
 
 # --description--
@@ -756,17 +756,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 79
+title: Step 82
 challengeType: 0
-dashedName: step-79
+dashedName: step-82
 ---
 
 # --description--
@@ -787,17 +787,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 81
+title: Step 84
 challengeType: 0
-dashedName: step-81
+dashedName: step-84
 ---
 
 # --description--
@@ -775,17 +775,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 82
+title: Step 85
 challengeType: 0
-dashedName: step-82
+dashedName: step-85
 ---
 
 # --description--
@@ -791,17 +791,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 83
+title: Step 86
 challengeType: 0
-dashedName: step-83
+dashedName: step-86
 ---
 
 # --description--
@@ -778,17 +778,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 84
+title: Step 87
 challengeType: 0
-dashedName: step-84
+dashedName: step-87
 ---
 
 # --description--
@@ -775,17 +775,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md

@@ -1,15 +1,15 @@
 ---
 id: 65573a97c59ddbbf028ca95e
-title: Step 85
+title: Step 88
 challengeType: 0
-dashedName: step-85
+dashedName: step-88
 ---
 
 # --description--
 
 Finally, you should render the songs again, update the play button's accessible text, and remove the reset button from the playlist. You also need to remove the `resetButton` from the DOM.
 
-Call the `renderSongs()` function with `userData?.songs` as an argument to render the songs again.
+Call the `renderSongs()` function with `sortSongs()` as an argument to render the songs again in alphabetical order.
 
 Call the `setPlayButtonAccessibleText()` function to update the play button's accessible text.
 
@@ -25,22 +25,22 @@ You should not modify the existing event listener and its content.
 assert.match(code, /resetButton\.addEventListener\(\s*('|")click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*userData\.songs\s*=\s*\[\s*\.\.\.allSongs\s*\]\s*;?\s*.*\s*.*\s*.*\s*\}\s*\);?/)
 ```
 
-You should call the `renderSongs` function with `userData?.songs`.
+You should call the `renderSongs` function with `sortSongs()`.
 
 ```js
-assert.match(code, /resetButton\.addEventListener\(\s*('|")click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*userData\.songs\s*=\s*\[\s*\.\.\.allSongs\s*\]\s*;?\s*renderSongs\(\s*userData\?\.songs\s*\);?\s*.*\s*.*\s*\}\s*\);?/)
+assert.match(code, /resetButton\.addEventListener\(\s*('|")click\1,\s*\(\s*\)\s*=>\s*\{\s*userData\.songs\s*=\s*\[\s*\.\.\.allSongs\s*\]\s*;?\s*renderSongs\(\s*sortSongs\(\)\s*\);?\s*.*\s*.*\s*\}\s*\);?/)
 ```
 
 You should call the `setPlayButtonAccessibleText` function.
 
 ```js
-assert.match(code, /resetButton\.addEventListener\(\s*('|")click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*userData\.songs\s*=\s*\[\s*\.\.\.allSongs\s*\]\s*;?\s*renderSongs\(\s*userData\?\.songs\s*\);?\s*setPlayButtonAccessibleText\(\s*\);?\s*.*\s*\}\s*\);?/)
+assert.match(code, /resetButton\.addEventListener\(\s*('|")click\1,\s*\(\s*\)\s*=>\s*\{\s*userData\.songs\s*=\s*\[\s*\.\.\.allSongs\s*\]\s*;?\s*renderSongs\(\s*sortSongs\(\)\s*\);?\s*setPlayButtonAccessibleText\(\s*\);?\s*.*\s*\}\s*\);?/)
 ```
 
 You should use the `remove()` method to remove the `resetButton` from the DOM.
 
 ```js
-assert.match(code, /resetButton\.addEventListener\(\s*('|")click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*userData\.songs\s*=\s*\[\s*\.\.\.allSongs\s*\]\s*;?\s*renderSongs\(\s*userData\?\.songs\s*\);?\s*setPlayButtonAccessibleText\(\s*\);?\s*resetButton\.remove\(\s*\);?\s*\}\s*\);?/)
+assert.match(code, /resetButton\.addEventListener\(\s*('|")click\1,\s*\(\s*\)\s*=>\s*\{\s*userData\.songs\s*=\s*\[\s*\.\.\.allSongs\s*\]\s*;?\s*renderSongs\(\s*sortSongs\(\)\s*\);?\s*setPlayButtonAccessibleText\(\s*\);?\s*resetButton\.remove\(\s*\);?\s*\}\s*\);?/)
 ```
 
 # --seed--
@@ -794,17 +794,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 86
+title: Step 89
 challengeType: 0
-dashedName: step-86
+dashedName: step-89
 ---
 
 # --description--
@@ -705,7 +705,7 @@ const deleteSong = (id) => {
     resetButton.addEventListener("click", () => {
       userData.songs = [...allSongs];
 
-      renderSongs(userData?.songs); 
+      renderSongs(sortSongs()); 
       setPlayButtonAccessibleText();
       resetButton.remove();
     });
@@ -790,18 +790,22 @@ shuffleButton.addEventListener("click", shuffle);
 
 --fcc-editable-region--
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 setPlayButtonAccessibleText();
 ```

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 77
+title: Step 80
 challengeType: 0
-dashedName: step-77
+dashedName: step-80
 ---
 
 # --description--
@@ -752,17 +752,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 87
+title: Step 90
 challengeType: 0
-dashedName: step-87
+dashedName: step-90
 ---
 
 # --description--
@@ -674,7 +674,7 @@ const deleteSong = (id) => {
     resetButton.addEventListener("click", () => {
       userData.songs = [...allSongs];
 
-      renderSongs(userData?.songs); 
+      renderSongs(sortSongs()); 
       setPlayButtonAccessibleText();
       resetButton.remove();
     });
@@ -761,18 +761,22 @@ audio.addEventListener("ended", () => {
 });
 --fcc-editable-region--
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 setPlayButtonAccessibleText();
 ```

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 88
+title: Step 91
 challengeType: 0
-dashedName: step-88
+dashedName: step-91
 ---
 
 # --description--
@@ -659,7 +659,7 @@ const deleteSong = (id) => {
     resetButton.addEventListener("click", () => {
       userData.songs = [...allSongs];
 
-      renderSongs(userData?.songs); 
+      renderSongs(sortSongs()); 
       setPlayButtonAccessibleText();
       resetButton.remove();
     });
@@ -748,18 +748,22 @@ audio.addEventListener("ended", () => {
 --fcc-editable-region--
 });
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 setPlayButtonAccessibleText();
 ```

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md

@@ -1,8 +1,8 @@
 ---
 id: 655b4c8f636d9675953a0388
-title: Step 89
+title: Step 92
 challengeType: 0
-dashedName: step-89
+dashedName: step-92
 ---
 
 # --description--
@@ -671,7 +671,7 @@ const deleteSong = (id) => {
     resetButton.addEventListener("click", () => {
       userData.songs = [...allSongs];
 
-      renderSongs(userData?.songs); 
+      renderSongs(sortSongs()); 
       setPlayButtonAccessibleText();
       resetButton.remove();
     });
@@ -764,18 +764,22 @@ audio.addEventListener("ended", () => {
 --fcc-editable-region--
 });
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 setPlayButtonAccessibleText();
 ```

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 90
+title: Step 93
 challengeType: 0
-dashedName: step-90
+dashedName: step-93
 ---
 
 # --description--
@@ -712,7 +712,7 @@ const deleteSong = (id) => {
     resetButton.addEventListener("click", () => {
       userData.songs = [...allSongs];
 
-      renderSongs(userData?.songs); 
+      renderSongs(sortSongs()); 
       setPlayButtonAccessibleText();
       resetButton.remove();
     });
@@ -809,19 +809,23 @@ audio.addEventListener("ended", () => {
     }
 });
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 setPlayButtonAccessibleText();
 ```
 
@@ -1494,7 +1498,7 @@ const deleteSong = (id) => {
     resetButton.addEventListener("click", () => {
       userData.songs = [...allSongs];
 
-      renderSongs(userData?.songs); 
+      renderSongs(sortSongs()); 
       setPlayButtonAccessibleText();
       resetButton.remove();
     });
@@ -1592,18 +1596,22 @@ audio.addEventListener("ended", () => {
     }
 });
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 setPlayButtonAccessibleText();
 ```

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 30
+title: Step 33
 challengeType: 0
-dashedName: step-30
+dashedName: step-33
 ---
 
 # --description--
@@ -654,18 +654,22 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 
 ```

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 55
+title: Step 58
 challengeType: 0
-dashedName: step-55
+dashedName: step-58
 ---
 
 # --description--
@@ -707,17 +707,21 @@ nextButton.addEventListener("click", playNextSong);
 
 previousButton.addEventListener("click", playPreviousSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 36
+title: Step 39
 challengeType: 0
-dashedName: step-36
+dashedName: step-39
 ---
 
 # --description--
@@ -654,17 +654,21 @@ playButton.addEventListener("click", () => {
   }
 });
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
+
+  return userData?.songs;
+};
 
 
 renderSongs(userData?.songs);

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 80
+title: Step 83
 challengeType: 0
-dashedName: step-80
+dashedName: step-83
 ---
 
 # --description--
@@ -784,17 +784,21 @@ previousButton.addEventListener("click", playPreviousSong);
 
 shuffleButton.addEventListener("click", shuffle);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

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 42
+title: Step 45
 challengeType: 0
-dashedName: step-42
+dashedName: step-45
 ---
 
 # --description--
@@ -678,17 +678,21 @@ playButton.addEventListener("click", () => {
 
 pauseButton.addEventListener("click",  pauseSong);
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
-  return 0;
-});
+    return 0;
+  });
 
-renderSongs(userData?.songs);
+  return userData?.songs;
+};
+
+renderSongs(sortSongs());
 ```

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a608b7e7c75a04ccf0c23c.md

@@ -1,8 +1,8 @@
 ---
 id: 65a608b7e7c75a04ccf0c23c
-title: Step 21
+title: Step 22
 challengeType: 0
-dashedName: step-21
+dashedName: step-22
 ---
 
 # --description--
@@ -16,14 +16,14 @@ const names = ["Tom", "Jessica", "Quincy", "Naomi"];
 names.sort() // ["Jessica", "Naomi", "Quincy", "Tom"]
 ```
 
-Add the `sort()` method to `userData?.songs`. 
+Inside your `sortSongs` function, add the `sort()` method to `userData?.songs`. 
 
 # --hints--
 
 You should add the `sort()` method to `userData?.songs`.
 
 ```js
-assert.match(code, /userData\?\.songs\.sort\(.*\);?/);
+assert.match(code, /userData\?.songs\.sort\(/);
 ```
 
 # --seed--
@@ -636,9 +636,11 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
+const sortSongs = () => {
 --fcc-editable-region--
 
 --fcc-editable-region--
+};
 
 renderSongs(userData?.songs);
 ```

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a6098a3405f206312e28f5.md

@@ -1,8 +1,8 @@
 ---
 id: 65a6098a3405f206312e28f5
-title: Step 22
+title: Step 23
 challengeType: 0
-dashedName: step-22
+dashedName: step-23
 ---
 
 # --description--
@@ -651,9 +651,11 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
---fcc-editable-region--
-userData?.songs.sort();
---fcc-editable-region--
+const sortSongs = () => {
+  --fcc-editable-region--
+  userData?.songs.sort();
+  --fcc-editable-region--
+};
 
 renderSongs(userData?.songs);
 ```

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a609f6e23f3b06c608fb57.md

@@ -1,8 +1,8 @@
 ---
 id: 65a609f6e23f3b06c608fb57
-title: Step 23
+title: Step 24
 challengeType: 0
-dashedName: step-23
+dashedName: step-24
 ---
 
 # --description--
@@ -667,11 +667,13 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
---fcc-editable-region--
-userData?.songs.sort((a,b) => {
+const sortSongs = () => {
+  --fcc-editable-region--
+  userData?.songs.sort((a,b) => {
 
-});
---fcc-editable-region--
+  });
+  --fcc-editable-region--
+};
 
 renderSongs(userData?.songs);
 ```

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60aa3efd8fa079c2d1537.md

@@ -1,8 +1,8 @@
 ---
 id: 65a60aa3efd8fa079c2d1537
-title: Step 24
+title: Step 25
 challengeType: 0
-dashedName: step-24
+dashedName: step-25
 ---
 
 # --description--
@@ -660,16 +660,16 @@ const renderSongs = (array) => {
 
   playlistSongs.innerHTML = songsHTML;
 };
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
-
-  --fcc-editable-region--
-
-  --fcc-editable-region--
-});
+    --fcc-editable-region--
 
+    --fcc-editable-region--
+  });
+}
 renderSongs(userData?.songs);
 ```

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60b0b8b4f96085ac23463.md

@@ -1,8 +1,8 @@
 ---
 id: 65a60b0b8b4f96085ac23463
-title: Step 25
+title: Step 26
 challengeType: 0
-dashedName: step-25
+dashedName: step-26
 ---
 
 # --description--
@@ -31,8 +31,6 @@ fruits.sort((a, b) => {
 
 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.
@@ -651,19 +649,21 @@ const renderSongs = (array) => {
   playlistSongs.innerHTML = songsHTML;
 };
 
-userData?.songs.sort((a,b) => {
-  if (a.title < b.title) {
-    return -1;
-  }
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
 
-  if (a.title > b.title) {
-    return 1;
-  }
+    if (a.title > b.title) {
+      return 1;
+    }
 
---fcc-editable-region--
+  --fcc-editable-region--
 
---fcc-editable-region--
-});
+  --fcc-editable-region--
+  });
+};
 
 renderSongs(userData?.songs);
 ```

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65c64fe6c770a22db893e931.md

@@ -0,0 +1,643 @@
+---
+id: 65c64fe6c770a22db893e931
+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.
+
+Start by creating an arrow function called `sortSongs`. 
+
+# --hints--
+
+You should have a function called `sortSongs`.
+
+```js
+assert.isFunction(sortSongs);
+```
+
+Your `sortSongs` function should use arrow function syntax.
+
+```js
+assert.match(code, /const\s+sortSongs\s*=\s*\(\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--
+
+--fcc-editable-region--
+
+renderSongs(userData?.songs);
+```

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65c6532520cf4f323329b2c6.md

@@ -0,0 +1,653 @@
+---
+id: 65c6532520cf4f323329b2c6
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Right now the song order has not changed. That is because the updates you made using the `sort` method will not happen until the `sortSongs` function is called. 
+
+Change your `renderSongs` function to call the `sortSongs` function.
+
+Now you should see the songs in alphabetical order.
+
+# --hints--
+
+You should have `renderSongs(sortSongs())`.
+
+```js
+assert.match(code, /renderSongs\(sortSongs\(\)\)/);
+```
+
+# --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;
+};
+
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
+
+    if (a.title > b.title) {
+      return 1;
+    }
+
+    return 0;
+  });
+
+  return userData?.songs;
+};
+
+--fcc-editable-region--
+renderSongs(userData?.songs);
+--fcc-editable-region--
+```

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65cf1f2cd796c06057bf3f3c.md

@@ -0,0 +1,648 @@
+---
+id: 65cf1f2cd796c06057bf3f3c
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+The last step for the `sortSongs` function is to return `userData?.songs`. 
+
+# --hints--
+
+You should return `userData?.songs` at the end of the `sortSongs` function.
+
+```js
+assert.match(code, /return\s+userData\?.songs;?/);
+```
+
+# --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;
+};
+
+const sortSongs = () => {
+  userData?.songs.sort((a,b) => {
+    if (a.title < b.title) {
+      return -1;
+    }
+
+    if (a.title > b.title) {
+      return 1;
+    }
+
+    return 0;
+  });
+--fcc-editable-region--
+
+--fcc-editable-region--
+};
+
+renderSongs(userData?.songs);
+```