Jump to content
Forums are read-only ×
Larry Ullman's Book Forums

xdbuix

Members
 View Profile  See their activity

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by xdbuix

    Chapter 6 Assignment

    in Modern Javascript: Develop and Design

    Posted

    Hey Larry!

    I've been working on my assignment and I've hit a roadblock. I was hoping you can take a look for me. I'm able to get the output out, however there are a few kinks i'm running into. I'm trying to sum up my output temperature numbers. Also the dates are suppose to go down 1 day from today each time you submit.

    Thanks Larry!
    Dan

    html-

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Average Temperatures</title>
        <!--[if lt IE 9]>
        <![endif]-->
        <link rel="stylesheet" href="css/form.css">
    </head>
    <body>
        <!-- employee.html -->
    <form action="#" method="post" id="theForm">
       <fieldset><legend>Average Low Temperatures and high Temperatures</legend>
           <div><label for="lowtemp">Low Temp</label><input type="text" name="lowtemp" id="lowtemp" required></div>
           <div><label for="hightemp">High Temp</label><input type="text" name="hightemp" id="hightemp" required></div>
         
           <input type="submit" value="Add the Temperatures" id="submit">
       </fieldset>
       <div id="output"></div>
    </form>
        <script src="js/temps3.js"></script>
    </body>
    </html>

    javascript-
    // tasks.js
    // This script creates an array using form data.
     
    // Need to create an array of low temperatures:
    var lowtemps = [];
     
    // Function called when the form is submitted.
    // Function creates a new object.
    function process() {
        'use strict';
     
        // Get form references:
        var lowtemp = (document.getElementById('lowtemp'));
     
     
        // Reference to where the output goes:
        var output = document.getElementById('output');
     
        // Create the ouptut as HTML:
    var message = ' ';
    var today=new Date();
    var curDay=' ';
     
    if (!isNaN(lowtemp.value)) {
     
    //add the temps to the array;
    lowtemps.push(lowtemp.value);
     
    //Update the page
    message = '<table class="left"><th>Date</th><th>Low Temperatures</th>';
    curDay=today.toLocaleDateString();
    for (var i=0, count=lowtemps.length; i < count; i++)
    {
    message+='<tr><td class="right">' + curDay + '</td> <td class="right">' + lowtemps + '</td></tr>'; //It is displaying the current day now but that needs to change each day. So re-examine the curDay variable..I actually do not use toLocaleDateString. I use a combination of getMonth() getDate() and getYear() and you can add or subtract 1 from each of those as needed.
    }
    }
    else
    { // The low temp is invalid!
    message = 'Please enter valid low temperatures.';
    }
    output.innerHTML = message;
    // End of lowtemps IF.
     
    //Return false to prevent submission:
    return false;
     
    } // End of process() function
      
    // Initial setup:
    function init() {
        'use strict';
        document.getElementById('theForm').onsubmit = process;
    } // End of init() function.
    window.onload = init;
     

     

    Chapter 4 Help!

    in Modern Javascript: Develop and Design

    Posted

    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;

    Chapter 4 Help!

    in Modern Javascript: Develop and Design

    Posted

    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;

    Chapter 4 Help!

    in Modern Javascript: Develop and Design

    Posted

    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

×
×
  • Create New...