I am creating a word guess game : I'm creating a word guess game that I want to work like this:
https://youtu.be/W-IJcC4tYFI
I have started to write the code. Unfortunately, I'm stuck (really stuck) and I will admit that I'm new to programming.
Your input is greatly need. Please to assist.
Thanks.

I have already created some bootstrap divs that will hold the info of my code.
I have also declare some of my variables.


    <div class="container">
    
    		<div class="artist row">
    
    		</div>
    
    
    		<div class="gamearea row">
    
    			<div class="albumarea col-6">
    			
    			</div>
    
    			<div class="actualgame col-6">
    				<div class="startarea">
    					 <p id="start-text">Press any key to start playing!</p>
    				</div>
    
    				<div class="winsarea">
    					 <p id="wins-text"></p>	
    				</div>
    
    				<div class="current-wordarea">
    					 <p id="currentword-text"></p>
    				</div>
    
    				<div class="remaining-guessesarea">
    					 <p id="guessremaining-text"></p>
    				</div>
    
    				<div class="letters-guessedarea">
    					 <p id="letterguessed-text"></p>
    				</div>
    
    				<div class="starts"></div>
    			
    			</div>
    
    
    		</div>
    
    
    	</div>


    <!DOCTYPE html>
    <html>
    <head>
    	<title>Word Guess Game</title>
    	<link rel="stylesheet" type="text/css" href="reset.css">
    	<link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    
    	<div class="container">
    
    		<div class="artist row">
    
    		</div>
    
    
    		<div class="gamearea row">
    
    			<div class="albumarea col-6">
    			
    			</div>
    
    			<div class="actualgame col-6">
    				<div class="startarea">
    					 <p id="start-text">Press any key to start playing!</p>
    				</div>
    
    				<div class="winsarea">
    					 <p id="wins-text"></p>	
    				</div>
    
    				<div class="current-wordarea">
    					 <p id="currentword-text"></p>
    				</div>
    
    				<div class="remaining-guessesarea">
    					 <p id="guessremaining-text"></p>
    				</div>
    
    				<div class="letters-guessedarea">
    					 <p id="letterguessed-text"></p>
    				</div>
    
    				<div class="starts"></div>
    			
    			</div>
    
    
    		</div>
    
    
    	</div>
    
    
    
    	<script type="text/javascript">
    
    	var wins = 0;
    	var currentword=0;
    
        var letter = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
    
    	var Word =["marley", "babyface", "hamilton"];
    	var solution = word[Math.floor(Math.random() * word.length)] 
    	var solutionlength = solution.length;
    	var display = [solutionlength];
    	var lettersguessed = solution.split("");
    	var guessesremaining = 12;
    	var output ="";
    	var win = solutionlength
    	var letterplayed = "";
    		
    
     document.onkeyup = function(event) {
    
          
          var userGuess = event.key;
          
          if () {
            
          }
        };
    	</script>
    </body>
    </html>





