color each h2-h6 from DOM with a dotted border

color_headings.js

let headings = document.querySelectorAll('h2, h3, h4, h5, h6');
for (let i = 0; i < headings.length; i++) {
  let heading = headings[i];
  let level = parseInt(heading.tagName.charAt(1));
  let color;
  switch (level) {
    case 2:
      color = "red";
      break;
    case 3:
      color = "orange";
      break;
    case 4:
      color = "yellow";
      break;
    case 5:
      color = "green";
      break;
    case 6:
      color = "blue";
      break;
    default:
      color = "black";
  }
  heading.style.border = "1px dotted " + color;
}