JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="wrap">
     <h1>Random Number Game</h1>

     <h2 id="text"></h2>

CSS

body {
    background: orange;
}
span {
    background: pink;
    margin-left: 10px;
    padding: 20px;
    border-radius: 50%;
}
#pic {
    width: 50%;
}

JavaScript

var randomNum = Math.floor(Math.random() * 6) + 1;
var guess = prompt('I am thinking of a number between 1 and 6. Can you guess what it is?');
var correctGuess = false;

if (isNaN(guess)) {
    document.getElementById('winner').innerHTML = "<img src='http://media.tumblr.com/tumblr_lnibge45ZC1qcj794.png' id='pic'>";
}

if (parseInt(guess) === randomNum) {
    correctGuess = true;
} else if (parseInt(guess) < randomNum) {
    var guessMore = prompt('The number I am thinking of is higher than ' + guess);
    if (parseInt(guessMore) === randomNum) {
        correctGuess = true;
    }
} else if (parseInt(guess) > randomNum) {
    var guessLess = prompt('The number I am thinking of is less than ' + guess);
    if (parseInt(guessLess) === randomNum) {
        correctGuess = true;
    }
}

if (correctGuess) {
    document.getElementById('text').innerHTML = "You win!" + " The number was " + randomNum;
} else {
    document.getElementById('text').innerHTML = "Sorry, you lost. The correct number was " + "<span>" + randomNum + "</span>";
}