--description--

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

User Stories:

You should have a !DOCTYPE html declaration.
You should have an html element with lang set to en.
You should have a head element containing a title element with the name of your recipe, and a meta element with a charset attribute set to UTF-8.
You should have a body element.
You should have an h1 element with the name of your recipe.
You should have a p element that introduces the recipe below the h1.
You should have one h2 element with the text Ingredients for the ingredients section.
You should have an unordered list (ul element) with at least four list items (li elements) that lists your ingredients below the first h2 element.
You should have a second h2 element with the text Instructions for the instructions section.
You should have an ordered list (ol element) with at least four list items that lists the recipe steps in order, below the second h2.
You should have one img element with a src attribute set to a valid image, you can use https://cdn.freecodecamp.org/curriculum/labs/recipe.jpg if you would like, and an alt attribute describing the image.

--hints--

Your recipe page should have a !DOCTYPE html declaration.

assert.match(code, /<!DOCTYPE html>/i);

You should have an html element with lang set to en.

assert.match(code, /<html\s+lang\s*=\s*('|")en\1\s*>[\s\S]*<\/\s*html\s*>/gi);

You should have a head element within the html element.

assert.match(code, /<html[\s\S]*>[\s\S]*<\s*head\s*>[\s\S]*<\/\s*head\s*>[\s\S]*<\/\s*html\s*>/i);

You should have title element within your head element.

assert.match(code, /<\s*head\s*>[\s\S]*<\s*title\s*>[\s\S]*<\/\s*title\s*>[\s\S]*<\/\s*head\s*>/i);

Your title element should have your recipe title.

assert.isAbove(document.querySelector('title')?.innerText.trim().length, 0);

You should have a meta element within your head element.

assert.match(code, /<\s*head\s*>[\s\S]*<\s*meta[\s\S]*>[\s\S]*<\/\s*head\s*>/i);

Your meta element should have its charset attribute set to UTF-8.

assert.match(code, /<\s*meta[\s\S]+?charset\s*=\s*('|")UTF-8\1/i);

You should have a body element within your html element.

assert.match(code, /<\s*html[\s\S]*>[\s\S]*<\s*head\s*>[\s\S]*<\/\s*head\s*>[\s\S]*<\s*body\s*>[\s\S]*<\/\s*body\s*>[\s\S]*<\/\s*html\s*>/i);

You should have an h1 element with the name of your recipe.

assert.isAbove(document.querySelector('h1')?.innerText.length, 0);

You should only have one h1 element.

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

You should have a p element below your h1 element.

assert.strictEqual(document.querySelector('h1')?.nextElementSibling, document.querySelector('p'));

Your first p element should describe your recipe.

assert.isNotEmpty(document.querySelector('p')?.textContent?.trim());

Your first h2 element should have the text Ingredients.

assert.equal(document.querySelectorAll('h2')[0]?.innerText, 'Ingredients');

You should have an unordered list element below your first h2 element.

assert.strictEqual(document.querySelector('ul')?.previousElementSibling.tagName, 'H2');

You should have at least four list item elements in your unordered list with the ingredients.

const els = document.querySelectorAll('ul > li');
assert.isAbove(els.length, 3);
els.forEach(el => assert.isAbove(el.innerText.trim().length, 0))

Your second h2 element should have the text Instructions.

assert.equal(document.querySelectorAll('h2')[1]?.innerText, 'Instructions');

You should have an ordered list element below your second h2 element.

assert.strictEqual(document.querySelectorAll('h2')?.[1]?.nextElementSibling?.tagName, "OL");

You should have at least four list item elements in your ordered list with the instructions.

const els = document.querySelectorAll('ol > li');
assert.isAbove(els.length, 3);
els.forEach(el => assert.isAbove(el.innerText.trim().length, 0))

You should have at least one img element.

assert.exists(document.querySelector('img'));

All your img elements should have a valid src attribute and value.

const img = document.querySelector('img');
const rawSrc = img?.getAttribute('src');
const resolvedSrc = img?.src;
const re = new RegExp(window.location.href, "ig");

assert.isAbove(rawSrc?.trim().length, 0, "The 'src' attribute must be explicitly set.");
assert.notMatch(resolvedSrc, re, "The 'src' should not start with the current page URL");

img.onload = () => {
  console.log('Image loaded successfully.');
};

img.onerror = (error) => {
  console.error('Image failed to load:', error);
  assert.fail("Your image's URL should be valid."); // Make the test instafail
};

if (img.complete) {
  img.onload && img.onload();
};

All your img elements should have an alt attribute to describe the image.

assert.isAbove(document.querySelector('img')?.alt.length, 0);

--seed--

--seed-contents--

html

--solutions--