feat: begin adding tests

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-001.md

@@ -13,10 +13,46 @@ Add a `DOCTYPE html` declaration at the top of the document, and an `html` eleme
 
 # --hints--
 
-Test 1
+Your code should contain the `DOCTYPE` reference.
 
 ```js
+assert(code.match(/<!DOCTYPE/gi));
+```
 
+You should include a space after the `DOCTYPE` reference.
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+You should define the document type to be `html`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html/gi));
+```
+
+You should close the `DOCTYPE` declaration with a `>` after the type.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
+```
+
+Your `html` element should have an opening tag.
+
+```js
+assert(code.match(/<html\s*>/gi));
+```
+
+Your `html` element should have a closing tag.
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+Your `html` element should be below the `DOCTYPE` declaration.
+
+```js
+assert(code.match(/(?<!<html\s*>)<!DOCTYPE\s+html\s*>/gi));
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-002.md

@@ -11,10 +11,46 @@ Nest a `head` element within the `html` element. Just after the `head` element,
 
 # --hints--
 
-Test 1
+You should have an opening `head` tag.
 
 ```js
+assert(code.match(/<head\s*>/i));
+```
 
+You should have a closing `head` tag.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+You should have an opening `body` tag.
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+You should have a closing `body` tag.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+Your `head` and `body` elements should be siblings.
+
+```js
+assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
+```
+
+Your `head` element should be within the `html` element.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+Your `body` element should be within the `html` element.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-003.md

@@ -13,10 +13,30 @@ Within the `head` element, nest a `title` element with the text `CSS Color Marke
 
 # --hints--
 
-Test 1
+You should have an opening `title` tag.
 
 ```js
+assert(code.match(/<title\s*>/i));
+```
 
+You should have a closing `title` tag.
+
+```js
+assert(code.match(/<\/title\s*>/i));
+```
+
+Your project should have the title `CSS Color Markers`.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim()?.toLowerCase(), 'css color markers')
+```
+
+Remember, the casing and spelling matter for the title text
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim(), 'CSS Color Markers');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-004.md

@@ -9,14 +9,29 @@ dashedName: step-4
 
 To tell browsers how to encode characters on your page, set the `charset` to `utf-8`. `utf-8` is a universal character set that includes almost every character from all human languages.
 
-Inside the `head` element, nest a `meta` element with the attribute `charset` set to `utf-8`. Remember that `meta` elements are self-closing.
+Inside the `head` element, nest a `meta` element with the attribute `charset` set to `utf-8`. Remember that `meta` elements are self-closing, and do not need a closing tag.
 
 # --hints--
 
-Test 1
+You should have one `meta` element.
 
 ```js
+const meta = document.querySelectorAll('meta');
+assert(meta?.length === 1);
+```
 
+Your `meta` element should be a self-closing element.
+
+```js
+assert(code.match(/<\/meta>/i) === null);
+```
+
+Your `meta` element should have a `charset` attribute set to `utf-8`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => m?.getAttribute('charset').toLowerCase() === 'utf-8');
+assert.exists(target);
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-005.md

@@ -13,10 +13,25 @@ Nest a self-closing `meta` element with the `head`. Give it a `name` attribute s
 
 # --hints--
 
-Test 1
+You should have two `meta` elements.
 
 ```js
+const meta = document.querySelectorAll('meta');
+assert(meta?.length === 2);
+```
 
+Your new `meta` element should be a self-closing element.
+
+```js
+assert(code.match(/<\/meta>/i) === null);
+```
+
+Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0');
+assert.exists(target);
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-006.md

@@ -13,10 +13,43 @@ Within the `body`, nest an `h1` element with the text `CSS Color Markers`.
 
 # --hints--
 
-Test 1
+Your code should have an `h1` element.
 
 ```js
