JSFiddle - React, Tailwind, and code Playground

by jelane20

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Top Navigation -->
			<nav> 
				<ul class="clearfix">
					<li><a class="what" href="#">What ?</a></li>
					<li><a class="new" href="#">+ New Game</a></li>
				</ul>
			</nav>
			
			<!-- Modal Information Box -->
			<div class="overlay" id="modal">
				<div class="content">
					<h3>What do I do?</h3>
					<div>
						<p>This is a Hot or Cold Number Guessing Game. The game goes like this: </p>
						<ul>
							<li>1. I pick a <strong>random secret number</strong> between 1 to 100 and keep it hidden.</li>
							<li>2. You need to <strong>guess</strong> until you can find the hidden secret number.</li>
							<li>3. You will <strong>get feedback</strong> on how close ("hot") or far ("cold") your guess is.</li>
						</ul>
						<p>So, Are you ready?</p>
						<a class="close" href="#">Got It!</a>
					</div>
				</div>
			</div>

			<!-- logo text -->
			<h1>HOT or COLD</h1>

		</header>

		<section class="game"> <!-- Guessing Section -->
			
			<h2 id="feedback">Make your Guess!</h2>

			<form>
				<input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
      			<input type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
			</form>
			
      		<p>Guess #<span id="count">0</span>!</p>
			
			<ul id="guessList" class="guessBox clearfix">

			</ul>

		</section>

CSS

/*---------------------------------------------------------------------------------
   Common Styles
---------------------------------------------------------------------------------*/
/*float styles*/
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	width: 100%;
	height: 100%;
	background-color: #394264;
}

body {
	position: relative;
	width: 98%;
	height: 96%;
	margin: 0.8em auto;
	font-family: 'Lato', Calibri, Arial, sans-serif;
	background-color: #1F253D;
	text-align: center;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}

a {
	text-decoration: none;
	color: black;
}

ul li {	
	display: inline;
}

/*---------------------------------------------------------------------------------
   Header Styles
---------------------------------------------------------------------------------*/

nav {
	position: relative;
	height: 10%;
	padding: 1em;
}

nav ul li {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1.2em;
}

nav ul li:first-child {
	float: left;
}

nav ul li:last-child {
	float: right;
}

nav a {

	color: #fff;
}

h1 {
	font-weight: 900;
	font-size: 3em;
	padding: 0.8em;
	color: #fff;

}

/*style for hidden modal*/
.overlay {
	width: 100%;
	height: 100%;
	color: #fff;
	background: #e74c3c;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	z-index: 1000;
	display: none;
}

.content {
	color: #fff;
	background: #e74c3c;
	position: relative;
	height: auto;
	width: 600px;
	border-radius: 3px;
	top: 15%;
	margin: auto auto;
	border: 1px solid rgba(0,0,0,0.1);
}

.content h3 {
	margin: 0;
	padding: 0.4em;
	text-align: center;
	font-size: 2.4em;
	font-weight: 300;
	opacity: 0.8;
	background:...

JavaScript

$(document).ready(function(){

var randomNumber = 0;
var guessCount = 0;
var userGuess = 0;   
var win = false;



//generates number
	function randomNumberGenerator() {
 		randomNumber = Math.floor(Math.floor(Math.random()*100));
 		console.log("random number= " + randomNumber);
	}


randomNumberGenerator();
//starts new game
	function newGame(){
		win = false;
		guessCount = 0;
		userGuess = 0;
		$("#userGuess").val('');
		changeFeedback('Make your Guess!');
		randomNumber = (Math.floor(Math.random()*100));
		console.log("random number= " + randomNumber);
	}

//user guess
	function compareGuess(){  
        if ($("#userGuess").val() == randomNumber) {
        	changeFeedback('You Win!');
        	win = true;
        } else if ($("#userGuess").val() > randomNumber+50){
        	changeFeedback('You are very cold');
        } else if ($("#userGuess").val() < randomNumber+50){
        	changeFeedback('You are very cold');
        } else if ($("#userGuess").val() > randomNumber+30 && $("#userGuess").val() <= randomNumber+50){
        	changeFeedback('You are cold');
        } else if ($("#userGuess").val() < randomNumber+30 && $("#userGuess").val() >= randomNumber+50){
        	changeFeedback('You are cold');
        } else if ($("#userGuess").val() > randomNumber+20 && $("#userGuess").val() <= randomNumber+30){
        	changeFeedback('You are warm');
        } else if ($("#userGuess").val() < randomNumber+20 && $("#userGuess").val() >= randomNumber+30){
        	changeFeedback('You are warm');
        } else if ($("#userGuess").val() > randomNumber+10 && $("#userGuess").val() <= randomNumber+20){
        	changeFeedback('You are hot');
        } else if ($("#userGuess").val() < randomNumber+10 && $("#userGuess").val() >= randomNumber+20){
        	changeFeedback('You are hot');
        } else if ($("#userGuess").val() >= randomNumber+1 && $("#userGuess").val() <= randomNumber+10){
        	changeFeedback('You are very hot');
        } else if...