mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-10-13 00:03:05 +08:00
refactor(curriculum): update lessons for arrow function music player project (#54288)
Co-authored-by: Naomi <nhcarrigan@gmail.com> Co-authored-by: Kolade Chris <65571316+Ksound22@users.noreply.github.com>
This commit is contained in:
Jessica Wilkins
co-authored by
Naomi
Kolade Chris
Naomi
Kolade Chris
parent
c82a57e1d3
commit
ef14453863
+107
-83
@@ -53,336 +53,360 @@
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "653fb19b515fde28243f727a",
|
||||
"id": "660ae3eeef9ad289bece426b",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "65420b821b14f25a6b35c3b3",
|
||||
"id": "660ae8ad1475698da3c3c37d",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "657b2b0b6a48071a6db28e7a",
|
||||
"id": "660aea8782242e8f4bcc42d8",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "65420dcfc60580678dad7a92",
|
||||
"id": "660aef1d5bd6c092f1931830",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "654210a9eda99477f5697a94",
|
||||
"id": "660af2b86c0fca95f7570fc5",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "654212b82fb5cf872f77148f",
|
||||
"id": "660af462d18730978fdf5c50",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "654213f2fad2d48f74d6c239",
|
||||
"id": "653fb19b515fde28243f727a",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "654215fe7b4a899ddceb3b60",
|
||||
"id": "65420b821b14f25a6b35c3b3",
|
||||
"title": "Step 18"
|
||||
},
|
||||
{
|
||||
"id": "6567055f59d39f07d1c542dc",
|
||||
"id": "657b2b0b6a48071a6db28e7a",
|
||||
"title": "Step 19"
|
||||
},
|
||||
{
|
||||
"id": "654218753c255fabb81f57ca",
|
||||
"id": "65420dcfc60580678dad7a92",
|
||||
"title": "Step 20"
|
||||
},
|
||||
{
|
||||
"id": "65c64fe6c770a22db893e931",
|
||||
"id": "654210a9eda99477f5697a94",
|
||||
"title": "Step 21"
|
||||
},
|
||||
{
|
||||
"id": "65a608b7e7c75a04ccf0c23c",
|
||||
"id": "654212b82fb5cf872f77148f",
|
||||
"title": "Step 22"
|
||||
},
|
||||
{
|
||||
"id": "65a6098a3405f206312e28f5",
|
||||
"id": "654213f2fad2d48f74d6c239",
|
||||
"title": "Step 23"
|
||||
},
|
||||
{
|
||||
"id": "65a609f6e23f3b06c608fb57",
|
||||
"id": "654215fe7b4a899ddceb3b60",
|
||||
"title": "Step 24"
|
||||
},
|
||||
{
|
||||
"id": "65a60aa3efd8fa079c2d1537",
|
||||
"id": "6567055f59d39f07d1c542dc",
|
||||
"title": "Step 25"
|
||||
},
|
||||
{
|
||||
"id": "65a60b0b8b4f96085ac23463",
|
||||
"id": "654218753c255fabb81f57ca",
|
||||
"title": "Step 26"
|
||||
},
|
||||
{
|
||||
"id": "65cf1f2cd796c06057bf3f3c",
|
||||
"id": "65c64fe6c770a22db893e931",
|
||||
"title": "Step 27"
|
||||
},
|
||||
{
|
||||
"id": "65c6532520cf4f323329b2c6",
|
||||
"id": "65a608b7e7c75a04ccf0c23c",
|
||||
"title": "Step 28"
|
||||
},
|
||||
{
|
||||
"id": "653283d07b8f9d294aafa83b",
|
||||
"id": "65a6098a3405f206312e28f5",
|
||||
"title": "Step 29"
|
||||
},
|
||||
{
|
||||
"id": "65362bfd67d61d517deef191",
|
||||
"id": "65a609f6e23f3b06c608fb57",
|
||||
"title": "Step 30"
|
||||
},
|
||||
{
|
||||
"id": "653635c731206b718659d3d5",
|
||||
"id": "65a60aa3efd8fa079c2d1537",
|
||||
"title": "Step 31"
|
||||
},
|
||||
{
|
||||
"id": "653639d63a45a077333312c8",
|
||||
"id": "65a60b0b8b4f96085ac23463",
|
||||
"title": "Step 32"
|
||||
},
|
||||
{
|
||||
"id": "656472ed8f552d2f2b3f7883",
|
||||
"id": "65cf1f2cd796c06057bf3f3c",
|
||||
"title": "Step 33"
|
||||
},
|
||||
{
|
||||
"id": "653641509b6e7681a9333245",
|
||||
"id": "65c6532520cf4f323329b2c6",
|
||||
"title": "Step 34"
|
||||
},
|
||||
{
|
||||
"id": "655235c2e607297f00316650",
|
||||
"id": "653283d07b8f9d294aafa83b",
|
||||
"title": "Step 35"
|
||||
},
|
||||
{
|
||||
"id": "65364566e84e378837fbaf2a",
|
||||
"id": "65362bfd67d61d517deef191",
|
||||
"title": "Step 36"
|
||||
},
|
||||
{
|
||||
"id": "65422ba173a18b1bedef1bb6",
|
||||
"id": "653635c731206b718659d3d5",
|
||||
"title": "Step 37"
|
||||
},
|
||||
{
|
||||
"id": "6552127b2576c2fbc5ecc2ea",
|
||||
"id": "653639d63a45a077333312c8",
|
||||
"title": "Step 38"
|
||||
},
|
||||
{
|
||||
"id": "65672136535209761a5cf02b",
|
||||
"id": "656472ed8f552d2f2b3f7883",
|
||||
"title": "Step 39"
|
||||
},
|
||||
{
|
||||
"id": "65521badc7b7470edf952372",
|
||||
"id": "653641509b6e7681a9333245",
|
||||
"title": "Step 40"
|
||||
},
|
||||
{
|
||||
"id": "65521ec3bb117c195c4f6cb5",
|
||||
"id": "655235c2e607297f00316650",
|
||||
"title": "Step 41"
|
||||
},
|
||||
{
|
||||
"id": "655220a3fa5c3c200bc8e938",
|
||||
"id": "65364566e84e378837fbaf2a",
|
||||
"title": "Step 42"
|
||||
},
|
||||
{
|
||||
"id": "6552303a9a78704f8ff072e9",
|
||||
"id": "65422ba173a18b1bedef1bb6",
|
||||
"title": "Step 43"
|
||||
},
|
||||
{
|
||||
"id": "655487f686aabfc2a10ba887",
|
||||
"id": "6552127b2576c2fbc5ecc2ea",
|
||||
"title": "Step 44"
|
||||
},
|
||||
{
|
||||
"id": "659b0093d7db5a1a1122b7bd",
|
||||
"id": "65672136535209761a5cf02b",
|
||||
"title": "Step 45"
|
||||
},
|
||||
{
|
||||
"id": "6552385244ccf89b77d6b332",
|
||||
"id": "65521badc7b7470edf952372",
|
||||
"title": "Step 46"
|
||||
},
|
||||
{
|
||||
"id": "655243068222c2c1166b90b0",
|
||||
"id": "65521ec3bb117c195c4f6cb5",
|
||||
"title": "Step 47"
|
||||
},
|
||||
{
|
||||
"id": "655476e1ff522252fdcce5e4",
|
||||
"id": "655220a3fa5c3c200bc8e938",
|
||||
"title": "Step 48"
|
||||
},
|
||||
{
|
||||
"id": "655479aa3e1e0360ae38b7a6",
|
||||
"id": "6552303a9a78704f8ff072e9",
|
||||
"title": "Step 49"
|
||||
},
|
||||
{
|
||||
"id": "65547ee197840478a1b95f4b",
|
||||
"id": "655487f686aabfc2a10ba887",
|
||||
"title": "Step 50"
|
||||
},
|
||||
{
|
||||
"id": "6554815fe2472f8bfdab7642",
|
||||
"id": "659b0093d7db5a1a1122b7bd",
|
||||
"title": "Step 51"
|
||||
},
|
||||
{
|
||||
"id": "655482742cc5499726e3f347",
|
||||
"id": "6552385244ccf89b77d6b332",
|
||||
"title": "Step 52"
|
||||
},
|
||||
{
|
||||
"id": "655483ebf0096ba02b2c3d4c",
|
||||
"id": "655243068222c2c1166b90b0",
|
||||
"title": "Step 53"
|
||||
},
|
||||
{
|
||||
"id": "655485321913feabbc5f00f8",
|
||||
"id": "655476e1ff522252fdcce5e4",
|
||||
"title": "Step 54"
|
||||
},
|
||||
{
|
||||
"id": "6554860ea4dfbab2f4786fc8",
|
||||
"id": "655479aa3e1e0360ae38b7a6",
|
||||
"title": "Step 55"
|
||||
},
|
||||
{
|
||||
"id": "65548f747a4cdafd186948d1",
|
||||
"id": "65547ee197840478a1b95f4b",
|
||||
"title": "Step 56"
|
||||
},
|
||||
{
|
||||
"id": "655490f55c36900779336988",
|
||||
"id": "6554815fe2472f8bfdab7642",
|
||||
"title": "Step 57"
|
||||
},
|
||||
{
|
||||
"id": "65671421254eeb489875cdd8",
|
||||
"id": "655482742cc5499726e3f347",
|
||||
"title": "Step 58"
|
||||
},
|
||||
{
|
||||
"id": "655492e6b90c7a198c587943",
|
||||
"id": "655483ebf0096ba02b2c3d4c",
|
||||
"title": "Step 59"
|
||||
},
|
||||
{
|
||||
"id": "655494d5a15d6a2567e1ea60",
|
||||
"id": "655485321913feabbc5f00f8",
|
||||
"title": "Step 60"
|
||||
},
|
||||
{
|
||||
"id": "655495a6bd96e42bc3baa795",
|
||||
"id": "6554860ea4dfbab2f4786fc8",
|
||||
"title": "Step 61"
|
||||
},
|
||||
{
|
||||
"id": "6555d17af9ff06a14d399f6d",
|
||||
"id": "65548f747a4cdafd186948d1",
|
||||
"title": "Step 62"
|
||||
},
|
||||
{
|
||||
"id": "6555d458687cb3b357834df9",
|
||||
"id": "655490f55c36900779336988",
|
||||
"title": "Step 63"
|
||||
},
|
||||
{
|
||||
"id": "6555d729c9bfd7c3195f1948",
|
||||
"id": "65671421254eeb489875cdd8",
|
||||
"title": "Step 64"
|
||||
},
|
||||
{
|
||||
"id": "6555d7e384056dc9c581fadf",
|
||||
"id": "655492e6b90c7a198c587943",
|
||||
"title": "Step 65"
|
||||
},
|
||||
{
|
||||
"id": "6555d8faed60b9d3e4a6cefb",
|
||||
"id": "655494d5a15d6a2567e1ea60",
|
||||
"title": "Step 66"
|
||||
},
|
||||
{
|
||||
"id": "6555dd138e70cae6b546966d",
|
||||
"id": "655495a6bd96e42bc3baa795",
|
||||
"title": "Step 67"
|
||||
},
|
||||
{
|
||||
"id": "6555de565387a2efe90a6ccc",
|
||||
"id": "6555d17af9ff06a14d399f6d",
|
||||
"title": "Step 68"
|
||||
},
|
||||
{
|
||||
"id": "6555e04aeb225bfbae237344",
|
||||
"id": "6555d458687cb3b357834df9",
|
||||
"title": "Step 69"
|
||||
},
|
||||
{
|
||||
"id": "6555e0bfe4d69904410f7cd3",
|
||||
"id": "6555d729c9bfd7c3195f1948",
|
||||
"title": "Step 70"
|
||||
},
|
||||
{
|
||||
"id": "6555e39a5f4c6f138c7d9405",
|
||||
"id": "6555d7e384056dc9c581fadf",
|
||||
"title": "Step 71"
|
||||
},
|
||||
{
|
||||
"id": "6555e57d3e6d9d221c4735be",
|
||||
"id": "6555d8faed60b9d3e4a6cefb",
|
||||
"title": "Step 72"
|
||||
},
|
||||
{
|
||||
"id": "6555e6cec786da2aadc11ea0",
|
||||
"id": "6555dd138e70cae6b546966d",
|
||||
"title": "Step 73"
|
||||
},
|
||||
{
|
||||
"id": "6555e7acdbae972d3e8e0f5b",
|
||||
"id": "6555de565387a2efe90a6ccc",
|
||||
"title": "Step 74"
|
||||
},
|
||||
{
|
||||
"id": "6555e9197bf1d7416bdd76e0",
|
||||
"id": "6555e04aeb225bfbae237344",
|
||||
"title": "Step 75"
|
||||
},
|
||||
{
|
||||
"id": "6555ebf07ec610585a626f72",
|
||||
"id": "6555e0bfe4d69904410f7cd3",
|
||||
"title": "Step 76"
|
||||
},
|
||||
{
|
||||
"id": "65571e742fbf4532d8f98e90",
|
||||
"id": "6555e39a5f4c6f138c7d9405",
|
||||
"title": "Step 77"
|
||||
},
|
||||
{
|
||||
"id": "655720534347cb3f31cdfb3d",
|
||||
"id": "6555e57d3e6d9d221c4735be",
|
||||
"title": "Step 78"
|
||||
},
|
||||
{
|
||||
"id": "65572399a8e16d50bc2c1ff3",
|
||||
"id": "6555e6cec786da2aadc11ea0",
|
||||
"title": "Step 79"
|
||||
},
|
||||
{
|
||||
"id": "6557421eb6a7a0f0500e3106",
|
||||
"id": "6555e7acdbae972d3e8e0f5b",
|
||||
"title": "Step 80"
|
||||
},
|
||||
{
|
||||
"id": "655724bac464795a0ad91082",
|
||||
"id": "6555e9197bf1d7416bdd76e0",
|
||||
"title": "Step 81"
|
||||
},
|
||||
{
|
||||
"id": "655727b2e1e49d6adf584442",
|
||||
"id": "6555ebf07ec610585a626f72",
|
||||
"title": "Step 82"
|
||||
},
|
||||
{
|
||||
"id": "65672adafbaa37a6cef886f7",
|
||||
"id": "65571e742fbf4532d8f98e90",
|
||||
"title": "Step 83"
|
||||
},
|
||||
{
|
||||
"id": "655729e68e49b277a6b448bd",
|
||||
"id": "655720534347cb3f31cdfb3d",
|
||||
"title": "Step 84"
|
||||
},
|
||||
{
|
||||
"id": "65572bb34a7e488224b937fc",
|
||||
"id": "65572399a8e16d50bc2c1ff3",
|
||||
"title": "Step 85"
|
||||
},
|
||||
{
|
||||
"id": "65572e5aaf022790fb4a81b1",
|
||||
"id": "6557421eb6a7a0f0500e3106",
|
||||
"title": "Step 86"
|
||||
},
|
||||
{
|
||||
"id": "655737cd004591b0271d6826",
|
||||
"id": "655724bac464795a0ad91082",
|
||||
"title": "Step 87"
|
||||
},
|
||||
{
|
||||
"id": "65573a97c59ddbbf028ca95e",
|
||||
"id": "655727b2e1e49d6adf584442",
|
||||
"title": "Step 88"
|
||||
},
|
||||
{
|
||||
"id": "65573d0abe4d38cd6fa13f44",
|
||||
"id": "65672adafbaa37a6cef886f7",
|
||||
"title": "Step 89"
|
||||
},
|
||||
{
|
||||
"id": "655b49333d9f265bc1512152",
|
||||
"id": "655729e68e49b277a6b448bd",
|
||||
"title": "Step 90"
|
||||
},
|
||||
{
|
||||
"id": "655b4bbff1dbf66cb2ed4dac",
|
||||
"id": "65572bb34a7e488224b937fc",
|
||||
"title": "Step 91"
|
||||
},
|
||||
{
|
||||
"id": "655b4c8f636d9675953a0388",
|
||||
"id": "65572e5aaf022790fb4a81b1",
|
||||
"title": "Step 92"
|
||||
},
|
||||
{
|
||||
"id": "655b4dad1d38ff7cdd65cbfe",
|
||||
"id": "655737cd004591b0271d6826",
|
||||
"title": "Step 93"
|
||||
},
|
||||
{
|
||||
"id": "65573a97c59ddbbf028ca95e",
|
||||
"title": "Step 94"
|
||||
},
|
||||
{
|
||||
"id": "65573d0abe4d38cd6fa13f44",
|
||||
"title": "Step 95"
|
||||
},
|
||||
{
|
||||
"id": "655b49333d9f265bc1512152",
|
||||
"title": "Step 96"
|
||||
},
|
||||
{
|
||||
"id": "655b4bbff1dbf66cb2ed4dac",
|
||||
"title": "Step 97"
|
||||
},
|
||||
{
|
||||
"id": "655b4c8f636d9675953a0388",
|
||||
"title": "Step 98"
|
||||
},
|
||||
{
|
||||
"id": "655b4dad1d38ff7cdd65cbfe",
|
||||
"title": "Step 99"
|
||||
}
|
||||
],
|
||||
"helpCategory": "JavaScript"
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 653283d07b8f9d294aafa83b
|
||||
title: Step 29
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65362bfd67d61d517deef191
|
||||
title: Step 30
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 653635c731206b718659d3d5
|
||||
title: Step 31
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 653639d63a45a077333312c8
|
||||
title: Step 32
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 653641509b6e7681a9333245
|
||||
title: Step 34
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65364566e84e378837fbaf2a
|
||||
title: Step 36
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+3
-19
@@ -1,29 +1,13 @@
|
||||
---
|
||||
id: 653fb19b515fde28243f727a
|
||||
title: Step 11
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need a way to display the songs in the UI (User Interface). To do this, you'll create a `renderSongs` function using the arrow function syntax.
|
||||
|
||||
An arrow function is a shorter and more concise way to write functions in JavaScript. It's a <dfn>function expression</dfn>, which is a function that's assigned to a variable.
|
||||
|
||||
Here is an example of an arrow function with a single parameter and a single expression in the function body:
|
||||
|
||||
```js
|
||||
const exampleArrowFunction = (param) => {
|
||||
return param
|
||||
};
|
||||
```
|
||||
|
||||
If the function body consists of a single expression, you can omit the curly braces and the `return` keyword. This is called an `implicit return`:
|
||||
|
||||
```js
|
||||
const exampleArrowFunction = (param) => param;
|
||||
```
|
||||
To display the songs in the UI (User Interface), you'll need to create a function.
|
||||
|
||||
Use the arrow function syntax to create a `renderSongs` function that takes in `array` as its parameter.
|
||||
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65420b821b14f25a6b35c3b3
|
||||
title: Step 12
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65420dcfc60580678dad7a92
|
||||
title: Step 14
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 654210a9eda99477f5697a94
|
||||
title: Step 15
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 654212b82fb5cf872f77148f
|
||||
title: Step 16
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 654213f2fad2d48f74d6c239
|
||||
title: Step 17
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 654215fe7b4a899ddceb3b60
|
||||
title: Step 18
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 654218753c255fabb81f57ca
|
||||
title: Step 20
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65422ba173a18b1bedef1bb6
|
||||
title: Step 37
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6552127b2576c2fbc5ecc2ea
|
||||
title: Step 38
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65521badc7b7470edf952372
|
||||
title: Step 40
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65521ec3bb117c195c4f6cb5
|
||||
title: Step 41
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655220a3fa5c3c200bc8e938
|
||||
title: Step 42
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6552303a9a78704f8ff072e9
|
||||
title: Step 43
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655235c2e607297f00316650
|
||||
title: Step 35
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6552385244ccf89b77d6b332
|
||||
title: Step 46
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655243068222c2c1166b90b0
|
||||
title: Step 47
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655476e1ff522252fdcce5e4
|
||||
title: Step 48
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655479aa3e1e0360ae38b7a6
|
||||
title: Step 49
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65547ee197840478a1b95f4b
|
||||
title: Step 50
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6554815fe2472f8bfdab7642
|
||||
title: Step 51
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655482742cc5499726e3f347
|
||||
title: Step 52
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655483ebf0096ba02b2c3d4c
|
||||
title: Step 53
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655485321913feabbc5f00f8
|
||||
title: Step 54
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6554860ea4dfbab2f4786fc8
|
||||
title: Step 55
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655487f686aabfc2a10ba887
|
||||
title: Step 44
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65548f747a4cdafd186948d1
|
||||
title: Step 56
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655490f55c36900779336988
|
||||
title: Step 57
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655492e6b90c7a198c587943
|
||||
title: Step 59
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655494d5a15d6a2567e1ea60
|
||||
title: Step 60
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655495a6bd96e42bc3baa795
|
||||
title: Step 61
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555d17af9ff06a14d399f6d
|
||||
title: Step 62
|
||||
title: Step 68
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555d458687cb3b357834df9
|
||||
title: Step 63
|
||||
title: Step 69
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555d729c9bfd7c3195f1948
|
||||
title: Step 64
|
||||
title: Step 70
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555d7e384056dc9c581fadf
|
||||
title: Step 65
|
||||
title: Step 71
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555d8faed60b9d3e4a6cefb
|
||||
title: Step 66
|
||||
title: Step 72
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555dd138e70cae6b546966d
|
||||
title: Step 67
|
||||
title: Step 73
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555de565387a2efe90a6ccc
|
||||
title: Step 68
|
||||
title: Step 74
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555e04aeb225bfbae237344
|
||||
title: Step 69
|
||||
title: Step 75
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
dashedName: step-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555e0bfe4d69904410f7cd3
|
||||
title: Step 70
|
||||
title: Step 76
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
dashedName: step-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555e39a5f4c6f138c7d9405
|
||||
title: Step 71
|
||||
title: Step 77
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555e57d3e6d9d221c4735be
|
||||
title: Step 72
|
||||
title: Step 78
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555e6cec786da2aadc11ea0
|
||||
title: Step 73
|
||||
title: Step 79
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555e7acdbae972d3e8e0f5b
|
||||
title: Step 74
|
||||
title: Step 80
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555e9197bf1d7416bdd76e0
|
||||
title: Step 75
|
||||
title: Step 81
|
||||
challengeType: 0
|
||||
dashedName: step-75
|
||||
dashedName: step-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6555ebf07ec610585a626f72
|
||||
title: Step 76
|
||||
title: Step 82
|
||||
challengeType: 0
|
||||
dashedName: step-76
|
||||
dashedName: step-82
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65571e742fbf4532d8f98e90
|
||||
title: Step 77
|
||||
title: Step 83
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
dashedName: step-83
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655720534347cb3f31cdfb3d
|
||||
title: Step 78
|
||||
title: Step 84
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
dashedName: step-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65572399a8e16d50bc2c1ff3
|
||||
title: Step 79
|
||||
title: Step 85
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
dashedName: step-85
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655724bac464795a0ad91082
|
||||
title: Step 81
|
||||
title: Step 87
|
||||
challengeType: 0
|
||||
dashedName: step-81
|
||||
dashedName: step-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655727b2e1e49d6adf584442
|
||||
title: Step 82
|
||||
title: Step 88
|
||||
challengeType: 0
|
||||
dashedName: step-82
|
||||
dashedName: step-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655729e68e49b277a6b448bd
|
||||
title: Step 84
|
||||
title: Step 90
|
||||
challengeType: 0
|
||||
dashedName: step-84
|
||||
dashedName: step-90
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65572bb34a7e488224b937fc
|
||||
title: Step 85
|
||||
title: Step 91
|
||||
challengeType: 0
|
||||
dashedName: step-85
|
||||
dashedName: step-91
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65572e5aaf022790fb4a81b1
|
||||
title: Step 86
|
||||
title: Step 92
|
||||
challengeType: 0
|
||||
dashedName: step-86
|
||||
dashedName: step-92
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655737cd004591b0271d6826
|
||||
title: Step 87
|
||||
title: Step 93
|
||||
challengeType: 0
|
||||
dashedName: step-87
|
||||
dashedName: step-93
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65573a97c59ddbbf028ca95e
|
||||
title: Step 88
|
||||
title: Step 94
|
||||
challengeType: 0
|
||||
dashedName: step-88
|
||||
dashedName: step-94
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65573d0abe4d38cd6fa13f44
|
||||
title: Step 89
|
||||
title: Step 95
|
||||
challengeType: 0
|
||||
dashedName: step-89
|
||||
dashedName: step-95
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6557421eb6a7a0f0500e3106
|
||||
title: Step 80
|
||||
title: Step 86
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
dashedName: step-86
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655b49333d9f265bc1512152
|
||||
title: Step 90
|
||||
title: Step 96
|
||||
challengeType: 0
|
||||
dashedName: step-90
|
||||
dashedName: step-96
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655b4bbff1dbf66cb2ed4dac
|
||||
title: Step 91
|
||||
title: Step 97
|
||||
challengeType: 0
|
||||
dashedName: step-91
|
||||
dashedName: step-97
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655b4c8f636d9675953a0388
|
||||
title: Step 92
|
||||
title: Step 98
|
||||
challengeType: 0
|
||||
dashedName: step-92
|
||||
dashedName: step-98
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 655b4dad1d38ff7cdd65cbfe
|
||||
title: Step 93
|
||||
title: Step 99
|
||||
challengeType: 0
|
||||
dashedName: step-93
|
||||
dashedName: step-99
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 656472ed8f552d2f2b3f7883
|
||||
title: Step 33
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6567055f59d39f07d1c542dc
|
||||
title: Step 19
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65671421254eeb489875cdd8
|
||||
title: Step 58
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65672136535209761a5cf02b
|
||||
title: Step 39
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65672adafbaa37a6cef886f7
|
||||
title: Step 83
|
||||
title: Step 89
|
||||
challengeType: 0
|
||||
dashedName: step-83
|
||||
dashedName: step-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 657b2b0b6a48071a6db28e7a
|
||||
title: Step 13
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 659b0093d7db5a1a1122b7bd
|
||||
title: Step 45
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65a608b7e7c75a04ccf0c23c
|
||||
title: Step 22
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65a6098a3405f206312e28f5
|
||||
title: Step 23
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65a609f6e23f3b06c608fb57
|
||||
title: Step 24
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65a60aa3efd8fa079c2d1537
|
||||
title: Step 25
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65a60b0b8b4f96085ac23463
|
||||
title: Step 26
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65c64fe6c770a22db893e931
|
||||
title: Step 21
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65c6532520cf4f323329b2c6
|
||||
title: Step 28
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 65cf1f2cd796c06057bf3f3c
|
||||
title: Step 27
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+640
@@ -0,0 +1,640 @@
|
||||
---
|
||||
id: 660ae3eeef9ad289bece426b
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous projects, you used regular functions. But in the rest of the projects, you will be working with <dfn>arrow functions</dfn>. The next few steps will focus on teaching you the basics of arrow functions.
|
||||
|
||||
An arrow function is an anonymous function expression and a shorter way to write functions. Anonymous means that the function does not have a name. Arrow functions are always anonymous.
|
||||
|
||||
Here is the basic syntax:
|
||||
|
||||
```js
|
||||
() => {}
|
||||
```
|
||||
|
||||
To create a named arrow function, you can assign the function to a variable:
|
||||
|
||||
```js
|
||||
const exampleFunction = () => {
|
||||
// code goes here
|
||||
}
|
||||
```
|
||||
|
||||
Create a new named arrow function called `printGreeting`. Inside the body of that function use the `console.log()` method to print the string `"Hello there!"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a function called `printGreeting`.
|
||||
|
||||
```js
|
||||
assert.isFunction(printGreeting);
|
||||
```
|
||||
|
||||
You should use arrow syntax to create the `printGreeting` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /(let|const)\s+printGreeting\s*=\s*\(.*\)\s*=>\s*{\s*[\s\S]*}\s*;?/)
|
||||
```
|
||||
|
||||
Your `printGreeting` function should include a `console.log('Hello there!')`.
|
||||
|
||||
```js
|
||||
assert.match(printGreeting.toString(), /console\.log\(['"]Hello\s+there!['"]\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>
|
||||
Learn Basic String and Array Methods by Building a Music Player App
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="player">
|
||||
<div class="player-bar">
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h1 class="fcc-title">freeCodeCamp</h1>
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-content">
|
||||
<div id="player-album-art">
|
||||
<img
|
||||
src="https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/quincy-larson-album-art.jpg"
|
||||
alt="song cover art"
|
||||
/>
|
||||
</div>
|
||||
<div class="player-display">
|
||||
<div class="player-display-song-artist">
|
||||
<p id="player-song-title"></p>
|
||||
<p id="player-song-artist"></p>
|
||||
</div>
|
||||
<div class="player-buttons">
|
||||
<button id="previous" class="previous" aria-label="Previous">
|
||||
<svg
|
||||
width="24"
|
||||
height="19"
|
||||
viewBox="0 0 24 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" /><rect
|
||||
width="4.63633"
|
||||
height="18.5453"
|
||||
transform="matrix(-1 0 0 1 4.63633 0)"/></svg>
|
||||
</button>
|
||||
<button id="play" class="play" aria-label="Play">
|
||||
<svg
|
||||
width="17"
|
||||
height="19"
|
||||
viewBox="0 0 17 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
> <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /></svg>
|
||||
</button>
|
||||
<button id="pause" class="pause" aria-label="Pause">
|
||||
<svg
|
||||
width="17"
|
||||
height="19"
|
||||
viewBox="0 0 17 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" /> <path d="M11.4 0H16.15V19H11.4V0Z" /></svg>
|
||||
</button>
|
||||
<button id="next" class="next" aria-label="Next">
|
||||
<svg
|
||||
width="24"
|
||||
height="19"
|
||||
viewBox="0 0 24 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /> <rect x="18.5885" width="4.63633" height="18.5453" /></svg>
|
||||
</button>
|
||||
<button id="shuffle" class="shuffle" aria-label="Shuffle">
|
||||
<svg
|
||||
width="17"
|
||||
height="14"
|
||||
viewBox="0 0 17 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12.2127 0L17 2.9219L12.0759 5.60686L12.1321 3.30594C11.9081 3.30997 11.7043 3.3165 11.528 3.326C11.3777 3.3341 11.2523 3.34411 11.1542 3.35578C11.1053 3.3616 11.0661 3.36749 11.036 3.37309C11.0211 3.37587 11.0095 3.37835 11.001 3.38041C10.9967 3.38143 10.9936 3.38227 10.9913 3.38289C10.989 3.38352 10.988 3.38385 10.9881 3.38382C10.9266 3.40381 10.7572 3.5014 10.4637 3.73265C10.1895 3.94866 9.85452 4.24234 9.47614 4.59282C8.81462 5.20556 8.03912 5.97461 7.25609 6.76752C8.03912 7.56043 8.81462 8.32948 9.47614 8.94223C9.85452 9.29271 10.1895 9.58639 10.4637 9.80239C10.7572 10.0336 10.9266 10.1312 10.9881 10.1512C10.988 10.1512 10.989 10.1515 10.9913 10.1522C10.9936 10.1528 10.9967 10.1536 11.001 10.1546C11.0095 10.1567 11.0211 10.1592 11.036 10.162C11.0661 10.1676 11.1053 10.1734 11.1542 10.1793C11.2523 10.1909 11.3777 10.2009 11.528 10.209C11.7043 10.2185 11.9081 10.2251 12.1321 10.2291L12.0759 7.92819L17 10.6131L12.2127 13.535L12.1558 11.2011C11.9071 11.197 11.677 11.1899 11.4757 11.1791C11.175 11.1629 10.8757 11.1361 10.6878 11.0751C10.4405 10.9947 10.1465 10.7892 9.86244 10.5654C9.55904 10.3263 9.20251 10.0129 8.81601 9.6549C8.14192 9.03051 7.35822 8.2533 6.57518 7.46052C6.2731 7.76927 5.9736 8.07675 5.68453 8.37353C5.24051 8.8294 4.82109 9.26001 4.45467 9.63114C4.10458 9.98574 3.79502 10.2941 3.54834 10.5285C3.42516 10.6455 3.31437 10.7473 3.22005 10.8285C3.13287 10.9035 3.03686 10.9812 2.94938 11.0324C2.46156 11.3178 1.79381 11.3751 1.32395 11.3812C1.07514 11.3845 0.852462 11.3732 0.692065 11.3611C0.611577 11.3551 0.546037 11.3488 0.499864 11.344C0.476761 11.3415 0.458455 11.3394 0.445496 11.3379L0.43012 11.336L0.425557 11.3355L0.423542 11.3352C0.423448 11.3352 0.423143 11.3352 0.485767 10.8535L0.423542 11.3352C0.157529 11.3006 -0.0304782 11.0569 0.00410824 10.7909C0.0386807 10.525 0.282182 10.3374 0.548069 10.3718C0.548087 10.3718 0.548051 10.3718 0.548069 10.3718L0.549944 10.372L0.559616 10.3732C0.568682 10.3743 0.582871 10.3759 0.60165 10.3779C0.639243 10.3818 0.695017 10.3872 0.764728 10.3924C0.90473 10.4029 1.09799 10.4127 1.31133 10.4099C1.76571 10.404 2.20705 10.3412 2.4587 10.194C2.45847 10.1941 2.4583 10.1942 2.4587 10.194C2.46075 10.1926 2.47161 10.1855 2.49271 10.1693C2.51674 10.1508 2.54777 10.1254 2.58634 10.0922C2.66358 10.0258 2.7615 9.93612 2.87917 9.82431C3.11419 9.60097 3.41488 9.30164 3.76339 8.94864C4.1317 8.57559 4.54478 8.15147 4.98424 7.70025C5.27761 7.39904 5.58273 7.08575 5.89415 6.76752C5.58272 6.44928 5.27759 6.13598 4.98421 5.83476C4.54476 5.38355 4.1317 4.95944 3.76339 4.5864C3.41488 4.2334 3.11419 3.93407 2.87917 3.71074C2.7615 3.59892 2.66358 3.50929 2.58634 3.44281C2.54777 3.40961 2.51674 3.38425 2.49271 3.36577C2.4716 3.34954 2.46099 3.34258 2.45894 3.34123C2.45868 3.34108 2.45853 3.34096 2.45894 3.34123C2.2073 3.19405 1.76572 3.13106 1.31133 3.12515C1.09799 3.12238 0.90473 3.13211 0.764728 3.14261C0.695017 3.14784 0.639243 3.15321 0.60165 3.15717C0.582871 3.15915 0.568682 3.16077 0.559616 3.16184L0.549944 3.16301L0.548391 3.1632C0.282436 3.1977 0.0386882 3.01013 0.00410824 2.74417C-0.0304782 2.47816 0.15713 2.23447 0.423143 2.19989L0.485767 2.68154C0.423143 2.19989 0.423048 2.1999 0.423143 2.19989L0.425557 2.19958L0.43012 2.199L0.445496 2.19714C0.458455 2.19561 0.476761 2.19352 0.499864 2.19109C0.546037 2.18622 0.611577 2.17995 0.692065 2.17391C0.852462 2.16188 1.07514 2.15058 1.32395 2.15381C1.79381 2.15992 2.46156 2.21726 2.94938 2.50267C3.03686 2.55385 3.13287 2.63152 3.22005 2.70655C3.31437 2.78773 3.42516 2.8895 3.54834 3.00655C3.79502 3.24097 4.10458 3.54931 4.45467 3.9039C4.82109 4.27504 5.24052 4.70565 5.68455 5.16153C5.97361 5.4583 6.2731 5.76578 6.57518 6.07452C7.35822 5.28174 8.14192 4.50454 8.81601 3.88014C9.20251 3.52214 9.55904 3.20872 9.86244 2.96964C10.1465 2.74581 10.4405 2.54035 10.6878 2.45997C10.8757 2.39892 11.175 2.37219 11.4757 2.35598C11.677 2.34514 11.9071 2.33807 12.1558 2.33396L12.2127 0Z"
|
||||
/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist">
|
||||
<div class="playlist-bar">
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h2 class="playlist-title" id="playlist">Playlist</h2>
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="playlist-songs"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* colors */
|
||||
--primary-color: #dfdfe2;
|
||||
--secondary-color: #ffffff;
|
||||
--app-background-color: #4d4d62;
|
||||
--background-color: #1b1b32;
|
||||
--foreground-color: #3b3b4f;
|
||||
--highlight-color: #f1be32;
|
||||
|
||||
/* font sizes */
|
||||
--root-font-size: 16px;
|
||||
font-size: var(--root-font-size);
|
||||
|
||||
/* font-families */
|
||||
--font-headline: "Roboto Mono", monospace;
|
||||
--font-family: "Lato", sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--app-background-color);
|
||||
color: var(--primary-color);
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--root-font-size);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.player,
|
||||
.playlist {
|
||||
width: 450px;
|
||||
background-color: var(--background-color);
|
||||
border: 3px solid var(--foreground-color);
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 260px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.player-bar,
|
||||
.playlist-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.parallel-lines {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 6px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.parallel-lines > div {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
min-width: 75px;
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.fcc-title,
|
||||
.playlist-title {
|
||||
color: var(--secondary-color);
|
||||
margin: 0 10px;
|
||||
font-family: var(--font-headline);
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: flex;
|
||||
background-color: var(--foreground-color);
|
||||
width: 430px;
|
||||
height: 200px;
|
||||
column-gap: 13px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#player-album-art {
|
||||
background-color: var(--secondary-color);
|
||||
border: 6px solid var(--background-color);
|
||||
}
|
||||
|
||||
#player-album-art img {
|
||||
width: 150px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.player-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
padding: 14px;
|
||||
background-color: var(--background-color);
|
||||
height: 153px;
|
||||
width: 226px;
|
||||
}
|
||||
|
||||
.player-display-song-artist {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.player-buttons svg {
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
|
||||
.playing > svg {
|
||||
fill: var(--highlight-color);
|
||||
}
|
||||
|
||||
.player-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
font-size: var(--root-font-size);
|
||||
outline-color: var(--highlight-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
outline-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.playlist li:not(:last-child) {
|
||||
border-bottom: 1px solid var(--background-color);
|
||||
}
|
||||
|
||||
button:focus,
|
||||
.playlist-song:focus {
|
||||
outline-style: dashed;
|
||||
outline-width: 2px;
|
||||
}
|
||||
|
||||
/* Playlist */
|
||||
.playlist {
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
#playlist-songs {
|
||||
width: 430px;
|
||||
height: 100%;
|
||||
background-color: var(--foreground-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
padding: 8px 9px;
|
||||
visibility: visible;
|
||||
justify-content: start;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
display: flex;
|
||||
height: 55px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
[aria-current="true"] {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
[aria-current="true"] p {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.playlist-song-info {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
column-gap: 7px;
|
||||
padding: 5px 0;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
#player-song-title,
|
||||
#player-song-artist {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#player-song-artist {
|
||||
color: var(--highlight-color);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
#player-song-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.playlist-song-title {
|
||||
font-size: 0.85rem;
|
||||
width: 241px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.playlist-song-artist {
|
||||
font-size: 0.725rem;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.playlist-song-duration {
|
||||
font-size: 0.725rem;
|
||||
margin: auto;
|
||||
font-family: var(--font-headline);
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.playlist-song-delete {
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.playlist-song-delete,
|
||||
.playlist-song-delete {
|
||||
fill: var(--foreground-color);
|
||||
}
|
||||
|
||||
.playlist-song-delete:hover circle,
|
||||
.playlist-song-delete:focus circle {
|
||||
fill: #ff0000;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.player,
|
||||
.playlist {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
#playlist-songs {
|
||||
height: 280px;
|
||||
padding: 5px 6px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
scrollbar-color: var(--background-color) var(--secondary-color);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar-track {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar-thumb {
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 0.813rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.player-bar,
|
||||
.playlist-bar,
|
||||
.player-content,
|
||||
#playlist-songs {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.playlist-song-title {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.playlist-song-artist {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.playlist-song-duration > button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: inline;
|
||||
position: relative;
|
||||
justify-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#player-album-art {
|
||||
z-index: -100;
|
||||
height: 280px;
|
||||
box-shadow: none;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#player-album-art img {
|
||||
width: 100%;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.player-display-song-artist {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.player-display-song-artist > p {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.player-display {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
background-color: transparent;
|
||||
top: 0;
|
||||
height: 280px;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const playlistSongs = document.getElementById("playlist-songs");
|
||||
const playButton = document.getElementById("play");
|
||||
const pauseButton = document.getElementById("pause");
|
||||
const nextButton = document.getElementById("next");
|
||||
const previousButton = document.getElementById("previous");
|
||||
const shuffleButton = document.getElementById("shuffle");
|
||||
|
||||
const allSongs = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Scratching The Surface",
|
||||
artist: "Quincy Larson",
|
||||
duration: "4:25",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Can't Stay Down",
|
||||
artist: "Quincy Larson",
|
||||
duration: "4:15",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Still Learning",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:51",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Cruising for a Musing",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:34",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Never Not Favored",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:35",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "From the Ground Up",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:12",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Walking on Air",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:25",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Can't Stop Me. Can't Even Slow Me Down.",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:52",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "The Surest Way Out is Through",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:10",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Chasing That Feeling",
|
||||
artist: "Quincy Larson",
|
||||
duration: "2:43",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
|
||||
},
|
||||
];
|
||||
|
||||
const audio = new Audio();
|
||||
let userData = {
|
||||
songs: [...allSongs],
|
||||
currentSong: null,
|
||||
songCurrentTime: 0,
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+625
@@ -0,0 +1,625 @@
|
||||
---
|
||||
id: 660ae8ad1475698da3c3c37d
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To call a named arrow function expression, you can reference the function by its name.
|
||||
|
||||
```js
|
||||
exampleArrowFunction();
|
||||
```
|
||||
|
||||
Below your `printGreeting` function definition, call the function. Open up the console to see the output.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call your `printGreeting` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /printGreeting\(\);?/);
|
||||
```
|
||||
|
||||
Your `printGreeting` function call should be below the `printGreeting` function definition.
|
||||
|
||||
```js
|
||||
assert.isBelow(code.indexOf("const printGreeting = () => {"), code.indexOf("printGreeting()"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>
|
||||
Learn Basic String and Array Methods by Building a Music Player App
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="player">
|
||||
<div class="player-bar">
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h1 class="fcc-title">freeCodeCamp</h1>
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-content">
|
||||
<div id="player-album-art">
|
||||
<img
|
||||
src="https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/quincy-larson-album-art.jpg"
|
||||
alt="song cover art"
|
||||
/>
|
||||
</div>
|
||||
<div class="player-display">
|
||||
<div class="player-display-song-artist">
|
||||
<p id="player-song-title"></p>
|
||||
<p id="player-song-artist"></p>
|
||||
</div>
|
||||
<div class="player-buttons">
|
||||
<button id="previous" class="previous" aria-label="Previous">
|
||||
<svg
|
||||
width="24"
|
||||
height="19"
|
||||
viewBox="0 0 24 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" /><rect
|
||||
width="4.63633"
|
||||
height="18.5453"
|
||||
transform="matrix(-1 0 0 1 4.63633 0)"/></svg>
|
||||
</button>
|
||||
<button id="play" class="play" aria-label="Play">
|
||||
<svg
|
||||
width="17"
|
||||
height="19"
|
||||
viewBox="0 0 17 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
> <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /></svg>
|
||||
</button>
|
||||
<button id="pause" class="pause" aria-label="Pause">
|
||||
<svg
|
||||
width="17"
|
||||
height="19"
|
||||
viewBox="0 0 17 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" /> <path d="M11.4 0H16.15V19H11.4V0Z" /></svg>
|
||||
</button>
|
||||
<button id="next" class="next" aria-label="Next">
|
||||
<svg
|
||||
width="24"
|
||||
height="19"
|
||||
viewBox="0 0 24 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /> <rect x="18.5885" width="4.63633" height="18.5453" /></svg>
|
||||
</button>
|
||||
<button id="shuffle" class="shuffle" aria-label="Shuffle">
|
||||
<svg
|
||||
width="17"
|
||||
height="14"
|
||||
viewBox="0 0 17 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12.2127 0L17 2.9219L12.0759 5.60686L12.1321 3.30594C11.9081 3.30997 11.7043 3.3165 11.528 3.326C11.3777 3.3341 11.2523 3.34411 11.1542 3.35578C11.1053 3.3616 11.0661 3.36749 11.036 3.37309C11.0211 3.37587 11.0095 3.37835 11.001 3.38041C10.9967 3.38143 10.9936 3.38227 10.9913 3.38289C10.989 3.38352 10.988 3.38385 10.9881 3.38382C10.9266 3.40381 10.7572 3.5014 10.4637 3.73265C10.1895 3.94866 9.85452 4.24234 9.47614 4.59282C8.81462 5.20556 8.03912 5.97461 7.25609 6.76752C8.03912 7.56043 8.81462 8.32948 9.47614 8.94223C9.85452 9.29271 10.1895 9.58639 10.4637 9.80239C10.7572 10.0336 10.9266 10.1312 10.9881 10.1512C10.988 10.1512 10.989 10.1515 10.9913 10.1522C10.9936 10.1528 10.9967 10.1536 11.001 10.1546C11.0095 10.1567 11.0211 10.1592 11.036 10.162C11.0661 10.1676 11.1053 10.1734 11.1542 10.1793C11.2523 10.1909 11.3777 10.2009 11.528 10.209C11.7043 10.2185 11.9081 10.2251 12.1321 10.2291L12.0759 7.92819L17 10.6131L12.2127 13.535L12.1558 11.2011C11.9071 11.197 11.677 11.1899 11.4757 11.1791C11.175 11.1629 10.8757 11.1361 10.6878 11.0751C10.4405 10.9947 10.1465 10.7892 9.86244 10.5654C9.55904 10.3263 9.20251 10.0129 8.81601 9.6549C8.14192 9.03051 7.35822 8.2533 6.57518 7.46052C6.2731 7.76927 5.9736 8.07675 5.68453 8.37353C5.24051 8.8294 4.82109 9.26001 4.45467 9.63114C4.10458 9.98574 3.79502 10.2941 3.54834 10.5285C3.42516 10.6455 3.31437 10.7473 3.22005 10.8285C3.13287 10.9035 3.03686 10.9812 2.94938 11.0324C2.46156 11.3178 1.79381 11.3751 1.32395 11.3812C1.07514 11.3845 0.852462 11.3732 0.692065 11.3611C0.611577 11.3551 0.546037 11.3488 0.499864 11.344C0.476761 11.3415 0.458455 11.3394 0.445496 11.3379L0.43012 11.336L0.425557 11.3355L0.423542 11.3352C0.423448 11.3352 0.423143 11.3352 0.485767 10.8535L0.423542 11.3352C0.157529 11.3006 -0.0304782 11.0569 0.00410824 10.7909C0.0386807 10.525 0.282182 10.3374 0.548069 10.3718C0.548087 10.3718 0.548051 10.3718 0.548069 10.3718L0.549944 10.372L0.559616 10.3732C0.568682 10.3743 0.582871 10.3759 0.60165 10.3779C0.639243 10.3818 0.695017 10.3872 0.764728 10.3924C0.90473 10.4029 1.09799 10.4127 1.31133 10.4099C1.76571 10.404 2.20705 10.3412 2.4587 10.194C2.45847 10.1941 2.4583 10.1942 2.4587 10.194C2.46075 10.1926 2.47161 10.1855 2.49271 10.1693C2.51674 10.1508 2.54777 10.1254 2.58634 10.0922C2.66358 10.0258 2.7615 9.93612 2.87917 9.82431C3.11419 9.60097 3.41488 9.30164 3.76339 8.94864C4.1317 8.57559 4.54478 8.15147 4.98424 7.70025C5.27761 7.39904 5.58273 7.08575 5.89415 6.76752C5.58272 6.44928 5.27759 6.13598 4.98421 5.83476C4.54476 5.38355 4.1317 4.95944 3.76339 4.5864C3.41488 4.2334 3.11419 3.93407 2.87917 3.71074C2.7615 3.59892 2.66358 3.50929 2.58634 3.44281C2.54777 3.40961 2.51674 3.38425 2.49271 3.36577C2.4716 3.34954 2.46099 3.34258 2.45894 3.34123C2.45868 3.34108 2.45853 3.34096 2.45894 3.34123C2.2073 3.19405 1.76572 3.13106 1.31133 3.12515C1.09799 3.12238 0.90473 3.13211 0.764728 3.14261C0.695017 3.14784 0.639243 3.15321 0.60165 3.15717C0.582871 3.15915 0.568682 3.16077 0.559616 3.16184L0.549944 3.16301L0.548391 3.1632C0.282436 3.1977 0.0386882 3.01013 0.00410824 2.74417C-0.0304782 2.47816 0.15713 2.23447 0.423143 2.19989L0.485767 2.68154C0.423143 2.19989 0.423048 2.1999 0.423143 2.19989L0.425557 2.19958L0.43012 2.199L0.445496 2.19714C0.458455 2.19561 0.476761 2.19352 0.499864 2.19109C0.546037 2.18622 0.611577 2.17995 0.692065 2.17391C0.852462 2.16188 1.07514 2.15058 1.32395 2.15381C1.79381 2.15992 2.46156 2.21726 2.94938 2.50267C3.03686 2.55385 3.13287 2.63152 3.22005 2.70655C3.31437 2.78773 3.42516 2.8895 3.54834 3.00655C3.79502 3.24097 4.10458 3.54931 4.45467 3.9039C4.82109 4.27504 5.24052 4.70565 5.68455 5.16153C5.97361 5.4583 6.2731 5.76578 6.57518 6.07452C7.35822 5.28174 8.14192 4.50454 8.81601 3.88014C9.20251 3.52214 9.55904 3.20872 9.86244 2.96964C10.1465 2.74581 10.4405 2.54035 10.6878 2.45997C10.8757 2.39892 11.175 2.37219 11.4757 2.35598C11.677 2.34514 11.9071 2.33807 12.1558 2.33396L12.2127 0Z"
|
||||
/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist">
|
||||
<div class="playlist-bar">
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h2 class="playlist-title" id="playlist">Playlist</h2>
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="playlist-songs"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* colors */
|
||||
--primary-color: #dfdfe2;
|
||||
--secondary-color: #ffffff;
|
||||
--app-background-color: #4d4d62;
|
||||
--background-color: #1b1b32;
|
||||
--foreground-color: #3b3b4f;
|
||||
--highlight-color: #f1be32;
|
||||
|
||||
/* font sizes */
|
||||
--root-font-size: 16px;
|
||||
font-size: var(--root-font-size);
|
||||
|
||||
/* font-families */
|
||||
--font-headline: "Roboto Mono", monospace;
|
||||
--font-family: "Lato", sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--app-background-color);
|
||||
color: var(--primary-color);
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--root-font-size);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.player,
|
||||
.playlist {
|
||||
width: 450px;
|
||||
background-color: var(--background-color);
|
||||
border: 3px solid var(--foreground-color);
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 260px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.player-bar,
|
||||
.playlist-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.parallel-lines {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 6px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.parallel-lines > div {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
min-width: 75px;
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.fcc-title,
|
||||
.playlist-title {
|
||||
color: var(--secondary-color);
|
||||
margin: 0 10px;
|
||||
font-family: var(--font-headline);
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: flex;
|
||||
background-color: var(--foreground-color);
|
||||
width: 430px;
|
||||
height: 200px;
|
||||
column-gap: 13px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#player-album-art {
|
||||
background-color: var(--secondary-color);
|
||||
border: 6px solid var(--background-color);
|
||||
}
|
||||
|
||||
#player-album-art img {
|
||||
width: 150px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.player-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
padding: 14px;
|
||||
background-color: var(--background-color);
|
||||
height: 153px;
|
||||
width: 226px;
|
||||
}
|
||||
|
||||
.player-display-song-artist {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.player-buttons svg {
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
|
||||
.playing > svg {
|
||||
fill: var(--highlight-color);
|
||||
}
|
||||
|
||||
.player-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
font-size: var(--root-font-size);
|
||||
outline-color: var(--highlight-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
outline-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.playlist li:not(:last-child) {
|
||||
border-bottom: 1px solid var(--background-color);
|
||||
}
|
||||
|
||||
button:focus,
|
||||
.playlist-song:focus {
|
||||
outline-style: dashed;
|
||||
outline-width: 2px;
|
||||
}
|
||||
|
||||
/* Playlist */
|
||||
.playlist {
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
#playlist-songs {
|
||||
width: 430px;
|
||||
height: 100%;
|
||||
background-color: var(--foreground-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
padding: 8px 9px;
|
||||
visibility: visible;
|
||||
justify-content: start;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
display: flex;
|
||||
height: 55px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
[aria-current="true"] {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
[aria-current="true"] p {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.playlist-song-info {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
column-gap: 7px;
|
||||
padding: 5px 0;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
#player-song-title,
|
||||
#player-song-artist {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#player-song-artist {
|
||||
color: var(--highlight-color);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
#player-song-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.playlist-song-title {
|
||||
font-size: 0.85rem;
|
||||
width: 241px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.playlist-song-artist {
|
||||
font-size: 0.725rem;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.playlist-song-duration {
|
||||
font-size: 0.725rem;
|
||||
margin: auto;
|
||||
font-family: var(--font-headline);
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.playlist-song-delete {
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.playlist-song-delete,
|
||||
.playlist-song-delete {
|
||||
fill: var(--foreground-color);
|
||||
}
|
||||
|
||||
.playlist-song-delete:hover circle,
|
||||
.playlist-song-delete:focus circle {
|
||||
fill: #ff0000;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.player,
|
||||
.playlist {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
#playlist-songs {
|
||||
height: 280px;
|
||||
padding: 5px 6px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
scrollbar-color: var(--background-color) var(--secondary-color);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar-track {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar-thumb {
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 0.813rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.player-bar,
|
||||
.playlist-bar,
|
||||
.player-content,
|
||||
#playlist-songs {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.playlist-song-title {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.playlist-song-artist {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.playlist-song-duration > button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: inline;
|
||||
position: relative;
|
||||
justify-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#player-album-art {
|
||||
z-index: -100;
|
||||
height: 280px;
|
||||
box-shadow: none;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#player-album-art img {
|
||||
width: 100%;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.player-display-song-artist {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.player-display-song-artist > p {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.player-display {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
background-color: transparent;
|
||||
top: 0;
|
||||
height: 280px;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const playlistSongs = document.getElementById("playlist-songs");
|
||||
const playButton = document.getElementById("play");
|
||||
const pauseButton = document.getElementById("pause");
|
||||
const nextButton = document.getElementById("next");
|
||||
const previousButton = document.getElementById("previous");
|
||||
const shuffleButton = document.getElementById("shuffle");
|
||||
|
||||
const allSongs = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Scratching The Surface",
|
||||
artist: "Quincy Larson",
|
||||
duration: "4:25",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Can't Stay Down",
|
||||
artist: "Quincy Larson",
|
||||
duration: "4:15",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Still Learning",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:51",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Cruising for a Musing",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:34",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Never Not Favored",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:35",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "From the Ground Up",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:12",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Walking on Air",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:25",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Can't Stop Me. Can't Even Slow Me Down.",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:52",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "The Surest Way Out is Through",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:10",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Chasing That Feeling",
|
||||
artist: "Quincy Larson",
|
||||
duration: "2:43",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
|
||||
},
|
||||
];
|
||||
|
||||
const audio = new Audio();
|
||||
let userData = {
|
||||
songs: [...allSongs],
|
||||
currentSong: null,
|
||||
songCurrentTime: 0,
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
const printGreeting = () => {
|
||||
console.log('Hello there!');
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+677
@@ -0,0 +1,677 @@
|
||||
---
|
||||
id: 660aea8782242e8f4bcc42d8
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Just like regular functions, arrow functions can accept multiple parameters.
|
||||
|
||||
Here is an example of a named arrow function with one parameter:
|
||||
|
||||
```js
|
||||
const greet = (name) => {
|
||||
console.log(`Hello, ${name}!`);
|
||||
};
|
||||
```
|
||||
|
||||
If the function only has one parameter, you can omit the parentheses around the parameter list like this:
|
||||
|
||||
```js
|
||||
const greet = name => {
|
||||
console.log(`Hello, ${name}!`);
|
||||
};
|
||||
```
|
||||
|
||||
Create a new named arrow function called `printMessage` that has one parameter called `org`. Inside the body of that function, add a console statement. Inside that console statement, add the template literal `${org} is awesome!`.
|
||||
|
||||
Below your `printMessage` function, call the function and pass in the string `"freeCodeCamp"` as an argument.
|
||||
|
||||
Open up the console to see the result.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `printMessage` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(printMessage);
|
||||
```
|
||||
|
||||
You should use arrow function syntax.
|
||||
|
||||
```js
|
||||
assert.match(code, /(let|const)\s+printMessage\s*=\s*?\(?.*?\)?\s*=>\s*{\s*[\s\S]*}\s*;?/);
|
||||
```
|
||||
|
||||
Your `printMessage` function should have a parameter called `org`.
|
||||
|
||||
```js
|
||||
assert.match(code, /(let|const)\s+printMessage\s*=\s*?\(?org?\)?\s*=>\s*{\s*[\s\S]*}\s*;?/)
|
||||
|
||||
```
|
||||
|
||||
Your `printMessage` function should have a console statement.
|
||||
|
||||
```js
|
||||
assert.match(printMessage.toString(),/console\.log\(/);
|
||||
```
|
||||
|
||||
Your console statement should include the template literal `${org} is awesome!`.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\(\s*`[^`]*\${org} is awesome![^`]*`\s*\)/);
|
||||
```
|
||||
|
||||
You should call the `printMessage` function and pass in the string `"freeCodeCamp"`.
|
||||
|
||||
```js
|
||||
assert.match(code,/printMessage\(\s*["']freeCodeCamp["']\s*\)/);
|
||||
```
|
||||
|
||||
Your function call should be below your `printMessage` function definition.
|
||||
|
||||
```js
|
||||
const functionCall = code.indexOf("printMessage(");
|
||||
const functionDefinition = code.indexOf("printMessage =");
|
||||
|
||||
assert.isBelow(functionDefinition, functionCall);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>
|
||||
Learn Basic String and Array Methods by Building a Music Player App
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="player">
|
||||
<div class="player-bar">
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h1 class="fcc-title">freeCodeCamp</h1>
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-content">
|
||||
<div id="player-album-art">
|
||||
<img
|
||||
src="https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/quincy-larson-album-art.jpg"
|
||||
alt="song cover art"
|
||||
/>
|
||||
</div>
|
||||
<div class="player-display">
|
||||
<div class="player-display-song-artist">
|
||||
<p id="player-song-title"></p>
|
||||
<p id="player-song-artist"></p>
|
||||
</div>
|
||||
<div class="player-buttons">
|
||||
<button id="previous" class="previous" aria-label="Previous">
|
||||
<svg
|
||||
width="24"
|
||||
height="19"
|
||||
viewBox="0 0 24 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" /><rect
|
||||
width="4.63633"
|
||||
height="18.5453"
|
||||
transform="matrix(-1 0 0 1 4.63633 0)"/></svg>
|
||||
</button>
|
||||
<button id="play" class="play" aria-label="Play">
|
||||
<svg
|
||||
width="17"
|
||||
height="19"
|
||||
viewBox="0 0 17 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
> <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /></svg>
|
||||
</button>
|
||||
<button id="pause" class="pause" aria-label="Pause">
|
||||
<svg
|
||||
width="17"
|
||||
height="19"
|
||||
viewBox="0 0 17 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" /> <path d="M11.4 0H16.15V19H11.4V0Z" /></svg>
|
||||
</button>
|
||||
<button id="next" class="next" aria-label="Next">
|
||||
<svg
|
||||
width="24"
|
||||
height="19"
|
||||
viewBox="0 0 24 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /> <rect x="18.5885" width="4.63633" height="18.5453" /></svg>
|
||||
</button>
|
||||
<button id="shuffle" class="shuffle" aria-label="Shuffle">
|
||||
<svg
|
||||
width="17"
|
||||
height="14"
|
||||
viewBox="0 0 17 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12.2127 0L17 2.9219L12.0759 5.60686L12.1321 3.30594C11.9081 3.30997 11.7043 3.3165 11.528 3.326C11.3777 3.3341 11.2523 3.34411 11.1542 3.35578C11.1053 3.3616 11.0661 3.36749 11.036 3.37309C11.0211 3.37587 11.0095 3.37835 11.001 3.38041C10.9967 3.38143 10.9936 3.38227 10.9913 3.38289C10.989 3.38352 10.988 3.38385 10.9881 3.38382C10.9266 3.40381 10.7572 3.5014 10.4637 3.73265C10.1895 3.94866 9.85452 4.24234 9.47614 4.59282C8.81462 5.20556 8.03912 5.97461 7.25609 6.76752C8.03912 7.56043 8.81462 8.32948 9.47614 8.94223C9.85452 9.29271 10.1895 9.58639 10.4637 9.80239C10.7572 10.0336 10.9266 10.1312 10.9881 10.1512C10.988 10.1512 10.989 10.1515 10.9913 10.1522C10.9936 10.1528 10.9967 10.1536 11.001 10.1546C11.0095 10.1567 11.0211 10.1592 11.036 10.162C11.0661 10.1676 11.1053 10.1734 11.1542 10.1793C11.2523 10.1909 11.3777 10.2009 11.528 10.209C11.7043 10.2185 11.9081 10.2251 12.1321 10.2291L12.0759 7.92819L17 10.6131L12.2127 13.535L12.1558 11.2011C11.9071 11.197 11.677 11.1899 11.4757 11.1791C11.175 11.1629 10.8757 11.1361 10.6878 11.0751C10.4405 10.9947 10.1465 10.7892 9.86244 10.5654C9.55904 10.3263 9.20251 10.0129 8.81601 9.6549C8.14192 9.03051 7.35822 8.2533 6.57518 7.46052C6.2731 7.76927 5.9736 8.07675 5.68453 8.37353C5.24051 8.8294 4.82109 9.26001 4.45467 9.63114C4.10458 9.98574 3.79502 10.2941 3.54834 10.5285C3.42516 10.6455 3.31437 10.7473 3.22005 10.8285C3.13287 10.9035 3.03686 10.9812 2.94938 11.0324C2.46156 11.3178 1.79381 11.3751 1.32395 11.3812C1.07514 11.3845 0.852462 11.3732 0.692065 11.3611C0.611577 11.3551 0.546037 11.3488 0.499864 11.344C0.476761 11.3415 0.458455 11.3394 0.445496 11.3379L0.43012 11.336L0.425557 11.3355L0.423542 11.3352C0.423448 11.3352 0.423143 11.3352 0.485767 10.8535L0.423542 11.3352C0.157529 11.3006 -0.0304782 11.0569 0.00410824 10.7909C0.0386807 10.525 0.282182 10.3374 0.548069 10.3718C0.548087 10.3718 0.548051 10.3718 0.548069 10.3718L0.549944 10.372L0.559616 10.3732C0.568682 10.3743 0.582871 10.3759 0.60165 10.3779C0.639243 10.3818 0.695017 10.3872 0.764728 10.3924C0.90473 10.4029 1.09799 10.4127 1.31133 10.4099C1.76571 10.404 2.20705 10.3412 2.4587 10.194C2.45847 10.1941 2.4583 10.1942 2.4587 10.194C2.46075 10.1926 2.47161 10.1855 2.49271 10.1693C2.51674 10.1508 2.54777 10.1254 2.58634 10.0922C2.66358 10.0258 2.7615 9.93612 2.87917 9.82431C3.11419 9.60097 3.41488 9.30164 3.76339 8.94864C4.1317 8.57559 4.54478 8.15147 4.98424 7.70025C5.27761 7.39904 5.58273 7.08575 5.89415 6.76752C5.58272 6.44928 5.27759 6.13598 4.98421 5.83476C4.54476 5.38355 4.1317 4.95944 3.76339 4.5864C3.41488 4.2334 3.11419 3.93407 2.87917 3.71074C2.7615 3.59892 2.66358 3.50929 2.58634 3.44281C2.54777 3.40961 2.51674 3.38425 2.49271 3.36577C2.4716 3.34954 2.46099 3.34258 2.45894 3.34123C2.45868 3.34108 2.45853 3.34096 2.45894 3.34123C2.2073 3.19405 1.76572 3.13106 1.31133 3.12515C1.09799 3.12238 0.90473 3.13211 0.764728 3.14261C0.695017 3.14784 0.639243 3.15321 0.60165 3.15717C0.582871 3.15915 0.568682 3.16077 0.559616 3.16184L0.549944 3.16301L0.548391 3.1632C0.282436 3.1977 0.0386882 3.01013 0.00410824 2.74417C-0.0304782 2.47816 0.15713 2.23447 0.423143 2.19989L0.485767 2.68154C0.423143 2.19989 0.423048 2.1999 0.423143 2.19989L0.425557 2.19958L0.43012 2.199L0.445496 2.19714C0.458455 2.19561 0.476761 2.19352 0.499864 2.19109C0.546037 2.18622 0.611577 2.17995 0.692065 2.17391C0.852462 2.16188 1.07514 2.15058 1.32395 2.15381C1.79381 2.15992 2.46156 2.21726 2.94938 2.50267C3.03686 2.55385 3.13287 2.63152 3.22005 2.70655C3.31437 2.78773 3.42516 2.8895 3.54834 3.00655C3.79502 3.24097 4.10458 3.54931 4.45467 3.9039C4.82109 4.27504 5.24052 4.70565 5.68455 5.16153C5.97361 5.4583 6.2731 5.76578 6.57518 6.07452C7.35822 5.28174 8.14192 4.50454 8.81601 3.88014C9.20251 3.52214 9.55904 3.20872 9.86244 2.96964C10.1465 2.74581 10.4405 2.54035 10.6878 2.45997C10.8757 2.39892 11.175 2.37219 11.4757 2.35598C11.677 2.34514 11.9071 2.33807 12.1558 2.33396L12.2127 0Z"
|
||||
/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist">
|
||||
<div class="playlist-bar">
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h2 class="playlist-title" id="playlist">Playlist</h2>
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="playlist-songs"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* colors */
|
||||
--primary-color: #dfdfe2;
|
||||
--secondary-color: #ffffff;
|
||||
--app-background-color: #4d4d62;
|
||||
--background-color: #1b1b32;
|
||||
--foreground-color: #3b3b4f;
|
||||
--highlight-color: #f1be32;
|
||||
|
||||
/* font sizes */
|
||||
--root-font-size: 16px;
|
||||
font-size: var(--root-font-size);
|
||||
|
||||
/* font-families */
|
||||
--font-headline: "Roboto Mono", monospace;
|
||||
--font-family: "Lato", sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--app-background-color);
|
||||
color: var(--primary-color);
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--root-font-size);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.player,
|
||||
.playlist {
|
||||
width: 450px;
|
||||
background-color: var(--background-color);
|
||||
border: 3px solid var(--foreground-color);
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 260px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.player-bar,
|
||||
.playlist-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.parallel-lines {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 6px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.parallel-lines > div {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
min-width: 75px;
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.fcc-title,
|
||||
.playlist-title {
|
||||
color: var(--secondary-color);
|
||||
margin: 0 10px;
|
||||
font-family: var(--font-headline);
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: flex;
|
||||
background-color: var(--foreground-color);
|
||||
width: 430px;
|
||||
height: 200px;
|
||||
column-gap: 13px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#player-album-art {
|
||||
background-color: var(--secondary-color);
|
||||
border: 6px solid var(--background-color);
|
||||
}
|
||||
|
||||
#player-album-art img {
|
||||
width: 150px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.player-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
padding: 14px;
|
||||
background-color: var(--background-color);
|
||||
height: 153px;
|
||||
width: 226px;
|
||||
}
|
||||
|
||||
.player-display-song-artist {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.player-buttons svg {
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
|
||||
.playing > svg {
|
||||
fill: var(--highlight-color);
|
||||
}
|
||||
|
||||
.player-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
font-size: var(--root-font-size);
|
||||
outline-color: var(--highlight-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
outline-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.playlist li:not(:last-child) {
|
||||
border-bottom: 1px solid var(--background-color);
|
||||
}
|
||||
|
||||
button:focus,
|
||||
.playlist-song:focus {
|
||||
outline-style: dashed;
|
||||
outline-width: 2px;
|
||||
}
|
||||
|
||||
/* Playlist */
|
||||
.playlist {
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
#playlist-songs {
|
||||
width: 430px;
|
||||
height: 100%;
|
||||
background-color: var(--foreground-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
padding: 8px 9px;
|
||||
visibility: visible;
|
||||
justify-content: start;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
display: flex;
|
||||
height: 55px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
[aria-current="true"] {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
[aria-current="true"] p {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.playlist-song-info {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
column-gap: 7px;
|
||||
padding: 5px 0;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
#player-song-title,
|
||||
#player-song-artist {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#player-song-artist {
|
||||
color: var(--highlight-color);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
#player-song-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.playlist-song-title {
|
||||
font-size: 0.85rem;
|
||||
width: 241px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.playlist-song-artist {
|
||||
font-size: 0.725rem;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.playlist-song-duration {
|
||||
font-size: 0.725rem;
|
||||
margin: auto;
|
||||
font-family: var(--font-headline);
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.playlist-song-delete {
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.playlist-song-delete,
|
||||
.playlist-song-delete {
|
||||
fill: var(--foreground-color);
|
||||
}
|
||||
|
||||
.playlist-song-delete:hover circle,
|
||||
.playlist-song-delete:focus circle {
|
||||
fill: #ff0000;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.player,
|
||||
.playlist {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
#playlist-songs {
|
||||
height: 280px;
|
||||
padding: 5px 6px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
scrollbar-color: var(--background-color) var(--secondary-color);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar-track {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar-thumb {
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 0.813rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.player-bar,
|
||||
.playlist-bar,
|
||||
.player-content,
|
||||
#playlist-songs {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.playlist-song-title {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.playlist-song-artist {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.playlist-song-duration > button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: inline;
|
||||
position: relative;
|
||||
justify-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#player-album-art {
|
||||
z-index: -100;
|
||||
height: 280px;
|
||||
box-shadow: none;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#player-album-art img {
|
||||
width: 100%;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.player-display-song-artist {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.player-display-song-artist > p {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.player-display {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
background-color: transparent;
|
||||
top: 0;
|
||||
height: 280px;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const playlistSongs = document.getElementById("playlist-songs");
|
||||
const playButton = document.getElementById("play");
|
||||
const pauseButton = document.getElementById("pause");
|
||||
const nextButton = document.getElementById("next");
|
||||
const previousButton = document.getElementById("previous");
|
||||
const shuffleButton = document.getElementById("shuffle");
|
||||
|
||||
const allSongs = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Scratching The Surface",
|
||||
artist: "Quincy Larson",
|
||||
duration: "4:25",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Can't Stay Down",
|
||||
artist: "Quincy Larson",
|
||||
duration: "4:15",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Still Learning",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:51",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Cruising for a Musing",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:34",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Never Not Favored",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:35",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "From the Ground Up",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:12",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Walking on Air",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:25",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Can't Stop Me. Can't Even Slow Me Down.",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:52",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "The Surest Way Out is Through",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:10",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Chasing That Feeling",
|
||||
artist: "Quincy Larson",
|
||||
duration: "2:43",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
|
||||
},
|
||||
];
|
||||
|
||||
const audio = new Audio();
|
||||
let userData = {
|
||||
songs: [...allSongs],
|
||||
currentSong: null,
|
||||
songCurrentTime: 0,
|
||||
};
|
||||
|
||||
const printGreeting = () => {
|
||||
console.log('Hello there!');
|
||||
}
|
||||
|
||||
printGreeting();
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+662
@@ -0,0 +1,662 @@
|
||||
---
|
||||
id: 660aef1d5bd6c092f1931830
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Just like regular functions, arrow functions can return values.
|
||||
|
||||
Here is an example of an arrow function returning the result of multiplying two numbers:
|
||||
|
||||
```js
|
||||
const multiplyTwoNumbers = (num1, num2) => {
|
||||
return num1 * num2;
|
||||
}
|
||||
|
||||
// Output: 12
|
||||
console.log(multiplyTwoNumbers(3, 4));
|
||||
```
|
||||
|
||||
Create a new variable called `addTwoNumbers` and assign it an arrow function. This arrow function should take two parameters called `num1` and `num2`. Inside the body of the function, return the expression of adding `num1` and `num2`.
|
||||
|
||||
Below the `addTwoNumbers` function, add a console statement. Inside that console statement, call the `addTwoNumbers` function and pass in the numbers `3` and `4` as arguments.
|
||||
|
||||
Open up the console to see the output.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a function called `addTwoNumbers`.
|
||||
|
||||
```js
|
||||
assert.isFunction(addTwoNumbers);
|
||||
```
|
||||
|
||||
Your `addTwoNumbers` function should use arrow function syntax.
|
||||
|
||||
```js
|
||||
assert.match(code, /(let|const)\s+addTwoNumbers\s*=\s*?\(?.*?\)?\s*=>\s*{\s*[\s\S]*}\s*;?/);
|
||||
```
|
||||
|
||||
Your `addTwoNumbers` function should have two parameters called `num1` and `num2`.
|
||||
|
||||
```js
|
||||
assert.match(addTwoNumbers.toString(), /\(num1,\s*num2\)/);
|
||||
```
|
||||
|
||||
Your `addTwoNumbers` function should return the expression of adding `num1` and `num2`.
|
||||
|
||||
```js
|
||||
assert.match(addTwoNumbers.toString(), /return\s+num1\s*\+\s*num2/);
|
||||
```
|
||||
|
||||
You should have a `console.log(addTwoNumbers(3, 4));` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\(addTwoNumbers\(3,\s*4\)\);?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>
|
||||
Learn Basic String and Array Methods by Building a Music Player App
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="player">
|
||||
<div class="player-bar">
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h1 class="fcc-title">freeCodeCamp</h1>
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-content">
|
||||
<div id="player-album-art">
|
||||
<img
|
||||
src="https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/quincy-larson-album-art.jpg"
|
||||
alt="song cover art"
|
||||
/>
|
||||
</div>
|
||||
<div class="player-display">
|
||||
<div class="player-display-song-artist">
|
||||
<p id="player-song-title"></p>
|
||||
<p id="player-song-artist"></p>
|
||||
</div>
|
||||
<div class="player-buttons">
|
||||
<button id="previous" class="previous" aria-label="Previous">
|
||||
<svg
|
||||
width="24"
|
||||
height="19"
|
||||
viewBox="0 0 24 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" /><rect
|
||||
width="4.63633"
|
||||
height="18.5453"
|
||||
transform="matrix(-1 0 0 1 4.63633 0)"/></svg>
|
||||
</button>
|
||||
<button id="play" class="play" aria-label="Play">
|
||||
<svg
|
||||
width="17"
|
||||
height="19"
|
||||
viewBox="0 0 17 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
> <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /></svg>
|
||||
</button>
|
||||
<button id="pause" class="pause" aria-label="Pause">
|
||||
<svg
|
||||
width="17"
|
||||
height="19"
|
||||
viewBox="0 0 17 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" /> <path d="M11.4 0H16.15V19H11.4V0Z" /></svg>
|
||||
</button>
|
||||
<button id="next" class="next" aria-label="Next">
|
||||
<svg
|
||||
width="24"
|
||||
height="19"
|
||||
viewBox="0 0 24 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /> <rect x="18.5885" width="4.63633" height="18.5453" /></svg>
|
||||
</button>
|
||||
<button id="shuffle" class="shuffle" aria-label="Shuffle">
|
||||
<svg
|
||||
width="17"
|
||||
height="14"
|
||||
viewBox="0 0 17 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12.2127 0L17 2.9219L12.0759 5.60686L12.1321 3.30594C11.9081 3.30997 11.7043 3.3165 11.528 3.326C11.3777 3.3341 11.2523 3.34411 11.1542 3.35578C11.1053 3.3616 11.0661 3.36749 11.036 3.37309C11.0211 3.37587 11.0095 3.37835 11.001 3.38041C10.9967 3.38143 10.9936 3.38227 10.9913 3.38289C10.989 3.38352 10.988 3.38385 10.9881 3.38382C10.9266 3.40381 10.7572 3.5014 10.4637 3.73265C10.1895 3.94866 9.85452 4.24234 9.47614 4.59282C8.81462 5.20556 8.03912 5.97461 7.25609 6.76752C8.03912 7.56043 8.81462 8.32948 9.47614 8.94223C9.85452 9.29271 10.1895 9.58639 10.4637 9.80239C10.7572 10.0336 10.9266 10.1312 10.9881 10.1512C10.988 10.1512 10.989 10.1515 10.9913 10.1522C10.9936 10.1528 10.9967 10.1536 11.001 10.1546C11.0095 10.1567 11.0211 10.1592 11.036 10.162C11.0661 10.1676 11.1053 10.1734 11.1542 10.1793C11.2523 10.1909 11.3777 10.2009 11.528 10.209C11.7043 10.2185 11.9081 10.2251 12.1321 10.2291L12.0759 7.92819L17 10.6131L12.2127 13.535L12.1558 11.2011C11.9071 11.197 11.677 11.1899 11.4757 11.1791C11.175 11.1629 10.8757 11.1361 10.6878 11.0751C10.4405 10.9947 10.1465 10.7892 9.86244 10.5654C9.55904 10.3263 9.20251 10.0129 8.81601 9.6549C8.14192 9.03051 7.35822 8.2533 6.57518 7.46052C6.2731 7.76927 5.9736 8.07675 5.68453 8.37353C5.24051 8.8294 4.82109 9.26001 4.45467 9.63114C4.10458 9.98574 3.79502 10.2941 3.54834 10.5285C3.42516 10.6455 3.31437 10.7473 3.22005 10.8285C3.13287 10.9035 3.03686 10.9812 2.94938 11.0324C2.46156 11.3178 1.79381 11.3751 1.32395 11.3812C1.07514 11.3845 0.852462 11.3732 0.692065 11.3611C0.611577 11.3551 0.546037 11.3488 0.499864 11.344C0.476761 11.3415 0.458455 11.3394 0.445496 11.3379L0.43012 11.336L0.425557 11.3355L0.423542 11.3352C0.423448 11.3352 0.423143 11.3352 0.485767 10.8535L0.423542 11.3352C0.157529 11.3006 -0.0304782 11.0569 0.00410824 10.7909C0.0386807 10.525 0.282182 10.3374 0.548069 10.3718C0.548087 10.3718 0.548051 10.3718 0.548069 10.3718L0.549944 10.372L0.559616 10.3732C0.568682 10.3743 0.582871 10.3759 0.60165 10.3779C0.639243 10.3818 0.695017 10.3872 0.764728 10.3924C0.90473 10.4029 1.09799 10.4127 1.31133 10.4099C1.76571 10.404 2.20705 10.3412 2.4587 10.194C2.45847 10.1941 2.4583 10.1942 2.4587 10.194C2.46075 10.1926 2.47161 10.1855 2.49271 10.1693C2.51674 10.1508 2.54777 10.1254 2.58634 10.0922C2.66358 10.0258 2.7615 9.93612 2.87917 9.82431C3.11419 9.60097 3.41488 9.30164 3.76339 8.94864C4.1317 8.57559 4.54478 8.15147 4.98424 7.70025C5.27761 7.39904 5.58273 7.08575 5.89415 6.76752C5.58272 6.44928 5.27759 6.13598 4.98421 5.83476C4.54476 5.38355 4.1317 4.95944 3.76339 4.5864C3.41488 4.2334 3.11419 3.93407 2.87917 3.71074C2.7615 3.59892 2.66358 3.50929 2.58634 3.44281C2.54777 3.40961 2.51674 3.38425 2.49271 3.36577C2.4716 3.34954 2.46099 3.34258 2.45894 3.34123C2.45868 3.34108 2.45853 3.34096 2.45894 3.34123C2.2073 3.19405 1.76572 3.13106 1.31133 3.12515C1.09799 3.12238 0.90473 3.13211 0.764728 3.14261C0.695017 3.14784 0.639243 3.15321 0.60165 3.15717C0.582871 3.15915 0.568682 3.16077 0.559616 3.16184L0.549944 3.16301L0.548391 3.1632C0.282436 3.1977 0.0386882 3.01013 0.00410824 2.74417C-0.0304782 2.47816 0.15713 2.23447 0.423143 2.19989L0.485767 2.68154C0.423143 2.19989 0.423048 2.1999 0.423143 2.19989L0.425557 2.19958L0.43012 2.199L0.445496 2.19714C0.458455 2.19561 0.476761 2.19352 0.499864 2.19109C0.546037 2.18622 0.611577 2.17995 0.692065 2.17391C0.852462 2.16188 1.07514 2.15058 1.32395 2.15381C1.79381 2.15992 2.46156 2.21726 2.94938 2.50267C3.03686 2.55385 3.13287 2.63152 3.22005 2.70655C3.31437 2.78773 3.42516 2.8895 3.54834 3.00655C3.79502 3.24097 4.10458 3.54931 4.45467 3.9039C4.82109 4.27504 5.24052 4.70565 5.68455 5.16153C5.97361 5.4583 6.2731 5.76578 6.57518 6.07452C7.35822 5.28174 8.14192 4.50454 8.81601 3.88014C9.20251 3.52214 9.55904 3.20872 9.86244 2.96964C10.1465 2.74581 10.4405 2.54035 10.6878 2.45997C10.8757 2.39892 11.175 2.37219 11.4757 2.35598C11.677 2.34514 11.9071 2.33807 12.1558 2.33396L12.2127 0Z"
|
||||
/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist">
|
||||
<div class="playlist-bar">
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h2 class="playlist-title" id="playlist">Playlist</h2>
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="playlist-songs"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* colors */
|
||||
--primary-color: #dfdfe2;
|
||||
--secondary-color: #ffffff;
|
||||
--app-background-color: #4d4d62;
|
||||
--background-color: #1b1b32;
|
||||
--foreground-color: #3b3b4f;
|
||||
--highlight-color: #f1be32;
|
||||
|
||||
/* font sizes */
|
||||
--root-font-size: 16px;
|
||||
font-size: var(--root-font-size);
|
||||
|
||||
/* font-families */
|
||||
--font-headline: "Roboto Mono", monospace;
|
||||
--font-family: "Lato", sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--app-background-color);
|
||||
color: var(--primary-color);
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--root-font-size);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.player,
|
||||
.playlist {
|
||||
width: 450px;
|
||||
background-color: var(--background-color);
|
||||
border: 3px solid var(--foreground-color);
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 260px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.player-bar,
|
||||
.playlist-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.parallel-lines {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 6px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.parallel-lines > div {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
min-width: 75px;
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.fcc-title,
|
||||
.playlist-title {
|
||||
color: var(--secondary-color);
|
||||
margin: 0 10px;
|
||||
font-family: var(--font-headline);
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: flex;
|
||||
background-color: var(--foreground-color);
|
||||
width: 430px;
|
||||
height: 200px;
|
||||
column-gap: 13px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#player-album-art {
|
||||
background-color: var(--secondary-color);
|
||||
border: 6px solid var(--background-color);
|
||||
}
|
||||
|
||||
#player-album-art img {
|
||||
width: 150px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.player-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
padding: 14px;
|
||||
background-color: var(--background-color);
|
||||
height: 153px;
|
||||
width: 226px;
|
||||
}
|
||||
|
||||
.player-display-song-artist {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.player-buttons svg {
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
|
||||
.playing > svg {
|
||||
fill: var(--highlight-color);
|
||||
}
|
||||
|
||||
.player-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
font-size: var(--root-font-size);
|
||||
outline-color: var(--highlight-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
outline-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.playlist li:not(:last-child) {
|
||||
border-bottom: 1px solid var(--background-color);
|
||||
}
|
||||
|
||||
button:focus,
|
||||
.playlist-song:focus {
|
||||
outline-style: dashed;
|
||||
outline-width: 2px;
|
||||
}
|
||||
|
||||
/* Playlist */
|
||||
.playlist {
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
#playlist-songs {
|
||||
width: 430px;
|
||||
height: 100%;
|
||||
background-color: var(--foreground-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
padding: 8px 9px;
|
||||
visibility: visible;
|
||||
justify-content: start;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
display: flex;
|
||||
height: 55px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
[aria-current="true"] {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
[aria-current="true"] p {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.playlist-song-info {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
column-gap: 7px;
|
||||
padding: 5px 0;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
#player-song-title,
|
||||
#player-song-artist {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#player-song-artist {
|
||||
color: var(--highlight-color);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
#player-song-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.playlist-song-title {
|
||||
font-size: 0.85rem;
|
||||
width: 241px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.playlist-song-artist {
|
||||
font-size: 0.725rem;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.playlist-song-duration {
|
||||
font-size: 0.725rem;
|
||||
margin: auto;
|
||||
font-family: var(--font-headline);
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.playlist-song-delete {
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.playlist-song-delete,
|
||||
.playlist-song-delete {
|
||||
fill: var(--foreground-color);
|
||||
}
|
||||
|
||||
.playlist-song-delete:hover circle,
|
||||
.playlist-song-delete:focus circle {
|
||||
fill: #ff0000;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.player,
|
||||
.playlist {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
#playlist-songs {
|
||||
height: 280px;
|
||||
padding: 5px 6px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
scrollbar-color: var(--background-color) var(--secondary-color);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar-track {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar-thumb {
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 0.813rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.player-bar,
|
||||
.playlist-bar,
|
||||
.player-content,
|
||||
#playlist-songs {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.playlist-song-title {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.playlist-song-artist {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.playlist-song-duration > button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: inline;
|
||||
position: relative;
|
||||
justify-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#player-album-art {
|
||||
z-index: -100;
|
||||
height: 280px;
|
||||
box-shadow: none;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#player-album-art img {
|
||||
width: 100%;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.player-display-song-artist {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.player-display-song-artist > p {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.player-display {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
background-color: transparent;
|
||||
top: 0;
|
||||
height: 280px;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const playlistSongs = document.getElementById("playlist-songs");
|
||||
const playButton = document.getElementById("play");
|
||||
const pauseButton = document.getElementById("pause");
|
||||
const nextButton = document.getElementById("next");
|
||||
const previousButton = document.getElementById("previous");
|
||||
const shuffleButton = document.getElementById("shuffle");
|
||||
|
||||
const allSongs = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Scratching The Surface",
|
||||
artist: "Quincy Larson",
|
||||
duration: "4:25",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Can't Stay Down",
|
||||
artist: "Quincy Larson",
|
||||
duration: "4:15",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Still Learning",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:51",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Cruising for a Musing",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:34",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Never Not Favored",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:35",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "From the Ground Up",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:12",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Walking on Air",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:25",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Can't Stop Me. Can't Even Slow Me Down.",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:52",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "The Surest Way Out is Through",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:10",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Chasing That Feeling",
|
||||
artist: "Quincy Larson",
|
||||
duration: "2:43",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
|
||||
},
|
||||
];
|
||||
|
||||
const audio = new Audio();
|
||||
let userData = {
|
||||
songs: [...allSongs],
|
||||
currentSong: null,
|
||||
songCurrentTime: 0,
|
||||
};
|
||||
|
||||
const printGreeting = () => {
|
||||
console.log('Hello there!');
|
||||
}
|
||||
|
||||
printGreeting();
|
||||
|
||||
const printMessage = org => {
|
||||
console.log(`${org} is awesome!`);
|
||||
}
|
||||
|
||||
printMessage('freeCodeCamp');
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+642
@@ -0,0 +1,642 @@
|
||||
---
|
||||
id: 660af2b86c0fca95f7570fc5
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If the arrow function is returning a simple expression, you can omit the `return` keyword and the curly braces `{}`. This is called an implicit return.
|
||||
|
||||
```js
|
||||
const multiplyTwoNumbers = (num1, num2) => num1 * num2;
|
||||
```
|
||||
|
||||
If your arrow function has multiple lines of code in the function body, then you need to use the `return` keyword and the curly braces `{}`.
|
||||
|
||||
```js
|
||||
const getTax = (price) => {
|
||||
const taxRate = 0.08;
|
||||
const tax = price * taxRate;
|
||||
return tax;
|
||||
};
|
||||
```
|
||||
|
||||
Refactor, or update, your `addTwoNumbers` function to remove the `return` keyword and the curly braces `{}`. Your `addTwoNumbers` function should instead use an implicit return.
|
||||
|
||||
Open up the console to make sure that you are still getting the correct output.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your refactored `addTwoNumbers` function should use an implicit return.
|
||||
|
||||
```js
|
||||
assert.match(code, /(let|const)\s+addTwoNumbers\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*num1\s*\+\s*num2\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>
|
||||
Learn Basic String and Array Methods by Building a Music Player App
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="player">
|
||||
<div class="player-bar">
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h1 class="fcc-title">freeCodeCamp</h1>
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-content">
|
||||
<div id="player-album-art">
|
||||
<img
|
||||
src="https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/quincy-larson-album-art.jpg"
|
||||
alt="song cover art"
|
||||
/>
|
||||
</div>
|
||||
<div class="player-display">
|
||||
<div class="player-display-song-artist">
|
||||
<p id="player-song-title"></p>
|
||||
<p id="player-song-artist"></p>
|
||||
</div>
|
||||
<div class="player-buttons">
|
||||
<button id="previous" class="previous" aria-label="Previous">
|
||||
<svg
|
||||
width="24"
|
||||
height="19"
|
||||
viewBox="0 0 24 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" /><rect
|
||||
width="4.63633"
|
||||
height="18.5453"
|
||||
transform="matrix(-1 0 0 1 4.63633 0)"/></svg>
|
||||
</button>
|
||||
<button id="play" class="play" aria-label="Play">
|
||||
<svg
|
||||
width="17"
|
||||
height="19"
|
||||
viewBox="0 0 17 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
> <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /></svg>
|
||||
</button>
|
||||
<button id="pause" class="pause" aria-label="Pause">
|
||||
<svg
|
||||
width="17"
|
||||
height="19"
|
||||
viewBox="0 0 17 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" /> <path d="M11.4 0H16.15V19H11.4V0Z" /></svg>
|
||||
</button>
|
||||
<button id="next" class="next" aria-label="Next">
|
||||
<svg
|
||||
width="24"
|
||||
height="19"
|
||||
viewBox="0 0 24 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /> <rect x="18.5885" width="4.63633" height="18.5453" /></svg>
|
||||
</button>
|
||||
<button id="shuffle" class="shuffle" aria-label="Shuffle">
|
||||
<svg
|
||||
width="17"
|
||||
height="14"
|
||||
viewBox="0 0 17 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12.2127 0L17 2.9219L12.0759 5.60686L12.1321 3.30594C11.9081 3.30997 11.7043 3.3165 11.528 3.326C11.3777 3.3341 11.2523 3.34411 11.1542 3.35578C11.1053 3.3616 11.0661 3.36749 11.036 3.37309C11.0211 3.37587 11.0095 3.37835 11.001 3.38041C10.9967 3.38143 10.9936 3.38227 10.9913 3.38289C10.989 3.38352 10.988 3.38385 10.9881 3.38382C10.9266 3.40381 10.7572 3.5014 10.4637 3.73265C10.1895 3.94866 9.85452 4.24234 9.47614 4.59282C8.81462 5.20556 8.03912 5.97461 7.25609 6.76752C8.03912 7.56043 8.81462 8.32948 9.47614 8.94223C9.85452 9.29271 10.1895 9.58639 10.4637 9.80239C10.7572 10.0336 10.9266 10.1312 10.9881 10.1512C10.988 10.1512 10.989 10.1515 10.9913 10.1522C10.9936 10.1528 10.9967 10.1536 11.001 10.1546C11.0095 10.1567 11.0211 10.1592 11.036 10.162C11.0661 10.1676 11.1053 10.1734 11.1542 10.1793C11.2523 10.1909 11.3777 10.2009 11.528 10.209C11.7043 10.2185 11.9081 10.2251 12.1321 10.2291L12.0759 7.92819L17 10.6131L12.2127 13.535L12.1558 11.2011C11.9071 11.197 11.677 11.1899 11.4757 11.1791C11.175 11.1629 10.8757 11.1361 10.6878 11.0751C10.4405 10.9947 10.1465 10.7892 9.86244 10.5654C9.55904 10.3263 9.20251 10.0129 8.81601 9.6549C8.14192 9.03051 7.35822 8.2533 6.57518 7.46052C6.2731 7.76927 5.9736 8.07675 5.68453 8.37353C5.24051 8.8294 4.82109 9.26001 4.45467 9.63114C4.10458 9.98574 3.79502 10.2941 3.54834 10.5285C3.42516 10.6455 3.31437 10.7473 3.22005 10.8285C3.13287 10.9035 3.03686 10.9812 2.94938 11.0324C2.46156 11.3178 1.79381 11.3751 1.32395 11.3812C1.07514 11.3845 0.852462 11.3732 0.692065 11.3611C0.611577 11.3551 0.546037 11.3488 0.499864 11.344C0.476761 11.3415 0.458455 11.3394 0.445496 11.3379L0.43012 11.336L0.425557 11.3355L0.423542 11.3352C0.423448 11.3352 0.423143 11.3352 0.485767 10.8535L0.423542 11.3352C0.157529 11.3006 -0.0304782 11.0569 0.00410824 10.7909C0.0386807 10.525 0.282182 10.3374 0.548069 10.3718C0.548087 10.3718 0.548051 10.3718 0.548069 10.3718L0.549944 10.372L0.559616 10.3732C0.568682 10.3743 0.582871 10.3759 0.60165 10.3779C0.639243 10.3818 0.695017 10.3872 0.764728 10.3924C0.90473 10.4029 1.09799 10.4127 1.31133 10.4099C1.76571 10.404 2.20705 10.3412 2.4587 10.194C2.45847 10.1941 2.4583 10.1942 2.4587 10.194C2.46075 10.1926 2.47161 10.1855 2.49271 10.1693C2.51674 10.1508 2.54777 10.1254 2.58634 10.0922C2.66358 10.0258 2.7615 9.93612 2.87917 9.82431C3.11419 9.60097 3.41488 9.30164 3.76339 8.94864C4.1317 8.57559 4.54478 8.15147 4.98424 7.70025C5.27761 7.39904 5.58273 7.08575 5.89415 6.76752C5.58272 6.44928 5.27759 6.13598 4.98421 5.83476C4.54476 5.38355 4.1317 4.95944 3.76339 4.5864C3.41488 4.2334 3.11419 3.93407 2.87917 3.71074C2.7615 3.59892 2.66358 3.50929 2.58634 3.44281C2.54777 3.40961 2.51674 3.38425 2.49271 3.36577C2.4716 3.34954 2.46099 3.34258 2.45894 3.34123C2.45868 3.34108 2.45853 3.34096 2.45894 3.34123C2.2073 3.19405 1.76572 3.13106 1.31133 3.12515C1.09799 3.12238 0.90473 3.13211 0.764728 3.14261C0.695017 3.14784 0.639243 3.15321 0.60165 3.15717C0.582871 3.15915 0.568682 3.16077 0.559616 3.16184L0.549944 3.16301L0.548391 3.1632C0.282436 3.1977 0.0386882 3.01013 0.00410824 2.74417C-0.0304782 2.47816 0.15713 2.23447 0.423143 2.19989L0.485767 2.68154C0.423143 2.19989 0.423048 2.1999 0.423143 2.19989L0.425557 2.19958L0.43012 2.199L0.445496 2.19714C0.458455 2.19561 0.476761 2.19352 0.499864 2.19109C0.546037 2.18622 0.611577 2.17995 0.692065 2.17391C0.852462 2.16188 1.07514 2.15058 1.32395 2.15381C1.79381 2.15992 2.46156 2.21726 2.94938 2.50267C3.03686 2.55385 3.13287 2.63152 3.22005 2.70655C3.31437 2.78773 3.42516 2.8895 3.54834 3.00655C3.79502 3.24097 4.10458 3.54931 4.45467 3.9039C4.82109 4.27504 5.24052 4.70565 5.68455 5.16153C5.97361 5.4583 6.2731 5.76578 6.57518 6.07452C7.35822 5.28174 8.14192 4.50454 8.81601 3.88014C9.20251 3.52214 9.55904 3.20872 9.86244 2.96964C10.1465 2.74581 10.4405 2.54035 10.6878 2.45997C10.8757 2.39892 11.175 2.37219 11.4757 2.35598C11.677 2.34514 11.9071 2.33807 12.1558 2.33396L12.2127 0Z"
|
||||
/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist">
|
||||
<div class="playlist-bar">
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h2 class="playlist-title" id="playlist">Playlist</h2>
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="playlist-songs"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* colors */
|
||||
--primary-color: #dfdfe2;
|
||||
--secondary-color: #ffffff;
|
||||
--app-background-color: #4d4d62;
|
||||
--background-color: #1b1b32;
|
||||
--foreground-color: #3b3b4f;
|
||||
--highlight-color: #f1be32;
|
||||
|
||||
/* font sizes */
|
||||
--root-font-size: 16px;
|
||||
font-size: var(--root-font-size);
|
||||
|
||||
/* font-families */
|
||||
--font-headline: "Roboto Mono", monospace;
|
||||
--font-family: "Lato", sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--app-background-color);
|
||||
color: var(--primary-color);
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--root-font-size);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.player,
|
||||
.playlist {
|
||||
width: 450px;
|
||||
background-color: var(--background-color);
|
||||
border: 3px solid var(--foreground-color);
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 260px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.player-bar,
|
||||
.playlist-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.parallel-lines {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 6px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.parallel-lines > div {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
min-width: 75px;
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.fcc-title,
|
||||
.playlist-title {
|
||||
color: var(--secondary-color);
|
||||
margin: 0 10px;
|
||||
font-family: var(--font-headline);
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: flex;
|
||||
background-color: var(--foreground-color);
|
||||
width: 430px;
|
||||
height: 200px;
|
||||
column-gap: 13px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#player-album-art {
|
||||
background-color: var(--secondary-color);
|
||||
border: 6px solid var(--background-color);
|
||||
}
|
||||
|
||||
#player-album-art img {
|
||||
width: 150px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.player-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
padding: 14px;
|
||||
background-color: var(--background-color);
|
||||
height: 153px;
|
||||
width: 226px;
|
||||
}
|
||||
|
||||
.player-display-song-artist {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.player-buttons svg {
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
|
||||
.playing > svg {
|
||||
fill: var(--highlight-color);
|
||||
}
|
||||
|
||||
.player-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
font-size: var(--root-font-size);
|
||||
outline-color: var(--highlight-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
outline-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.playlist li:not(:last-child) {
|
||||
border-bottom: 1px solid var(--background-color);
|
||||
}
|
||||
|
||||
button:focus,
|
||||
.playlist-song:focus {
|
||||
outline-style: dashed;
|
||||
outline-width: 2px;
|
||||
}
|
||||
|
||||
/* Playlist */
|
||||
.playlist {
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
#playlist-songs {
|
||||
width: 430px;
|
||||
height: 100%;
|
||||
background-color: var(--foreground-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
padding: 8px 9px;
|
||||
visibility: visible;
|
||||
justify-content: start;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
display: flex;
|
||||
height: 55px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
[aria-current="true"] {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
[aria-current="true"] p {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.playlist-song-info {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
column-gap: 7px;
|
||||
padding: 5px 0;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
#player-song-title,
|
||||
#player-song-artist {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#player-song-artist {
|
||||
color: var(--highlight-color);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
#player-song-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.playlist-song-title {
|
||||
font-size: 0.85rem;
|
||||
width: 241px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.playlist-song-artist {
|
||||
font-size: 0.725rem;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.playlist-song-duration {
|
||||
font-size: 0.725rem;
|
||||
margin: auto;
|
||||
font-family: var(--font-headline);
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.playlist-song-delete {
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.playlist-song-delete,
|
||||
.playlist-song-delete {
|
||||
fill: var(--foreground-color);
|
||||
}
|
||||
|
||||
.playlist-song-delete:hover circle,
|
||||
.playlist-song-delete:focus circle {
|
||||
fill: #ff0000;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.player,
|
||||
.playlist {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
#playlist-songs {
|
||||
height: 280px;
|
||||
padding: 5px 6px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
scrollbar-color: var(--background-color) var(--secondary-color);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar-track {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar-thumb {
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 0.813rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.player-bar,
|
||||
.playlist-bar,
|
||||
.player-content,
|
||||
#playlist-songs {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.playlist-song-title {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.playlist-song-artist {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.playlist-song-duration > button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: inline;
|
||||
position: relative;
|
||||
justify-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#player-album-art {
|
||||
z-index: -100;
|
||||
height: 280px;
|
||||
box-shadow: none;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#player-album-art img {
|
||||
width: 100%;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.player-display-song-artist {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.player-display-song-artist > p {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.player-display {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
background-color: transparent;
|
||||
top: 0;
|
||||
height: 280px;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const playlistSongs = document.getElementById("playlist-songs");
|
||||
const playButton = document.getElementById("play");
|
||||
const pauseButton = document.getElementById("pause");
|
||||
const nextButton = document.getElementById("next");
|
||||
const previousButton = document.getElementById("previous");
|
||||
const shuffleButton = document.getElementById("shuffle");
|
||||
|
||||
const allSongs = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Scratching The Surface",
|
||||
artist: "Quincy Larson",
|
||||
duration: "4:25",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Can't Stay Down",
|
||||
artist: "Quincy Larson",
|
||||
duration: "4:15",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Still Learning",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:51",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Cruising for a Musing",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:34",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Never Not Favored",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:35",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "From the Ground Up",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:12",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Walking on Air",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:25",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Can't Stop Me. Can't Even Slow Me Down.",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:52",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "The Surest Way Out is Through",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:10",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Chasing That Feeling",
|
||||
artist: "Quincy Larson",
|
||||
duration: "2:43",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
|
||||
},
|
||||
];
|
||||
|
||||
const audio = new Audio();
|
||||
let userData = {
|
||||
songs: [...allSongs],
|
||||
currentSong: null,
|
||||
songCurrentTime: 0,
|
||||
};
|
||||
|
||||
const printGreeting = () => {
|
||||
console.log('Hello there!');
|
||||
}
|
||||
|
||||
printGreeting();
|
||||
|
||||
const printMessage = org => {
|
||||
console.log(`${org} is awesome!`);
|
||||
}
|
||||
|
||||
printMessage('freeCodeCamp');
|
||||
--fcc-editable-region--
|
||||
const addTwoNumbers = (num1, num2) => {
|
||||
return num1 + num2
|
||||
}
|
||||
--fcc-editable-region--
|
||||
console.log(addTwoNumbers(3,4));
|
||||
```
|
||||
+655
@@ -0,0 +1,655 @@
|
||||
---
|
||||
id: 660af462d18730978fdf5c50
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to apply what you have learned about arrow functions to your music player project.
|
||||
|
||||
Start by removing the `printGreeting`, `printMessage`, and `addTwoNumbers` functions. Also, remove all of the console statements and function calls.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not have a `printGreeting` function.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /const printGreeting = () => {/);
|
||||
```
|
||||
|
||||
You should not have a `printMessage` function.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /const printMessage = org => {/);
|
||||
```
|
||||
|
||||
You should not have an `addTwoNumbers` function.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /const addTwoNumbers = \(num1, num2\) => num1 \+ num2/);
|
||||
```
|
||||
|
||||
You should not have a `printGreeting();` function call.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /printGreeting\(\);?/);
|
||||
```
|
||||
|
||||
You should not have a `printMessage('freeCodeCamp');` function call.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /printMessage\('freeCodeCamp'\);?/);
|
||||
```
|
||||
|
||||
You should not have a `console.log(addTwoNumbers(3,4));` console statement.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /console\.log\(addTwoNumbers\(3,4\)\);?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>
|
||||
Learn Basic String and Array Methods by Building a Music Player App
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="player">
|
||||
<div class="player-bar">
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h1 class="fcc-title">freeCodeCamp</h1>
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-content">
|
||||
<div id="player-album-art">
|
||||
<img
|
||||
src="https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/quincy-larson-album-art.jpg"
|
||||
alt="song cover art"
|
||||
/>
|
||||
</div>
|
||||
<div class="player-display">
|
||||
<div class="player-display-song-artist">
|
||||
<p id="player-song-title"></p>
|
||||
<p id="player-song-artist"></p>
|
||||
</div>
|
||||
<div class="player-buttons">
|
||||
<button id="previous" class="previous" aria-label="Previous">
|
||||
<svg
|
||||
width="24"
|
||||
height="19"
|
||||
viewBox="0 0 24 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" /><rect
|
||||
width="4.63633"
|
||||
height="18.5453"
|
||||
transform="matrix(-1 0 0 1 4.63633 0)"/></svg>
|
||||
</button>
|
||||
<button id="play" class="play" aria-label="Play">
|
||||
<svg
|
||||
width="17"
|
||||
height="19"
|
||||
viewBox="0 0 17 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
> <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /></svg>
|
||||
</button>
|
||||
<button id="pause" class="pause" aria-label="Pause">
|
||||
<svg
|
||||
width="17"
|
||||
height="19"
|
||||
viewBox="0 0 17 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" /> <path d="M11.4 0H16.15V19H11.4V0Z" /></svg>
|
||||
</button>
|
||||
<button id="next" class="next" aria-label="Next">
|
||||
<svg
|
||||
width="24"
|
||||
height="19"
|
||||
viewBox="0 0 24 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" /> <rect x="18.5885" width="4.63633" height="18.5453" /></svg>
|
||||
</button>
|
||||
<button id="shuffle" class="shuffle" aria-label="Shuffle">
|
||||
<svg
|
||||
width="17"
|
||||
height="14"
|
||||
viewBox="0 0 17 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12.2127 0L17 2.9219L12.0759 5.60686L12.1321 3.30594C11.9081 3.30997 11.7043 3.3165 11.528 3.326C11.3777 3.3341 11.2523 3.34411 11.1542 3.35578C11.1053 3.3616 11.0661 3.36749 11.036 3.37309C11.0211 3.37587 11.0095 3.37835 11.001 3.38041C10.9967 3.38143 10.9936 3.38227 10.9913 3.38289C10.989 3.38352 10.988 3.38385 10.9881 3.38382C10.9266 3.40381 10.7572 3.5014 10.4637 3.73265C10.1895 3.94866 9.85452 4.24234 9.47614 4.59282C8.81462 5.20556 8.03912 5.97461 7.25609 6.76752C8.03912 7.56043 8.81462 8.32948 9.47614 8.94223C9.85452 9.29271 10.1895 9.58639 10.4637 9.80239C10.7572 10.0336 10.9266 10.1312 10.9881 10.1512C10.988 10.1512 10.989 10.1515 10.9913 10.1522C10.9936 10.1528 10.9967 10.1536 11.001 10.1546C11.0095 10.1567 11.0211 10.1592 11.036 10.162C11.0661 10.1676 11.1053 10.1734 11.1542 10.1793C11.2523 10.1909 11.3777 10.2009 11.528 10.209C11.7043 10.2185 11.9081 10.2251 12.1321 10.2291L12.0759 7.92819L17 10.6131L12.2127 13.535L12.1558 11.2011C11.9071 11.197 11.677 11.1899 11.4757 11.1791C11.175 11.1629 10.8757 11.1361 10.6878 11.0751C10.4405 10.9947 10.1465 10.7892 9.86244 10.5654C9.55904 10.3263 9.20251 10.0129 8.81601 9.6549C8.14192 9.03051 7.35822 8.2533 6.57518 7.46052C6.2731 7.76927 5.9736 8.07675 5.68453 8.37353C5.24051 8.8294 4.82109 9.26001 4.45467 9.63114C4.10458 9.98574 3.79502 10.2941 3.54834 10.5285C3.42516 10.6455 3.31437 10.7473 3.22005 10.8285C3.13287 10.9035 3.03686 10.9812 2.94938 11.0324C2.46156 11.3178 1.79381 11.3751 1.32395 11.3812C1.07514 11.3845 0.852462 11.3732 0.692065 11.3611C0.611577 11.3551 0.546037 11.3488 0.499864 11.344C0.476761 11.3415 0.458455 11.3394 0.445496 11.3379L0.43012 11.336L0.425557 11.3355L0.423542 11.3352C0.423448 11.3352 0.423143 11.3352 0.485767 10.8535L0.423542 11.3352C0.157529 11.3006 -0.0304782 11.0569 0.00410824 10.7909C0.0386807 10.525 0.282182 10.3374 0.548069 10.3718C0.548087 10.3718 0.548051 10.3718 0.548069 10.3718L0.549944 10.372L0.559616 10.3732C0.568682 10.3743 0.582871 10.3759 0.60165 10.3779C0.639243 10.3818 0.695017 10.3872 0.764728 10.3924C0.90473 10.4029 1.09799 10.4127 1.31133 10.4099C1.76571 10.404 2.20705 10.3412 2.4587 10.194C2.45847 10.1941 2.4583 10.1942 2.4587 10.194C2.46075 10.1926 2.47161 10.1855 2.49271 10.1693C2.51674 10.1508 2.54777 10.1254 2.58634 10.0922C2.66358 10.0258 2.7615 9.93612 2.87917 9.82431C3.11419 9.60097 3.41488 9.30164 3.76339 8.94864C4.1317 8.57559 4.54478 8.15147 4.98424 7.70025C5.27761 7.39904 5.58273 7.08575 5.89415 6.76752C5.58272 6.44928 5.27759 6.13598 4.98421 5.83476C4.54476 5.38355 4.1317 4.95944 3.76339 4.5864C3.41488 4.2334 3.11419 3.93407 2.87917 3.71074C2.7615 3.59892 2.66358 3.50929 2.58634 3.44281C2.54777 3.40961 2.51674 3.38425 2.49271 3.36577C2.4716 3.34954 2.46099 3.34258 2.45894 3.34123C2.45868 3.34108 2.45853 3.34096 2.45894 3.34123C2.2073 3.19405 1.76572 3.13106 1.31133 3.12515C1.09799 3.12238 0.90473 3.13211 0.764728 3.14261C0.695017 3.14784 0.639243 3.15321 0.60165 3.15717C0.582871 3.15915 0.568682 3.16077 0.559616 3.16184L0.549944 3.16301L0.548391 3.1632C0.282436 3.1977 0.0386882 3.01013 0.00410824 2.74417C-0.0304782 2.47816 0.15713 2.23447 0.423143 2.19989L0.485767 2.68154C0.423143 2.19989 0.423048 2.1999 0.423143 2.19989L0.425557 2.19958L0.43012 2.199L0.445496 2.19714C0.458455 2.19561 0.476761 2.19352 0.499864 2.19109C0.546037 2.18622 0.611577 2.17995 0.692065 2.17391C0.852462 2.16188 1.07514 2.15058 1.32395 2.15381C1.79381 2.15992 2.46156 2.21726 2.94938 2.50267C3.03686 2.55385 3.13287 2.63152 3.22005 2.70655C3.31437 2.78773 3.42516 2.8895 3.54834 3.00655C3.79502 3.24097 4.10458 3.54931 4.45467 3.9039C4.82109 4.27504 5.24052 4.70565 5.68455 5.16153C5.97361 5.4583 6.2731 5.76578 6.57518 6.07452C7.35822 5.28174 8.14192 4.50454 8.81601 3.88014C9.20251 3.52214 9.55904 3.20872 9.86244 2.96964C10.1465 2.74581 10.4405 2.54035 10.6878 2.45997C10.8757 2.39892 11.175 2.37219 11.4757 2.35598C11.677 2.34514 11.9071 2.33807 12.1558 2.33396L12.2127 0Z"
|
||||
/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist">
|
||||
<div class="playlist-bar">
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h2 class="playlist-title" id="playlist">Playlist</h2>
|
||||
<div class="parallel-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="playlist-songs"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* colors */
|
||||
--primary-color: #dfdfe2;
|
||||
--secondary-color: #ffffff;
|
||||
--app-background-color: #4d4d62;
|
||||
--background-color: #1b1b32;
|
||||
--foreground-color: #3b3b4f;
|
||||
--highlight-color: #f1be32;
|
||||
|
||||
/* font sizes */
|
||||
--root-font-size: 16px;
|
||||
font-size: var(--root-font-size);
|
||||
|
||||
/* font-families */
|
||||
--font-headline: "Roboto Mono", monospace;
|
||||
--font-family: "Lato", sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--app-background-color);
|
||||
color: var(--primary-color);
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--root-font-size);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.player,
|
||||
.playlist {
|
||||
width: 450px;
|
||||
background-color: var(--background-color);
|
||||
border: 3px solid var(--foreground-color);
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 260px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.player-bar,
|
||||
.playlist-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.parallel-lines {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 6px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.parallel-lines > div {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
min-width: 75px;
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.fcc-title,
|
||||
.playlist-title {
|
||||
color: var(--secondary-color);
|
||||
margin: 0 10px;
|
||||
font-family: var(--font-headline);
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: flex;
|
||||
background-color: var(--foreground-color);
|
||||
width: 430px;
|
||||
height: 200px;
|
||||
column-gap: 13px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#player-album-art {
|
||||
background-color: var(--secondary-color);
|
||||
border: 6px solid var(--background-color);
|
||||
}
|
||||
|
||||
#player-album-art img {
|
||||
width: 150px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.player-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
padding: 14px;
|
||||
background-color: var(--background-color);
|
||||
height: 153px;
|
||||
width: 226px;
|
||||
}
|
||||
|
||||
.player-display-song-artist {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.player-buttons svg {
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
|
||||
.playing > svg {
|
||||
fill: var(--highlight-color);
|
||||
}
|
||||
|
||||
.player-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
font-size: var(--root-font-size);
|
||||
outline-color: var(--highlight-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
outline-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.playlist li:not(:last-child) {
|
||||
border-bottom: 1px solid var(--background-color);
|
||||
}
|
||||
|
||||
button:focus,
|
||||
.playlist-song:focus {
|
||||
outline-style: dashed;
|
||||
outline-width: 2px;
|
||||
}
|
||||
|
||||
/* Playlist */
|
||||
.playlist {
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
#playlist-songs {
|
||||
width: 430px;
|
||||
height: 100%;
|
||||
background-color: var(--foreground-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
padding: 8px 9px;
|
||||
visibility: visible;
|
||||
justify-content: start;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
display: flex;
|
||||
height: 55px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
[aria-current="true"] {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
[aria-current="true"] p {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.playlist-song-info {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
column-gap: 7px;
|
||||
padding: 5px 0;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
#player-song-title,
|
||||
#player-song-artist {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#player-song-artist {
|
||||
color: var(--highlight-color);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
#player-song-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.playlist-song-title {
|
||||
font-size: 0.85rem;
|
||||
width: 241px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.playlist-song-artist {
|
||||
font-size: 0.725rem;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.playlist-song-duration {
|
||||
font-size: 0.725rem;
|
||||
margin: auto;
|
||||
font-family: var(--font-headline);
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.playlist-song-delete {
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.playlist-song-delete,
|
||||
.playlist-song-delete {
|
||||
fill: var(--foreground-color);
|
||||
}
|
||||
|
||||
.playlist-song-delete:hover circle,
|
||||
.playlist-song-delete:focus circle {
|
||||
fill: #ff0000;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.player,
|
||||
.playlist {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.player {
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
#playlist-songs {
|
||||
height: 280px;
|
||||
padding: 5px 6px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
scrollbar-color: var(--background-color) var(--secondary-color);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar-track {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
#playlist-songs::-webkit-scrollbar-thumb {
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 0.813rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.player-bar,
|
||||
.playlist-bar,
|
||||
.player-content,
|
||||
#playlist-songs {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.playlist-song {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.playlist-song-title {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.playlist-song-artist {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.playlist-song-duration > button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: inline;
|
||||
position: relative;
|
||||
justify-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#player-album-art {
|
||||
z-index: -100;
|
||||
height: 280px;
|
||||
box-shadow: none;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#player-album-art img {
|
||||
width: 100%;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.player-display-song-artist {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.player-display-song-artist > p {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.player-display {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
background-color: transparent;
|
||||
top: 0;
|
||||
height: 280px;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const playlistSongs = document.getElementById("playlist-songs");
|
||||
const playButton = document.getElementById("play");
|
||||
const pauseButton = document.getElementById("pause");
|
||||
const nextButton = document.getElementById("next");
|
||||
const previousButton = document.getElementById("previous");
|
||||
const shuffleButton = document.getElementById("shuffle");
|
||||
|
||||
const allSongs = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Scratching The Surface",
|
||||
artist: "Quincy Larson",
|
||||
duration: "4:25",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Can't Stay Down",
|
||||
artist: "Quincy Larson",
|
||||
duration: "4:15",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Still Learning",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:51",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Cruising for a Musing",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:34",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Never Not Favored",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:35",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "From the Ground Up",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:12",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Walking on Air",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:25",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Can't Stop Me. Can't Even Slow Me Down.",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:52",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "The Surest Way Out is Through",
|
||||
artist: "Quincy Larson",
|
||||
duration: "3:10",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Chasing That Feeling",
|
||||
artist: "Quincy Larson",
|
||||
duration: "2:43",
|
||||
src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
|
||||
},
|
||||
];
|
||||
|
||||
const audio = new Audio();
|
||||
let userData = {
|
||||
songs: [...allSongs],
|
||||
currentSong: null,
|
||||
songCurrentTime: 0,
|
||||
};
|
||||
--fcc-editable-region--
|
||||
const printGreeting = () => {
|
||||
console.log('Hello there!');
|
||||
}
|
||||
|
||||
printGreeting();
|
||||
|
||||
const printMessage = org => {
|
||||
console.log(`${org} is awesome!`);
|
||||
}
|
||||
|
||||
printMessage('freeCodeCamp');
|
||||
|
||||
const addTwoNumbers = (num1, num2) => num1 + num2
|
||||
|
||||
console.log(addTwoNumbers(3,4));
|
||||
--fcc-editable-region--
|
||||
```
|
||||
Reference in New Issue
Block a user