body {
  background: black;
  margin: auto;
  width: 600px;
  margin-top: 200px;
}

// 1. Secret word

var secretWord = ['APPLE', 'BIBLE', 'DRINK', 'EARTH', 'FABLE', 'GHOST', 'HONEY', 'JUICE', 'LIGHT', 'MONEY', 'NURSE', 'OASIS', 'PAPER', 'QUEEN', 'RIVER', 'TRAIN'];

var randomWord = secretWord[Math.floor(Math.random() * secretWord.length)];

console.log(randomWord);

// 2. Letter inputs

var input1 = document.createElement('input');
input1.type = 'text';
input1.maxLength = 1;
input1.id = 'input1';
input1.style.width = '19%';
input1.style.height = '100px';
input1.style.textAlign = 'center';
input1.style.fontSize = '50px';
input1.style.margin = '0 1%';
input1.style.border = '1px solid black';
input1.style.borderRadius = '5px';
input1.style.outline = 'none';

var input2 = document.createElement('input');
input2.type = 'text';
input2.maxLength = 1;
input2.id = 'input2';
input2.style.width = '19%';
input2.style.height = '100px';
input2.style.textAlign = 'center';
input2.style.fontSize = '50px';
input2.style.margin = '0 1%';
input2.style.border = '1px solid black';
input2.style.borderRadius = '5px';
input2.style.outline = 'none';

var input3 = document.createElement('input');
input3.type = 'text';
input3.maxLength = 1;
input3.id = 'input3';
input3.style.width = '19%';
input3.style.height = '100px';
input3.style.textAlign = 'center';
input3.style.fontSize = '50px';
input3.style.margin = '0 1%';
input3.style.border = '1px solid black';
input3.style.borderRadius = '5px';
input3.style.outline = 'none';

var input4 = document.createElement('input');
input4.type = 'text';
input4.maxLength = 1;
input4.id = 'input4';
input4.style.width = '19%';
input4.style.height = '100px';
input4.style.textAlign = 'center';
input4.style.fontSize = '50px';
input4.style.margin = '0 1%';
input4.style.border = '1px solid black';
input4.style.borderRadius = '5px';
input4.style.outline = 'none';

var input5 = document.createElement('input');
input5.type = 'text';
input5.maxLength = 1;
input5.id = 'input5';
input5.style.width = '19%';
input5.style.height = '100px';
input5.style.textAlign = 'center';
input5.style.fontSize = '50px';
input5.style.margin = '0 1%';
input5.style.border = '1px solid black';
input5.style.borderRadius = '5px';
input5.style.outline = 'none';

var inputDiv = document.createElement('div');
inputDiv.style.display = 'flex';
inputDiv.style.justifyContent = 'center';
inputDiv.style.alignItems = 'center';

inputDiv.appendChild(input1);
inputDiv.appendChild(input2);
inputDiv.appendChild(input3);
inputDiv.appendChild(input4);
inputDiv.appendChild(input5);

document.body.appendChild(inputDiv);

// 3. Make the letters uppercase when they're added

input1.addEventListener('keyup', function() {
    input1.value = input1.value.toUpperCase();
});

input2.addEventListener('keyup', function() {
    input2.value = input2.value.toUpperCase();
});

input3.addEventListener('keyup', function() {
    input3.value = input3.value.toUpperCase();
});

input4.addEventListener('keyup', function() {
    input4.value = input4.value.toUpperCase();
});

input5.addEventListener('keyup', function() {
    input5.value = input5.value.toUpperCase();
});

// 4 Submit button

var submitButton = document.createElement('button');
submitButton.innerText = 'Submit';
submitButton.style.width = '100%';
submitButton.style.height = '100px';
submitButton.style.fontSize = '22px';
submitButton.style.marginTop = '20px';
submitButton.style.border = '1px solid black';
submitButton.style.borderRadius = '5px';
submitButton.style.outline = 'none';

document.body.appendChild(submitButton);

// 5. Check letters

submitButton.addEventListener('click', function() {
    if (input1.value === randomWord[0]) {
        input1.style.backgroundColor = 'green';
    } else if (input1.value === randomWord[1] || input1.value === randomWord[2] || input1.value === randomWord[3] || input1.value === randomWord[4]) {
        input1.style.backgroundColor = 'yellow';
    } else {
        input1.style.backgroundColor = 'white';
    }

    if (input2.value === randomWord[1]) {
        input2.style.backgroundColor = 'green';
    } else if (input2.value === randomWord[0] || input2.value === randomWord[2] || input2.value === randomWord[3] || input2.value === randomWord[4]) {
        input2.style.backgroundColor = 'yellow';
    } else {
        input2.style.backgroundColor = 'white';
    }

    if (input3.value === randomWord[2]) {
        input3.style.backgroundColor = 'green';
    } else if (input3.value === randomWord[0] || input3.value === randomWord[1] || input3.value === randomWord[3] || input3.value === randomWord[4]) {
        input3.style.backgroundColor = 'yellow';
    } else {
        input3.style.backgroundColor = 'white';
    }

    if (input4.value === randomWord[3]) {
        input4.style.backgroundColor = 'green';
    } else if (input4.value === randomWord[0] || input4.value === randomWord[1] || input4.value === randomWord[2] || input4.value === randomWord[4]) {
        input4.style.backgroundColor = 'yellow';
    } else {
        input4.style.backgroundColor = 'white';
    }

    if (input5.value === randomWord[4]) {
        input5.style.backgroundColor = 'green';
    } else if (input5.value === randomWord[0] || input5.value === randomWord[1] || input5.value === randomWord[2] || input5.value === randomWord[3]) {
        input5.style.backgroundColor = 'yellow';
    } else {
        input5.style.backgroundColor = 'white';
    }

    if (input1.value === randomWord[0] && input2.value === randomWord[1] && input3.value === randomWord[2] && input4.value === randomWord[3] && input5.value === randomWord[4]) {
        var winText = document.createElement('p');
        winText.innerText = 'You win!';
        winText.style.color = 'white';
        winText.style.fontFamily = 'Arial';
        winText.style.fontSize = '22px';
        winText.style.marginTop = '20px';
        winText.style.textAlign = 'center';

        document.body.appendChild(winText);

        input1.style.backgroundColor = 'green';
        input2.style.backgroundColor = 'green';
        input3.style.backgroundColor = 'green';
        input4.style.backgroundColor = 'green';
        input5.style.backgroundColor = 'green';
    }
});