Created
December 15, 2015 19:26
-
-
Save anonymous/9951c03b5725ed3a7be1 to your computer and use it in GitHub Desktop.
Employee Form Alex Powelson Assignment 4 // source http://jsbin.com/peqej
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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