--description--

The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.

User Stories:

Your recipe page should contain a DOCTYPE tag.
Your recipe page should include an html element with a head and body element as children.
You should have a title element within the head element with the text The Odin Recipes.
You should see an h1 element that has the text Creamy Chocolate Fudge.
You should see a related image with an alt attribute.
There should be an h2 element with the text Description under the image.
You should see a couple of paragraphs under Description that describe the recipe.
There should be an h2 element with the text Ingredients.
Under the Ingredients heading there should be an unordered list with the ingredients needed for the recipe.
Under the list of ingredients add another heading called Steps.
You should see an ordered list with a couple of steps needed to complete the recipe.
Under the steps there should be an h2 element with the text More Recipes.
You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
These anchor elements should have an href attribute with the value set to #.

--hints--

You should have a DOCTYPE tag.

assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));

You should have an html element with head and body element.

const html = document.querySelectorAll('html')[0];
const head = document.querySelectorAll('html > head')[0];
const body = document.querySelectorAll('html > body')[0];

assert(html && head && body);

You should have a title element within the head element that contains the text The Odin Recipes.

assert(document.querySelectorAll('HEAD > TITLE')[0]?.innerText == 'The Odin Recipes');

You should have an h1 element within your body element that contains the text Creamy Chocolate Fudge.

assert(document.querySelectorAll('BODY > H1')[0]?.innerText == 'Creamy Chocolate Fudge');

You should have an image with an alt attribute.

const img = document.querySelectorAll('IMG')[0];

assert(img && img.alt !='' && img.src != '')

You should have an h2 element with the text Description.

const h2 = document.querySelectorAll('H2')[0];

assert(h2?.innerText == 'Description');

You should have at least two p elements describing the recipe.

const paragraphs = document.querySelectorAll('P');

assert(paragraphs?.length > 1);

You should have an h2 element with the text Ingredients.

const h2 = document.querySelectorAll('H2')[1];

assert(h2?.innerText == 'Ingredients');

You should have an ul element nested with li elements that contain the ingredients.

const headers = document.querySelectorAll("h2");

headers.forEach(header => {
    if (header.textContent.trim() === "Ingredients") {
        const next = header.nextElementSibling;

        if(next.tagName === "UL") {
            const listItems = next.querySelectorAll("LI");

            assert(listItems.length > 1);
        } else {
            assert(false);
        }
    }
});

You should have an h2 element with the text Steps.

const h2 = document.querySelectorAll('H2')[2];

assert(h2?.innerText == 'Steps');

You should have an ol element that contains li elements with the steps of the recipe.

const orderedList = document.querySelectorAll('OL')[0];
const listItems = document.querySelectorAll('OL > LI');

assert(orderedList && listItems && listItems.length > 1);

You should have an h2 element with the text More Recipes.

const h2 = document.querySelectorAll('H2')[3];

assert(h2?.innerText == 'More Recipes');

You should have an ul element nested with li elements that contain a elements that link to other recipes.

const headers = document.querySelectorAll("h2");

headers.forEach(header => {
    if (header.textContent.trim() === "More Recipes") {
        const next = header.nextElementSibling;

        if(next.tagName === "UL") {
            const listItems = next.querySelectorAll("LI");

            assert(listItems.length > 1);

            listItems.forEach(listItem => {
                const anchor = listItem.querySelector("A");

                assert(anchor);
            });
        } else {
            assert(false);
        }
    }
});

Your anchor elements linking to the recipes should have an href attribute with the value set to #.

const anchorTags = document.querySelectorAll("a");

const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
  return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
});

assert(allAnchorsHaveHrefHash && anchorTags.length > 0);

--seed--

--seed-contents--

html

css

--solutions--