Create a simple hangman game using OOP and Javascript I had a task to create a simple hangman game using O.O.P. with Javascript. It had to render the puzzle and remaining guesses to the DOM but didn't require any C.S.S.
This is what I created.
This is my index.html
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2 id=&quot;render-puzzle&quot;&gt;&lt;/h2&gt;
    &lt;h2 id=&quot;guesses&quot;&gt;&lt;/h2&gt;
    &lt;script src=&quot;hangman.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

This is my hangman.js which is used to create a hangman object
&quot;strict&quot;;
const Hangman = function (word, remainingGuesses) {
  this.word = word.toLowerCase().split(&quot;&quot;);
  this.remainingGuesses = remainingGuesses;
  this.guessedWords = new Set();
  this.status = &quot;Playing&quot;;
};

Hangman.prototype.getPuzzle = function () {
  let puzzle = [];
  this.word.forEach((char) =&gt; {
    this.guessedWords.has(char) || char === &quot; &quot;
      ? puzzle.push(char)
      : puzzle.push(&quot;*&quot;);
  });
  return puzzle.join(&quot;&quot;);
};

Hangman.prototype.makeGuess = function (guess) {
  guess = guess.toLowerCase();
  const isUnique = !this.guessedWords.has(guess);
  const isBadGuess = !this.word.includes(guess);

  if (isUnique) {
    this.guessedWords.add(guess);
  }

  if (isUnique &amp;&amp; isBadGuess &amp;&amp; this.status === &quot;Playing&quot;) {
    this.remainingGuesses--;
  }

  this.calculateStatus();
};

Hangman.prototype.calculateStatus = function () {
  const finsished = this.word.every((letter) =&gt; this.guessedWords.has(letter));

  if (this.remainingGuesses === 0) {
    this.status = &quot;Failed&quot;;
  } else if (finsished) {
    this.status = &quot;Finished&quot;;
  } else {
    this.status = &quot;Playing&quot;;
  }
};


Hangman.prototype.getStatus = function(){

  let message = &quot;&quot;;

  if (this.status === &quot;Playing&quot;) {
    message = `Remaining Guesses: ${this.remainingGuesses}`
  } else if(this.status === &quot;Failed&quot;) {
    message = `Nice try! The word was ${this.word.join(&quot;&quot;)}`;
  } else {
    message = `Great Work! You guessed the word!!!`
  }

  return message;
}

and this is the app.js where I create an instance of the hangman game
&quot;strict&quot;;
const puzzle = document.querySelector(&quot;#render-puzzle&quot;);
const guesses = document.querySelector(&quot;#guesses&quot;);

const hangman = new Hangman(&quot;Cat&quot;, 2);
generatePuzzleDom();

window.addEventListener(&quot;keypress&quot;, (e) =&gt; {
  hangman.makeGuess(e.key);
  generatePuzzleDom();
  console.log(hangman.status);
});

function generatePuzzleDom() {
  puzzle.innerHTML = hangman.getPuzzle();
  guesses.innerHTML = hangman.getStatus();
}
Good things

The code appears to function properly.
The code makes good use of strict equality operators and functional techniques like using .every().
const is used for most variables.
Prototypes are used properly.

Suggested changes
Strict mode flaw
Strict mode is enabled with the string literal:
&quot;use strict&quot;;

Yet the first line of the two JS files is

&quot;strict&quot;;


Variable declarations
Some variables declared with let could be declared with const since they are not re-assigned - e.g. puzzle since it is never re-assigned. Using const instead of let helps avoid accidental re-assignment and other bugs.
status values
The values for status could be stored in constants - e.g.
const STATUS_FAILED = 'Failed';
const STATUS_PLAYING = 'Playing';
// ... etc...

Then those can be used in the code- e.g. instead of

this.status = &quot;Playing&quot;;


it can use the constant:
this.status = STATUS_PLAYING;

Those could also be stored in &quot;an enum&quot;
const STATUS_VALUES = Object.freeze({ FAILED: 0, PLAYING: 1, FINISHED: 2});

With this approach, there is no risk of mistyping the values throughout the code, and if a value needs to be updated, it can be done in one place.
Selecting elements
It isn't wrong to use querySelector to get elements by id but using getElementById() &quot;is definitely faster&quot; 1 (see this jsPerf test for comparison).
ES-6 class syntax
The code could be converted to the newer ES6 class syntax - bear in mind that it is &quot;primarily syntactical sugar over JavaScript's existing prototype-based inheritance&quot;. If there were many subclasses then it would help simplify setting up the prototypal inheritance.