curriculum/challenges/english/blocks/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md
Add a title element with the text Magazine, a link element for the https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap font stylesheet, a link for the https://use.fontawesome.com/releases/v5.8.2/css/all.css FontAwesome stylesheet, and a link for your ./styles.css stylesheet.
Your font stylesheet will load three separate fonts: Anton, Baskervville, and Raleway.
Your code should have three link elements.
assert.strictEqual(document.querySelectorAll('link')?.length, 3);
Your link elements should be inside your head element.
const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
const headElementContent = code.match(headContentRegex);
const headElement = document.createElement("head");
headElement.innerHTML = headElementContent;
assert.strictEqual(headElement.querySelectorAll('link')?.length, 3);
Your three link elements should have a rel attribute with the value stylesheet.
const links = [...document.querySelectorAll('link')];
assert.isTrue(links.every(link => link.getAttribute('rel') === 'stylesheet'));
One of your link elements should have the href set to https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap.
const links = [...document.querySelectorAll('link')];
assert.exists(links.find(link => link.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap'));
One of your link elements should have the href set to https://use.fontawesome.com/releases/v5.8.2/css/all.css.
const links = [...document.querySelectorAll('link')];
assert.exists(links.find(link => link.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css'));
One of your link elements should have the href set to styles.css.
const styleElement = document.querySelector('[data-href]');
assert.isNotNull(styleElement);
assert.strictEqual(styleElement?.getAttribute('data-href'), 'styles.css');
Your code should have a title element.
const title = document.querySelector('title');
assert.isNotNull(title);
Your code should have one title element.
const title = document.querySelectorAll('title');
assert.strictEqual(title?.length, 1);
Your title element should be inside your head element.
const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
const headElementContent = code.match(headContentRegex);
const headElement = document.createElement("head");
headElement.innerHTML = headElementContent;
assert.isNotNull(headElement.querySelector('title'));
Your project should have a title of Magazine. Remember, the casing and spelling matter for the title.
const title = document.querySelector('title');
assert.equal(title?.text?.trim(), 'Magazine');
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
--fcc-editable-region--
<body>
</body>
</html>