freeCodeCamp/curriculum/challenges/english/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md

id, title, challengeType, dashedName, demoType

id	title	challengeType	dashedName	demoType
669e2f60e83c011754f711f9	Build a Travel Agency Page	14	build-a-travel-agency-page	onClick

--description--

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

User Stories:

1. You should have a DOCTYPE declaration.
2. You should have an html element with lang set to en.
3. You should have a head element containing a meta void element with charset set to utf-8 and a title with the text Travel Agency Page.
4. You should have an h1 element to present your travel destinations.
5. You should have a paragraph below the h1 element introducing the travel opportunities.
6. You should have an h2 element with the text Packages.
7. You should have a p element introducing briefly the various packages.
8. You should have an unordered list element with two list items. The two list items should have the text Group Travels and Private Tours, respectively. The text of each list item should be enclosed by an anchor element.
9. You should have an h2 element with the text Top Itineraries.
10. You should have at least three figure elements, each containing an anchor element and a figcaption element.
11. The three anchor elements should have an img element with an appropriate alt attribute and a src attribute set to a valid image as their content. You can use https://cdn.freecodecamp.org/curriculum/labs/colosseo.jpg, https://cdn.freecodecamp.org/curriculum/labs/alps.jpg, and https://cdn.freecodecamp.org/curriculum/labs/sea.jpg if you would like.
12. All your five anchor elements should have an href attribute with the value of https://www.freecodecamp.org/learn and a target attribute with the value of _blank.

--hints--

Your travel agency page should have a !DOCTYPE html declaration.

assert.match(code, /<!DOCTYPE\s+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*>/i);

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 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 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 travel agency name.

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

You should have a body element within your html element.

assert(code.match(/<\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 to present your travel destinations.

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 introducing the travel opportunities below the h1 element.

assert($('p')[0]?.previousElementSibling.tagName === 'H1');

Your first h2 element should have the text Packages.

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

You should have a p element introducing briefly the various packages below your first h2 element.

assert($('p')[1]?.previousElementSibling.tagName === 'H2');

You should have an unordered list element below your second p element.

assert($('ul')[0]?.previousElementSibling.tagName === 'P');

You should have two items in your unordered list.

assert.equal(document.querySelectorAll('li').length,  2);

Both your list items should contain an anchor element.

const listItems = $('li');
assert(!!listItems.length);
for (let e of listItems) {
  assert(e.children[0].tagName === 'A' && e.children.length === 1);
}

The anchor element of your first list item should wrap the text Group Travels.

assert.equal(document.querySelectorAll('a')[0]?.innerText, 'Group Travels');

The anchor element of your second list item should wrap the text Private Tours.

assert.equal(document.querySelectorAll('a')[1]?.innerText, 'Private Tours');

You should have an h2 element after your unordered list.

assert($('h2')[1]?.previousElementSibling.tagName === 'UL');

Your second h2 element should have the text Top Itineraries.

assert.equal($('h2')[1]?.innerText, 'Top Itineraries');

You should have at least three figure elements.

assert.isAtLeast(document.querySelectorAll('figure').length, 3)

Each figure element should contain an anchor element as its first child.

const figures = $('figure');
assert(!!figures.length);
for (let figure of figures) {
  assert.equal(figure.children[0].tagName,'A');
}

Each figure element should contain a figcaption element as its second child.

const figures = $('figure');
assert(!!figures.length);
for (let figure of figures) {
  assert.equal(figure.children[1].tagName, 'FIGCAPTION');
}

Each of the a elements that are children of your figure elements should contain an image.

const anchors = $('figure > a');
assert(!!anchors.length);
for (let anchor of anchors) {
  assert.equal(anchor.children[0].tagName, 'IMG');
}

Each img element should have a valid src attribute.

const images = $('img');
assert(!!images.length);
for (let image of images) {
    assert.isAbove(image.src.length, 0);
}

Each img element should have an alt attribute with an appropriate value.

const images = $('img');
assert(!!images.length);
for (let image of images) {
    assert.isAbove(image.alt.length, 0);
}

Each a element should have an href attribute with the value of https://www.freecodecamp.org/learn.

const anchors = $('a');
assert(!!anchors.length);
for (let anchor of anchors) {
    assert.equal(anchor.href, 'https://www.freecodecamp.org/learn');
}

Each a element should have a target attribute with the value of _blank.

const anchors = $('a');
assert(!!anchors.length);
for (let anchor of anchors) {
    assert.equal(anchor.target, '_blank');
}

--seed--

--seed-contents--

--solutions--

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Travel Agency Page</title>
    </head>
    <body>
        <h1>Discover Italy</h1>
        <p>Art, folklore, food, nature, and more. Choose among our wide selection of guided tours and excursions, and live an unforgettable experience exploring Italy.</p>
        <h2>Packages</h2>
        <p>We offer an extensive range of holiday solutions to accommodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
        <ul>
            <li><a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
            <li><a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</a></li>
        </ul>
        <h2>Top Itineraries</h2>
        <figure>
            <a href="https://www.freecodecamp.org/learn" target="_blank">
                <img src="https://cdn.freecodecamp.org/curriculum/labs/colosseo.jpg" alt="colosseum view" >                
            </a>
            <figcaption>Rome and Center Italy</figcaption>
        </figure>
        <figure>
            <a href="https://www.freecodecamp.org/learn" target="_blank">
                <img src="https://cdn.freecodecamp.org/curriculum/labs/alps.jpg" alt="dolomites mountain view" >                
            </a>
            <figcaption>Nature and National Parks</figcaption>            
        </figure>
        <figure>
            <a href="https://www.freecodecamp.org/learn" target="_blank">
                <img src="https://cdn.freecodecamp.org/curriculum/labs/sea.jpg" alt="sea view" >                
            </a>
            <figcaption>South Italy and Islands</figcaption>
        </figure>                
    </body>
</html>