Created
August 14, 2017 20:11
-
-
Save ryandhubbard/6b1499acaeebc93bdc0133bb46cc09c2 to your computer and use it in GitHub Desktop.
Meta Lab // source http://jsbin.com/lozano
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> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>Meta Lab</title> | |
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> | |
<link rel="icon" href="assets/images/favicon.png" sizes="16x16"> | |
<style id="jsbin-css"> | |
td { | |
background-color:#fff; | |
} | |
form { | |
padding: 5%; | |
/*width: 50%;*/ | |
font-family: 'Open Sans' | |
} | |
#theForm { | |
background-color: white; | |
} | |
legend { | |
color: red; | |
font-size: .8em; | |
} | |
#maincontainer { | |
margin: 5%; | |
} | |
fieldset { | |
} | |
img { | |
/*width:30%;*/ | |
float: right; | |
height: 430px | |
} | |
body { | |
background-color: grey; | |
} | |
fieldset { | |
padding: 10%; | |
} | |
#calculatorcontainer { | |
margin: 10%; | |
border-style: solid; | |
border-style: groove; | |
} | |
h4 { | |
margin: 0px; | |
} | |
footer h3 { | |
color:red; | |
font-size:80% | |
} | |
input { | |
width: 90% | |
} | |
#submit { | |
margin:10px | |
} | |
@media (max-width: 479px) { | |
img { | |
width:30%; | |
float: right; | |
height: 230px | |
} | |
fieldset { | |
padding: 0%; | |
} | |
form { | |
font-size: 7px; | |
} | |
footer { | |
padding: 7px; | |
} | |
footer h3 { | |
color:red; | |
font-size:10% | |
} | |
} | |
@media (min-width: 1000px) { | |
img { | |
width:30%; | |
float: right; | |
height: 480px | |
} | |
} | |
@media (print) { | |
font-family: "Times New Roman", Times, Serif | |
/* IE4-8 and 9 (deprecated). */ | |
filter: Gray(); | |
/* SVG version for IE10, Chrome 17, FF3.5, | |
Safari 5.2 and Opera 11.6 */ | |
filter: url('#grayscale'); | |
/* CSS3 filter, at the moment Webkit only. Prefix it for | |
future implementations */ | |
-webkit-filter: grayscale(100%); | |
filter: grayscale(100%); /* future-proof */ | |
/* IE4-8 and 9 (deprecated). */ | |
filter: Gray(); | |
/* SVG version for IE10, Chrome 17, FF3.5, | |
Safari 5.2 and Opera 11.6 */ | |
filter: url('#grayscale'); | |
/* CSS3 filter, at the moment Webkit only. Prefix it for | |
future implementations */ | |
-webkit-filter: grayscale(100%); | |
filter: grayscale(100%); /* future-proof */ | |
} | |
</style> | |
</head> | |
<body> | |
<div id="maincontainer" align="center"> | |
<table> | |
<tr> | |
<td> | |
<form action="" method="post" id="theForm"> | |
<fieldset> | |
<legend>Add an Employee</legend> | |
<div><label for="firstName">First Name<br></label> | |
<input name ="firstName" id="firstName" required></input> | |
</div> | |
<div><label for="lastName">Last Name<br></label> | |
<input name ="lastName" id="lastName"></input> | |
</div> | |
<div><label for="department">Department</label><br><select name="department" id="department"> | |
<option value="Engineering">Engineering</option> | |
<option value="Administration">Administration</option> | |
<option value="Human Resources">Human Resources</option> | |
<option value="Marketing">Marketing</option> | |
</select></div> | |
<div><input type="submit" value="Submit" id="submit"> | |
</div> | |
</fieldset> | |
</form> | |
</td> | |
</tr> | |
</table> | |
</div><!-- End "maincontainer" --> | |
<footer class="footer"> | |
</footer> | |
<script id="jsbin-javascript"> | |
var employees=[]; | |
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); | |
return false; | |
} | |
function init() { | |
'use strict'; | |
document.getElementById('theForm').onsubmit = process; | |
} | |
window.onload = init; | |
</script> | |
<script id="jsbin-source-css" type="text/css">td { | |
background-color:#fff; | |
} | |
form { | |
padding: 5%; | |
/*width: 50%;*/ | |
font-family: 'Open Sans' | |
} | |
#theForm { | |
background-color: white; | |
} | |
legend { | |
color: red; | |
font-size: .8em; | |
} | |
#maincontainer { | |
margin: 5%; | |
} | |
fieldset { | |
} | |
img { | |
/*width:30%;*/ | |
float: right; | |
height: 430px | |
} | |
body { | |
background-color: grey; | |
} | |
fieldset { | |
padding: 10%; | |
} | |
#calculatorcontainer { | |
margin: 10%; | |
border-style: solid; | |
border-style: groove; | |
} | |
h4 { | |
margin: 0px; | |
} | |
footer h3 { | |
color:red; | |
font-size:80% | |
} | |
input { | |
width: 90% | |
} | |
#submit { | |
margin:10px | |
} | |
@media (max-width: 479px) { | |
img { | |
width:30%; | |
float: right; | |
height: 230px | |
} | |
fieldset { | |
padding: 0%; | |
} | |
form { | |
font-size: 7px; | |
} | |
footer { | |
padding: 7px; | |
} | |
footer h3 { | |
color:red; | |
font-size:10% | |
} | |
} | |
@media (min-width: 1000px) { | |
img { | |
width:30%; | |
float: right; | |
height: 480px | |
} | |
} | |
@media (print) { | |
font-family: "Times New Roman", Times, Serif | |
/* IE4-8 and 9 (deprecated). */ | |
filter: Gray(); | |
/* SVG version for IE10, Chrome 17, FF3.5, | |
Safari 5.2 and Opera 11.6 */ | |
filter: url('#grayscale'); | |
/* CSS3 filter, at the moment Webkit only. Prefix it for | |
future implementations */ | |
-webkit-filter: grayscale(100%); | |
filter: grayscale(100%); /* future-proof */ | |
/* IE4-8 and 9 (deprecated). */ | |
filter: Gray(); | |
/* SVG version for IE10, Chrome 17, FF3.5, | |
Safari 5.2 and Opera 11.6 */ | |
filter: url('#grayscale'); | |
/* CSS3 filter, at the moment Webkit only. Prefix it for | |
future implementations */ | |
-webkit-filter: grayscale(100%); | |
filter: grayscale(100%); /* future-proof */ | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript"> | |
var employees=[]; | |
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); | |
return false; | |
} | |
function init() { | |
'use strict'; | |
document.getElementById('theForm').onsubmit = process; | |
} | |
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
td { | |
background-color:#fff; | |
} | |
form { | |
padding: 5%; | |
/*width: 50%;*/ | |
font-family: 'Open Sans' | |
} | |
#theForm { | |
background-color: white; | |
} | |
legend { | |
color: red; | |
font-size: .8em; | |
} | |
#maincontainer { | |
margin: 5%; | |
} | |
fieldset { | |
} | |
img { | |
/*width:30%;*/ | |
float: right; | |
height: 430px | |
} | |
body { | |
background-color: grey; | |
} | |
fieldset { | |
padding: 10%; | |
} | |
#calculatorcontainer { | |
margin: 10%; | |
border-style: solid; | |
border-style: groove; | |
} | |
h4 { | |
margin: 0px; | |
} | |
footer h3 { | |
color:red; | |
font-size:80% | |
} | |
input { | |
width: 90% | |
} | |
#submit { | |
margin:10px | |
} | |
@media (max-width: 479px) { | |
img { | |
width:30%; | |
float: right; | |
height: 230px | |
} | |
fieldset { | |
padding: 0%; | |
} | |
form { | |
font-size: 7px; | |
} | |
footer { | |
padding: 7px; | |
} | |
footer h3 { | |
color:red; | |
font-size:10% | |
} | |
} | |
@media (min-width: 1000px) { | |
img { | |
width:30%; | |
float: right; | |
height: 480px | |
} | |
} | |
@media (print) { | |
font-family: "Times New Roman", Times, Serif | |
/* IE4-8 and 9 (deprecated). */ | |
filter: Gray(); | |
/* SVG version for IE10, Chrome 17, FF3.5, | |
Safari 5.2 and Opera 11.6 */ | |
filter: url('#grayscale'); | |
/* CSS3 filter, at the moment Webkit only. Prefix it for | |
future implementations */ | |
-webkit-filter: grayscale(100%); | |
filter: grayscale(100%); /* future-proof */ | |
/* IE4-8 and 9 (deprecated). */ | |
filter: Gray(); | |
/* SVG version for IE10, Chrome 17, FF3.5, | |
Safari 5.2 and Opera 11.6 */ | |
filter: url('#grayscale'); | |
/* CSS3 filter, at the moment Webkit only. Prefix it for | |
future implementations */ | |
-webkit-filter: grayscale(100%); | |
filter: grayscale(100%); /* future-proof */ | |
} |
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
var employees=[]; | |
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); | |
return false; | |
} | |
function init() { | |
'use strict'; | |
document.getElementById('theForm').onsubmit = process; | |
} | |
window.onload = init; |
Author
ryandhubbard
commented
Oct 19, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment