--description--

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

User Stories:

You should have a table with at least three columns and five rows, headers included.
Cells in the first row should be table headers containing days of the week.
Cells in the first column should be table headers with a class of time and should contain time values as their text.
All data cells should have the class of available-#, where # is a number from 0 to 5 that specifies the number of available people at that time.
In your :root selector, you should define six CSS variables named --color#, where # is a number from 0 to 5, and assign them each a color value. Use these variables to set the background color of the corresponding .available-# elements.
In your :root selector, you should define CSS variables named --solid-border and --dashed-border. Use these variables to style the bottom borders of your data cells, alternating between solid and dashed borders depending on the row. Give the rows either the class of sharp or half to style them.
You should have a div element with the id of legend. It should contain a span element with the text Availability and a div element with the id of legend-gradient.
You should give the #legend-gradient element a linear gradient that transitions between all the colors from --color0 to --color5 with hard lines.

Note: Be sure to link your stylesheet in your HTML to apply your CSS.

--hints--

You should have a table element.

assert.isNotNull(document.querySelector('table'));

You should have only one table element.

assert.lengthOf(document.querySelectorAll('table'), 1);

Your table should have at least 5 rows.

assert.isAtLeast(document.querySelectorAll('tr')?.length, 5);

Your table should have at least 3 columns.

const rows = [...document.querySelectorAll('tr')];
assert.isNotEmpty(rows);
rows.forEach((row) => {
    assert.isAtLeast(row.children.length, 3);
})

The first row in your table should contain at least three th elements.

assert.isAtLeast(document.querySelectorAll('tr:first-child>th').length, 3)

The first row in your table should not contain td elements.

const firstRow = document.querySelector('tr');
assert.isNotNull(firstRow);
assert.isEmpty(firstRow.querySelectorAll('td'));

You should have at least two rows with the class of sharp.

assert.isAtLeast(document.querySelectorAll('tr[class~="sharp"]').length, 2);

You should have at least two rows with the class of half.

assert.isAtLeast(document.querySelectorAll('tr[class~="half"]').length, 2);

th elements in the first column should have the class of time and contain time values.

const firstColumnData = [...document.querySelectorAll('tr th:first-child')];
assert.isNotEmpty(firstColumnData);
for (let cell of firstColumnData) {
    if (cell.innerText.match(/\d/)?.length) {
        assert.isTrue(cell.classList.contains('time'));
    }
}

You should have at least four th elements with the class of time that contain time values.

const timeClass = document.querySelectorAll('.time');
assert.isAtLeast(timeClass.length, 4);
for (let cell of timeClass) {
    assert.match(cell.innerText, /\d/)
}

All your td elements should have the class of available-#, where # is a number from 0 to 5.

const cells = [...document.querySelectorAll('tr[class="sharp"]>td, tr[class="half"]>td')];
assert.isNotEmpty(cells);
for (let cell of cells) {
    const classString = [...cell.classList].join(' ');
    assert.lengthOf(classString.match(/(?<=\s|^)available-[0-5](?=\s|$)/gm), 1);
}

You should have at least eight .available-# elements, where # is a number between 0 and 5.

assert.isAtLeast(document.querySelectorAll('td[class*="available-"]').length, 8);

You should define a --color0 variable in your root selector.

const root = new __helpers.CSSHelp(document).getStyle(':root');
assert.exists(root); 
assert.isNotEmpty(root.getPropVal('--color0'))

You should define a --color1 variable in your root selector.

const root = new __helpers.CSSHelp(document).getStyle(':root');
assert.exists(root); 
assert.isNotEmpty(root.getPropVal('--color1'))

You should define a --color2 variable in your root selector.

const root = new __helpers.CSSHelp(document).getStyle(':root');
assert.exists(root); 
assert.isNotEmpty(root.getPropVal('--color2'))

You should define a --color3 variable in your root selector.

