Skills & Technologies Used:
- HTML
- CSS
- JavaScript
Project Description:
For this project I was supplied with the HTML and base CSS. I created all of the JavaScript code from scratch. The idea of this project was to create a letter guessing game that has the user guess the letters in a quote or phrase. The user gets five tries to guess the correct letters, if the user misses a letter one of the tries is lost. If the user guesses all the letters in the quote or phrase then a green overlay is displayed with a text message saying "You Won" and a button that says "Play Again". If the user loses the game by losing all 5 tries then a red overlay is displayed with a text message saying "You Lost" and a button that says "Play Again". The "Play Again" button for both turnouts resets and reloads the game. This project required the use of arrays, functions, event listeners, loops and conditional statements. I stored 5 different quotes in an array that were accessed by functions. I used an array, functions, event listeners, loops and conditionals to check if the provided keyboard buttons being pressed matched the letters of the current quote or phrase being used. If the guess was right the corresponding letters were displayed in the quote or phrase, etc... I fulfilled the "exceeds expectations" requirements by creating CSS transitons that fade in the letters of the keyboard and the quote or phrase as they are revealed and by adding an overlay and a reset button to reset the game to be played again for both game turnouts, win or lose; when the button is clicked it recreates the buttons on the keyboard and generates a new random phrase from the phrases array and sets the number of misses to zero.
Exceeds Expectations Requirements:
Create CSS transitions for each letter in the phrase display as they are revealed.
Add a button to the “success” and “failure” screens that reset the game. You’ll have to recreate the buttons in the keyboard, generate a new random phrase, and set the number of misses to zero.
Grade Received:
Exceeds Expectations
You can see the live project at the following link: https://shoaibkamalkhan.github.io/FEWD-TDP-6-Game-Show-App.
You can see my portfolio at the following link: https://shoaibkamalkhan.github.io.