+const title = document.querySelector('h1');
+assert.exists(title);
+```
 
+You should have an opening `h1` tag.
+
+```js
+assert(code.match(/<h1\s*>/i));
+```
+
+You should have a closing `h1` tag.
+
+```js
+assert(code.match(/<\/h1\s*>/i));
+```
+
+Your `h1` element should be within the `body` element.
+
+```js
+assert(document.querySelector('h1')?.parentElement?.localName === 'body');
+```
+
+Your `h1` element should have the text `CSS Color Markers`.
+
+```js
+const h1 = document.querySelector('h1');
+assert.equal(h1?.textContent?.trim()?.toLowerCase(), 'css color markers')
+```
+
+Remember, the casing and spelling matter for the `h1` text.
+
+```js
+const h1 = document.querySelector('h1');
+assert.equal(h1?.textContent?.trim(), 'CSS Color Markers');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-007.md

@@ -7,16 +7,47 @@ dashedName: step-7
 
 # --description--
 
-In this project you'll work with an external CSS file to style the page. We've already created a `style.css` file for you. But before you can use it, you'll need to link it to the page.
+In this project you'll work with an external CSS file to style the page. We've already created a `styles.css` file for you. But before you can use it, you'll need to link it to the page.
 
 Nest a `link` element within the `head`. Give it a `rel` attribute set to `stylesheet`, a `type` attribute set to `text/css`, and an `href` attribute set to `styles.css`.
 
 # --hints--
 
-Test 1
+Your code should have one `link` element.
 
 ```js
+assert(code.match(/<link/g)?.length === 1);
+```
 
