--description--

Objective: Fulfill the user stories below and get all the tests to pass to complete the lab.

User Stories:

You should have a div element with an id of drum-machine that contains all other elements.
Inside the #drum-machine element you should have another div with an id of pad-bank.
Inside the #drum-machine element you should have a p element with an id of display.
Inside your #pad-bank element you should have nine clickable drum pad elements each with a class of drum-pad, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order.
Each .drum-pad should have an audio element which has a class of clip, a src attribute that points to an audio clip, and an id corresponding to the inner text of its parent .drum-pad element (e.g. id="Q", id="W", id="E" etc.).
When you click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.
When you press the trigger key associated with each .drum-pad, the audio clip contained in its child audio element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string Q, pressing the W key should trigger the drum pad which contains the string W, etc.).
When a .drum-pad is triggered, you should display a string describing the associated audio clip as the inner text of the #display element (each string must be unique).

Some audio samples you can use for your drum machine can be found at https://cdn.freecodecamp.org/curriculum/drum/<fileName>, where <fileName> is as follows:

drum name	`fileName`
Heater 1	`Heater-1.mp3`
Heater 2	`Heater-2.mp3`
Heater 3	`Heater-3.mp3`
Heater 4	`Heater-4_1.mp3`
Clap	`Heater-6.mp3`
Open-HH	`Dsc_Oh.mp3`
Kick-n'-Hat	`Kick_n_Hat.mp3`
Kick	`RP4_KICK_1.mp3`
Closed-HH	`Cev_H2.mp3`

--hints--

You should have a div element with an id of drum-machine that contains all other elements.

assert.isNotNull(document.querySelector('div#drum-machine'));

Inside the #drum-machine element you should have another div with an id of pad-bank.

assert.isNotNull(document.querySelector('#drum-machine div#pad-bank'));

Inside the #drum-machine element you should have a p element with an id of display.

assert.isNotNull(document.querySelector('#drum-machine p#display'));

Inside your #pad-bank element you should have nine clickable drum pad elements each with a class of drum-pad.

assert.lengthOf(document.querySelectorAll('#pad-bank .drum-pad'), 9);

Each .drum-pad should be a button element.

const pads = document.querySelectorAll('.drum-pad');
pads.forEach(pad => {
  assert.equal(pad.tagName, 'BUTTON');
});

Each .drum-pad should have one of the following letters as innerText, in order: Q, W, E, A, S, D, Z, X, C.

const pads = document.querySelectorAll('.drum-pad');
const letters = [`Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`];
for (let i = 0; i < 9; i++) {
  assert.equal(pads[i].innerText.trim(), letters[i]);
}

Each .drum-pad should have an audio element which has a class of clip, a src attribute that points to an audio clip, and an id corresponding to the inner text of its parent .drum-pad element (e.g. id="Q", id="W", id="E" etc.).

const letters = [`Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`];
const audios = document.querySelectorAll('#drum-machine .drum-pad audio');

for (let i = 0; i < 9; i++) {
  assert.equal(audios[i].id, letters[i]);
  assert.isTrue(audios[i].classList.contains('clip'));
  assert.isTrue(audios[i].hasAttribute('src'));
}

When you click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.

const pads = document.querySelectorAll('.drum-pad');
assert.isNotEmpty(pads);
pads.forEach(el => {
  const audio = el.querySelector('audio');
  el.click();
  assert.isFalse(audio.paused);
  audio.pause();
});

When you press one of the keys Q, W, E, A, S, D, Z, X, C on your keyboard, the corresponding audio element should play the corresponding sound.

const letters = [`Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`];
const audios = document.querySelectorAll('#drum-machine .drum-pad audio');

for (let i = 0; i < 9; i++) {
  const audio = audios[i];
  document.dispatchEvent(
    new KeyboardEvent('keydown', { key: letters[i].toLowerCase() })
  );
  assert.isFalse(audio.paused);
  audio.pause();
}

When a .drum-pad is triggered, you should display a string describing the associated audio clip as the inner text of the #display element (each string must be unique).

const collection = new Set();
const disp = document.querySelector('#display');
const pads = document.querySelectorAll('.drum-pad');
assert.lengthOf(pads, 9);
pads.forEach(el => {
  const audio = el.querySelector('audio');
  el.click();
  collection.add(disp.innerText.trim());
  audio.pause();
});
assert.lengthOf(collection, 9);

--seed--

--seed-contents--

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Drum Machine</title>
  </head>
  <body></body>
</html>

css

--solutions--