<div id="results">
  <h2>Tests for caesarCipher()</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;
}

// this will clear the console with every change to the code below
console.clear();

/*
** CODE
*/

function caesarCipher(message, key) {
  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  let secret = "";
  message = message.toUpperCase();
  for (let i = 0; i < message.length; i++) {
    let char = message[i];
    let pos = alphabet.indexOf(char);
    if (pos > -1) {
      let newPos = pos - key;
      if (newPos < 0) {
        newPos = 25+(newPos+1)%26;
      }
      let newChar = alphabet[newPos];
      secret += newChar;
    } else {
      secret += char;
    }
  }
  return secret;
}



const message1 = "THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG";
const key1 = 3;
const expectedResult1 = "QEB NRFZH YOLTK CLU GRJMBA LSBO QEB IXWV ALD";
const result1 = caesarCipher(message1, key1);

const message2 = "Have you ever heard of The Byzantine Generals problem?";
const key2 = 19;
const expectedResult2 = "OHCL FVB LCLY OLHYK VM AOL IFGHUAPUL NLULYHSZ WYVISLT?";
const result2 = caesarCipher(message2, key2);

const message3 = "They saw about 5 wolves circling the field!";
const key3 = 99;
const expectedResult3 = "YMJD XFB FGTZY 5 BTQAJX HNWHQNSL YMJ KNJQI!";
const result3 = caesarCipher(message3, key3)

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


firstTest.innerHTML = `<h3>Test 1</h3> <span><small><em>Expected result = ${expectedResult1}</em></small></span><br/><br/> <strong>Inputs:</strong> <br/> <span>message = ${message1}</span> <br/> <span>key = ${key1}</span> <br/> <strong><br/>Output:</strong> <br/> ${result1}<br/><br/>${result1 === expectedResult1 ? ("<< ✔️ Correct! >>"):("<< ❌ Incorrect! >>")}`;

secondTest.innerHTML = `<h3>Test 2</h3> <span><small><em>Expected result = ${expectedResult2}</em></small></span><br/><br/> <strong>Inputs:</strong> <br/> <span>message = ${message2}</span> <br/> <span>key = ${key2}</span> <br/> <strong><br/>Output:</strong> <br/> ${result2}<br/><br/>${result1 === expectedResult1 ? ("<< ✔️ Correct! >>"):("<< ❌ Incorrect! >>")}`;

thirdTest.innerHTML = `<h3>Test 3</h3> <span><small><em>Expected result = ${expectedResult3}</em></small></span><br/><br/> <strong>Inputs:</strong> <br/> <span>message = ${message3}</span> <br/> <span>key = ${key3}</span> <br/> <strong><br/>Output:</strong> <br/> ${result3} <br/><br/>${result3 === expectedResult3 ? ("<< ✔️ Correct! >>"):("<< ❌ Incorrect! >>")}`;