Jump to content
Larry Ullman's Book Forums

Recommended Posts

Hey Larry!

I've been working on an assignment for my class that follows chapter 4. I've posted the link towards the bottom. Essentially, it asks to combine many of the elements from chapter 4, such as formatting names and math calculators into a single calculator. I'm able to follow your examples but once I add in another element into the calculator and try to combine it, the calculator no longer works. Do you have any examples that are similar to my assignment or do you have any suggestions?

 

Dan

https://learn.vccs.edu/bbcswebdav/pid-46725904-dt-content-rid-27442089_2/courses/NV280.ITP.225.E05N.FA13/Paycheck%281%29.pdf

Share this post


Link to post
Share on other sites

Thanks for taking a look! I'm relatively new. I understand the basic basic concepts of JavaScript after reading the chapters. It's just hard to merge it all together for this calculator. 

Dan

Assignment- https://docs.google.com/file/d/0BwDHF5mNxWWZQm1aRkpCbUFkdkE/edit?usp=sharing

Html-

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Formatting Names</title>
    <!--[if lt IE 9]>
    <![endif]-->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- names.html -->
    <form action="" method="post" id="theForm" >
        <fieldset>
<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="result">Formatted Name</label><input type="text" name="result" id="result" ></div>
<div><label for="hoursworked">Regular Hours Worked</label><input type="number" name="hoursworked" id="hoursworked" value="1" min="1" max="40" required></div>
<div><label for="overtimeworked">Overtime Hours Worked (1.5x as regular)</label><input type="number" name="overtimeworked" id="overtimeworked" value="1" min="1" max="40" required></div>
<div><label for="hourlyrate">Hourly Rate</label><input type="text" name="hourlyrate" id="hourlyrate" value="1.00" required></div>
<div><label for="regularpay">Regular Pay</label><input type="text" name="regularpay" id="regularpay" value="0.00"></div>
<div><label for="overtimepay">Overtime Pay</label><input type="text" name="overtimepay" id="overtimepay" value="0.00"></div>
<div><input type="submit" value="Submit" id="submit"></div>
        </fieldset>
    </form>
    <script src="js/test1.js"></script>
 
 
</body>

Javascript-
 
function formatnames () { 
'use strict';
var formattedname;
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
formattedname = lastname + ',' + firstname;
document.getElementById('result').value = formattedname;
return false;
} // End of formatnames () function
 
 
function init() {
'use strict';
document.getElementById('theForm').onsubmit = formatnames;
} // End of init() function.
window.onload = init;
 
