script.js

document.getElementById('red').addEventListener('click', (event) => {
    let element_body = document.getElementById('body');
    element_body.style.backgroundColor = '#ff0000';
  
  });
  
  document.getElementById('grey').addEventListener('click', (event) => {
    let element_body2 = document.getElementById('body');
    element_body2.style.backgroundColor = '#c0c0c0';
  
  });
  
  document.getElementById('green').addEventListener('click', (event) => {
    let element_body3 = document.getElementById('body');
    element_body3.style.backgroundColor = '#33cc00';
  
  });
  
  document.getElementById('purple').addEventListener('click', (event) => {
    let element_body4 = document.getElementById('body');
    element_body4.style.backgroundColor = '#cc33cc';
  
  });
  
  const {
    core: { test, expect, run },
    prettify
  } = window.jestLite;
  
  
  const getHeader = document.querySelectorAll("header"),
    getH1 = document.querySelectorAll("h1"),
    getSiteHeader = document.querySelectorAll(".c-site-header"),
    getAria = document.querySelectorAll('nav[aria-label="Main Site Links."]'),
    getMain = document.querySelectorAll("main"),
    getFooter = document.querySelectorAll("footer"),
    getSiteFooter = document.querySelectorAll(".c-site-footer"),
    getIFrame = document.querySelectorAll("iframe"),
    getImage = document.querySelectorAll("img"),
    getWords = document.body.innerText;
  
  
  test("There is at least one header element", () => {
    expect(getHeader.length).toBeGreaterThanOrEqual(1);
  });
  test("There is at least one h1", () => {
    expect(getH1.length).toBeGreaterThanOrEqual(1);
  });
  test("There is only one header element with the class c-site-header", () => {
    expect(getSiteHeader.length).toBe(1);
  });
  test("There is a nav element with an aria-label of Main Site Links.", () => {
    expect(getAria.length).toBeGreaterThanOrEqual(1);
  });
  test("There is only one main element", () => {
    expect(getMain.length).toBe(1);
  });
  test("There is at least one footer element", () => {
    expect(getFooter.length).toBeGreaterThanOrEqual(1);
  });
  test("There is only one footer element with the class c-site-footer", () => {
    expect(getSiteFooter.length).toBe(1);
  });
  test("There is embedded video", () => {
    expect(getIFrame.length).toBeGreaterThanOrEqual(1);
  });
  test("There is at least one image", () => {
    expect(getImage.length).toBeGreaterThanOrEqual(1);
  });
  test("There are at least 500 words on the page", () => {
    expect(getWords.length).toBeGreaterThanOrEqual(500);
  });
  
  const console = document.getElementById("tests");
  prettify.toHTML(run(), console);


  function getNumberOrString(value) {
    // Convert a string value to a number if possible
    let number_value = Number(value);
    if (Number.isNaN(number_value)) {
      return value
    } else {
      return number_value
    }
  }
  
  
  
  document.getElementById('button').addEventListener('click', (event) => {
    let element_list = document.getElementById('list');
    let new_li = document.createElement('li');
    new_li.innerText = getNumberOrString(document.getElementById('text').value);
  
    element_list.appendChild(new_li);
  
  });