const root = new __helpers.CSSHelp(document).getStyle(':root');
assert.exists(root); 
assert.isNotEmpty(root.getPropVal('--color3'));

You should define a --color4 variable in your root selector.

const root = new __helpers.CSSHelp(document).getStyle(':root');
assert.exists(root); 
assert.isNotEmpty(root.getPropVal('--color4'));

You should define a --color5 variable in your root selector.

const root = new __helpers.CSSHelp(document).getStyle(':root');
assert.exists(root); 
assert.isNotEmpty(root.getPropVal('--color5'));

You should use --color0 to set the background color of .available-0 elements.

const a = new __helpers.CSSHelp(document).getStyle('.available-0');
assert.exists(a); 
assert.strictEqual(a.backgroundColor, 'var(--color0)');

You should use --color1 to set the background color of .available-1 elements.

const a = new __helpers.CSSHelp(document).getStyle('.available-1');
assert.exists(a); 
assert.strictEqual(a.backgroundColor, 'var(--color1)');

You should use --color2 to set the background color of .available-2 elements.

const a = new __helpers.CSSHelp(document).getStyle('.available-2');
assert.exists(a); 
assert.strictEqual(a.backgroundColor, 'var(--color2)');

You should use --color3 to set the background color of .available-3 elements.

const a = new __helpers.CSSHelp(document).getStyle('.available-3');
assert.exists(a); 
assert.strictEqual(a.backgroundColor, 'var(--color3)');

You should use --color4 to set the background color of .available-4 elements.

const a = new __helpers.CSSHelp(document).getStyle('.available-4');
assert.exists(a); 
assert.strictEqual(a.backgroundColor, 'var(--color4)');

You should use --color5 to set the background color of .available-5 elements.

const a = new __helpers.CSSHelp(document).getStyle('.available-5');
assert.exists(a); 
assert.strictEqual(a.backgroundColor, 'var(--color5)');

You should define a --solid-border variable in your root selector.

const root = new __helpers.CSSHelp(document).getStyle(':root');
assert.exists(root); 
assert.isNotEmpty(root.getPropVal('--solid-border'));

You should define a --dashed-border variable in your root selector.

const root = new __helpers.CSSHelp(document).getStyle(':root');
assert.exists(root); 
assert.isNotEmpty(root.getPropVal('--dashed-border'));

You should target td elements that are children of .sharp elements.

const tds = new __helpers.CSSHelp(document).getStyle('.sharp td') || new __helpers.CSSHelp(document).getStyle('.sharp>td');
assert.exists(tds);

You should use --solid-border to set the bottom-border of td elements that are children of .sharp elements.

const tds = new __helpers.CSSHelp(document).getStyle('.sharp td') || new __helpers.CSSHelp(document).getStyle('.sharp>td');
assert.exists(tds);
assert.strictEqual(tds.borderBottom, 'var(--solid-border)');

You should target td elements that are children of .half elements.

const tds = new __helpers.CSSHelp(document).getStyle('.half td') || new __helpers.CSSHelp(document).getStyle('.half>td');
assert.exists(tds);

You should use --dashed-border to set the bottom-border of td elements of .half elements.

const tds = new __helpers.CSSHelp(document).getStyle('.half td') || new __helpers.CSSHelp(document).getStyle('.half>td');
assert.exists(tds);
assert.strictEqual(tds.borderBottom, 'var(--dashed-border)');

You should have a div element with the id of legend.

assert.equal(document.querySelector('#legend')?.tagName, 'DIV');

You should have a span element with the text Availability inside your #legend.

assert.equal(document.querySelector('#legend span')?.textContent.trim(), 'Availability');

You should have a div element with the id of legend-gradient inside your #legend.

assert.equal(document.querySelector('#legend #legend-gradient')?.tagName, 'DIV');

You should set the background image of #legend-gradient to a linear gradient.

const legendGradient = new __helpers.CSSHelp(document).getStyle('#legend-gradient');
assert.exists(legendGradient); 
assert.include(legendGradient.backgroundImage, "linear-gradient(")

