Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html lang="en">

<head>

  <title>ToAnh | Hot or Cold</title>

  <!-- Meta Tags -->
  <meta charset="utf-8" />

  <!-- Stylesheets -->
  <link rel="stylesheet" href="styles/reset.css">
  <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="styles/style.css" />

  <!-- JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/app.js"></script>

</head>

<body>

  <header>
    <!--Header -->

    <!-- 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>
</body>

</html>
            
          
!
            
              
/*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: #gray;
}

body {
	position: relative;
	width: 98%;
	height: 96%;
	margin: 0.8em auto;
	font-family: 'Tahoma', Calibri, Arial, sans-serif;
	background-color: #01cedf;
	text-align: center;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-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: #FF2B10;
	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: 2px;
	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: rgba(0,0,0,0.1);
	border-radius: 3px 3px 0 0;
}

.content > div {
	padding: 15px 40px 30px;
	margin: 0;
	font-weight: 300;
	font-size: 1.15em;
}

.content > div p {
	margin: 0;
	padding: 10px 0;
	line-height: 2em;
	text-align: justify;
}

.content > div ul {
	margin-bottom: -30px;
	padding: 0 0 30px 20px;
	text-align: left;
}

.content > div ul li {
	padding: 5px 0;
	display: block;	
	list-style-type: disc;
	line-height: 1.5em;
}

.content > div ul li strong{
	text-decoration: underline;
}

.content > div a {
	font-size: 0.8em;
	background: #1F253D;
	color: #95a5a6;
	padding: 0.5em 2em;
	margin-bottom: 50px;
	border-radius: 3px;
}

/*- Game Section Styles -*/

.game {
	position: relative;
	background-color: #394264;
	width: 380px;
	height: 380px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin: 0 auto;

	box-shadow: rgb(26, 31, 52) 1px 1px,
    rgb(26, 31, 52) 2px 2px,
    rgb(26, 31, 52) 3px 3px,
    rgb(26, 31, 53) 4px 4px,
    rgb(26, 32, 53) 5px 5px,
    rgb(27, 32, 53) 6px 6px,
    rgb(27, 32, 54) 7px 7px,
    rgb(27, 32, 54) 8px 8px,
    rgb(27, 32, 54) 9px 9px,
    rgb(27, 33, 55) 10px 10px,
    rgb(27, 33, 55) 11px 11px,
    rgb(28, 33, 55) 12px 12px,
    rgb(28, 33, 56) 13px 13px,
    rgb(28, 34, 56) 14px 14px,
    rgb(28, 34, 56) 15px 15px,
    rgb(28, 34, 57) 16px 16px,
    rgb(29, 34, 57) 17px 17px,
    rgb(29, 34, 57) 18px 18px,
    rgb(29, 35, 58) 19px 19px,
    rgb(29, 35, 58) 20px 20px,
    rgb(29, 35, 58) 21px 21px,
    rgb(29, 35, 59) 22px 22px,
    rgb(30, 35, 59) 23px 23px,
    rgb(30, 36, 59) 24px 24px,
    rgb(30, 36, 60) 25px 25px,
    rgb(30, 36, 60) 26px 26px,
    rgb(30, 36, 60) 27px 27px,
    rgb(31, 37, 61) 28px 28px;

}

h2 {
	margin: 0 auto;	
	background: #D1D41B;
	padding: 1em 0.4em;
	font-size: 1.5em;
	font-weight: 400;
	display: block;
	line-height: 1em;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	color: #fff;
}

.game p {
	margin-top: 0.5em;
	font-size: 1.8em;
	padding-bottom: 0.5em;
	color: #fff;
}

#count {
	color: #fff;
	font-weight: 400;
	font-size: 1.5em;
}

