Premise Code Challenge

premise-code-challenge.js

function addStyling(string, styles) {
  const chars = string.split('');
  const formatedChars = [];
  const grid = {};

  for (const className in styles) {
    grid[className] = [];

    styles[className].forEach((range) => {
      for (let i = range[0]; i <= range[1]; i++) {
        grid[className][i] = true;
      }
    });
  }

  chars.forEach((char, i) => {
    const classNames = [];
    
    for (const className in styles) {
      if(grid[className][i] === true) {
        classNames.push(className)
      }
    }

    formatedChars.push(`<span class="${classNames.join(' ')}">${char}</span>`)
  });

  return formatedChars.join('\n');
}

const output = addStyling('test string', {
 bold: [[0, 4], [6, 9]],
 italics: [[0, 2], [5, 6], [3, 4], [0, 3], [8, 12]],
 blue: [[2, 5]],
 green: [[4, 7], [0, 3]],
});

console.log(output);

/* 
Write a function that adds bold styling, italics styling, and blue color styling to any arbitrary subset of characters in an input string. The output of the function should be valid markup or DOM elements that, when rendered to the DOM, would display the input string with the expected stylistic rules applied.

addStyling('test string', {
 bold: [[0, 4], [6, 9]],
 italics: [[0, 2], [5, 6], [3, 4], [0, 3], [8, 12]],
 blue: [[2, 5]],
 green: [[4, 7], [0, 3]],
})

=> eg. <span class='blue bold italics'>f</span><span class='foo bar baz'>o</span>addStyling

           blue blue blue blue ...
  it   it   it 
 bold bold bold bold bold       bold bold 
   0    1    2    3    4    5    6   7 ....
 */