Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Mile High Login</title>
<style id="jsbin-css">
input {
  height: 42px;
  padding: 5px;
  font-size: 28px;
}


input:nth-child(1) {
  width: 150px;
}


input:nth-child(3) {
  width: 200px;
  margin-top: 10px;
}

button {
  padding: 5px;
  height: 55px;
  vertical-align: top;
  background-color: lightblue;
  width: 125px;
  color: red;
  font-size: 30px;
  border: solid 1px black;
}
</style>
</head>
<body>


  <!-- FORM -->
  <div>
    <h1> Mile High Club</h1>
    <!-- ASSIGN ATTRIBUTE TYPE = NUMBER -->
    <input placeholder="Year Born" />
    <!--
    <select></select>
    -->
    <br /><br />

    <!-- ASSIGN ATTRIBUTE TYPE = TEXT -->
    <input placeholder="Username" />
    <br /><br />

    <!-- ASSIGN ATTRIBUTE TYPE = PASSWORD -->
    <input placeholder="Password"/>

    <!-- -->
    <button>Login</button>
  </div>


  <!-- DISPLAY MESSAGE HERE -->
  <div></div>
<script id="jsbin-javascript">
var user = "AlIcE", pass = "WoNdErLaNd", age = 36;


// PART I

// Create a click handler for your button
// Within it
// Get the
//     1. username textbox value and save it
//     2. password textbox value and save it
//     3. year born textbox value parse to Number and save it
// At the end of your *scope*
// Type in this line below; fill in variable with the previous 2 lines
//  validateLogin( variable #1 , variable #2, variable #3 );


// PART II
// Type in the line below
//     function validateLogin( variable #1 , variable #2, variable #3 ) { }

// Within it's scope
// 1. check to see if the textbox username equals user variable
// 2. repeat step 1 except compare textbox password to pass
// 3. check if the age is older than the age variable then save one of the messages w/ a variable
//    "You are a young adult"
// else
//    "Please wait ## years before you can join!"


// if valid entry; hide the form and display your entry message
// else display the wait message but do not hide the form
// style the message accodingly. *Use your discretion*


// CHALLENGE
// populateSelectMenu();

function generateYears(){
  var begin = 1960, end = 2017, htmlStr = "";

  for(begin; begin <= end; begin++) {
    htmlStr += "<option>" + begin + "</option>";
  }

  return htmlStr;
}


function populateSelectMenu() {

}
</script>


<script id="jsbin-source-css" type="text/css">input {
  height: 42px;
  padding: 5px;
  font-size: 28px;
}


input:nth-child(1) {
  width: 150px;
}


input:nth-child(3) {
  width: 200px;
  margin-top: 10px;
}

button {
  padding: 5px;
  height: 55px;
  vertical-align: top;
  background-color: lightblue;
  width: 125px;
  color: red;
  font-size: 30px;
  border: solid 1px black;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var user = "AlIcE", pass = "WoNdErLaNd", age = 36;


// PART I

// Create a click handler for your button
// Within it
// Get the
//     1. username textbox value and save it
//     2. password textbox value and save it
//     3. year born textbox value parse to Number and save it
// At the end of your *scope*
// Type in this line below; fill in variable with the previous 2 lines
//  validateLogin( variable #1 , variable #2, variable #3 );


// PART II
// Type in the line below
//     function validateLogin( variable #1 , variable #2, variable #3 ) { }

// Within it's scope
// 1. check to see if the textbox username equals user variable
// 2. repeat step 1 except compare textbox password to pass
// 3. check if the age is older than the age variable then save one of the messages w/ a variable
//    "You are a young adult"
// else
//    "Please wait ## years before you can join!"


// if valid entry; hide the form and display your entry message
// else display the wait message but do not hide the form
// style the message accodingly. *Use your discretion*


// CHALLENGE
// populateSelectMenu();

function generateYears(){
  var begin = 1960, end = 2017, htmlStr = "";

  for(begin; begin <= end; begin++) {
    htmlStr += "<option>" + begin + "</option>";
  }

  return htmlStr;
}


function populateSelectMenu() {

}</script></body>
</html>