<div id="results">
  <h2>Tests for caesarDecipher()</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 caesarDecipher(secret, shift) {
    let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    let message = "";
    secret = secret.toUpperCase();
    for (let i = 0; i < secret.length; i++){
        let char = secret[i];
      let pos = alphabet.indexOf(char);
        if (pos > -1) {
            let newPos = (pos+shift) % 26;
            let newChar = alphabet[newPos];
            message += newChar;
        } else {
            message += char;
        }
    }
    return message;
}


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

const secret2 = "OHCL FVB LCLY OLHYK VM AOL IFGHUAPUL NLULYHSZ WYVISLT?";
const key2 = 19;
const expectedResult2 = "HAVE YOU EVER HEARD OF THE BYZANTINE GENERALS PROBLEM?";
const result2 = caesarDecipher(secret2, key2);

const secret3 = "YMJD XFB FGTZY 5 BTQAJX HNWHQNSL YMJ KNJQI!";
const key3 = 99;
const expectedResult3 = "THEY SAW ABOUT 5 WOLVES CIRCLING THE FIELD!";
const result3 = caesarDecipher(secret3, 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 = ${secret1}</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 = ${secret2}</span> <br/> <span>key = ${key2}</span> <br/> <strong><br/>Output:</strong> <br/> ${result2}<br/><br/>${result2 === expectedResult2 ? ("<< ✔️ 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 = ${secret3}</span> <br/> <span>key = ${key3}</span> <br/> <strong><br/>Output:</strong> <br/> ${result3} <br/><br/>${result3 === expectedResult3 ? ("<< ✔️ Correct! >>"):("<< ❌ Incorrect! >>")}`;