<div id="results">
  <h2>Tests for sumIntervals()</h2>
  <p class="test" id="first"></p>
  <p class="test" id="second"></p>
  <p class="test" id="third"></p>
</div>

body, h2, h3{
  margin: 0;
}

h2, h3{
  text-align: center;
}

p{
  margin: 0.5em;
  word-wrap: break-word;
}

#results{
  height: 100vh;
  margin: auto;
  font-size: 1.1em;
  background-color: lightgrey;
}

.test {
  padding: 0.5em;
  background-color: white;
}

console.clear();

/*
** CODE
*/

function sumIntervals(intervals){
  let intervalSum = 0;
  let intArr = [];
  
  for(let i=0; i<intervals.length; i++){
    const interval = intervals[i];

      for (let j=interval[0]; j<interval[1]; j++){

        if(intArr.includes(j) === false){
          intervalSum ++;
        intArr.push(j);
        }
      }
  }
  return intervalSum;
}


/*
** TEST
*/

const intervals_1 = [
   [1,2],
   [6, 10],
   [11, 15]
];
const solution_1 = 9;
const result_1 = sumIntervals(intervals_1);

const intervals_2 = [
   [1,4],
   [7, 10],
   [3, 5]
];
const solution_2 = 7;
const result_2 = sumIntervals(intervals_2);

const intervals_3  = [
   [1,5],
   [10, 20],
   [1, 6],
   [16, 19],
   [5, 11]
];
const solution_3 = 19;
const result_3 = sumIntervals(intervals_3);

const firstTest = document.getElementById("first");
const secondTest = document.getElementById("second");
const thirdTest = document.getElementById("third");


document.getElementById("first").innerHTML = `<h3>Test 1</h3> <strong>Inputs:</strong> <br/> <span>intervals = [
   [1,2],
   [6, 10],
   [11, 15]
]</span> <br/> <span>expected output = ${solution_1}</span> <br/><br/> <strong>Output:</strong> <br/> ${sumIntervals(intervals_1)}<br/><br/>${result_1 === solution_1 ? ("<< ✔️ Correct! >>"):("<< ❌ Incorrect! >>")}`;

document.getElementById("second").innerHTML = `<h3>Test 2</h3> <strong>Inputs:</strong> <br/> <span>intervals = [
   [1,4],
   [7, 10],
   [3, 5]
]</span> <br/> <span>expected output = ${solution_2}</span> <br/><br/> <strong>Output:</strong> <br/> ${sumIntervals(intervals_2)}<br/><br/>${result_2 === solution_2 ? ("<< ✔️ Correct! >>"):("<< ❌ Incorrect! >>")}`;

document.getElementById("third").innerHTML = `<h3>Test 3</h3> <strong>Inputs:</strong> <br/> <span>intervals = [
   [1,5],
   [10, 20],
   [1, 6],
   [16, 19],
   [5, 11]
]</span> <br/> <span>expected output = ${solution_3}</span> <br/><br/> <strong>Output:</strong> <br/> ${sumIntervals(intervals_3)}<br/><br/>${result_3 === solution_3 ? ("<< ✔️ Correct! >>"):("<< ❌ Incorrect! >>")}`;