+Your `link` element should be a self-closing element.
+
+```js
+assert(code.match(/<\/link>/i) === null);
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+const head = code.match(/<head>(.|\r|\n)*<\/head>/i)?.[0];
+assert(head.match(/<link/g)?.length === 1)
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert(code.match(/<link[\s\S]*?rel=('|"|`)stylesheet\1/gi)?.length === 1);
+```
+
+Your `link` element should have a `type` attribute with the value `text/css`.
+
+```js
+assert(code.match(/<link[\s\S]*?type=('|"|`)text\/css\1/gi)?.length === 1);
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/);
 ```
 
 # --seed--
@@ -26,13 +57,13 @@ Test 1
 ```html
 <!DOCTYPE html>
 <html>
---fcc-editable-region--
+  --fcc-editable-region--
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CSS Color Markers</title>
   </head>
---fcc-editable-region--
+  --fcc-editable-region--
   <body>
     <h1>CSS Color Markers</h1>
   </body>

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md

@@ -21,10 +21,16 @@ Create a new CSS rule that targets the `h1` element, and set the `text-align` pr
 
 # --hints--
 
-Test 1
+You should create an `h1` selector.
 
 ```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
 
+Your `h1` CSS rule should have a `text-align` property set to `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-009.md

@@ -13,10 +13,37 @@ First, within the `body` element, add a `div` element and set its `class` attrib
 
 # --hints--
 
-Test 1
+You should have an opening `div` tag.
 
 ```js
+assert(code.match(/<div.*>/i));
+```
 
+You should have a closing `div` tag.
+
+```js
+assert(code.match(/<\/div\s*>/i));
+```
+
+Your `div` element should be within your `body` element.
+
+```js
+assert(document.querySelector('div')?.parentElement?.localName === 'body');
+```
+
+Your `div` element should be after the `h1` element.
+
+```js
+const bodyElements = [...document.querySelector('body')?.children];
+const h1 = document.querySelector('h1');
+const div = document.querySelector('div');
+assert(bodyElements.indexOf(h1) < bodyElements.indexOf(div));
+```
+
+Your `div` element should have a `class` attribute set to `container`.
+
+```js
+assert(document.querySelector('div')?.classList?.contains('container'));
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-010.md

@@ -11,10 +11,29 @@ Next, within the `container` `div`, add another `div` element and set its `class
 
 # --hints--
 
-Test 1
+Your new `div` element should have an opening tag.
 
 ```js
+assert([...code.matchAll(/<div.*>/gi)][1]);
+```
 
+Your new `div` element should have a closing tag.
+
+```js
+assert([...code.matchAll(/<\/div\s*>/gi)][1]);
+```
+
+Your new `div` element should be within the `container` `div` element.
+
+```js
+assert(document.querySelector('.container')?.children[0]?.localName === 'div');
+```
+
+Your new `div` element should have a `class` attribute set to `marker`.
+
+```js
+const containerChildren = [...document.querySelector('.container')?.children];
+assert(containerChildren.every(child => child.classList?.contains('marker')));
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md

@@ -9,7 +9,7 @@ dashedName: step-11
 
 It's time to add some color to the page. Remember that one way to add color to an element is to use a <dfn>color keyword</dfn> like `black`, `cyan`, or `yellow`.
 
-Use a class selector to target `marker` and apply a background color to it. As a reminder, here's how to target the `class` `freecodecamp`:
+Use a `class` selector to target `marker` and apply a background color to it. As a reminder, here's how to target the `class` `freecodecamp`:
 
 ```css
 .freecodecamp {
@@ -21,10 +21,16 @@ Create a new CSS rule that targets the `marker` `class`, and set its `background
 
 # --hints--
 
-Test 1
+You should create a `class` selector to target the `marker` `class`.
 
 ```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker'));
+```
 
+Your `marker` CSS rule should have a `background-color` property set to `red`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor === 'red');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-012.md

@@ -7,16 +7,22 @@ dashedName: step-12
 
 # --description--
 
-Notice that your marker doesn't seem to have any color applied to it. The background color was actually applied, but since the `marker` element is empty, it doesn't have any width or height by default.
+Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the `marker` element is empty, it doesn't have any width or height by default.
 
 In your `marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`.
 
 # --hints--
 
-Test 1
+Your `marker` CSS rule should have a `width` property set to `200px`.
 
 ```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.width === '200px');
+```
 
+Your `marker` CSS rule should have a `height` property set to `25px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.height === '25px');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-013.md

@@ -15,10 +15,10 @@ To center your marker on the page, set its `margin` property to `auto`. This set
 
 # --hints--
 
-Test 1
+Your `marker` CSS rule should have a `margin` property set to `auto`.
 
 ```js
-
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === 'auto');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md

@@ -13,10 +13,42 @@ In the `container` `div`, add two more `div` elements with the `class` `marker`.
 
 # --hints--
 
-Test 1
+Your first new `div` element should have an opening tag.
 
 ```js
+assert([...code.matchAll(/<div.*>/gi)][2]);
+```
 
+Your first new `div` element should have a closing tag.
+
+```js
+assert([...code.matchAll(/<\/div\s*>/gi)][2]);
+```
+
+Your second new `div` element should have an opening tag.
+
+```js
+assert([...code.matchAll(/<div.*>/gi)][3]);
+```
+
+Your second new `div` element should have a closing tag.
+
+```js
+assert([...code.matchAll(/<\/div\s*>/gi)][3]);
+```
+
+Your new `div` elements should be within the `container` `div` element.
+
+```js
+const containerChildren = [...document.querySelector('.container')?.children];
+assert(containerChildren.every(child => child?.localName === 'div') && containerChildren.length === 3);
+```
+
+Your new `div` elements should both have their `class` attributes set to `marker`.
+
+```js
+const containerChildren = [...document.querySelector('.container')?.children];
+assert(containerChildren.every(child => child?.classList?.contains('marker')));
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-015.md

@@ -15,10 +15,10 @@ In your `marker` CSS rule, set the `margin` property to `10px auto`.
 
 # --hints--
 
-Test 1
+Your `marker` CSS rule should have a `margin` property set to `10px auto`.
 
 ```js
-
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === '10px auto');
 ```
 
 # --seed--