Make-a-Word

index.html

<div id="letters" class="big-mono">OPMARGR</div>
<section id="guess-area">
  <input type="text" id="word-guess">
  <button onclick = "checkGuess()">Guess</button>
  <button onclick="randomLetters()">New Letters</button>
  <button onclick="shuffle()">Shuffle</button>

  <div id="game-message" class="notice">
    Enter your first guess!
  </div>
</section>

make-a-word.markdown

Make-a-Word

Implementation of the Make-a-Word game

A Pen by Emma on CodePen.

License.

script.js

function updateLetters(letters){ 
    document.getElementById('letters').textContent = letters;
};

function randomLetters(){
  var randomString = "";
  var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  var vowels = "AEIOU"
  for (i = 0; i < 5; i++) {
    var randomLetter = alphabet[Math.floor(Math.random() * alphabet.length)];
    randomString = randomString + randomLetter;
  };
  for (i = 0; i < 2; i++) {
    var randomVowel = vowels[Math.floor(Math.random() * vowels.length)];
    randomString += randomVowel;
    updateLetters(randomString);
  }
}; 

function shuffle(){
    var letters = document.getElementById('letters').textContent;
    var shuffleString = ""  
    while (0 < letters.length) {
      var shuffleLetter = letters[Math.floor(Math.random() * letters.length)];
      shuffleString = shuffleString + shuffleLetter;
      letters = letters.replace(shuffleLetter,'');
      console.log('randomLetter:' + shuffleLetter);
      console.log('shuffleString:' + shuffleString);
      updateLetters(shuffleString);
    };
};


//All code beyond this point was provided with the challenge



// 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
  letters = letters.toUpperCase()
  guess = guess.toUpperCase()

  // Determine if all the characters in the guess are in the letters
  for (var i = 0; i < guess.length; ++i) {
    var currentCharacter = guess[i]
    // If the current character can't be found in letters, the guess is incorrect
    if (letters.indexOf(currentCharacter) === -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

}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/lg-bot/343694d651adedd80dfd458f20869f57/raw/39e5dba5b89cc9f48b9aa8ab6ec6f8bc78e34c03/tests.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.css

.big-mono {
  font-family: monospace;
  font-size: 30px;
}

.notice {
  margin-top: 1em;
  font-style: italic;
}

body{
  background-color: DeepSkyBlue;
  text-align: center;
}

button {
  background-color: SteelBlue;
  color: white;
  font-size: 15px;
  border-radius: 15px;
  display: inline-block;
}