Make a Word Make-a-Word challenge for the Learners Guild Enrollment Game: https://learnathon.learnersguild.org/ // source http://jsbin.com/zamugul

<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="Make-a-Word challenge for the Learners Guild Enrollment Game: https://learnathon.learnersguild.org/">
    <meta charset="utf-8">
    <title>Make a Word</title>
    
    <link rel="stylesheet" href="main.css" media="screen" charset="utf-8">
  <style id="jsbin-css">
@import 'https://fonts.googleapis.com/css?family=Baloo+Chettan';
@import 'https://fonts.googleapis.com/css?family=News+Cycle';

.big-mono {
  font-family: monospace;
  font-size: 2em;
}

.notice {
  margin-top: 1em;
  font-style: italic;
}
#title-box{
  font-family: "Baloo Chettan";
  /*background-color: #A9C686;*/
  background-image: url("https://img00.deviantart.net/1077/i/2015/093/5/f/scrabble_board_by_alejandro576d-d7gyf2g.png");
  background-repeat: repeat-y;
  background-size: 350px;
  color: white;
  width: 300px;
  height: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  
  
}
body{
  background-color: #e6ffe6;
  margin: 0 auto;
  text-align: center;
  font-family:'news cycle';
  
}
img{
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

button{
  margin: 5px;
  background-color:#00b3b3;
  color:cornsilk;
  border:none;
  
}
</style>
</head>
  <body>
    <div id="title-box">
    <h1>Pseudo-Scrabble!</h1>
    </div>
    <div id="letters" class="big-mono">
      OPMARGR
    </div>
    <div id="main">
    <button onclick="randomLetters()">New Letters</button>
    <button onclick="shuffleLetters()">Shuffle Letters</button>
    <section id="guess-area">
      <input type="text" id="word-guess">

<button onclick="checkGuess()">Guess</button>

<div id="game-message" class="notice">
        Enter your first guess!
        <br/>
        
      </div>
      <img src="https://stream1.gifsoup.com/view5/4366246/nostalgia-chick-scrabble-o.gif"/>
    </section>
    </div>
  <script id="jsbin-javascript">
// A function to get the set of possible letters
function getLetters() {
  // Select the element with the id 'letters'
  var lettersContainer = document.querySelector('#letters');

// Get the text content of the element
  var letters = lettersContainer.innerText;

// Return the letters
  return letters;
}

// A function to get the user's guess
function getGuess() {
  // Select the input element where the user enters their guess
  var wordGuess = document.querySelector('input#word-guess');

// Get the text content of the element
  var guess = wordGuess.value;

// Return the guess
  return guess;
}

// A function to display a message on the screen
function showMessage(messageText) {
  // Select the element to display a message
  var messageElem = document.querySelector('#game-message');

// Set the text value of the element to the provided text
  messageElem.innerText = messageText;
}

// A function to check whether the guessed word is correct or not
function checkGuess() {
  // Collect the text from the letters and the guess
  var letters = getLetters();
  var guess = getGuess();

// Convert both to uppercase so we can compare equals
  guess = guess.toUpperCase();
  letters = letters.toUpperCase();

// Determine if all the characters in the guess are in the letters
  for (var i = 0; i < guess.length; i++) {
    var currentChar = guess[i];

// If the current character can't be found in letters, the guess is incorrect
    if (letters.indexOf(currentChar) === -1) {
      // Show a message saying guess is incorrect
      showMessage("Wrong guess, try again.");
      // Return false to exit the function
      return false;
    }
  }

// If we've made it this far, then the guess must be correct!
  // Show a message saying guess is correct
  showMessage("Good guess, that is correct!");
  // Return true to exit the function
  return true;
}

function updateLetters(){
  var newLetters = "ABCD";
  var updatedLetters = document.querySelector('#letters');

// Set the text value of the element to the provided text
  updatedLetters.innerText = newLetters;
  //return updatedLetters; 
  
}
function randomLetters(){
  //create array of all letters
  var consonants = ["A", "B", "C", "D", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "V", "W", "X", "Y", "Z"];
  var vowels = ["A", "E", "I", "O", "U"];
  var newWord = [];
  
  
  
  for(var i=0; i<5; i++){
    
    var randomNumber = Math.floor((Math.random() * 21));
    var randomLetter = consonants[randomNumber];
    newWord.push(randomLetter);
    
}
  for(var i=0; i<2; i++){
    var randomNumber = Math.floor((Math.random() * 5));
    var randomLetter = vowels[randomNumber];
    newWord.push(randomLetter);
  }
  newWord = newWord.join('');
  updatedLetters = document.querySelector('#letters');

// Set the text value of the element to the provided text
  updatedLetters.innerText = newWord;
  //return updatedLetters; 
  //two must be vowels - check that two of the randoms are in the vowels array
  //make counter, run through array using for loop
  //ch 
  //return string
  return newWord;

//make button that runs updateLetters
}
function shuffle(string){
  var newArray = string.split('');
  var currentIndex = newArray.length, temporaryValue, randomIndex;

// While there remain elements to shuffle...
  while (0 !== currentIndex) {

// Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

// And swap it with the current element.
    temporaryValue = newArray[currentIndex];
    newArray[currentIndex] = newArray[randomIndex];
    newArray[randomIndex] = temporaryValue;
  }
  console.log(newArray);
  return newArray.join('');
}
//function to grab newWord and call shuffle
function shuffleLetters(){
  var word = document.querySelector('#letters').innerText;
  document.querySelector("#letters").innerText = shuffle(word);

}
</script>

<button onclick="checkGuess()">Guess</button>

.big-mono {
  font-family: monospace;
  font-size: 2em;
}

button{
  margin: 5px;
  background-color:#00b3b3;
  color:cornsilk;
  border:none;
  
}

</script>