A CodePen by Mindy McAdams. Number - This is a simple exercise for people who are beginning to learn JavaScript. You need to write a new function (in JavaScript) that will play a number guessing game with the user.

index.html

<h1>Number</h1>


<p>Here is something to get you started:</p>

<button onclick="alertThem();">Alert</button>
<button onclick="confirmIt();">Confirm</button>
<button onclick="promptThem();">Prompt</button>

<p>Your challenge is this: Create a little game with an HTML page, a confirm dialog box and JavaScript.
Your game will use Math.Random() to pick a number between 1 and ... ? (You choose.) Then the user has to guess the number, by typing it into the confirm dialog. A new alert box will open and tell the user if the guess is right or wrong. You will need to write ONE NEW FUNCTION in the .js file. Then add a new link here, in the HTML, to run that function.</p>

script.js

// some useful JavaScript 
// don't change anything -- just write a new function here 


// this will generate a random number from 1 to 6 - it starts with 1 + so the first number is 1 and not 0 - you can change the 6 to another number 
var guess = 1 + Math.floor(Math.random() * 6);

// this will open a confirm dialog box
function confirmIt() {
   var userInput = confirm("Do you want to continue?"); 
   return userInput;
};

// this will open an alert dialog box
function alertThem() {
   alert("Hello.");
};

// this will open a prompt dialog box
function promptThem() {
   var userResponse = prompt("Type something:", "");
   return userResponse;
};


// syntax for if-else -- this is just an example in case you forgot how to write an if statement 
if (5 == 3) {
   msg = "It is equal.";
} else if (5 < 3) {
   msg = "It is less.";
} else {
   msg = "It is greater.";
};

style.css

body {
	margin: 10px 20px;
	color: #000;
	background: #fff;
	font-family: Verdana, sans-serif;
	font-size: 100%;
}

button {
  margin: 10px;
}

/* ---------- LINKS and A ---------- */
a:focus{
	outline: 2px dashed #6cf;
}
a:link, a:visited, a:active {
	color: #00c;
	text-decoration: underline;
}
a:hover {
	color: #fff;
	background: #00c;
	text-decoration: none;
}

/* --------- HEADINGS and P --------- */
h1 {
	margin: 0;
	font-family: Cambria, serif;
	font-size: 3em;
	font-weight: normal;
	line-height: 1.5em
}
p {
	font-size: 1.2em;
}