MasterMind Game - Interactive Web Application Assignment

Build an interactive web application based on the classic MasterMind game.

• The application randomly generates a four-digit number
  
  
• The application permits the user to guess the number up to ten times
  
  
• Each guess will cause the application to respond by showing
  
  
  • The guessed number
  • Number of Correct Digits at the Right Position
  • Number of Correct Digits at the Wrong Position
    
    
• The application ends when the user correctly guessed the four-digit number or used up all ten guesses without guessing the number

The webpage is to be presented with

• Heading that shows "MasterMind by your name"(My Name is Kaveh Aghadavoodi)
  
  
• Presentation container that displays a column heading and up to ten rows of values that correspond to the column heading
  
  
• A second presentation container, that is positioned under the first container, shows an input textbox and a submit button

Use HTML5 semantic elements to structure your web page

• Usage of <table > and related elements are strictly prohibited
• Usage of oneventname (e.g., onclick, onkeydown, onload) attributes are strictly prohibited
• Use the <header > elementand one or more heading elements, <h1 >through <h6 >, to format your heading
• Use the <article > element for your presentation containers
• The column headings are to be displayed as, from left to right
  • Guess
  • Number of Correctly Placed Digits
  • Number of Incorrectly Placed Digits
• The values displayed under the Guesscolumn heading should reflect the entered guesses
• The values displayed under the Number of Correctly Placed Digitscolumn heading should reflect the number of correct digits in the rightposition
• The values displayed under the Number of Incorrectly Placed Digitscolumn heading should reflect the number of correct digits in the wrongposition
• Use the <input > element to create a textbox that accepts input of four-digit numbers
• The <input > element can only accept numeric characters and non-numeric characters are prohibited from being entered
• Use the <button > element, with the caption "Submit" to trigger the process that matches the input against the generated random number and displays the matching results
• The <button > element is to remain disabled until the value entered is exactlyfour digits
• Once enabled, the <button > element can also be triggered by pressing the Enterkey

• If there is a choice, use CSS properties instead of HTML attributes

• Use event listeners instead of oneventnameattributes to address JavaScript events

• As part of the webpage loading process,
  • A four-digit number is to be randomly generated via the usage of the JavaScript random()function
  • The <input >element is to automatically receive focus
  • The <button >element is to be disabled
• Once the <input >element is filled with a four-digit number, the <button > element is to be enabled
• If the entered four-digit number is reduced by the Backspaceor Delete key, the <button > element is to be re-disabled
• The <input >element must not accept non-numeric characters
• Once the <button >element is invoked, the following events must occur:
• Compare the entered guess value against the generated random number
• Display the appropriate comparison results in the presentation container
• Disable the <button >element
• Clear the content of the<input > element and enable it
• Focus on the <input > element
• If the random number was correctly guessed, or the allotted ten guesseshad been exhausted, an appropriate alert box should be displayed accordingly
• As soon as one reaches the end of a guessing session, i.e., the guess was successful or had failed after ten consecutive attempts, the following must occur:
• Display of the appropriate message via an alert box
• Disable the <button > element
• Disable the <input > element
• One can restart the MasterMind game by reloading the webpage

• Your name must be coded in the comment section of your HTML file
• Your assignment must pass the validation by the W3C HTML Validator and the W3C CSS Validator
• Your assignment must be virus and malware free
• CSS must be coded in an external file
• JavaScript must be coded in an external file

• Submit your assignment in a zip file by date specified on the course addendum via the submission link on Blackboard
• The completed assignment zip file must include at least one .htmor .html file, one .css file and one .jsfile

IMPORTANT: This is not a group/team assignment and your assignment must be YOUR original work; plagiarism in any shape or form will render your assignment score as ZERO.