JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
            <meta charset="utf-8">
            <title>Guessing Game</title>
	    <link rel="stylesheet" type="text/css" href="guess.css" media="all">
	</head>
	<body>
	    <h2>Guess a Letter</h2>	   
	    <p id="display" class="letters"></p>
	    <input id="guessedletter" type="text" maxlength='1' class="letters" autofocus>
            <div>            
		<input id="guessbutton" type="button" value="GUESS">
	    </div>
            <p>Wrong Letters</p>
	    <p id="wrong" class="letters wrong"> </p>		
	    <progress value="0" max="10"></progress>
            <div> 
		<input id="restart" type="button" value="RESTART">
            </div> 
		 <p>Score: <span id="score"></span></p>
	    <script defer src="../scripts/jquery-1.11.3.js"></script>
	    <script defer src="../scripts/guess.js"></script>
	</body>
</html>

CSS

body {
	background-color:#c0f9fe;
	font-size:30px;
	font-family: Sans-Serif;
	text-align:center;
}
.letters { 
	font-size:40px;
}
.wrong{
	color:red;
	height:40px; 
}
#guessedletter {
	width:40px;
}
[type = "button"] {
	width:80px;
	height:40px;
}
progress {    /* styling of the progress bar */
	color:red; /* Internet Explorer 10 and later*/
	-webkit-appearance: none;  /* override default style */
}
progress::-moz-progress-bar {   /*Firefox */
	background-color:red; 
}

JavaScript

'use strict';
//Define a container for the game, its variables and its methods.
var game = {
  answerPosition: 0,   // position of the current answer in the answersList - start at 0
  display: '',         // the current dash/guessed letters display - ex '-a-a--r--t'
  wrong: '',           // all the wrong letters guessed so far
  answer: '',          // the correct answer - one word from game.answersList
  wrongCount: 0,       // the number of wrong guesses so far
  over: false,         // is the game over?
  score: 1,            // 1 - 1 = 0
  answersList: [       // list of answers to cycle through
    'JavaScript',
    'document',
    'element',
    'ajax',
    'jQuery',
    'event',
    'json',
    'listener',
    'transition',
    'window'
  ]
};



game.restart = function () {

    localStorage.setItem('localScore', game.score - 1);
    var localScore =  Number(localStorage.getItem('localScore'));
    // var localScore = localStorage.localScore;

    // Initialize the game at the beginning or after restart
    // Initialize the game variables - the model
    game.answer = game.answersList[game.answerPosition].toLowerCase(); // get the word for this round
    // use the modulo operator to cycle through the answersList
    game.answerPosition = (game.answerPosition + 1) % game.answersList.length;
    game.display = game.dashes(game.answer.length);
    game.wrong = '';
    game.wrongCount = 0;
    game.over = false;
    game.score = localScore;
  
    // Initialize the web page (the view)
    $('progress').val('0');  // initialize the progress bar
    $('#display').text(game.display);
    $('#wrong').text('');
    $('#guessedletter').val('');
    $('#score').text(localScore); // initialize score

    
    // The focus method invoked on an input element allows the user to type in that input without having to click it.
    $('#guessedletter').focus();
};


game.play = function () {
    // Invoked when the user clicks on GUESS
    if (game.over) {// if the game...