function calculate() {
'use strict';
var regularpay;
var overtimepay;
 
    var hoursworked = document.getElementById('hoursworked').value;
var overtimeworked = document.getElementById('overtimeworked').value;
    var hourlyrate = document.getElementById('hourlyrate').value;
regularpay = hoursworked * hourlyrate;
overtimepay = overtimeworked * hourlyrate * 1.5;
 
document.getElementById('regularpay').value = regularpay;
return false; 
document.getElementById('overtimepay').value = overtimepaypay;
return false;    
 
function init() {
'use strict';
document.getElementById('theForm').onsubmit = calculate;
} // End of init() function.
window.onload = init;

Share this post


Link to post
Share on other sites

Well, one problem is that you've got two functions named init(). You can call the calculate() function in formatnames() or create an anonymous function that handle the form submission and have it call both calculate() and formatnames().

Share this post


Link to post
Share on other sites

Thanks Larry! I did make some changes! I got it to mostly work. It looks like the addition for all 3 tax rates aren't adding up properly. Can you take a look? 

Much appreciated!
Dan
 

HTML-
 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Paycheck</title>
    <!--[if lt IE 9]>
    <![endif]-->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- names.html -->
    <form action="" method="post" id="theForm" >
        <fieldset>
<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="hoursworked">Regular Hours Worked</label><input type="number" name="hoursworked" id="hoursworked" value="1" min="1" max="40" required></div>
<div><label for="overtimeworked">Overtime Hours Worked (1.5x as regular)</label><input type="number" name="overtimeworked" id="overtimeworked" value="1" min="1" max="40" required></div>
<div><label for="hourlyrate">Hourly Rate</label><input type="number" name="hourlyrate" id="hourlyrate" value="1.00" required> </div>
<div><label for="regularpay">Regular Pay</label><input type="text" name="regularpay" id="regularpay" ></div>
<div><label for="overtimepay">Overtime Pay</label><input type="text" name="overtimepay" id="overtimepay"> </div>
<div><label for="totalpayment">Total Pay Before Taxes</label><input type="text" name="totalpayment" id="totalpayment" ></div>
 
 
<div><label for="fica">Enter FICA Tax Rate</label><input type="number" name="fica" id="fica"> </div>
<div><label for="state">Enter State Tax Rate</label><input type="number" name="state" id="state" > </div>
<div><label for="federal">Enter Federal Tax Rate</label><input type="number" name="federal" id="federal"> </div>
 
<div><label for="taxrate">Your Total Tax Rate is</label><input type="text" name="taxrate" id="taxrate"> </div>
 
 
 
<div><label for="totaltaxes">Total Taxes</label><input type="text" name="totaltaxes" id="totaltaxes" ></div>
<div><label for="formattedname">Formatted Name</label><input type="text" name="formattedname" id="formattedname"></div>
<div><label for="netpay">Net Pay</label><input type="text" name="netpay" id="netpay" ></div>
<div><input type="submit" value="submit" id="submit"></div>
        </fieldset> 
    </form>
 
    <script src="js/paycheck.js"></script>
 
 
</body>
</html>

Javascript- 
 
 
function calculate() {
'use strict';
 
//These are the output variables that are calculated and returned to the paycheck.html form
var regularpay;
var overtimepay;
var formattedname;
var totalpayment;
var taxrate;
var totaltaxes;
var netpay;
  
//These are the input variables coming from the paycheck.html form
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
var hoursworked = document.getElementById('hoursworked').value;
var overtimeworked = document.getElementById('overtimeworked').value;
var hourlyrate = document.getElementById('hourlyrate').value;
 
var fica = document.getElementById('fica').value;
var state = document.getElementById('state').value;
var federal = document.getElementById('federal').value;
 
//These are the calculations 
 
//Calculate the regularpay
regularpay = hoursworked * hourlyrate;
 
//Calculate the overtimepay
overtimepay = overtimeworked * hourlyrate * 1.5;
 
//Calculate the pay before taxes
totalpayment = regularpay + overtimepay;
 
//Calculate the tax rate
taxrate = (fica + state + federal)/100;
 
//Calculate the total taxes
totaltaxes= totalpayment * taxrate;
 
//Calculate the netpay
netpay = totalpayment - totaltaxes;
 
//Format the regularpay
regularpay = regularpay.toFixed(2);
 
//Format the overtimepay
overtimepay = overtimepay.toFixed(2);
 
//Format the total taxes
totaltaxes = totaltaxes.toFixed(2);
 
//Format the Netpay
netpay = netpay.toFixed(2);
 
//Format the name
formattedname = lastname + ',' + firstname;
 
//These are the output variables that are calculated and returned to the paycheck.html form
document.getElementById('regularpay').value = regularpay;
document.getElementById('overtimepay').value = overtimepay;
document.getElementById('formattedname').value = formattedname;
document.getElementById('totalpayment').value = totalpayment;
document.getElementById('taxrate').value = taxrate;
document.getElementById('totaltaxes').value = totaltaxes;
document.getElementById('netpay').value = netpay;
// document.getElementById('overtimepay').value = overtimepay;  I do believe that there is a typo in this line.
// document.getElementById('formattedname').value = formattedname; //  I do believe that there is a typo in this line.
 
 
return false;   
 
}
 
function init() {
'use strict';
document.getElementById('theForm').onsubmit = calculate;
} // End of init() function.
window.onload = init;

Share this post


Link to post
Share on other sites

How are the rates not adding up properly? You can also use console.log() or alerts or Firebug to show the values of the variables to confirm what they are.

Share this post


Link to post
Share on other sites

Ah, that's very helpful. The reason is that the values are coming in as strings, because they're from a form. So you're performing concatenation of the strings, not addition of the numbers. I mention this gotcha in the book, along with the solution.

  • Upvote 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...