Skip to content

Instantly share code, notes, and snippets.

@alexpow

alexpow/index.html

Forked from anonymous/index.html
Created December 15, 2015 19:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexpow/8607f71ec137072b8c7b to your computer and use it in GitHub Desktop.
Save alexpow/8607f71ec137072b8c7b to your computer and use it in GitHub Desktop.
Download ZIP
Employee Form Alex Powelson Assignment 4 // source http://jsbin.com/peqej
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta name="description" content="Alex Powelson Assignment 4" />
<meta charset="utf-8">
<title>Employee Form</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/form.css">
<style id="jsbin-css">
/*
dark blue: 212B40
gray-blue: 547B97
gray-green-blue: BADCDD
light-green: C2E078
*/
/*
dark blue: 1B1D26
dark green: 425955
gray-green: 778C7A
off-white: F1F2D8
tan: BFBD9F
*/
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #1b1d26;
background-color: #f1f2d8;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
form{
margin:0 auto;
width:400px;
padding:14px;
background-color: #ffffff;
border:solid 2px #425955;
}
/* ----------- stylized ----------- */
h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #BFBD9F;
padding-bottom:10px;
}
label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
.small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
select{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:200px;
margin:2px 0 20px 10px;
}
input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:200px;
margin:2px 0 20px 10px;
}
#submit{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#F1F2D8;
text-align:center;
line-height:20px;
color:#000000;
font-size:12px;
font-weight:bold;
}
#output {
clear:both;
margin-bottom: 10px;
color: blue;
}
</style>
</head>
<body>
<!-- employee.html -->
<form action="#" method="post" id="theForm">
<fieldset><legend>Add an Employee</legend>
<div><label for="firstName">First Name</label><input type="text" name="firstName" id="firstName" required></div>
<div><label for="lastName">Last Name</label><input type="text" name="lastName" id="lastName" required></div>
<div><label for="department">Department</label><select name="department" id="department">
<option value="Accounting">Accounting</option>
<option value="Administration">Administration</option>
<option value="Human Resources">Human Resources</option>
<option value="Marketing">Marketing</option>
</select></div>
<input type="submit" value="Submit" id="submit">
</fieldset>
<div id="output"></div>
</form>
<script src="js/employee.js"></script>
<script id="jsbin-javascript">
// employee.js
// This script creates an object using form data.
// Create a global array to store all employees as they are added
var employees=[];
// Function called when the form is submitted.
// Function creates a new object.
function process() {
'use strict';
// Get form references:
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var department = document.getElementById('department').value;
// add a employeeId variable here to store a randomly generated
// 8 digit employee id number
// Look back on page 164 if you need help generating a random number
var employeeId = parseInt(Math.random() * 100000000);
// Reference to where the output goes:
var output = document.getElementById('output');
// Create a new object:
var employee = {
firstName: firstName,
lastName: lastName,
department: department,
// random employeeId to this employee object
employeeId: employeeId,
hireDate: new Date()
}; // Don't forget the semicolon!
// add each newly created employee object to your employees array
employees.push(employee);
console.log(employee);
// show your employees array in the console
console.log(employees);
// Create the ouptut as HTML:
var message = '<h2>Employee Added</h2>Name: ' + employee.lastName + ', ' + employee.firstName + '<br>';
message += 'Department: ' + employee.department + '<br>' + 'Employee ID: ' +
// add the employeeId to the generated message
employee.employeeId + '<br>' +
'Hire Date: ' + employee.hireDate.toDateString() + '<br>' +
// display the total number of employees in your array here
'Number of employees: ' + employees.length;
// Display the employee object:
output.innerHTML = message;
// Return false:
return false;
} // End of process() function.
// Initial setup:
function init() {
'use strict';
document.getElementById('theForm').onsubmit = process;
} // End of init() function.
window.onload = init;
</script>
<script id="jsbin-source-css" type="text/css">/*
dark blue: 212B40
gray-blue: 547B97
gray-green-blue: BADCDD
light-green: C2E078
*/
/*
dark blue: 1B1D26
dark green: 425955
gray-green: 778C7A
off-white: F1F2D8
tan: BFBD9F
*/
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #1b1d26;
background-color: #f1f2d8;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
form{
margin:0 auto;
width:400px;
padding:14px;
background-color: #ffffff;
border:solid 2px #425955;
}
/* ----------- stylized ----------- */
h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #BFBD9F;
padding-bottom:10px;
}
label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
.small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
select{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:200px;
margin:2px 0 20px 10px;
}
input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:200px;
margin:2px 0 20px 10px;
}
#submit{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#F1F2D8;
text-align:center;
line-height:20px;
color:#000000;
font-size:12px;
font-weight:bold;
}
#output {
clear:both;
margin-bottom: 10px;
color: blue;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">// employee.js
// This script creates an object using form data.
// Create a global array to store all employees as they are added
var employees=[];
// Function called when the form is submitted.
// Function creates a new object.
function process() {
'use strict';
// Get form references:
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var department = document.getElementById('department').value;
// add a employeeId variable here to store a randomly generated
// 8 digit employee id number
// Look back on page 164 if you need help generating a random number
var employeeId = parseInt(Math.random() * 100000000);
// Reference to where the output goes:
var output = document.getElementById('output');
// Create a new object:
var employee = {
firstName: firstName,
lastName: lastName,
department: department,
// random employeeId to this employee object
employeeId: employeeId,
hireDate: new Date()
}; // Don't forget the semicolon!
// add each newly created employee object to your employees array
employees.push(employee);
console.log(employee);
// show your employees array in the console
console.log(employees);
// Create the ouptut as HTML:
var message = '<h2>Employee Added</h2>Name: ' + employee.lastName + ', ' + employee.firstName + '<br>';
message += 'Department: ' + employee.department + '<br>' + 'Employee ID: ' +
// add the employeeId to the generated message
employee.employeeId + '<br>' +
'Hire Date: ' + employee.hireDate.toDateString() + '<br>' +
// display the total number of employees in your array here
'Number of employees: ' + employees.length;
// Display the employee object:
output.innerHTML = message;
// Return false:
return false;
} // End of process() function.
// Initial setup:
function init() {
'use strict';
document.getElementById('theForm').onsubmit = process;
} // End of init() function.
window.onload = init;
</script></body>
</html>
Raw
jsbin.peqej.css
/*
dark blue: 212B40
gray-blue: 547B97
gray-green-blue: BADCDD
light-green: C2E078
*/
/*
dark blue: 1B1D26
dark green: 425955
gray-green: 778C7A
off-white: F1F2D8
tan: BFBD9F
*/
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #1b1d26;
background-color: #f1f2d8;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
form{
margin:0 auto;
width:400px;
padding:14px;
background-color: #ffffff;
border:solid 2px #425955;
}
/* ----------- stylized ----------- */
h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #BFBD9F;
padding-bottom:10px;
}
label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
.small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
select{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:200px;
margin:2px 0 20px 10px;
}
input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:200px;
margin:2px 0 20px 10px;
}
#submit{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#F1F2D8;
text-align:center;
line-height:20px;
color:#000000;
font-size:12px;
font-weight:bold;
}
#output {
clear:both;
margin-bottom: 10px;
color: blue;
}
Raw
jsbin.peqej.js
// employee.js
// This script creates an object using form data.
// Create a global array to store all employees as they are added
var employees=[];
// Function called when the form is submitted.
// Function creates a new object.
function process() {
'use strict';
// Get form references:
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var department = document.getElementById('department').value;
// add a employeeId variable here to store a randomly generated
// 8 digit employee id number
// Look back on page 164 if you need help generating a random number
var employeeId = parseInt(Math.random() * 100000000);
// Reference to where the output goes:
var output = document.getElementById('output');
// Create a new object:
var employee = {
firstName: firstName,
lastName: lastName,
department: department,
// random employeeId to this employee object
employeeId: employeeId,
hireDate: new Date()
}; // Don't forget the semicolon!
// add each newly created employee object to your employees array
employees.push(employee);
console.log(employee);
// show your employees array in the console
console.log(employees);
// Create the ouptut as HTML:
var message = '<h2>Employee Added</h2>Name: ' + employee.lastName + ', ' + employee.firstName + '<br>';
message += 'Department: ' + employee.department + '<br>' + 'Employee ID: ' +
// add the employeeId to the generated message
employee.employeeId + '<br>' +
'Hire Date: ' + employee.hireDate.toDateString() + '<br>' +
// display the total number of employees in your array here
'Number of employees: ' + employees.length;
// Display the employee object:
output.innerHTML = message;
// Return false:
return false;
} // End of process() function.
// Initial setup:
function init() {
'use strict';
document.getElementById('theForm').onsubmit = process;
} // End of init() function.
window.onload = init;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment