Skip to content

Instantly share code, notes, and snippets.

@ryandhubbard

ryandhubbard/index.html

Created August 14, 2017 20:11
Show Gist options
  • Save ryandhubbard/6b1499acaeebc93bdc0133bb46cc09c2 to your computer and use it in GitHub Desktop.
Save ryandhubbard/6b1499acaeebc93bdc0133bb46cc09c2 to your computer and use it in GitHub Desktop.
Download ZIP
Meta Lab // source http://jsbin.com/lozano
Raw
index.html
<!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>
Raw
jsbin.lozano.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 */
}
Raw
jsbin.lozano.js
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;
@ryandhubbard
Copy link
Author

download

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment