diff --git a/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json b/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json index a87a7aa1057..2eee62de18e 100644 --- a/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json +++ b/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json @@ -93,264 +93,284 @@ "title": "Step 20" }, { - "id": "653283d07b8f9d294aafa83b", + "id": "65a608b7e7c75a04ccf0c23c", "title": "Step 21" }, { - "id": "65362bfd67d61d517deef191", + "id": "65a6098a3405f206312e28f5", "title": "Step 22" }, { - "id": "653635c731206b718659d3d5", + "id": "65a609f6e23f3b06c608fb57", "title": "Step 23" }, { - "id": "653639d63a45a077333312c8", + "id": "65a60aa3efd8fa079c2d1537", "title": "Step 24" }, { - "id": "656472ed8f552d2f2b3f7883", + "id": "65a60b0b8b4f96085ac23463", "title": "Step 25" }, { - "id": "653641509b6e7681a9333245", + "id": "653283d07b8f9d294aafa83b", "title": "Step 26" }, { - "id": "655235c2e607297f00316650", + "id": "65362bfd67d61d517deef191", "title": "Step 27" }, { - "id": "65364566e84e378837fbaf2a", + "id": "653635c731206b718659d3d5", "title": "Step 28" }, { - "id": "65422ba173a18b1bedef1bb6", + "id": "653639d63a45a077333312c8", "title": "Step 29" }, { - "id": "6552127b2576c2fbc5ecc2ea", + "id": "656472ed8f552d2f2b3f7883", "title": "Step 30" }, { - "id": "65672136535209761a5cf02b", + "id": "653641509b6e7681a9333245", "title": "Step 31" }, { - "id": "65521badc7b7470edf952372", + "id": "655235c2e607297f00316650", "title": "Step 32" }, { - "id": "65521ec3bb117c195c4f6cb5", + "id": "65364566e84e378837fbaf2a", "title": "Step 33" }, { - "id": "655220a3fa5c3c200bc8e938", + "id": "65422ba173a18b1bedef1bb6", "title": "Step 34" }, { - "id": "6552303a9a78704f8ff072e9", + "id": "6552127b2576c2fbc5ecc2ea", "title": "Step 35" }, { - "id": "655487f686aabfc2a10ba887", + "id": "65672136535209761a5cf02b", "title": "Step 36" }, { - "id": "659b0093d7db5a1a1122b7bd", + "id": "65521badc7b7470edf952372", "title": "Step 37" }, { - "id": "6552385244ccf89b77d6b332", + "id": "65521ec3bb117c195c4f6cb5", "title": "Step 38" }, { - "id": "655243068222c2c1166b90b0", + "id": "655220a3fa5c3c200bc8e938", "title": "Step 39" }, { - "id": "655476e1ff522252fdcce5e4", + "id": "6552303a9a78704f8ff072e9", "title": "Step 40" }, { - "id": "655479aa3e1e0360ae38b7a6", + "id": "655487f686aabfc2a10ba887", "title": "Step 41" }, { - "id": "65547ee197840478a1b95f4b", + "id": "659b0093d7db5a1a1122b7bd", "title": "Step 42" }, { - "id": "6554815fe2472f8bfdab7642", + "id": "6552385244ccf89b77d6b332", "title": "Step 43" }, { - "id": "655482742cc5499726e3f347", + "id": "655243068222c2c1166b90b0", "title": "Step 44" }, { - "id": "655483ebf0096ba02b2c3d4c", + "id": "655476e1ff522252fdcce5e4", "title": "Step 45" }, { - "id": "655485321913feabbc5f00f8", + "id": "655479aa3e1e0360ae38b7a6", "title": "Step 46" }, { - "id": "6554860ea4dfbab2f4786fc8", + "id": "65547ee197840478a1b95f4b", "title": "Step 47" }, { - "id": "65548f747a4cdafd186948d1", + "id": "6554815fe2472f8bfdab7642", "title": "Step 48" }, { - "id": "655490f55c36900779336988", + "id": "655482742cc5499726e3f347", "title": "Step 49" }, { - "id": "65671421254eeb489875cdd8", + "id": "655483ebf0096ba02b2c3d4c", "title": "Step 50" }, { - "id": "655492e6b90c7a198c587943", + "id": "655485321913feabbc5f00f8", "title": "Step 51" }, { - "id": "655494d5a15d6a2567e1ea60", + "id": "6554860ea4dfbab2f4786fc8", "title": "Step 52" }, { - "id": "655495a6bd96e42bc3baa795", + "id": "65548f747a4cdafd186948d1", "title": "Step 53" }, { - "id": "6555d17af9ff06a14d399f6d", + "id": "655490f55c36900779336988", "title": "Step 54" }, { - "id": "6555d458687cb3b357834df9", + "id": "65671421254eeb489875cdd8", "title": "Step 55" }, { - "id": "6555d729c9bfd7c3195f1948", + "id": "655492e6b90c7a198c587943", "title": "Step 56" }, { - "id": "6555d7e384056dc9c581fadf", + "id": "655494d5a15d6a2567e1ea60", "title": "Step 57" }, { - "id": "6555d8faed60b9d3e4a6cefb", + "id": "655495a6bd96e42bc3baa795", "title": "Step 58" }, { - "id": "6555dd138e70cae6b546966d", + "id": "6555d17af9ff06a14d399f6d", "title": "Step 59" }, { - "id": "6555de565387a2efe90a6ccc", + "id": "6555d458687cb3b357834df9", "title": "Step 60" }, { - "id": "6555e04aeb225bfbae237344", + "id": "6555d729c9bfd7c3195f1948", "title": "Step 61" }, { - "id": "6555e0bfe4d69904410f7cd3", + "id": "6555d7e384056dc9c581fadf", "title": "Step 62" }, { - "id": "6555e39a5f4c6f138c7d9405", + "id": "6555d8faed60b9d3e4a6cefb", "title": "Step 63" }, { - "id": "6555e57d3e6d9d221c4735be", + "id": "6555dd138e70cae6b546966d", "title": "Step 64" }, { - "id": "6555e6cec786da2aadc11ea0", + "id": "6555de565387a2efe90a6ccc", "title": "Step 65" }, { - "id": "6555e7acdbae972d3e8e0f5b", + "id": "6555e04aeb225bfbae237344", "title": "Step 66" }, { - "id": "6555e9197bf1d7416bdd76e0", + "id": "6555e0bfe4d69904410f7cd3", "title": "Step 67" }, { - "id": "6555ebf07ec610585a626f72", + "id": "6555e39a5f4c6f138c7d9405", "title": "Step 68" }, { - "id": "65571e742fbf4532d8f98e90", + "id": "6555e57d3e6d9d221c4735be", "title": "Step 69" }, { - "id": "655720534347cb3f31cdfb3d", + "id": "6555e6cec786da2aadc11ea0", "title": "Step 70" }, { - "id": "65572399a8e16d50bc2c1ff3", + "id": "6555e7acdbae972d3e8e0f5b", "title": "Step 71" }, { - "id": "6557421eb6a7a0f0500e3106", + "id": "6555e9197bf1d7416bdd76e0", "title": "Step 72" }, { - "id": "655724bac464795a0ad91082", + "id": "6555ebf07ec610585a626f72", "title": "Step 73" }, { - "id": "655727b2e1e49d6adf584442", + "id": "65571e742fbf4532d8f98e90", "title": "Step 74" }, { - "id": "65672adafbaa37a6cef886f7", + "id": "655720534347cb3f31cdfb3d", "title": "Step 75" }, { - "id": "655729e68e49b277a6b448bd", + "id": "65572399a8e16d50bc2c1ff3", "title": "Step 76" }, { - "id": "65572bb34a7e488224b937fc", + "id": "6557421eb6a7a0f0500e3106", "title": "Step 77" }, { - "id": "65572e5aaf022790fb4a81b1", + "id": "655724bac464795a0ad91082", "title": "Step 78" }, { - "id": "655737cd004591b0271d6826", + "id": "655727b2e1e49d6adf584442", "title": "Step 79" }, { - "id": "65573a97c59ddbbf028ca95e", + "id": "65672adafbaa37a6cef886f7", "title": "Step 80" }, { - "id": "65573d0abe4d38cd6fa13f44", + "id": "655729e68e49b277a6b448bd", "title": "Step 81" }, { - "id": "655b49333d9f265bc1512152", + "id": "65572bb34a7e488224b937fc", "title": "Step 82" }, { - "id": "655b4bbff1dbf66cb2ed4dac", + "id": "65572e5aaf022790fb4a81b1", "title": "Step 83" }, { - "id": "655b4c8f636d9675953a0388", + "id": "655737cd004591b0271d6826", "title": "Step 84" }, { - "id": "655b4dad1d38ff7cdd65cbfe", + "id": "65573a97c59ddbbf028ca95e", "title": "Step 85" + }, + { + "id": "65573d0abe4d38cd6fa13f44", + "title": "Step 86" + }, + { + "id": "655b49333d9f265bc1512152", + "title": "Step 87" + }, + { + "id": "655b4bbff1dbf66cb2ed4dac", + "title": "Step 88" + }, + { + "id": "655b4c8f636d9675953a0388", + "title": "Step 89" + }, + { + "id": "655b4dad1d38ff7cdd65cbfe", + "title": "Step 90" } ], "helpCategory": "JavaScript" diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653283d07b8f9d294aafa83b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653283d07b8f9d294aafa83b.md index e1d229ef83b..beef7c8f403 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653283d07b8f9d294aafa83b.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653283d07b8f9d294aafa83b.md @@ -1,8 +1,8 @@ --- id: 653283d07b8f9d294aafa83b -title: Step 21 +title: Step 26 challengeType: 0 -dashedName: step-21 +dashedName: step-26 --- # --description-- @@ -656,6 +656,18 @@ const renderSongs = (array) => { playlistSongs.innerHTML = songsHTML; }; +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65362bfd67d61d517deef191.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65362bfd67d61d517deef191.md index f13ad363700..1cb88c1e094 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65362bfd67d61d517deef191.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65362bfd67d61d517deef191.md @@ -1,8 +1,8 @@ --- id: 65362bfd67d61d517deef191 -title: Step 22 +title: Step 27 challengeType: 0 -dashedName: step-22 +dashedName: step-27 --- # --description-- @@ -664,6 +664,18 @@ const renderSongs = (array) => { playlistSongs.innerHTML = songsHTML; }; +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653635c731206b718659d3d5.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653635c731206b718659d3d5.md index 1cb3c6acc0c..61f21115b16 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653635c731206b718659d3d5.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653635c731206b718659d3d5.md @@ -1,8 +1,8 @@ --- id: 653635c731206b718659d3d5 -title: Step 23 +title: Step 28 challengeType: 0 -dashedName: step-23 +dashedName: step-28 --- # --description-- @@ -647,6 +647,18 @@ const renderSongs = (array) => { playlistSongs.innerHTML = songsHTML; }; +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653639d63a45a077333312c8.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653639d63a45a077333312c8.md index 393ed957abc..57e13d7a6bd 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653639d63a45a077333312c8.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653639d63a45a077333312c8.md @@ -1,8 +1,8 @@ --- id: 653639d63a45a077333312c8 -title: Step 24 +title: Step 29 challengeType: 0 -dashedName: step-24 +dashedName: step-29 --- # --description-- @@ -645,6 +645,18 @@ const renderSongs = (array) => { playlistSongs.innerHTML = songsHTML; }; +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653641509b6e7681a9333245.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653641509b6e7681a9333245.md index e1a051f939c..31baea291e3 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653641509b6e7681a9333245.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/653641509b6e7681a9333245.md @@ -1,8 +1,8 @@ --- id: 653641509b6e7681a9333245 -title: Step 26 +title: Step 31 challengeType: 0 -dashedName: step-26 +dashedName: step-31 --- # --description-- @@ -643,6 +643,18 @@ const renderSongs = (array) => { playlistSongs.innerHTML = songsHTML; }; +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65364566e84e378837fbaf2a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65364566e84e378837fbaf2a.md index ccdc97b645d..1a35a2856c4 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65364566e84e378837fbaf2a.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65364566e84e378837fbaf2a.md @@ -1,8 +1,8 @@ --- id: 65364566e84e378837fbaf2a -title: Step 28 +title: Step 33 challengeType: 0 -dashedName: step-28 +dashedName: step-33 --- # --description-- @@ -656,9 +656,21 @@ const renderSongs = (array) => { playlistSongs.innerHTML = songsHTML; }; - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- + +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); renderSongs(userData?.songs); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65422ba173a18b1bedef1bb6.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65422ba173a18b1bedef1bb6.md index f9593ed9fe7..4aaac3d1863 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65422ba173a18b1bedef1bb6.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65422ba173a18b1bedef1bb6.md @@ -1,8 +1,8 @@ --- id: 65422ba173a18b1bedef1bb6 -title: Step 29 +title: Step 34 challengeType: 0 -dashedName: step-29 +dashedName: step-34 --- # --description-- @@ -656,6 +656,18 @@ playButton.addEventListener("click", () => { --fcc-editable-region-- }); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552127b2576c2fbc5ecc2ea.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552127b2576c2fbc5ecc2ea.md index e1ddd57a7d7..60202d2804e 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552127b2576c2fbc5ecc2ea.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552127b2576c2fbc5ecc2ea.md @@ -1,8 +1,8 @@ --- id: 6552127b2576c2fbc5ecc2ea -title: Step 30 +title: Step 35 challengeType: 0 -dashedName: step-30 +dashedName: step-35 --- # --description-- @@ -666,6 +666,18 @@ playButton.addEventListener("click", () => { --fcc-editable-region-- }); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521badc7b7470edf952372.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521badc7b7470edf952372.md index ccd79feb1ec..cbc421b9265 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521badc7b7470edf952372.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521badc7b7470edf952372.md @@ -1,8 +1,8 @@ --- id: 65521badc7b7470edf952372 -title: Step 32 +title: Step 37 challengeType: 0 -dashedName: step-32 +dashedName: step-37 --- # --description-- @@ -674,6 +674,17 @@ playButton.addEventListener("click", () => { } }); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); renderSongs(userData?.songs); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521ec3bb117c195c4f6cb5.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521ec3bb117c195c4f6cb5.md index 1376179a11c..ca18b596a51 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521ec3bb117c195c4f6cb5.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65521ec3bb117c195c4f6cb5.md @@ -1,8 +1,8 @@ --- id: 65521ec3bb117c195c4f6cb5 -title: Step 33 +title: Step 38 challengeType: 0 -dashedName: step-33 +dashedName: step-38 --- # --description-- @@ -662,6 +662,17 @@ playButton.addEventListener("click", () => { } }); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); renderSongs(userData?.songs); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655220a3fa5c3c200bc8e938.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655220a3fa5c3c200bc8e938.md index d6af9b9f64a..56fa6621428 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655220a3fa5c3c200bc8e938.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655220a3fa5c3c200bc8e938.md @@ -1,8 +1,8 @@ --- id: 655220a3fa5c3c200bc8e938 -title: Step 34 +title: Step 39 challengeType: 0 -dashedName: step-34 +dashedName: step-39 --- # --description-- @@ -671,6 +671,17 @@ playButton.addEventListener("click", () => { } }); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); renderSongs(userData?.songs); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552303a9a78704f8ff072e9.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552303a9a78704f8ff072e9.md index 7c916e6868e..8ea06df15c2 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552303a9a78704f8ff072e9.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552303a9a78704f8ff072e9.md @@ -1,8 +1,8 @@ --- id: 6552303a9a78704f8ff072e9 -title: Step 35 +title: Step 40 challengeType: 0 -dashedName: step-35 +dashedName: step-40 --- # --description-- @@ -675,5 +675,17 @@ playButton.addEventListener("click", () => { --fcc-editable-region-- +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655235c2e607297f00316650.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655235c2e607297f00316650.md index 1247fbaf8fe..91d2d1e94fb 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655235c2e607297f00316650.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655235c2e607297f00316650.md @@ -1,8 +1,8 @@ --- id: 655235c2e607297f00316650 -title: Step 27 +title: Step 32 challengeType: 0 -dashedName: step-27 +dashedName: step-32 --- # --description-- @@ -651,6 +651,18 @@ const renderSongs = (array) => { playlistSongs.innerHTML = songsHTML; }; +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552385244ccf89b77d6b332.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552385244ccf89b77d6b332.md index 1f0907eb9f1..aafe1844c77 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552385244ccf89b77d6b332.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552385244ccf89b77d6b332.md @@ -1,8 +1,8 @@ --- id: 6552385244ccf89b77d6b332 -title: Step 38 +title: Step 43 challengeType: 0 -dashedName: step-38 +dashedName: step-43 --- # --description-- @@ -685,5 +685,17 @@ playButton.addEventListener("click", () => { pauseButton.addEventListener("click", pauseSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655243068222c2c1166b90b0.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655243068222c2c1166b90b0.md index 294397bf5fe..3ab71fb0ef5 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655243068222c2c1166b90b0.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655243068222c2c1166b90b0.md @@ -1,8 +1,8 @@ --- id: 655243068222c2c1166b90b0 -title: Step 39 +title: Step 44 challengeType: 0 -dashedName: step-39 +dashedName: step-44 --- # --description-- @@ -685,5 +685,17 @@ playButton.addEventListener("click", () => { pauseButton.addEventListener("click", pauseSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655476e1ff522252fdcce5e4.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655476e1ff522252fdcce5e4.md index 95629bea240..ce1b56f8e25 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655476e1ff522252fdcce5e4.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655476e1ff522252fdcce5e4.md @@ -1,8 +1,8 @@ --- id: 655476e1ff522252fdcce5e4 -title: Step 40 +title: Step 45 challengeType: 0 -dashedName: step-40 +dashedName: step-45 --- # --description-- @@ -690,5 +690,17 @@ playButton.addEventListener("click", () => { pauseButton.addEventListener("click", pauseSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655479aa3e1e0360ae38b7a6.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655479aa3e1e0360ae38b7a6.md index 469cab46669..aed32fb47aa 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655479aa3e1e0360ae38b7a6.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655479aa3e1e0360ae38b7a6.md @@ -1,8 +1,8 @@ --- id: 655479aa3e1e0360ae38b7a6 -title: Step 41 +title: Step 46 challengeType: 0 -dashedName: step-41 +dashedName: step-46 --- # --description-- @@ -695,5 +695,17 @@ playButton.addEventListener("click", () => { pauseButton.addEventListener("click", pauseSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65547ee197840478a1b95f4b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65547ee197840478a1b95f4b.md index d3fb646739a..83a9c2d5587 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65547ee197840478a1b95f4b.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65547ee197840478a1b95f4b.md @@ -1,8 +1,8 @@ --- id: 65547ee197840478a1b95f4b -title: Step 42 +title: Step 47 challengeType: 0 -dashedName: step-42 +dashedName: step-47 --- # --description-- @@ -691,5 +691,17 @@ pauseButton.addEventListener("click", pauseSong); --fcc-editable-region-- +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554815fe2472f8bfdab7642.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554815fe2472f8bfdab7642.md index cb7b8a31627..61223168742 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554815fe2472f8bfdab7642.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554815fe2472f8bfdab7642.md @@ -1,8 +1,8 @@ --- id: 6554815fe2472f8bfdab7642 -title: Step 43 +title: Step 48 challengeType: 0 -dashedName: step-43 +dashedName: step-48 --- # --description-- @@ -697,5 +697,17 @@ pauseButton.addEventListener("click", pauseSong); nextButton.addEventListener("click", playNextSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655482742cc5499726e3f347.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655482742cc5499726e3f347.md index 528e71741be..1074b904cb6 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655482742cc5499726e3f347.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655482742cc5499726e3f347.md @@ -1,8 +1,8 @@ --- id: 655482742cc5499726e3f347 -title: Step 44 +title: Step 49 challengeType: 0 -dashedName: step-44 +dashedName: step-49 --- # --description-- @@ -709,5 +709,17 @@ pauseButton.addEventListener("click", pauseSong); nextButton.addEventListener("click", playNextSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655483ebf0096ba02b2c3d4c.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655483ebf0096ba02b2c3d4c.md index 2d83755f3b9..c7eaeb789cf 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655483ebf0096ba02b2c3d4c.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655483ebf0096ba02b2c3d4c.md @@ -1,8 +1,8 @@ --- id: 655483ebf0096ba02b2c3d4c -title: Step 45 +title: Step 50 challengeType: 0 -dashedName: step-45 +dashedName: step-50 --- # --description-- @@ -697,5 +697,17 @@ pauseButton.addEventListener("click", pauseSong); nextButton.addEventListener("click", playNextSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md index a4eb744a4f3..f704dd1b38b 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md @@ -1,8 +1,8 @@ --- id: 655485321913feabbc5f00f8 -title: Step 46 +title: Step 51 challengeType: 0 -dashedName: step-46 +dashedName: step-51 --- # --description-- @@ -701,5 +701,17 @@ nextButton.addEventListener("click", playNextSong); --fcc-editable-region-- +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554860ea4dfbab2f4786fc8.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554860ea4dfbab2f4786fc8.md index f260cacb59b..bc8e9135cff 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554860ea4dfbab2f4786fc8.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6554860ea4dfbab2f4786fc8.md @@ -1,8 +1,8 @@ --- id: 6554860ea4dfbab2f4786fc8 -title: Step 47 +title: Step 52 challengeType: 0 -dashedName: step-47 +dashedName: step-52 --- # --description-- @@ -716,5 +716,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655487f686aabfc2a10ba887.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655487f686aabfc2a10ba887.md index 2ae8826c092..15a70205648 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655487f686aabfc2a10ba887.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655487f686aabfc2a10ba887.md @@ -1,8 +1,8 @@ --- id: 655487f686aabfc2a10ba887 -title: Step 36 +title: Step 41 challengeType: 0 -dashedName: step-36 +dashedName: step-41 --- # --description-- @@ -671,5 +671,17 @@ playButton.addEventListener("click", () => { pauseButton.addEventListener("click", pauseSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65548f747a4cdafd186948d1.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65548f747a4cdafd186948d1.md index e6d00adf2a0..2c530aa3a30 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65548f747a4cdafd186948d1.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65548f747a4cdafd186948d1.md @@ -1,8 +1,8 @@ --- id: 65548f747a4cdafd186948d1 -title: Step 48 +title: Step 53 challengeType: 0 -dashedName: step-48 +dashedName: step-53 --- # --description-- @@ -708,5 +708,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655490f55c36900779336988.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655490f55c36900779336988.md index 4d5f681f5a2..2fd199a7d5c 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655490f55c36900779336988.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655490f55c36900779336988.md @@ -1,8 +1,8 @@ --- id: 655490f55c36900779336988 -title: Step 49 +title: Step 54 challengeType: 0 -dashedName: step-49 +dashedName: step-54 --- # --description-- @@ -722,5 +722,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655492e6b90c7a198c587943.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655492e6b90c7a198c587943.md index 3d2d4f2ed88..2d23300ad00 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655492e6b90c7a198c587943.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655492e6b90c7a198c587943.md @@ -1,8 +1,8 @@ --- id: 655492e6b90c7a198c587943 -title: Step 51 +title: Step 56 challengeType: 0 -dashedName: step-51 +dashedName: step-56 --- # --description-- @@ -715,5 +715,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655494d5a15d6a2567e1ea60.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655494d5a15d6a2567e1ea60.md index abf687386af..7fca5cb43cb 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655494d5a15d6a2567e1ea60.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655494d5a15d6a2567e1ea60.md @@ -1,8 +1,8 @@ --- id: 655494d5a15d6a2567e1ea60 -title: Step 52 +title: Step 57 challengeType: 0 -dashedName: step-52 +dashedName: step-57 --- # --description-- @@ -704,5 +704,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655495a6bd96e42bc3baa795.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655495a6bd96e42bc3baa795.md index ce27c95c2a5..c7090fd8b02 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655495a6bd96e42bc3baa795.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655495a6bd96e42bc3baa795.md @@ -1,8 +1,8 @@ --- id: 655495a6bd96e42bc3baa795 -title: Step 53 +title: Step 58 challengeType: 0 -dashedName: step-53 +dashedName: step-58 --- # --description-- @@ -722,5 +722,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d17af9ff06a14d399f6d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d17af9ff06a14d399f6d.md index d9903e0bed5..2bf257d345c 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d17af9ff06a14d399f6d.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d17af9ff06a14d399f6d.md @@ -1,8 +1,8 @@ --- id: 6555d17af9ff06a14d399f6d -title: Step 54 +title: Step 59 challengeType: 0 -dashedName: step-54 +dashedName: step-59 --- # --description-- @@ -732,5 +732,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md index 9afb4bf147c..3166dceaec0 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md @@ -1,8 +1,8 @@ --- id: 6555d458687cb3b357834df9 -title: Step 55 +title: Step 60 challengeType: 0 -dashedName: step-55 +dashedName: step-60 --- # --description-- @@ -726,5 +726,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d729c9bfd7c3195f1948.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d729c9bfd7c3195f1948.md index 2a9d697e213..9f1d7b1e5b6 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d729c9bfd7c3195f1948.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d729c9bfd7c3195f1948.md @@ -1,8 +1,8 @@ --- id: 6555d729c9bfd7c3195f1948 -title: Step 56 +title: Step 61 challengeType: 0 -dashedName: step-56 +dashedName: step-61 --- # --description-- @@ -741,5 +741,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d7e384056dc9c581fadf.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d7e384056dc9c581fadf.md index ba9c94b41ac..c6b44365452 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d7e384056dc9c581fadf.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d7e384056dc9c581fadf.md @@ -1,8 +1,8 @@ --- id: 6555d7e384056dc9c581fadf -title: Step 57 +title: Step 62 challengeType: 0 -dashedName: step-57 +dashedName: step-62 --- # --description-- @@ -715,5 +715,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d8faed60b9d3e4a6cefb.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d8faed60b9d3e4a6cefb.md index 31113f3b263..dffcad554fb 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d8faed60b9d3e4a6cefb.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d8faed60b9d3e4a6cefb.md @@ -1,8 +1,8 @@ --- id: 6555d8faed60b9d3e4a6cefb -title: Step 58 +title: Step 63 challengeType: 0 -dashedName: step-58 +dashedName: step-63 --- # --description-- @@ -735,5 +735,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md index dfa562a59b3..7d48fb027be 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md @@ -1,8 +1,8 @@ --- id: 6555dd138e70cae6b546966d -title: Step 59 +title: Step 64 challengeType: 0 -dashedName: step-59 +dashedName: step-64 --- # --description-- @@ -731,5 +731,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md index 4e9759f3e82..41a5b96aab0 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md @@ -1,8 +1,8 @@ --- id: 6555de565387a2efe90a6ccc -title: Step 60 +title: Step 65 challengeType: 0 -dashedName: step-60 +dashedName: step-65 --- # --description-- @@ -738,5 +738,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md index f1c44ff3888..7c0bfa42f55 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md @@ -1,8 +1,8 @@ --- id: 6555e04aeb225bfbae237344 -title: Step 61 +title: Step 66 challengeType: 0 -dashedName: step-61 +dashedName: step-66 --- # --description-- @@ -723,5 +723,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md index ac052e5a138..518b7c1bd41 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md @@ -1,8 +1,8 @@ --- id: 6555e0bfe4d69904410f7cd3 -title: Step 62 +title: Step 67 challengeType: 0 -dashedName: step-62 +dashedName: step-67 --- # --description-- @@ -745,5 +745,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e39a5f4c6f138c7d9405.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e39a5f4c6f138c7d9405.md index 4d39361950b..7804e8398de 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e39a5f4c6f138c7d9405.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e39a5f4c6f138c7d9405.md @@ -1,38 +1,30 @@ --- id: 6555e39a5f4c6f138c7d9405 -title: Step 63 +title: Step 68 challengeType: 0 -dashedName: step-63 +dashedName: step-68 --- # --description-- -The `sort()` method converts elements of an array into strings and sorts them based on their `UTF-16` code units values. +In earlier steps, you learned how to work with the `sort()` method to sort the songs in alphabetical order. Another use case for the callback function is to randomize an array. + +One way to randomize an array of items would be to subtract `0.5` from `Math.random()` which produces random values that are either positive or negative. This makes the comparison result a mix of positive and negative values, leading to a random ordering of elements. ```js -const numbers = [4, 2, 5, 100, 1, 3]; - -numbers.sort(); -console.log(numbers); // Output: [1, 100, 2, 3, 4, 5] +const names = ["Tom", "Jessica", "Quincy", "Naomi"]; +names.sort(() => Math.random() - 0.5); ``` -You can see `100` comes right after 1, which is not supposed to happen. This is a default behavior of the `sort()` method you can fix by passing in a callback this way: +Use the `sort()` method on the `userData?.songs` array. Pass a callback to the method, and return the result of `Math.random() - 0.5`. -```js -const numbers = [4, 2, 5, 100, 1, 3]; - -numbers.sort((a, b) => a - b); -console.log(numbers); // Output: [1, 2, 3, 4, 5, 100] -``` - -Use the `sort()` method on the `userData?.songs` array. For the callback, introduce `Math.random()`, and subtract `0.5`. # --hints-- You should not modify the existing `shuffle` function. ```js -assert.match(code, /const\s+shuffle\s*=\s*\(\)\s*=>\s*\{\s*.*\s*\};?/) +assert.match(code, /const\s+shuffle\s*=\s*\(\)\s*=>\s*{\s*[\s\S]*?\};?/); ``` You should use the `sort()` method on `userData?.songs`. @@ -47,10 +39,10 @@ Your `sort()` method should have a callback function that uses arrow syntax. assert.match(code, /userData\?\.songs\.sort\(\s*\(\s*\)\s*=>\s*/) ``` -The callback of your `sort()` method should implicitly return `Math.random() - 0.5` +The callback of your `sort()` method should return `Math.random() - 0.5`. ```js -assert.match(code, /userData\?\.songs\.sort\(\s*\(\s*\)\s*=>\s*Math\.random\(\)\s*-\s*0\.5\);?/) +assert.match(code, /userData\?.songs\.sort\s*\(\(\)\s*=>(\s*{\s*return\s+Math\.random\(\)\s*-\s*0\.5\s*;?\s*}\s*)|(\s*Math\.random\(\)\s*-\s*0\.5\s*)\);?/); ``` # --seed-- @@ -763,5 +755,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md index 7c917248d15..83251ef94df 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md @@ -1,8 +1,8 @@ --- id: 6555e57d3e6d9d221c4735be -title: Step 64 +title: Step 69 challengeType: 0 -dashedName: step-64 +dashedName: step-69 --- # --description-- @@ -736,5 +736,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md index 71e196fba39..b474cd8650f 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md @@ -1,8 +1,8 @@ --- id: 6555e6cec786da2aadc11ea0 -title: Step 65 +title: Step 70 challengeType: 0 -dashedName: step-65 +dashedName: step-70 --- # --description-- @@ -757,5 +757,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e7acdbae972d3e8e0f5b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e7acdbae972d3e8e0f5b.md index 5091a124b73..260ada66a36 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e7acdbae972d3e8e0f5b.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e7acdbae972d3e8e0f5b.md @@ -1,8 +1,8 @@ --- id: 6555e7acdbae972d3e8e0f5b -title: Step 66 +title: Step 71 challengeType: 0 -dashedName: step-66 +dashedName: step-71 --- # --description-- @@ -750,5 +750,17 @@ previousButton.addEventListener("click", playPreviousSong); --fcc-editable-region-- +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e9197bf1d7416bdd76e0.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e9197bf1d7416bdd76e0.md index 3668e69ebd1..cf6a8d41f88 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e9197bf1d7416bdd76e0.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e9197bf1d7416bdd76e0.md @@ -1,8 +1,8 @@ --- id: 6555e9197bf1d7416bdd76e0 -title: Step 67 +title: Step 72 challengeType: 0 -dashedName: step-67 +dashedName: step-72 --- # --description-- @@ -764,5 +764,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555ebf07ec610585a626f72.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555ebf07ec610585a626f72.md index 0f7432be6ef..f39a2be6098 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555ebf07ec610585a626f72.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555ebf07ec610585a626f72.md @@ -1,8 +1,8 @@ --- id: 6555ebf07ec610585a626f72 -title: Step 68 +title: Step 73 challengeType: 0 -dashedName: step-68 +dashedName: step-73 --- # --description-- @@ -775,5 +775,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65571e742fbf4532d8f98e90.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65571e742fbf4532d8f98e90.md index 502e93c7ecb..a96220ab2ab 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65571e742fbf4532d8f98e90.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65571e742fbf4532d8f98e90.md @@ -1,8 +1,8 @@ --- id: 65571e742fbf4532d8f98e90 -title: Step 69 +title: Step 74 challengeType: 0 -dashedName: step-69 +dashedName: step-74 --- # --description-- @@ -763,5 +763,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655720534347cb3f31cdfb3d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655720534347cb3f31cdfb3d.md index 7153616595c..679a05c94a8 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655720534347cb3f31cdfb3d.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655720534347cb3f31cdfb3d.md @@ -1,8 +1,8 @@ --- id: 655720534347cb3f31cdfb3d -title: Step 70 +title: Step 75 challengeType: 0 -dashedName: step-70 +dashedName: step-75 --- # --description-- @@ -748,5 +748,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md index 7c895d19f46..081fdf5bf3b 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md @@ -1,8 +1,8 @@ --- id: 65572399a8e16d50bc2c1ff3 -title: Step 71 +title: Step 76 challengeType: 0 -dashedName: step-71 +dashedName: step-76 --- # --description-- @@ -773,5 +773,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md index bb22741d74c..a3d06aa482d 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md @@ -1,8 +1,8 @@ --- id: 655724bac464795a0ad91082 -title: Step 73 +title: Step 78 challengeType: 0 -dashedName: step-73 +dashedName: step-78 --- # --description-- @@ -756,5 +756,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655727b2e1e49d6adf584442.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655727b2e1e49d6adf584442.md index be4f7e81479..dd696481d1f 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655727b2e1e49d6adf584442.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655727b2e1e49d6adf584442.md @@ -1,8 +1,8 @@ --- id: 655727b2e1e49d6adf584442 -title: Step 74 +title: Step 79 challengeType: 0 -dashedName: step-74 +dashedName: step-79 --- # --description-- @@ -787,5 +787,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md index 8553900a035..b239e5a2afa 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md @@ -1,8 +1,8 @@ --- id: 655729e68e49b277a6b448bd -title: Step 76 +title: Step 81 challengeType: 0 -dashedName: step-76 +dashedName: step-81 --- # --description-- @@ -775,5 +775,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md index 22e186d9ab6..0291ac1c4c9 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md @@ -1,8 +1,8 @@ --- id: 65572bb34a7e488224b937fc -title: Step 77 +title: Step 82 challengeType: 0 -dashedName: step-77 +dashedName: step-82 --- # --description-- @@ -791,5 +791,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md index fd0c140349d..8a765890a00 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md @@ -1,8 +1,8 @@ --- id: 65572e5aaf022790fb4a81b1 -title: Step 78 +title: Step 83 challengeType: 0 -dashedName: step-78 +dashedName: step-83 --- # --description-- @@ -778,5 +778,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655737cd004591b0271d6826.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655737cd004591b0271d6826.md index 5ecae2ca46c..a48205d9960 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655737cd004591b0271d6826.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655737cd004591b0271d6826.md @@ -1,8 +1,8 @@ --- id: 655737cd004591b0271d6826 -title: Step 79 +title: Step 84 challengeType: 0 -dashedName: step-79 +dashedName: step-84 --- # --description-- @@ -775,5 +775,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md index ac05cd05bce..c246c97b71c 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md @@ -1,8 +1,8 @@ --- id: 65573a97c59ddbbf028ca95e -title: Step 80 +title: Step 85 challengeType: 0 -dashedName: step-80 +dashedName: step-85 --- # --description-- @@ -794,5 +794,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md index d1d0722b47a..2306bdb58fc 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md @@ -1,8 +1,8 @@ --- id: 65573d0abe4d38cd6fa13f44 -title: Step 81 +title: Step 86 challengeType: 0 -dashedName: step-81 +dashedName: step-86 --- # --description-- @@ -790,6 +790,18 @@ shuffleButton.addEventListener("click", shuffle); --fcc-editable-region-- +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); setPlayButtonAccessibleText(); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md index 4a3f8eecd9d..4b69b8e746f 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md @@ -1,8 +1,8 @@ --- id: 6557421eb6a7a0f0500e3106 -title: Step 72 +title: Step 77 challengeType: 0 -dashedName: step-72 +dashedName: step-77 --- # --description-- @@ -752,5 +752,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b49333d9f265bc1512152.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b49333d9f265bc1512152.md index 41aea23ce95..1bb939500d9 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b49333d9f265bc1512152.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b49333d9f265bc1512152.md @@ -1,8 +1,8 @@ --- id: 655b49333d9f265bc1512152 -title: Step 82 +title: Step 87 challengeType: 0 -dashedName: step-82 +dashedName: step-87 --- # --description-- @@ -756,6 +756,18 @@ audio.addEventListener("ended", () => { }); --fcc-editable-region-- +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); setPlayButtonAccessibleText(); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4bbff1dbf66cb2ed4dac.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4bbff1dbf66cb2ed4dac.md index be27d78cb2a..a4faaa3bc95 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4bbff1dbf66cb2ed4dac.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4bbff1dbf66cb2ed4dac.md @@ -1,8 +1,8 @@ --- id: 655b4bbff1dbf66cb2ed4dac -title: Step 83 +title: Step 88 challengeType: 0 -dashedName: step-83 +dashedName: step-88 --- # --description-- @@ -748,6 +748,18 @@ audio.addEventListener("ended", () => { --fcc-editable-region-- }); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); setPlayButtonAccessibleText(); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md index 507b2af4ae7..c3f9c17cee9 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md @@ -1,13 +1,13 @@ --- id: 655b4c8f636d9675953a0388 -title: Step 84 +title: Step 89 challengeType: 0 -dashedName: step-84 +dashedName: step-89 --- # --description-- -If there is no next song in the playlist, use the `else` block to reset the `currentSong` key of `userData` to null, and its `songCurrentTime` property to `0`. +If there is no next song in the playlist, use the `else` block to reset the `currentSong` key of `userData` to `null`, and its `songCurrentTime` property to `0`. # --hints-- @@ -764,6 +764,18 @@ audio.addEventListener("ended", () => { --fcc-editable-region-- }); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); setPlayButtonAccessibleText(); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md index c5965a2f11a..28f3c895e77 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md @@ -1,8 +1,8 @@ --- id: 655b4dad1d38ff7cdd65cbfe -title: Step 85 +title: Step 90 challengeType: 0 -dashedName: step-85 +dashedName: step-90 --- # --description-- @@ -809,6 +809,18 @@ audio.addEventListener("ended", () => { } }); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); setPlayButtonAccessibleText(); ``` @@ -1580,6 +1592,18 @@ audio.addEventListener("ended", () => { } }); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); setPlayButtonAccessibleText(); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md index ed975a7b1af..ab976eab4f8 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md @@ -1,8 +1,8 @@ --- id: 656472ed8f552d2f2b3f7883 -title: Step 25 +title: Step 30 challengeType: 0 -dashedName: step-25 +dashedName: step-30 --- # --description-- @@ -654,6 +654,18 @@ const renderSongs = (array) => { playlistSongs.innerHTML = songsHTML; }; +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65671421254eeb489875cdd8.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65671421254eeb489875cdd8.md index 963129ead2b..0eab1ec7e0a 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65671421254eeb489875cdd8.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65671421254eeb489875cdd8.md @@ -1,8 +1,8 @@ --- id: 65671421254eeb489875cdd8 -title: Step 50 +title: Step 55 challengeType: 0 -dashedName: step-50 +dashedName: step-55 --- # --description-- @@ -707,5 +707,17 @@ nextButton.addEventListener("click", playNextSong); previousButton.addEventListener("click", playPreviousSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672136535209761a5cf02b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672136535209761a5cf02b.md index 5637a8b2319..8ce5d69916e 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672136535209761a5cf02b.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672136535209761a5cf02b.md @@ -1,8 +1,8 @@ --- id: 65672136535209761a5cf02b -title: Step 31 +title: Step 36 challengeType: 0 -dashedName: step-31 +dashedName: step-36 --- # --description-- @@ -654,6 +654,18 @@ playButton.addEventListener("click", () => { } }); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672adafbaa37a6cef886f7.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672adafbaa37a6cef886f7.md index c7c7da1bbe9..bba417c9e19 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672adafbaa37a6cef886f7.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672adafbaa37a6cef886f7.md @@ -1,8 +1,8 @@ --- id: 65672adafbaa37a6cef886f7 -title: Step 75 +title: Step 80 challengeType: 0 -dashedName: step-75 +dashedName: step-80 --- # --description-- @@ -784,5 +784,17 @@ previousButton.addEventListener("click", playPreviousSong); shuffleButton.addEventListener("click", shuffle); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md index d178d5a5a2b..4b6d62364e4 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md @@ -1,8 +1,8 @@ --- id: 659b0093d7db5a1a1122b7bd -title: Step 37 +title: Step 42 challengeType: 0 -dashedName: step-37 +dashedName: step-42 --- # --description-- @@ -678,5 +678,17 @@ playButton.addEventListener("click", () => { pauseButton.addEventListener("click", pauseSong); +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + + return 0; +}); + renderSongs(userData?.songs); ``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a608b7e7c75a04ccf0c23c.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a608b7e7c75a04ccf0c23c.md new file mode 100644 index 00000000000..2685acd6967 --- /dev/null +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a608b7e7c75a04ccf0c23c.md @@ -0,0 +1,644 @@ +--- +id: 65a608b7e7c75a04ccf0c23c +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now that you have the list of songs displayed on the screen, it would be nice to sort them in alphabetical order by title. You could manually update the `allSongs` array, but JavaScript has an array method you can use called sort(). + +The `sort()` method converts elements of an array into strings and sorts them in place based on their values in the `UTF-16` encoding. + +```js +const names = ["Tom", "Jessica", "Quincy", "Naomi"]; +names.sort() // ["Jessica", "Naomi", "Quincy", "Tom"] +``` + +Add the `sort()` method to `userData?.songs`. + +# --hints-- + +You should add the `sort()` method to `userData?.songs`. + +```js +assert.match(code, /userData\?\.songs\.sort\(*.\);?/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
+
+
+
+
+
+
+

freeCodeCamp

+
+
+
+
+
+
+
+ song cover art +
+
+
+

+

+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+

Playlist

+
+
+
+
+
+ +
+
+ + + +``` + +```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 ` +
  • + + +
    • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- + +--fcc-editable-region-- + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a6098a3405f206312e28f5.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a6098a3405f206312e28f5.md new file mode 100644 index 00000000000..c27642fe968 --- /dev/null +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a6098a3405f206312e28f5.md @@ -0,0 +1,659 @@ +--- +id: 65a6098a3405f206312e28f5 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +To sort the songs in alphabetical order by title, you will need to pass in a compare callback function into your `sort()` method. + +Here is an example of sorting a list of fruits by name. + +```js +const fruits = [ + { name: "Apples", price: 0.99 }, + { name: "Blueberries", price: 1.49 }, + { name: "Grapes", price: 2.99 }, +]; + +fruits.sort((a, b) => { + if (a.name < b.name) { + return -1; + } + + if (a.name > b.name) { + return 1; + } + + return 0; +}); +``` + +In the next few steps, you will learn what each of those `if` statements is doing inside that callback function. But for now, add an empty callback function to your `sort()` method and use `a` and `b` for the parameter names. + +# --hints-- + +You should have an empty callback function `()=>{}` inside your `sort()` method with `a` and `b` for the parameter names. + +```js +assert.match(code, /userData\?\.songs\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*{\s*}\s*\);?/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
    +
    +
    +
    +
    +
    +
    +

    freeCodeCamp

    +
    +
    +
    +
    +
    +
    +
    + song cover art +
    +
    +
    +

    +

    +
    +
    + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Playlist

    +
    +
    +
    +
    +
    + +
    +
    + + + +``` + +```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 ` +
  • + + +
    • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +userData?.songs.sort(); +--fcc-editable-region-- + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a609f6e23f3b06c608fb57.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a609f6e23f3b06c608fb57.md new file mode 100644 index 00000000000..80fa8a91f63 --- /dev/null +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a609f6e23f3b06c608fb57.md @@ -0,0 +1,677 @@ +--- +id: 65a609f6e23f3b06c608fb57 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +The `sort()` method accepts a compare callback function that defines the sort order. + +In this example, the first condition `(a.name < b.name)` checks if the name of the first fruit is less than the name of the second fruit. If so, the first fruit is sorted before the second fruit. + +Strings are compared lexicographically which means they are compared character by character. For example, `"Apples"` is less than `"Bananas"` because `"A"` comes before `"B"` in the alphabet. + +The reason why this example is returning numbers is because the `sort()` method is expecting a number to be returned. If you return a negative number, the first item is sorted before the second item. + +```js +const fruits = [ + { name: "Apples", price: 0.99 }, + { name: "Blueberries", price: 1.49 }, + { name: "Grapes", price: 2.99 }, +]; + +fruits.sort((a, b) => { + if (a.name < b.name) { + return -1; + } + + if (a.name > b.name) { + return 1; + } + + return 0; +}); +``` + +Inside your callback function, add an `if` statement to check if `a.title` is less than `b.title`. If so, return `-1`. + +# --hints-- + +You should have an `if` statement inside your callback function. + +```js +assert.match(code, /if\s*\(/); +``` + +Your `if` statement should check if `a.title` is less than `b.title`. + +```js +assert.match(code, /if\s*\(\s*a\.title\s*<\s*b\.title\s*\)/); +``` + +Your `if` statement should return `-1` if `a.title` is less than `b.title`. + +```js +assert.match(code, /if\s*\(\s*a\.title\s*<\s*b\.title\s*\)\s*{\s*return\s*-1;?\s*}|if\s*\(\s*a\.title\s*<\s*b\.title\s*\)\s*return\s*-1;?/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
    +
    +
    +
    +
    +
    +
    +

    freeCodeCamp

    +
    +
    +
    +
    +
    +
    +
    + song cover art +
    +
    +
    +

    +

    +
    +
    + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Playlist

    +
    +
    +
    +
    +
    + +
    +
    + + + +``` + +```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 ` +
  • + + +
    • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +userData?.songs.sort((a,b) => { + +}); +--fcc-editable-region-- + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60aa3efd8fa079c2d1537.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60aa3efd8fa079c2d1537.md new file mode 100644 index 00000000000..9e2709b718d --- /dev/null +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60aa3efd8fa079c2d1537.md @@ -0,0 +1,675 @@ +--- +id: 65a60aa3efd8fa079c2d1537 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +The second condition in this example checks if `a.name > b.name`. If so, the function returns `1`, which sorts the first fruit after the second fruit. + +```js +const fruits = [ + { name: "Apples", price: 0.99 }, + { name: "Blueberries", price: 1.49 }, + { name: "Grapes", price: 2.99 }, +]; + +fruits.sort((a, b) => { + if (a.name < b.name) { + return -1; + } + + if (a.name > b.name) { + return 1; + } + + return 0; +}); +``` + +Inside your callback function, add another `if` statement to check if `a.title` is greater than `b.title`. If so, return the number `1`. + +# --hints-- + +You should have an `if` statement inside your callback function. + +```js +assert.match(code, /if\s*\(/); +``` + +Your `if` statement should check if `a.title` is greater than `b.title`. + +```js +assert.match(code, /if\s*\(\s*a\.title\s*>\s*b\.title\s*\)/); +``` + +Your `if` statement should return the number `1` if `a.title` is greater than `b.title`. + +```js +assert.match(code, /if\s*\(\s*a\.title\s*>\s*b\.title\s*\)\s*{\s*return\s*1;?\s*}|if\s*\(\s*a\.title\s*>\s*b\.title\s*\)\s*return\s*1;?/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
    +
    +
    +
    +
    +
    +
    +

    freeCodeCamp

    +
    +
    +
    +
    +
    +
    +
    + song cover art +
    +
    +
    +

    +

    +
    +
    + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Playlist

    +
    +
    +
    +
    +
    + +
    +
    + + + +``` + +```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 ` +
  • + + +
    • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + --fcc-editable-region-- + + --fcc-editable-region-- +}); + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60b0b8b4f96085ac23463.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60b0b8b4f96085ac23463.md new file mode 100644 index 00000000000..042fc880597 --- /dev/null +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65a60b0b8b4f96085ac23463.md @@ -0,0 +1,669 @@ +--- +id: 65a60b0b8b4f96085ac23463 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +In the example, if `a.name` is equal to `b.name`, then the function returns `0`. This means that nothing changes and the order of `a` and `b` remains the same. + +```js +const fruits = [ + { name: "Apples", price: 0.99 }, + { name: "Blueberries", price: 1.49 }, + { name: "Grapes", price: 2.99 }, +]; + +fruits.sort((a, b) => { + if (a.name < b.name) { + return -1; + } + + if (a.name > b.name) { + return 1; + } + + return 0; +}); +``` + +Below your `if` statements, return the number `0` to leave the order of the two elements unchanged. + +Now you should see the songs in alphabetical order in the playlist. + +# --hints-- + +You should return the number `0` below your `if` statements. + +```js +assert.match(code, /return\s+0\s*;?/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
    +
    +
    +
    +
    +
    +
    +

    freeCodeCamp

    +
    +
    +
    +
    +
    +
    +
    + song cover art +
    +
    +
    +

    +

    +
    +
    + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Playlist

    +
    +
    +
    +
    +
    + +
    +
    + + + +``` + +```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 ` +
  • + + +
    • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +userData?.songs.sort((a,b) => { + if (a.title < b.title) { + return -1; + } + + if (a.title > b.title) { + return 1; + } + +--fcc-editable-region-- + +--fcc-editable-region-- +}); + +renderSongs(userData?.songs); +```