Assignment 2 - COMP 125 - Section 11/12/13

Summary:

For this assignment youll be creating a word guessing game. You do not need to modify the HTML/CSS for this assignment, you will need to modify the JavaScript only.

The functionality to start the game has been provided to you, you will notice you can start the game but cannot guess. I would encourage you all to go line by line to understand how the game is started.

CodePen:

https://codepen.io/ProfAkshay/pen/KKBEarG

As usual, the JavaScript is obfuscated so you cant see it. You can test your functionality against that CodePen to see if you got all of it.

Requirements:

When you enter a letter, make sure it stays for 300ms before it calls the eventListener

When a word is fully guessed, the msgBox will display You guessed the word correctly!

The inputBox will get disabled when the word is guessed correctly.

Hints:

Handle words that have the same letter twice correctly (e.g. Food)

Handle casing correctly. If someone guesses with a lowercase letter or uppercase it should still work.

index.html

COMP 125 - Word Guessing Game

styles.css

body {

background-color: lightgrey;

font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",

"Lucida Sans", Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

#word {

display: flex;

}

.wordBox {

margin-right: 15px;

}

.wordBox-letter {

font-size: 60px;

color: green;

text-align: center;

}

.wordBox-line {

border-bottom: 5px solid black;

padding-right: 30px;

padding-left: 30px;

}

.wordBox:last-of-type {

margin-right: 0px;

}

#letter {

text-align: center;

width: 200px;

margin-top: 50px;

font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",

"Lucida Sans", Arial, sans-serif;

font-size: 60px;

border: none;

display: none;

}

#startGame {

margin-bottom: 60px;

font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",

"Lucida Sans", Arial, sans-serif;

font-size: 20px;

}

#msgBox {

font-size: 30px;

margin-top: 40px;

}

wordguess.js

"use strict";

const words = [

"House",

"Job",

"Business",

"Food",

"Restaurant",

"Telephone",

"Address",

"Money",

"Friend",

"Love",

"Happy",

"Angry",

"Excited",

"Tired",

]; // Array of Random Words

var currentWord; // Store current word

// Various elements

var wordDiv = document.getElementById("word");

var inputBox = document.getElementById("letter");

var startButton = document.getElementById("startGame");

var msgBox = document.getElementById("msgBox");

var correctLetters = 0; // Track how many correct letters there are

function startGame() {

inputBox.style.display = "block"; // Show Inputbox

wordDiv.innerHTML = ""; // Clear the word

msgBox.innerHTML = ""; // Clear the message box

inputBox.disabled = false; // Enable inputbox

inputBox.focus(); // Focus input box

currentWord = words[Math.floor(Math.random() * words.length)].toUpperCase(); // Set current word to guess

correctLetters = 0; // Reset correctLetters

// Create elements for each letter and placing a * in it

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

var letterDiv = document.createElement("div");

letterDiv.innerHTML =

'

*

';

letterDiv.className = "wordBox";

wordDiv.appendChild(letterDiv);

}

}

/* Event Listeners -- DO NOT REMOVE THIS */

startButton.addEventListener("click", startGame); // Starting game by clicking the start button