You should have the transitions from one color to the following color as a hard line for your #legend-gradient. Make sure your percentages are whole numbers.

const legendGradient = new __helpers.CSSHelp(document).getStyle('#legend-gradient');
assert.exists(legendGradient);
const gradientStr = legendGradient.backgroundImage;

const COLOR_COUNT = 6;
const EXPECTED_SHORTHAND_STOPS = 6;
const EXPECTED_EXPANDED_STOPS = 12;

for (let i = 0; i < COLOR_COUNT; i++) {
  assert.include(gradientStr, `--color${i}`, `gradient should include --color${i}`);
}

const GRADIENT_PATTERNS = {
  SHORTHAND: /var\(\s*--color[0-5]\s*\)\s+\d+%\s+\d+%/g,
  EXPANDED: /var\(\s*--color[0-5]\s*\)\s+\d+%(?!\s+\d+%)/g
};

const matchGradientFormat = (gradientStr, pattern) => gradientStr.match(pattern);

const shorthandMatches = matchGradientFormat(gradientStr, GRADIENT_PATTERNS.SHORTHAND);
const expandedMatches = matchGradientFormat(gradientStr, GRADIENT_PATTERNS.EXPANDED);

const colorPattern = /var\(\s*--color(\d)\s*\)/g;
const allColorMatches = [...gradientStr.matchAll(colorPattern)];
const colorNumbers = allColorMatches.map(match => parseInt(match[1]));

if (shorthandMatches?.length === EXPECTED_SHORTHAND_STOPS) {
  for (let i = 0; i < COLOR_COUNT; i++) {
    const count = colorNumbers.filter(num => num === i).length;
    assert.equal(count, 1, `In shorthand format, --color${i} should appear exactly once, but it appears ${count} times`);
  }
  
  for (let i = 0; i < COLOR_COUNT; i++) {
    const idx = colorNumbers.indexOf(i);
    assert.isAtLeast(idx, 0, `--color${i} should be in the gradient`);
    if (i > 0) {
      const prevIdx = colorNumbers.indexOf(i - 1);
      assert.isBelow(prevIdx, idx, `--color${i - 1} should appear before --color${i}`);
    }
  }
} else if (expandedMatches?.length === EXPECTED_EXPANDED_STOPS) {
  for (let i = 0; i < COLOR_COUNT; i++) {
    const count = colorNumbers.filter(num => num === i).length;
    assert.equal(count, 2, `In expanded format, --color${i} should appear exactly twice, but it appears ${count} times`);
  }
  
  for (let i = 0; i < COLOR_COUNT; i++) {
    const firstIdx = colorNumbers.indexOf(i);
    const lastIdx = colorNumbers.lastIndexOf(i);
    assert.equal(lastIdx - firstIdx, 1, `--color${i} should appear in consecutive positions for hard lines`);
    
    if (i > 0) {
      const prevLastIdx = colorNumbers.lastIndexOf(i - 1);
      assert.isBelow(prevLastIdx, firstIdx, `--color${i - 1} should complete before --color${i} starts`);
    }
  }
  
  const percentPattern = /var\(\s*--color\d\s*\)\s+(\d+)%/g;
  const percentMatches = [...gradientStr.matchAll(percentPattern)];
  const percentages = percentMatches.map(match => parseInt(match[1]));
  
  for (let i = 1; i < percentages.length - 1; i += 2) {
    assert.equal(percentages[i], percentages[i + 1], `For hard lines, percentage at position ${i} (${percentages[i]}%) should equal percentage at position ${i + 1} (${percentages[i + 1]}%) where colors meet`);
  }
} else {
  assert.fail('Gradient must use either shorthand format (6 stops with two percentages each) or expanded format (12 stops with one percentage each)');
}

--seed--

--seed-contents--

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Availability Table</title>
</head>

<body>

</body>

</html>

css

--solutions--