In this example below you will see how to do a Guess-a-word with some HTML / CSS and Javascript

This awesome code was written by daCyborgSquirrel, you can see more from this user in the personal repository.
You can find the original code on
Copyright daCyborgSquirrel ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
      <link rel="stylesheet" href="css/style.css">



  <h1> Guess-A-Word</h1>
<p> Play this game by typing a letter to guess, and if you're lucky, it will be part of the word! Words may have dashes and/or apostrophes. You may have 8 incorrect guesses.</p>
<button onclick="startGame()"> New game </button>
<p> Guessed Letters: </p>
<p id="guesses"> </p>
<p id="info"> </p>
<p id="puzzle"> </p>
<p id = "guessesLeft">Type in your guess:</p>
<input type="text" id="guess" maxlength = "1">
<p> <button onclick="guessLetter()"> Guess! </button> </p>

    <script  src="js/index.js"></script>



/*Downloaded from */
* {
  font-size: 1.2em;

body {

h1 {
  font-size: 2em

/*Downloaded from */
var words = [
  "contact lens",
  "creme brulee",
  "dump truck",
  "dune buggy",
  "dust storm",
  "south america",
  "south korea",

function guessLetter() {
  var guessedLetter = document.getElementById("guess").value.toLowerCase();
  if (guessedLetter.length === 0) {
    document.getElementById("info").innerHTML =
      "Please enter a letter or other character";
  } else {
    if (guessedLetters.indexOf(guessedLetter) == -1) {
      if (word.indexOf(guessedLetter) === -1) {
        guessesLeft -= 1;
      document.getElementById("guesses").innerHTML = guessedLetters;
      document.getElementById("info").innerHTML = "";
    } else {
      document.getElementById("info").innerHTML =
        "You've already guessed that letter! Try again.";
  if (guessesLeft <= 0) {
    document.getElementById("guessesLeft").innerHTML =
      "You ran out of turns! Game over. The word was '" +
      word +
      "'. Play again for another chance!";
  } else {
    document.getElementById("guessesLeft").innerHTML =
      "Guesses Left: " + guessesLeft;
  document.getElementById("guess").value = "";

function startGame() {
  document.getElementById("info").innerHTML = "";
  document.getElementById("guess").innerHTML = "";
  document.getElementById("guesses").innerHTML = "";
  document.getElementById("guessesLeft").innerHTML = "Type in your guess: ";
  guessesLeft = 8;
  guessedLetters = [];
  word = words[Math.floor(Math.random() * 4416)];

function printWord() {
  var win = true;
  var puzzle = " ";
  for (c = 0; c < word.length; c++) {
    if (guessedLetters.indexOf(word[c]) === -1) {
      puzzle += "_ ";
      win = false;
    } else {
      puzzle += word[c] + " ";
  if (win) {
    document.getElementById("puzzle").innerHTML = puzzle.toUpperCase();
    document.getElementById("info").innerHTML =
      "Congratulations, you win! Play again for more pointless fun!";
  } else {
    document.getElementById("puzzle").innerHTML = puzzle;