input {
	width: 300px;
	height: 50px;
	display: block;
	padding: 0.8em 0;
	margin: 0.8em auto 0;
	background: #135F99;
	color: #fff;
	border: solid 1px #1f253d;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

input.button {
	background: #135F99;
	color: #95a5a6;
	font-size: 2em;
	padding: 0.2em;
	-webkit-transition: background 1s ease-in-out;
	-moz-transition: background 1s ease-in-out;
	-ms-transition: background 1s ease-in-out;
	-o-transition: background 1s ease-in-out;
	transition: background 1s ease-in-out;
}

input.button:hover {
	background: #e64c65;
	color: #fff;
	-webkit-transition: background 1s ease-in-out;
	-moz-transition: background 1s ease-in-out;
	-ms-transition: background 1s ease-in-out;
	-o-transition: background 1s ease-in-out;
	transition: background 1s ease-in-out;
	cursor: pointer;
}

input.text {
	text-align: center;
	padding: 0.2em;
	font-size: 2em;
}

input:focus {
	outline: none !important;
}

::-webkit-input-placeholder {
   color: #95a5a6;
}

:-moz-placeholder { /* Firefox 18- */
   color: #95a5a6;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #95a5a6; 
}

:-ms-input-placeholder {  
   color: #95a5a6; 
}

ul.guessBox {
	height: 80px;
	margin: 10px auto 0;
	background: #D1D41B;
	padding: 0.5em;
	display: block;
	line-height: 2em;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	color: #fff;
	overflow: auto;
}
ul.guessBox li {
	display: inline;
	background-color: #1a4e95;
	padding: 0.3em;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 9px;
	width: 95%;
	margin: 0.2em;
	color: #fff;
}

            
          
!
            
              
$(document).ready(function(){

    
    var secretNumber = 0;
    var userGuess = 0;
    var guessCount = 0;
    var finish = false;

/*--- This is the random number generator --*/
    function secretNumberGenerator() {
        secretNumber = (Math.floor(Math.random()*100));
        console.log("Secret number = " + secretNumber);
    }

    secretNumberGenerator();

/*--- Evaluates when substraction is positive --*/
       function positiveAmount() {
        if (userGuess / secretNumber === 1){
            setFeedback("You win");
            finish = true;
          } else if ((secretNumber - userGuess) > 60.5){
            setFeedback("Brrrrr! You are freezing! Watch out for frostbite!");
            } else if ((secretNumber - userGuess) > 55.5){
            setFeedback("Wow! You better put on a jacket and a hat because its super cold!");
            } else if ((secretNumber - userGuess) > 50.5){
            setFeedback("Its is super cold!");
            } else if ((secretNumber - userGuess) > 40.5) {
            setFeedback("Now you are cold!");
            } else if ((secretNumber - userGuess) > 30.5) {
            setFeedback("It's getting warm around here");
            } else if((secretNumber - userGuess) > 20.5) {
            setFeedback("It's getting very warm in here!");
            } else if((secretNumber - userGuess) > 15.5) {
            setFeedback("It's getting very very warm in here!");
            } else if ((secretNumber - userGuess) > 7.5){
            setFeedback("It's hot!");
            } else if ((secretNumber - userGuess) > 5.5){
            setFeedback("It is very hot here!");
           } else if ((secretNumber - userGuess) > 1.5){
            setFeedback("I am burning here!!");
            } else if ((secretNumber - userGuess) > 0.5){
            setFeedback("You are so hot you are practically on fire!!!!!");
        } else {
        }
    }

/*--- Evaluates when substraction is negative --*/
    function negativeAmount() {
        if (userGuess / secretNumber === 1){
            setFeedback("You win");
            finish = true;
        } else if ((userGuess - secretNumber) > 60.5){
            setFeedback("Brrrrr! You are freezing! Watch out for frostbite!");
        } else if ((userGuess - secretNumber) > 55.5){
            setFeedback("Wow! You better put on a jacket and a hat because its super cold!");
        } else if ((userGuess - secretNumber) > 50.5){
            setFeedback("Its is super cold!");
        } else if ((userGuess - secretNumber) > 40.5) {
            setFeedback("Now you are cold!");
        } else if ((userGuess - secretNumber) > 30.5) {
            setFeedback("It's getting warm around here");
        } else if((userGuess - secretNumber) > 20.5) {
            setFeedback("It's getting very warm in here!");
        } else if((userGuess - secretNumber) > 15.5) {
            setFeedback("It's getting very very warm in here!");
        } else if ((userGuess - secretNumber) > 7.5){
            setFeedback("It is hot!");
        } else if ((userGuess - secretNumber) > 5.5){
            setFeedback("I am very hot here!!");
        } else if((userGuess - userGuess) > 1.5){
            setFeedback("I am burning here!!");
        }else if ((userGuess - secretNumber) > 0.5){
            setFeedback("You are so hot, you are practically on fire!!!!!");
        } else {
        }
    }


/*--- Compares whether the difference is positive or negative --*/
    function comparisonAmount(){
        if (userGuess - secretNumber > 0) {
            negativeAmount();
        } else {
            positiveAmount();
        }
    }

/*--- Function that sends message to user --*/
    function setFeedback(feedback) {
        $('#feedback').text(feedback);
    }

/*--- Function that counts attempts of user --*/
    function setCount(count){
        $('#count').text(guessCount);
    }

/*--- Function that resets game --*/
    function newGame(){
        guessCount = 0;
        finish = false;
        $('#userGuess').val('');
        $('#count').text(guessCount);
        $('#guessList li').remove();
        secretNumber = (Math.floor(Math.random()*100));
        setFeedback("Make your guess!");
        console.log("it works! new secret number is " + secretNumber);
    }

/*--- Display information modal box ---*/
    $(".what").click(function(){
        $(".overlay").fadeIn(1000);

    });

/*--- Hide information modal box ---*/
    $("a.close").click(function(){
        $(".overlay").fadeOut(1000);
    });

/*---- Start a new game ----*/
    $('.new').click(function(){
        newGame();
    });

/*-- Checks the user's input--*/
function checkInput(){
    if(isNaN(userGuess)) {
        alert("Please enter a number from 1 - 100.");
    } else if(userGuess === " ") {
        alert("Let's try this again, you have to input a number.");
    } else if (userGuess < 0 || userGuess > 100) {
        alert("Third times a charm, plese enter a number from 1 - 100.");
    } else {
        comparisonAmount();
        console.log("User guess = " + userGuess);
        $('#userGuess').val('');
        guessCount++;
        setCount(guessCount);
        $('ul#guessList').append("<li>" + userGuess + "</li>");
    }
}

/*--- To get user's input --*/
    $("form").submit(function(event){
        event.preventDefault();
        //if user finishes the game, games ends and prompts to play again
        if(!finish){
            userGuess = $('#userGuess').val();
            checkInput();
        } else {
            setFeedback("You are a Winner! Play a new game to continue the fun!");
        }
    });
});


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console