JAVASCRIPT: below are the HTML file, and the JavaScript file used. HTML FILE: p5.HTML Project 5: Word Guess Word Guess Word: Guess Start Letters Guessed

JAVASCRIPT: below are the HTML file, and the JavaScript file used.

HTML FILE: p5.HTML

Word Guess

Word:

Letters Guessed

JavaScript: two files p5.js and p5-words.js

this is from p5.js, p5-words holds a fifty word array of random words

QUESTION: Write a nested for loop that cross examines the index of word and guesses to see if they are correct, and something that will ignore previous guesses. And, then something that will clear the input box after a guessed letter. This happens within the handleGuessButtonClick function.

const words = wordList;

let guesses = [];

let word = "";

let correctGuess = [];

function handleGuessButtonClick(evt){

const element = document.createElement('li');

const guessedWordInput = document.querySelector("#guessWord").value;

if(guessedWordInput.trim().length > 0){

element.textContent = guessedWordInput.trim().toUpperCase().charAt();

guesses.push(element.textContent);

console.log("Guesses: " + guesses);

}

displayGuessedLetters();

displayWordUnderscores(word);

//for loop that combines index of word and guesses to see if they are correct

//something that will ignore previous guesses

//after any new guessed letter

//clear input box

}

function handleStartRestartButtonClick(evt){

guesses = [];

correctGuess = [];

//find a new random word, converted to uppercase

word = words[getRandomNumber(0,49)].toUpperCase();

console.log(word);

let underscore = "_"

numberOfUnderscores = word.length;

for(let i = 0; i < numberOfUnderscores; i++){

correctGuess.push(underscore);

}

//update the word with underscores display

//update the listing of guessed letters

displayWordUnderscores(word);

displayGuessedLetters();

//change the start/restart button to display "restart"

document.querySelector("#startButton").textContent = "Restart";

//use addEventListener() to connect this function to the appropriate button to handle the click event

}

function displayGuessedLetters(){

//update the guessed letters div with the list of guessed letters

//remember for the div elements the property that displays the content is the innerHTML property

//you do not need to create a new element, simply create a string separated by the br element

let result = "";

for(let i = 0; i < guesses.length; i++){

result += guesses[i] + " ";

}

document.querySelector("#displayGuessedLetters").innerHTML = `${result}`;

}

function displayWordUnderscores(word){

//update the word span with either underscores for unguessed word letters, or the guess letter.

//underscores or letters must be separated by a space

document.querySelector("#theWord").innerHTML = correctGuess.join(" ");

}

function getRandomNumber(min, max){

let randomNum = Math.random() * (max - min) + min;

return Math.floor(randomNum);

}

document.querySelector("#guessWordButton").addEventListener('click', handleGuessButtonClick);

document.querySelector("#startButton").addEventListener('click', handleStartRestartButtonClick);