molossus
-
Posts
1 -
Joined
-
Last visited
molossus's Achievements
Newbie (1/14)
0
Reputation
-
Chapter 6 Review And Pursue
molossus replied to krompir's topic in Modern Javascript: Develop and Design
This is my solution to the last question in CH6 review and Pursue: If you’re feeling particularly confident, combine the techniques demonstrated in tasks.js and employee.js so that an array of employee objects is created. I'm not really sure if what console.log() shows on google-chrome is the correct solution here is the javascript code, name it solution.js : //need a global array of Employees outside of the function 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; // Reference to where the output goes: var output = document.getElementById('output'); var empnum = document.getElementById('empnum'); // Create a employee object: var employee = { firstName : firstName, lastName : lastName, department: department, hireDate : new Date() }; // Add the employee object to the Employees array: Employees.push(employee); console.log('these are the employee objects:'); // look on chrome console console.log(Employees); // chrome console Employees Objects // Create the ouptut as HTML: var message = '<h2>Employee Added</h2>Name: ' + employee.lastName + ', ' + employee.firstName + '<br>'; message += 'Department: ' + employee.department + '<br>'; message += 'Hire Date: ' + employee.hireDate.toDateString(); // Display the employee object: output.innerHTML = message; // display the employee count: empnum.innerHTML = 'You have ' + Employees.length + ' Employees'; return false; } // Initial setup: function init() { 'use strict'; document.getElementById('theForm').onsubmit = process; } window.onload = init; Here is the HTML : <!doctype html> <html lang="en"> <head> <!-- combine the techniques demonstrated in tasks.js and employee.js so that an array of employee objects is created. --> <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"> </head> <body> <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> <div id="empnum"></div> </form> <script src="js/solution.js"></script> </body> </html>