--description--

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

User Stories:

You should have an h1 element for the main title of the page.
You should have two section elements.
Inside the first section element, you should have an h2 element for the title of the video playing.
Below the h2 element, you should have a video element with controls and width attributes. The width attribute should be set to 640.
Inside the video element, you should have a source element with a src attribute pointing to a video file and a type attribute.
- You can use https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4.
Inside the second section element, you should have an h2 element for the title of the song playing.
Below the h2 element, you should have an audio element with the controls and loop attributes, and a src attribute that points to an audio file.
- You can use https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3.
- Or https://cdn.freecodecamp.org/curriculum/js-music-player/we-are-going-to-make-it.mp3.

--hints--

You should have an h1 element for the main title of the page.

const h1 = document.querySelector('h1');
assert.exists(h1);

Your h1 should not be empty.

const h1 = document.querySelector('h1');
assert.isNotEmpty(h1.textContent.trim());

You should have only one h1 element

assert.lengthOf(document.querySelectorAll('h1'), 1);

You should have two section elements.

assert.lengthOf(document.querySelectorAll('section'), 2);

Inside the first section element, you should have an h2 element for the title of the video playing.

const section = document.querySelector('section');
const h2 = section?.querySelector('h2');
assert.exists(h2);

Below the h2 element, you should have a video element.

const section = document.querySelector('section');
const video = section?.querySelector('h2 + video');
assert.exists(video);

The video element should have a controls attribute.

const section = document.querySelector('section');
const video = section?.querySelector('h2 + video');
const controlsAttr = video.controls;
assert.isTrue(controlsAttr);

The video element should have a width attribute set to 640.

const section = document.querySelector('section');
const video = section?.querySelector('h2 + video');
const widthAttr = video.getAttribute('width');
assert.equal(widthAttr, '640');

Inside the video element, you should have a source element.

const section = document.querySelector('section');
const source = section?.querySelector('h2 + video > source');
assert.exists(source);

The source element should have a src attribute pointing to a video file.

const section = document.querySelector('section');
const source = section?.querySelector('h2 + video > source');
const srcAttr = source.getAttribute('src');
assert.match(srcAttr, /\.(mp4|webm|ogg|avi|mov)$/i);

The source element should have a type attribute

const section = document.querySelector('section');
const source = section?.querySelector('h2 + video > source');
const typeAttr = source.getAttribute('type');
assert.isNotEmpty(typeAttr);

The type attribute should match the media type of the file extension of the src attribute.

const section = document.querySelector('section');
const source = section?.querySelector('h2 + video > source');
const typeAttr = source.getAttribute('type');
const srcAttr = source.getAttribute('src');
const srcFileExt = srcAttr.match(/[^\.]+$/g)[0];
const fileExtToMediaTypes = {
  mp4: ['video/mp4'],
  webm: ['video/webm'],
  ogg: ['video/ogg'],
  avi: ['video/avi', 'video/vnd.avi', 'video/msvideo', 'video/x-msvideo'],
  mov: ['video/quicktime']
};
const srcMediaTypes = fileExtToMediaTypes[srcFileExt];
assert.oneOf(typeAttr, srcMediaTypes);

Inside the second section element, you should have an h2 element for the title of the song playing.

const section = document.querySelector('section:nth-of-type(2)');
const h2 = section?.querySelector('h2');
assert.exists(h2);

All your h2 elements should contain some text.

const h2s = document.querySelectorAll('h2');
assert.isNotEmpty(h2s);
h2s.forEach((h2) => assert.isNotEmpty(h2.textContent.trim()));

Below the h2 element, you should have an audio element.

const section = document.querySelector('section:nth-of-type(2)');
const audio = section?.querySelector('h2 + audio');
assert.exists(audio);

The audio element should have a controls attribute.

const section = document.querySelector('section:nth-of-type(2)');
const audio = section?.querySelector('h2 + audio');
const controlsAttr = audio.controls;
assert.isTrue(controlsAttr);

The audio element should have a loop attribute.

const section = document.querySelector('section:nth-of-type(2)');
const audio = section?.querySelector('h2 + audio');
const loopAttr = audio.loop;
assert.isTrue(loopAttr);

The audio element should have a src attribute pointing to an audio file.

const section = document.querySelector('section:nth-of-type(2)');
const audio = section?.querySelector('h2 + audio');
const srcAttr = audio.getAttribute('src');
assert.match(srcAttr, /\.(mp3|wav|ogg|aac|flac)$/i);

--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"/>
  <title>HTML Audio and Video Lab</title>
</head>
<body>

</body>
</html>

--solutions--