3.2 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5d5a813321b9e3db6c106a46 | Step 1 | 0 | step-1 |
--description--
JavaScript is a powerful language which allows you to build websites that are interactive. To get started, create your standard HTML boilerplate with a DOCTYPE, html, head, and body. Include a title element and a link for your stylesheet, and your meta tag for the charset. Then, create a div element with the id game within your body. Use the text RPG - Dragon Repeller for your title element.
--hints--
Your code should contain the DOCTYPE reference.
assert(code.match(/<!DOCTYPE/gi));
You should include a space after the DOCTYPE reference.
assert(code.match(/<!DOCTYPE\s+/gi));
You should define the document type to be html.
assert(code.match(/<!DOCTYPE\s+html/gi));
You should close the DOCTYPE declaration with a > after the type.
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
Your html element should have an opening tag. Don't forget the lang attribute.
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
Your html element should have a closing tag.
assert(code.match(/<\/html\s*>/));
Your DOCTYPE declaration should be at the beginning of your HTML.
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
You should have an opening head tag.
assert(code.match(/<head\s*>/i));
You should have a closing head tag.
assert(code.match(/<\/head\s*>/i));
You should have an opening body tag.
assert(code.match(/<body\s*>/i));
You should have a closing body tag.
assert(code.match(/<\/body\s*>/i));
The head and body elements should be siblings.
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
The head element should be within the html element.
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
The body element should be within the html element.
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
Your code should have a meta element.
const meta = document.querySelector('meta');
assert.exists(meta);
Your meta element should have a charset attribute with the value UTF-8.
assert.match(code, /<meta[\s\S]+?charset=('|"|`)UTF-8\1/i)
Your code should have a title element.
const title = document.querySelector('title');
assert.exists(title);
Your code should have a link element.
const link = document.querySelector('head > link');
assert.exists(link);
You should have a div element.
const div = document.querySelector('div');
assert.exists(div);
Your div element should have an id attribute with the value game.
const div = document.querySelector('div');
assert.equal(div?.id, 'game');
Your div element should be within the body element.
const div = document.querySelector('div');
assert.equal(div?.parentElement?.localName, 'body');
--seed--
--seed-contents--
--fcc-editable-region--
--fcc-editable-region--