audio and video elements."
]
},
+ "workshop-html-music-player": {
+ "title": "Build an HTML Music Player",
+ "intro": [
+ "In this workshop, you'll use HTML to create a basic music player.",
+ "This project will cover the audio element, the audio player setup, and more."
+ ]
+ },
"workshop-html-video-player": {
"title": "Build an HTML Video Player",
"intro": [
diff --git a/curriculum/challenges/english/blocks/workshop-html-music-player/698c4e69abe14a9746c72312.md b/curriculum/challenges/english/blocks/workshop-html-music-player/698c4e69abe14a9746c72312.md
new file mode 100644
index 00000000000..3e8d3421cd1
--- /dev/null
+++ b/curriculum/challenges/english/blocks/workshop-html-music-player/698c4e69abe14a9746c72312.md
@@ -0,0 +1,49 @@
+---
+id: 698c4e69abe14a9746c72312
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+In this workshop, you will build an HTML music player. The HTML boilerplate has been provided for you.
+
+Create an `h1` element and give it the text `freeCodeCamp Tunes`.
+
+# --hints--
+
+You should have an `h1` element.
+
+```js
+assert.exists(document.querySelector('h1'));
+```
+
+Your `h1` element should contain the text `freeCodeCamp Tunes`.
+
+```js
+const h1 = document.querySelector('h1');
+assert.strictEqual(h1?.textContent.trim(), 'freeCodeCamp Tunes');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Artist: Quincy Larson
+ +--fcc-editable-region-- + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/blocks/workshop-html-music-player/698c50535b54b2d75fa985fb.md b/curriculum/challenges/english/blocks/workshop-html-music-player/698c50535b54b2d75fa985fb.md new file mode 100644 index 00000000000..7c332139e3b --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-html-music-player/698c50535b54b2d75fa985fb.md @@ -0,0 +1,49 @@ +--- +id: 698c50535b54b2d75fa985fb +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +The `loop` attribute will restart the audio once playback is completed. Think of an internet meme that repeats playback. Omitting the `loop` attribute will make the audio play once. + +The `loop` attribute is a boolean attribute and does not need a value. + +Add the `loop` attribute to the `audio` element. + +# --hints-- + +Your `audio` element should have the `loop` attribute. + +```js +const audio = document.querySelector('audio'); +assert.isTrue(audio?.hasAttribute('loop')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + +Artist: Quincy Larson
+ +--fcc-editable-region-- + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/blocks/workshop-html-music-player/698c513508507ec8bb820227.md b/curriculum/challenges/english/blocks/workshop-html-music-player/698c513508507ec8bb820227.md new file mode 100644 index 00000000000..fd05faf7216 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-html-music-player/698c513508507ec8bb820227.md @@ -0,0 +1,55 @@ +--- +id: 698c513508507ec8bb820227 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +To specify the media resource for the audio, you will need to add the `src` attribute to the `audio` element. + +Add the `src` attribute with the value `https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3`. + +# --hints-- + +Your `audio` element should have a `src` attribute. + +```js +const audio = document.querySelector('audio'); +assert.isTrue(audio?.hasAttribute('src')); +``` + +Your `audio` element should have a `src` attribute with the value `https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3`. + +```js +const audio = document.querySelector('audio'); +assert.strictEqual(audio?.getAttribute('src'), +"https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + +Artist: Quincy Larson
+ +--fcc-editable-region-- + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/blocks/workshop-html-music-player/698c5229e47d57c6dfaa91bd.md b/curriculum/challenges/english/blocks/workshop-html-music-player/698c5229e47d57c6dfaa91bd.md new file mode 100644 index 00000000000..dfe1b55d9d3 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-html-music-player/698c5229e47d57c6dfaa91bd.md @@ -0,0 +1,51 @@ +--- +id: 698c5229e47d57c6dfaa91bd +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +The `controls` attribute provides playback controls including pause/resume playback, seeking, and volume control for the `audio` element. + +The `controls` attribute is a boolean attribute and does not need a value. + +Add the `controls` attribute to the `audio` element. + +Now you should see the `audio` element displayed on the page. + +# --hints-- + +Your `audio` element should have the `controls` attribute. + +```js +const audio = document.querySelector('audio'); +assert.isTrue(audio?.hasAttribute('controls')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + +Artist: Quincy Larson
+ +--fcc-editable-region-- + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/blocks/workshop-html-music-player/698c55e7aaacfae48a227459.md b/curriculum/challenges/english/blocks/workshop-html-music-player/698c55e7aaacfae48a227459.md new file mode 100644 index 00000000000..d0455a49a66 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-html-music-player/698c55e7aaacfae48a227459.md @@ -0,0 +1,68 @@ +--- +id: 698c55e7aaacfae48a227459 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Add a new `h2` element below the `audio` element with the text `Cruising for a Musing`. + +Below the `h2`, add a `p` element with the text `Artist: Quincy Larson`. + +# --hints-- + +You should have a second `h2` element. + +```js +assert.exists(document.querySelector('h2:nth-of-type(2)')); +``` + +Your second `h2` element should contain the text `Cruising for a Musing`. + +```js +const h2 = document.querySelector('h2:nth-of-type(2)'); +assert.strictEqual(h2?.textContent.trim(), 'Cruising for a Musing'); +``` + +You should have a second `p` element. + +```js +assert.exists(document.querySelector('p:nth-of-type(2)')); +``` + +Your second `p` element should contain the text `Artist: Quincy Larson`. + +```js +const p = document.querySelector('p:nth-of-type(2)'); +assert.strictEqual(p?.textContent.trim(), 'Artist: Quincy Larson'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + +Artist: Quincy Larson
+ + + +--fcc-editable-region-- + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/blocks/workshop-html-music-player/698c5710136539797f296098.md b/curriculum/challenges/english/blocks/workshop-html-music-player/698c5710136539797f296098.md new file mode 100644 index 00000000000..f62c68c8d5d --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-html-music-player/698c5710136539797f296098.md @@ -0,0 +1,84 @@ +--- +id: 698c5710136539797f296098 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Below the `p` element, add an `audio` element, give it an `src` attribute with a value of `https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3`, and the `loop` and `controls` attributes. + +# --hints-- + +You should have a second `audio` element. + +```js +assert.exists(document.querySelector('audio:nth-of-type(2)')); +``` + +The new `audio` element should be below the `p` element. + +```js +assert.exists(document.querySelector('p:nth-of-type(2) + audio:nth-of-type(2)')); +``` + +Your `audio` element should have a `src` attribute. + +```js +const audio = document.querySelector('audio:nth-of-type(2)'); +assert.isTrue(audio?.hasAttribute('src')); +``` + +Your `audio` element should have a `src` attribute with the value `https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3`. + +```js +const audio = document.querySelector('audio:nth-of-type(2)'); +assert.strictEqual(audio?.getAttribute('src'), +"https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3"); +``` + +Your `audio` element should have the `loop` attribute. + +```js +const audio = document.querySelector('audio:nth-of-type(2)'); +assert.isTrue(audio?.hasAttribute('loop')); +``` + +Your `audio` element should have the `controls` attribute. + +```js +const audio = document.querySelector('audio:nth-of-type(2)'); +assert.isTrue(audio?.hasAttribute('controls')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + +Artist: Quincy Larson
+ + + +Artist: Quincy Larson
+ +--fcc-editable-region-- + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/blocks/workshop-html-music-player/698c58745b73289bb6c89ece.md b/curriculum/challenges/english/blocks/workshop-html-music-player/698c58745b73289bb6c89ece.md new file mode 100644 index 00000000000..bca74f14345 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-html-music-player/698c58745b73289bb6c89ece.md @@ -0,0 +1,146 @@ +--- +id: 698c58745b73289bb6c89ece +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +The last song is titled `Scratching the Surface`, the artist is Quincy Larson, and the file to use is `https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3`. + +Add the last song to complete the music player following the same pattern you used for the first two songs. + +# --hints-- + +You should have a third `h2` element. + +```js +assert.exists(document.querySelector('h2:nth-of-type(3)')); +``` + +Your third `h2` element should contain the text `Scratching the Surface`. + +```js +const h2 = document.querySelector('h2:nth-of-type(3)'); +assert.strictEqual(h2?.textContent.trim(), 'Scratching the Surface'); +``` + +You should have a `p` element. + +```js +assert.exists(document.querySelector('p:nth-of-type(3)')); +``` + +Your `p` element should contain the text `Artist: Quincy Larson`. + +```js +const p = document.querySelector('p:nth-of-type(3)'); +assert.strictEqual(p?.textContent.trim(), 'Artist: Quincy Larson'); +``` + +You should have a third `audio` element. + +```js +assert.exists(document.querySelector('audio:nth-of-type(3)')); +``` + +The new `audio` element should be below the `p` element. + +```js +assert.exists(document.querySelector('p:nth-of-type(3) + audio:nth-of-type(3)')); +``` + +Your `audio` element should have a `src` attribute. + +```js +const audio = document.querySelector('audio:nth-of-type(3)'); +assert.isTrue(audio?.hasAttribute('src')); +``` + +Your `audio` element should have a `src` attribute with the value `https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3`. + +```js +const audio = document.querySelector('audio:nth-of-type(3)'); +assert.strictEqual(audio?.getAttribute('src'), +"https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3"); +``` + +Your `audio` element should have the `loop` attribute. + +```js +const audio = document.querySelector('audio:nth-of-type(3)'); +assert.isTrue(audio?.hasAttribute('loop')); +``` + +Your `audio` element should have the `controls` attribute. + +```js +const audio = document.querySelector('audio:nth-of-type(3)'); +assert.isTrue(audio?.hasAttribute('controls')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + +Artist: Quincy Larson
+ + + +Artist: Quincy Larson
+ + + +--fcc-editable-region-- + +--fcc-editable-region-- + + + +``` + +# --solutions-- + +```html + + + + + +Artist: Quincy Larson
+ + + +Artist: Quincy Larson
+ + + +Artist: Quincy Larson
+ + + + + +``` diff --git a/curriculum/structure/blocks/workshop-html-music-player.json b/curriculum/structure/blocks/workshop-html-music-player.json new file mode 100644 index 00000000000..b64574b66f6 --- /dev/null +++ b/curriculum/structure/blocks/workshop-html-music-player.json @@ -0,0 +1,21 @@ +{ + "name": "Build an HTML Music Player", + "isUpcomingChange": false, + "dashedName": "workshop-html-music-player", + "helpCategory": "HTML-CSS", + "blockLayout": "challenge-grid", + "challengeOrder": [ + { "id": "698c4e69abe14a9746c72312", "title": "Step 1" }, + { "id": "698c4f4e965bd853ad5084e1", "title": "Step 2" }, + { "id": "698c4fe24f1f1a17be74a23e", "title": "Step 3" }, + { "id": "698c513508507ec8bb820227", "title": "Step 4" }, + { "id": "698c50535b54b2d75fa985fb", "title": "Step 5" }, + { "id": "698c5229e47d57c6dfaa91bd", "title": "Step 6" }, + { "id": "698c55e7aaacfae48a227459", "title": "Step 7" }, + { "id": "698c5710136539797f296098", "title": "Step 8" }, + { "id": "698c58745b73289bb6c89ece", "title": "Step 9" } + ], + "blockLabel": "workshop", + "usesMultifileEditor": true, + "hasEditableBoundaries": true +} diff --git a/curriculum/structure/superblocks/responsive-web-design-v9.json b/curriculum/structure/superblocks/responsive-web-design-v9.json index ef312b66ba2..be01c5284a9 100644 --- a/curriculum/structure/superblocks/responsive-web-design-v9.json +++ b/curriculum/structure/superblocks/responsive-web-design-v9.json @@ -18,6 +18,7 @@ "lecture-understanding-how-html-affects-seo", "lab-travel-agency-page", "lecture-working-with-audio-and-video-elements", + "workshop-html-music-player", "workshop-html-video-player", "lab-html-audio-and-video-player", "lecture-working-with-images-and-svgs",