Guess Month

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

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

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

  
</head>

<body>

  <header>
  <h1>Guess a month?</h1>
</header>
<main class="constrain">
  <div>
    <div class="guesBox">
      <p id="guesses"><strong>You have 10 chances to guess letters!</strong></p>
      <p id="game"></p>

      <form>
        <label>Input a letter here, then click guess
    <input name="letter" id="letter" type="text" size="3" maxlength="3"> </label>
        <input type="button" name="submit" id="submit" value="Guess!">
        
      <input type="button" value="Restart"  onClick="history.go(0)"></form>
    </div>
  </div>
</main>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Ferencok/guess-month-XNarEb */
body {
  ont-family: Verdana, sans-serif;
  
  
}

header {
  color: #000;
  background-color: #ffc107;
  padding: 0.3em 1em;
  display: block;
  clear: both;
  margin: 0;
}

.constrain {
  max-width: 960px;
  margin: 5px auto;
  display: table;
  clear: both;
}

h1 {
  text-align: center;
}

.guesBox {
  float: left;
  width: 100%;
  padding:0;
  display: block;
  border: none;
  border-bottom: 1px solid #808080;
}

label {
  color: #009688;
}
input[type=button] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    margin: 4px 2px;
    cursor: pointer;
  
  border:1px solid #ffcc00;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  border-bottom:1px solid #9f9f9f;
  -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  cursor:pointer;
}
.button:hover {
  background-color:rgba(255,204,0,1);
 }

input[type=text], select {
    font-size: 1em;
    padding: 10px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
#game{
  text-align:center;
  font-weight:700;
  font-size:1.5em;
  padding:5px;
  border: 1px solid #000;
  width:40%;
  margin:3% auto;
  border-radius: 15px;
  }

/*Downloaded from https://www.codeseek.co/Ferencok/guess-month-XNarEb */
// JavaScript Document
var $ = function(id) {
    return document.getElementById(id);
}

//declare and initialize array
var game = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
var choice = Math.floor(Math.random()*12);
var answer = game[choice];
var myLength = answer.length;
var display=[myLength];
var win = myLength;
var letters = answer.split('');
var attemptsLeft= 10;
var output="";
var userLetter="";



var setup = function()
{
    for (var i=0; i< answer.length; i++)
    {
        display[i] = "_ ";
        output = output + display[i];
    }
    document.getElementById("game").innerHTML = output;
    output ="";

}

var submit = function()
{

    output = "";
    userLetter=$("letter").value;
    $("letter").value ="";


    for (var c= 0; c< answer.length; c++)
    {
        if (userLetter.toUpperCase() == letters[c])
        {

            display[c] = userLetter.toUpperCase();
            win--;
        }
        output = output + display[c] + " ";

    }
    document.getElementById("game").innerHTML = output;
    output="";
    attemptsLeft--;

    if (win < 1)
    {
        document.getElementById("guesses").innerHTML ="<h2>YOU WIN!!!</h2>";
    }
    else if (attemptsLeft < 1)
    {
        document.getElementById("guesses").innerHTML ="<h2>YOU LOSE!!!</h2>";
    }
    else
    {

        document.getElementById("guesses").innerHTML ="<h3>You have " + attemptsLeft + " guesses left</h3>";
    }

}


window.onload = function()
{
    setup();
    $("submit").onclick = submit;
}

Comments