jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-24 11:03:17 -04:00
Code Issues Projects Releases Wiki Activity

chore(curriculum): add quotes to strings in building a music player project (#53954)

Browse Source
This commit is contained in:
RGHANILOO
2024-03-06 15:57:17 +00:00
committed by GitHub
parent f746a488e3
commit 33ec40e9c8
17 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65364566e84e378837fbaf2a.md
View File

@@ -9,7 +9,7 @@ dashedName: step-36
In previous steps you built out the functionality for playing a song. Now you need to add the functionality to the play button so that it will play the current song when it is clicked on.
Use the `addEventListener()` method and pass in a `click` event for the first argument and an empty callback function with arrow syntax for the second argument, e.g., `() => {}`.
Use the `addEventListener()` method and pass in a `"click"` event for the first argument and an empty callback function with arrow syntax for the second argument, e.g., `() => {}`.
# --hints--
@@ -19,7 +19,7 @@ You should call the `addEventListener()` method on your `playButton` variable.
assert.match(code, /playButton\.addEventListener\(/)
```
Your event listener should listen for a `click` event.
Your event listener should listen for a `"click"` event.
```js
assert.match(code, /playButton\.addEventListener\(\s*('|"|`)click\1/)

2
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655220a3fa5c3c200bc8e938.md
View File

@@ -19,7 +19,7 @@ You should not modify the existing `pauseSong` function and its content.
assert.match(code, /const\s+pauseSong\s*=\s*\(\s*\)\s*=>\s*\{\s*userData\.songCurrentTime\s*=\s*audio\.currentTime\s*;?\s*.*\s*.*\s*\}\s*;?/)
```
You should use the `classList` property and the `remove()` method to remove the class `playing` from the `playButton`.
You should use the `classList` property and the `remove()` method to remove the class `"playing"` from the `playButton`.
```js
assert.match(code, /playButton\.classList\.remove\(\s*('|")playing\1\s*\)\s*;?/)

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6552303a9a78704f8ff072e9.md
View File

@@ -9,7 +9,7 @@ dashedName: step-43
Now it is time to test out the pause button.
Add a `click` event listener to the `pauseButton` element, then pass in `pauseSong` as the second argument of the event listener. This is the function the event listener will run.
Add a `"click"` event listener to the `pauseButton` element, then pass in `pauseSong` as the second argument of the event listener. This is the function the event listener will run.
Test out your app by first clicking on the play button followed by the pause button. You should see that everything is working as expected.
@@ -21,7 +21,7 @@ You should call the `addEventListener()` method on your `pauseButton` variable.
assert.match(code, /pauseButton\.addEventListener\(/)
```
Your event listener should listen for a `click` event.
Your event listener should listen for a `"click"` event.
```js
assert.match(code, /pauseButton\.addEventListener\(\s*('|"|`)click\1/)

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655235c2e607297f00316650.md
View File

@@ -7,13 +7,13 @@ dashedName: step-35
# --description--
Next, use the `classList` property and the `add()` method to add the `playing` class to the `playButton` element. This will look for the class `playing` in the CSS file and add it to the `playButton` element.
Next, use the `classList` property and the `add()` method to add the `"playing"` class to the `playButton` element. This will look for the class `"playing"` in the CSS file and add it to the `playButton` element.
To finally play the song, use the `play()` method on the `audio` variable. `play()` is a method from the web audio API for playing an mp3 file.
# --hints--
You should use the `classList` property and the `add` method to add the class `playing` to `playButton`.
You should use the `classList` property and the `add` method to add the class `"playing"` to `playButton`.
```js
assert.match(code, /playButton\.classList\.add\(\s*("|')playing\1\s*\)\s*;?/)

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65547ee197840478a1b95f4b.md
View File

@@ -9,7 +9,7 @@ dashedName: step-50
Now it is time to test out the `playNextSong` function.
Add a `click` event listener to the `nextButton` element, then pass in `playNextSong` as the second argument of your event listener. This is the function the event listener will run.
Add a `"click"` event listener to the `nextButton` element, then pass in `playNextSong` as the second argument of your event listener. This is the function the event listener will run.
Test out your app by first clicking on the play button followed by the next button. You should see that everything is working as expected.
@@ -21,7 +21,7 @@ You should call the `addEventListener()` method on your `nextButton` variable.
assert.match(code, /nextButton\.addEventListener\(/)
```
Your event listener should listen for a `click` event.
Your event listener should listen for a `"click"` event.
```js
assert.match(code, /nextButton\.addEventListener\(\s*('|"|`)click\1/)

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
View File

@@ -7,7 +7,7 @@ dashedName: step-54
# --description--
Add a `click` event listener to the `previousButton` element, then pass in `playPreviousSong` as the second argument.
Add a `"click"` event listener to the `previousButton` element, then pass in `playPreviousSong` as the second argument.
# --hints--
@@ -17,7 +17,7 @@ You should call the `addEventListener()` method on your `previousButton` variabl
assert.match(code, /previousButton\.addEventListener\(/)
```
Your event listener should listen for a `click` event.
Your event listener should listen for a `"click"` event.
```js
assert.match(code, /previousButton\.addEventListener\(\s*('|"|`)click\1/)

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

@@ -7,7 +7,7 @@ dashedName: step-68
# --description--
Use the `setAttribute` method on the `playButton` element to set an attribute named `aria-label`. For the value, use a `ternary` to set `song?.title` to `Play ${song.title}` or `"Play"` if there's no `song.title` available.
Use the `setAttribute` method on the `playButton` element to set an attribute named `"aria-label"`. For the value, use a `ternary` to set `song?.title` to `Play ${song.title}` or `"Play"` if there's no `song.title` available.
Don't forget you need template interpolation here, so you need to use backticks.

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

@@ -7,7 +7,7 @@ dashedName: step-74
# --description--
Add a `click` event listener to the `shuffleButton` element. For the function to run, pass in the `shuffle` function.
Add a `"click"` event listener to the `shuffleButton` element. For the function to run, pass in the `shuffle` function.
**Note**: You don't need a callback inside this particular event listener. You also don't need to call the `shuffle` function, just pass in its identifier.
@@ -19,13 +19,13 @@ You should chain the `addEventListener()` method to `shuffleButton`.
assert.match(code, /shuffleButton\.addEventListener\(/)
```
Your event listener should listen for a `click` event.
Your event listener should listen for a `"click"` event.
```js
assert.match(code, /shuffleButton\.addEventListener\(\s*('|")click\1/)
```
You should pass in `shuffle` as the second value of your `click` event listener.
You should pass in `shuffle` as the second value of your `"click"` event listener.
```js
assert.match(code, /shuffleButton\.addEventListener\(\s*('|")click\1\s*,\s*shuffle\s*\)\s*;?/)

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655727b2e1e49d6adf584442.md
View File

@@ -25,7 +25,7 @@ You can also assign it to a variable:
const divElement = document.createElement('div')
```
Inside your `if` statement, declare a `resetButton` constant, then use `createElement()` to create a `button`.
Inside your `if` statement, declare a `resetButton` constant, then use `createElement()` to create a `"button"`.
# --hints--
@@ -36,7 +36,7 @@ You should not modify the existing `if` statement and its content.
assert.match(code, /if\s*\(\s*userData\?\.songs\.length\s*===\s*0\s*\)\s*\{\s*.*\s*\}/)
```
You should use the `createElement` method to create a `button`.
You should use the `createElement` method to create a `"button"`.
```js
assert.match(code, /document\.createElement\(\s*('|")button\1\s*\)\s*;?/)

6
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
View File

@@ -11,7 +11,7 @@ Now that you've created the `resetButton`, you need to assign it an `id` and `ar
For example, `element.id` would set an `id` attribute, and `element.ariaLabel` would set an `aria-label` attribute. Both of them accept their values as a string.
Set the `id` attribute of `resetButton` to `reset` and its `aria-label` attribute to `Reset playlist`.
Set the `id` attribute of `resetButton` to `"reset"` and its `"aria-label"` attribute to `"Reset playlist"`.
# --hints--
@@ -21,13 +21,13 @@ You should not modify the existing `if` statement and its content.
assert.match(code, /if\s*\(\s*userData\?\.songs\.length\s*===\s*0\s*\)\s*\{\s*const\s+resetButton\s*=\s*document\.createElement\(\s*('|")button\1\s*\)\s*;?\s*.*\s*.*\s*.*\s*\}/)
```
You should use `resetButton.id` to create an `id` attribute named `reset` for the `resetButton`.
You should use `resetButton.id` to create an `id` attribute named `"reset"` for the `resetButton`.
```js
assert.match(code, /resetButton\.id\s*=\s*('|")reset\1/)
```
You should use `resetButton.ariaLabel` to create an `aria-label` attribute named `Reset playlist` for the `resetButton`.
You should use `resetButton.ariaLabel` to create an `"aria-label"` attribute named `"Reset playlist"` for the `resetButton`.
```js
assert.match(code, /resetButton\.ariaLabel\s*=\s*('|")Reset\s+playlist\1\s*;?/)

2
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
View File

@@ -19,7 +19,7 @@ You should use the `addEventListener()` method on `resetButton`.
assert.match(code, /resetButton\.addEventListener\(/)
```
Your `resetButton` event listener should listen for a `click` event.
Your `resetButton` event listener should listen for a `"click"` event.
```js
assert.match(code, /resetButton\.addEventListener\(\s*('|")click\1/)

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

@@ -9,9 +9,9 @@ dashedName: step-89
All the core functionalities are now in place. The only issue now is that the next song does not automatically play when the currently playing song ends.
To fix that, you can set up an event listener which will detect when the currently playing song ends. The `ended` event listener is appropriate for this. It is fired when the playback of a media reaches the end.
To fix that, you can set up an event listener which will detect when the currently playing song ends. The `"ended"` event listener is appropriate for this. It is fired when the playback of a media reaches the end.
Add an event listener to the `audio` element which listens for the `ended` event. Pass in a callback using arrow syntax with empty curly braces.
Add an event listener to the `audio` element which listens for the `"ended"` event. Pass in a callback using arrow syntax with empty curly braces.
# --hints--
@@ -21,13 +21,13 @@ You should chain the `addEventListener()` method to your `audio` variable.
assert.match(code, /audio\.addEventListener\(/)
```
The event listener you used on on your `audio` variable should listen for an `ended` event.
The event listener you used on on your `audio` variable should listen for an `"ended"` event.
```js
assert.match(code, /audio\.addEventListener\(\s*('|")ended\1/)
```
You should use arrow syntax to pass in an empty callback to your `ended` event listener.
You should use arrow syntax to pass in an empty callback to your `"ended"` event listener.
```js
assert.match(code, /audio\.addEventListener\(\s*('|")ended\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)\s*;?/)

2
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
View File

@@ -11,7 +11,7 @@ Within the button element in the `renderSongs` function, add an `onclick` attrib
# --hints--
You should add an `onclick` attribute to the delete button and pass in `deleteSong(${song.id})`.
You should add an `onclick` attribute to the delete button and pass in `"deleteSong(${song.id})"`.
```js
assert.match(code, /<button(?:\s+|\s+.*\s+)onclick\s*=\s*('|")deleteSong\(\s*\$\{song\.id\}\s*\)\1(?:\s+.*|)>/)

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

@@ -37,25 +37,25 @@ Your `allSongs` array should have an object with an `id` property set to the num
assert.equal(allSongs[0].id, 0);
```
Your `allSongs` array should have an object with a `title` property set to the string `Scratching The Surface`.
Your `allSongs` array should have an object with a `title` property set to the string `"Scratching The Surface"`.
```js
assert.equal(allSongs[0].title, "Scratching The Surface");
```
Your `allSongs` array should have an object with an `artist` property set to the string `Quincy Larson`.
Your `allSongs` array should have an object with an `artist` property set to the string `"Quincy Larson"`.
```js
assert.equal(allSongs[0].artist, "Quincy Larson");
```
Your `allSongs` array should have an object with a `duration` property set to the string `4:25`.
Your `allSongs` array should have an object with a `duration` property set to the string `"4:25"`.
```js
assert.equal(allSongs[0].duration, "4:25");
```
Your `allSongs` array should have an object with an `src` property set to the string `https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3`.
Your `allSongs` array should have an object with an `src` property set to the string `"https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3"`.
```js
assert.equal(allSongs[0].src, "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3");

8
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65606d06666e118ba86162be.md
View File

@@ -37,25 +37,25 @@ The second object in your `allSongs` array should have an `id` property set to t
assert.equal(allSongs[1].id, 1);
```
The second object in your `allSongs` array should have a `title` property set to the string `Can't Stay Down`.
The second object in your `allSongs` array should have a `title` property set to the string `"Can't Stay Down"`.
```js
assert.equal(allSongs[1].title, "Can't Stay Down");
```
The second object in your `allSongs` array should have an `artist` property set to the string `Quincy Larson`.
The second object in your `allSongs` array should have an `artist` property set to the string `"Quincy Larson"`.
```js
assert.equal(allSongs[1].artist, "Quincy Larson");
```
The second object in your `allSongs` array should have a `duration` property set to the string `4:15`.
The second object in your `allSongs` array should have a `duration` property set to the string `"4:15"`.
```js
assert.equal(allSongs[1].duration, "4:15");
```
The second object in your `allSongs` array should have an `src` property set to the string `https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3`.
The second object in your `allSongs` array should have an `src` property set to the string `"https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3"`.
```js
assert.equal(allSongs[1].src, "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3");

8
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65606ed6ea2baca053327e9b.md
View File

@@ -31,25 +31,25 @@ The third object in your `allSongs` array should have an `id` property set to th
assert.equal(allSongs[2].id, 2);
```
The third object in your `allSongs` array should have a `title` property set to the string `Still Learning`.
The third object in your `allSongs` array should have a `title` property set to the string `"Still Learning"`.
```js
assert.equal(allSongs[2].title, "Still Learning");
```
The third object in your `allSongs` array should have an `artist` property set to the string `Quincy Larson`.
The third object in your `allSongs` array should have an `artist` property set to the string `"Quincy Larson"`.
```js
assert.equal(allSongs[2].artist, "Quincy Larson");
```
The third object in your `allSongs` array should have a `duration` property set to the string `3:51`.
The third object in your `allSongs` array should have a `duration` property set to the string `"3:51"`.
```js
assert.equal(allSongs[2].duration, "3:51");
```
The third object in your `allSongs` array should have an `src` property set to the string `https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3`.
The third object in your `allSongs` array should have an `src` property set to the string `"https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3"`.
```js
assert.equal(allSongs[2].src, "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3");

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65672adafbaa37a6cef886f7.md
View File

@@ -21,7 +21,7 @@ You can also assign it to a variable:
const myText = document.createTextNode("your text")
```
Use the `createTextNode()` method to create a `Reset Playlist` text, then assign it to a `resetText` constant.
Use the `createTextNode()` method to create a `"Reset Playlist"` text, then assign it to a `resetText` constant.
# --hints--
@@ -31,7 +31,7 @@ You should not modify the existing `if` statement and its content.
assert.match(code, /if\s*\(\s*userData\?\.songs\.length\s*===\s*0\s*\)\s*\{\s*const\s+resetButton\s*=\s*document\.createElement\(\s*('|")button\1\s*\)\s*;?\s*.*\s*\}/)
```
You should use `document.createTextNode()` to create a `Reset Playlist` text.
You should use `document.createTextNode()` to create a `"Reset Playlist"` text.
```js
assert.match(code, /document\.createTextNode\(\s*('|")Reset\s+Playlist\1\s*\)\s*;?/)