Question: URGENT JAVASCRIPT TASK CODE NEEDED TO SOLVE WILL BE PROVIDED Task 2: Word game (2-word-game, 8 pts) There are relatively many five letter words in

URGENT JAVASCRIPT TASK

CODE NEEDED TO SOLVE WILL BE PROVIDED

Task 2: Word game (2-word-game, 8 pts)

There are relatively many five letter words in the English language. These can be used to play various word games. In this game the game master thinks of a five letter word and the others try to guess it by saying five letter words. The game master will respond with the number of letters that are in the correct position. Based on this, the others have to narrow down and guess the correct word.

Now you have do create this game in the browser. The file index.html already imports the file words.js which stores the possible five letter words in the array wordList. Solve the following tasks in the index.js file.

a. (1 pt) Choose a random word from the array wordList and display it in the div divTheWord that is inside the details element. (You can use this to view the solution while testing.)

b. (1 pt) Currently the form on the page is submitted when the user presses ENTER or clicks the button. Prevent this behaviour using JavaScript. Instead of submitting the form, select the text in the text field and delete the content of the span element of the form.

c. (1 pt) When the form is submitted, check that the entered word consists of exactly 5 characters. If not, then display an error message (e.g. "The length of the word is not 5!") in the span element of the form.

d. (1 pt) When the form is submitted, check that the entered work is in the array wordList. If not, then display an error message (e.g. "The word is not considered acceptable!") in the span element of the form.

e. (1 pt) Calculate how many letters of the guessed word are in the correct position and output the number to the console.

f. (1 pt) Insert the guessed word and the calculated number as the first row of the table.

g. (1 pt) If the guess is correct, apply the style class of correct to the row and display the div end-of-game.

h. (1 pt) When the button inside the div end-of-game is clicked, reload the page, therefore starting a new game.

index.js

// ========= Utility functions =========

function random(a, b) {

return Math.floor(Math.random() * (b - a + 1)) + a;

}

// ========= Selected elements =========

const inputGuess = document.querySelector("#inputGuess");

const form = document.querySelector("form");

const tableGuesses = document.querySelector("#guesses");

const divTheWord = document.querySelector("details > div");

const spanError = document.querySelector("#error");

const btnGuess = document.querySelector("form > button");

const divEndOfGame = document.querySelector("#end-of-game");

const btnRestart = document.querySelector("#restart");

// ========= Solution =========

words.js

Task 2 - Word game

Word game

Guess:

Click to see the word

Word Matches

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!