Simple function example

Compares two numbers, returns the larger one

by Renan Ribeiro Brando

HTML

<div class="flex col">
  <div class="flex row">
    <p>Type a number: <input type="text" id="f" size="4"></p>
    <p>Type a different number: <input type="text" id="s" size="4"></p>
  </div>
  <div class="flex col">
     <button id="b" class="myButton">Get the Larger</button>
      <p>The larger of the two numbers is: <span id="write"></span></p>
  </div>
</div>

CSS

input[type=text] {
  font-family: 'Consolas', monospace;
  font-size: 1.1em;
  padding: .03em;
  text-align: right;
}

.flex {
  display: flex;
}

.row {
  flex-direction: row;
}

.col {
  flex-direction: column;
}


.myButton {
	box-shadow:inset 0px 0px 15px 3px #23395e;
	background:linear-gradient(to bottom, #2e466e 5%, #415989 100%);
	background-color:#2e466e;
	border-radius:17px;
	border:1px solid #1f2f47;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:6px 13px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}
.myButton:hover {
	background:linear-gradient(to bottom, #415989 5%, #2e466e 100%);
	background-color:#415989;
}
.myButton:active {
	position:relative;
	top:1px;
}

JavaScript

// get the button and make it respond to a click
var theButton = document.getElementById("b");
theButton.onclick = feedTheButton;

// simple function compares two numbers, returns the larger one
function greatestOfTwo( first, second ) { 
	if ( first > second ) {
		return first; 
   } else {
		return second; 
  }
}

// this function runs each time the button is clicked
// the simple function is called within this one 
function feedTheButton() {
	// get the two numbers from the text input fields
	// parseInt() changes string to number 
	var box1 = parseInt(document.getElementById("f").value);
  var box2 = parseInt(document.getElementById("s").value);
  // run the function above this one and store what is returned in result 
  var result = greatestOfTwo( box1, box2 );
  // write the result into the HTML
  var place = document.getElementById("write");
  place.innerHTML = result;
}