Link to home
Start Free TrialLog in
Avatar of jjackson2004
jjackson2004Flag for United States of America

asked on

html javascript css

I have the following homework assignment in a class that is basically us teaching ourselves web programming:

Create a web page that uses JavaScript to print a payroll report for a company that has a few employees, all earning the same hourly wage: $15 per hour for up to 40 hours per week. If the employee worked more than 40 hours, the hours in excess of 40 are paid at one and a half times this rate.

The user enters the (integer) number of hours worked in the week for each employee in a pop-up box. Use an open-ended loop so that the number of employees can vary. Have the user enter a negative number such as -1 to indicate that there are no more employees to enter. (The program should do something reasonable if the user enters -1 as the first value.)

The program prints, as web page contents, a table containing three columns. The first column is simply an index that increases from 1 up to the number of employees processed. The second column is the number of hours worked, entered by the user. The third column is the employee's pay for the week. After the table, please print out a summary line giving the total pay of all the employees.

The output does not need to be fancy, but correct and readable. The table columns should have headings identifying them, and the total pay should a suitable label.

Place the JavaScript code into an external file, referenced by the src attribute of the <script> tag.

I am seeking guidance on how I should approach this, ie. how I should do the columns.  I assume the first part I can just "prompt" for the employees and put the variables in an array.  For the second part of input, should I be using a form or is there another input method that would accomplish this?  and can I built the form on the fly or do I do a big form and only have input for those lines that have an employee?

These are my initial questions.  Thanks in advance!
Avatar of Rob
Rob
Flag of Australia image

As @GaryC123 has indicated, there is minimal we can do to help you at this point.
Review the material you have from the course as well as starting with w3schools.com as it has examples of the elements you are taking about in both html and JavaScript.
Avatar of jjackson2004

ASKER

I pay for assistance.  I will refrain from being honest in the future.  I was looking for guidance, not for you to do my bloody homework.  Your response is unacceptable.  I already did what you asked prior to asking the bloody question.  You are taking my money and not providing a service.  That is unethical and dishonest.
Any assistance y'all provided in the past was notated in the homework and credited to you .  Your insinuation of impropriety is way out of line and beyond the pale.
@jjackson2004,
Please don't take it the wrong way.  I understand tor frustration and appreciate your honesty.
We have to be vigilant when it comes to this because so many take advantage of it.
What I would like to see is instead of asking should I do this or that, have a crack at  yourself and post back with a specific question and code snippet when you get stuck. You're sure to get a better response fir doing so.
I wanted to keep the guidance going and suggested you start with the w3 schools siteand if like to keep this thread going.
I have spent the last 3 weeks with W3 schools as well as other related sites, as I mentioned previously, this is basically a self taught class.  

I am a mature fellow who only has limited time available to spend learning the "correct" way to do something.  I do not wish to spend a lot of time trying to do it the wrong way, well not wrong, but not the best way.  

All I asked was to be pointed in the right direction so I do not learn a less than optimal way, which I have much experience with.  College these days is so much worse that it was 30 years ago when they made sure you learned the material.  These days you try what you can, turn it in, get graded and never, ever are told what would be the best way to do it.  It is ridiculous and a waste of money, but I am going back to get my degree before my daughter gets hers.

If it weren't for clients, I could get a lot more done.
@jarmod101 et al,

Let me repeat this so it is clearly understood, I am not asking anyone to answer, or more correctly stated, to do my homework.  I am looking for "expert" guidance as to some of the better routes to take.  There are many ways to do a particular issue.  I have already listed what I consider to be the way to do it.  I am not looking for coding, I will do the coding; I am looking at concepts.

Once I have spent a lot of time figuring out a way to do it, I am not about to go back and spend even more time to do it another way that would be better.  So I will have wasted valuable time learning the less than optimal way to do it.
Avatar of Mike McCracken
Mike McCracken

I don't know Java so I can't help with an of that.

In writing a program you need to determine what the program needs to do and  what data you will have available.  You are looking at implementation details but you haven't broken the statement into a set of requirements.

the first step is generally to determine the requirements
What inputs will you have?
What outputs are required?

How many inputs will there be?

What calculations are required?


I know this sounds like a lot or work for a simple program like this but this is where many of us make our mistakes is in assuming we know what the program should do and look like without writing down the requirements.

Inputs?

Calculations?
   
Outputs?
   
How many employees?
   
Answer these questions and I think the way to present the outputs will come to you

mlmcc
OK, thanks all.  If this site were gratis, I might feel I was getting my money's worth.

But I have been paying since 2004 and have only received worthwhile help a couple times, maybe 3.

On self reflection, I guess that shows me I am not very money savvy or not very wise.

If anyone feels like actually assisting me so I can learn something new, I will welcome your input, otherwise I will muddle through and learn little.

God bless you all.
Not Being overly familiar with javascript itself here.

I am seeking guidance on how I should approach this, ie. how I should do the columns.  I assume the first part I can just "prompt" for the employees and put the variables in an array.  

Looks to me like you've already have an idea to go off of.

For the second part of input, should I be using a form or is there another input method that would accomplish this?  and can I built the form on the fly or do I do a big form and only have input for those lines that have an employee?

I'm not sure what else you are inputting? You only enter in the hours

Just remember web development is biased off of trial and error, and IE does not play by the rules in styling.

cf101
Wow, again @ModeIT, I am not asking for any "grunt" work to be done, just "expert" guidance.  Please only read my words and do not infer anything other than what is actually presented by the words written (actually typed).  I cannot fathom how you are getting the idea that I am asking anyone to do my grunt work, unless the definition of grunt work has changed.  

I would appreciate any advice, even limited as long as it is related to assisting with the question.  So far all I have received is attitude and worthless (almost juvenile) lecture.  And with my original questions, I could easily have been set on the right path with limited advice.  

I have been programming for 30 years, so mlmcc's welcomed response was appreciated, but not helpful as I had already done all that; it is the mechanisms that are in question.

And it is quite perceptive of you to realize y'all did not force me to sign up for this class,  I thought the class would be informative.  I already have my credits to graduate with a 3.98, I did not turn in my graduation request in time.

And to @compfixer101, you are quite right about the trial and error.  XML and CSS were quite frustrating, and sometimes the fixes did not seem logical.
Ok jjackson2004,

Let's start with:
I am seeking guidance on how I should approach this, ie. how I should do the columns.  I assume the first part I can just "prompt" for the employees and put the variables in an array.  

you're right on the money with this.  you're going to need some way to initiate the "prompt".  There are many ways to do this.  What did you have in mind?  Also you have to consider how to capture the information in the prompt. Do you try and capture the employee name and hours or do you do one at a time.  your thoughts?

Creating the table on the fly as you ask each question will certainly save you time.

As you said the prompt will store the value in an array.  Javascript objects would be very handy in this respect as they can hold more than a single value.

Certainly validation is important.  Writing logical functions in your javascript that perform certain actions will help you manage your code effectively.

I know everyone works differently but to get this right I would (and generally do) be literally be drawing it out on paper each step of the way as if you were creating a form for someone to fill in and the rules on how to use that form.  That will help with the flow of your code and validating the input.
Thank you @tagit for your consideration.

Preface:  I muddled my way through the CSS assignment, doing what I had to to satisfy the requirements, but did not actually learn the correct (better) ways to do it as we are typically shown pps and then given an involved assignment to finish in 2-3 days.

In the last lecture, we went through javascript, functions, variables, methods, datatypes, objects, and then he went into DOM.  So I am concerned that the best way to do this is DOM (and 3 days to learn it).  

The first part seems simple.  I would set a limit on the array size, and then loop through the array using prompt to fill it (until a -1 is inputted or array limit is reached).  One question that arises here is how do I get the prompt() to keep showing up in the same place.  I think one appropriate way would be to define a container that will only show one line and then keep doing the prompt command in a loop.  

I suspect that the "proper" way to do this is to use a DOM object and in the loop, do a getElementByID or whatever that command is.  This would appear to be a good way to only one element for input on the screen and get the data.  If that is the case, then I would focus my limited time on researching DOM.

If this type of conversation if acceptable, then I will give my ideas on the second part later.  I have learned through experience to do this one step at a time and get it to pass the W3 validation after each change.   I have 48 hours left.

Please let me know what thoughts you are allowed to share.

And again, thank you!  Having an expert to bounce ideas off of takes away some of the stress.
I just remembered that prompt is a popup, so it would not affect the screen position.  But it seems a rather primitive way to do this.
I am curious if a popup blocker would block the prompt popup.   I will test that later.
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I just remembered that prompt is a popup, so it would not affect the screen position.  But it seems a rather primitive way to do this.
Seems you found what I was indicating ;)

W3 validation is so important.  You should read this: http://validator.w3.org/docs/why.html

I am curious if a popup blocker would block the prompt popup.   I will test that later.
Search for the definition of a popup and whether what you're using is classed as one.
I have to W3 validate all pages.  And we are not expected to have to be functional in IE.

I have been spending most of my time on W3school and w3.org.  Time is limited, but I am doing what I can.

The structure of my academic class seems to be that the grading is not harsh and there is a lot of consideration.  Problem is I spent a lot of money for the class and I wish to get my money's worth.  The grading is loose, but I am not concerned about my grade, I am concerned about learning the bloody material.  Your comment about DOM was most informative.  Thank you.

And don't get too worried about crossing the boundaries, I can always get the rest of my family (3 siblings and one parent versed in contract law) to give a legal review of the terms and conditions and your comments at no charge and verify that you are not crossing any boundaries.
Given you're lack of time to learn this I'd drop looking at w3.org unless you like reading through that stuff.  The fast and dirty way to get up and running is to solidly work through the javascript tutorial on w3schools.  There are a lot of other sites out there with relevant content but K.I.S.S.  That site will have more than enough to get you through the assignment.

Remember you can search the previously asked questions (PAQ'd) here at EE on how to do certain tasks as you can be guaranteed that someone has already asked a similar question.  You just have to be careful with using the posted code if you don't understand what it's doing.

Once the assignment is out of the way and you have more time then start trawling through the specification if you want to.  Of course, my learning is going to be different but I learn better from examples and reading through the interpretations of the specification rather than the specification itself.  That's not to say I never use it.  If there is a discrepancy in what I'm reading then it's the only way to make sure.

Another piece of advice, stay away from jQuery for the assignment unless it's been explicitly allowed for use.  It will confuse the learning process if there's no fundamental understanding of the DOM and CSS.
Thanks again, this is very useful.  I moved away from W3 after my last message and am going back through the CSS tutorial on W3School to make sure I understand it before I move on to the javascript.

 I may just do the prompt for the first part as it will satisfy the requirements and then move on to the second part.  I still have a third unrelated part to this assignment that is much more interesting, but I need to get this one out of the way and also realize the best way to do it.

So this thread will be slow for a while as I do more reading.

If you don't mind, when tomorrow would it be most likely for you to respond to questions?
I wouldn't spend too much time on the CSS given it isn't a requirement to have your webpage looking good.  Save that for after the assignment.  From the detail you've given me I can't see the need for much or any styling of your page.  In fact you should be able to do the assignment without any CSS.

I have no idea what timezone you're on but i'm on GMT+10 and usually after 1pm my time is when I'm most available.

I won't be available after tomorrow but you'll need to have your assignment pretty much done by then :)
so tomorrow night for me.  I am GMT -5

thanks
For reference  it's 4pm Monday for me now
So you would be most likely to answer a post in 21 hrs?   And for how long a window at time?
Ok in about 14 hours from now I'll be able to semi answer and you're right in about 20 hrs I'll hopefully be online continuously.
However if you have thoughts questions etc then post them in the morning as other expects may be monitoring this thread and may be able to offer advice
It appears that you are getting the help you need right now for this assignment. But for future self-paced learning, can I suggest taking a visit to Code Academy.

Also, check out any of the Head First guides. I owe my career to the Head First Guide to HTML.

Not sure if traditional college courses can even keep up with the pace of change in web technology these days. A basic course in computer science and coding, should suffice. It's the foundation for everything! The resources on the web are a goldmine!

There are 17 year old freelancers making bank from learning on their own and keeping up with cutting edge, latest coding techniques.

How important is this degree? Worth your sanity and $$? What is you real motivation? To simply get a degree or become a rockstar in the web design world?

I'm self taught. I remember my early days of posting here at EE for help. This resource has been immeasurable to me. I took a crack at it, sometimes for days, then posted my code and got my answer in minutes or hours. I remember the day I actually provided a solution for someone else. The learning curve is steep, these days. We and thousands of others across the web are here to help you.

So sorry about the frustration you felt at the beginning of this thread.

:)
I am to the display portion of the project.  I have been looking for a while for a way to input the data.  I will have three columns, the first is filled with the inputted employee names.  for the other two columns I need to input data.  I worked with outputting the employee names as they were entered:

<div class="empContainer">
<p id=emp0> </p>
<p id=emp1> </p>
<p id=emp2> </p>
<p id=emp3> </p>
but I did not like the line spacing and I cannot replace the </p> with <br />.  So I am going to do the table and turn the <p> into <td> so I can use class id.

My problem is I have not found a way to turn these classes into input.  for the employee names I used a loop and

        tArray[loopCt++] = inName;
      document.getElementById('emp'+loopCt).innerHTML=inName;

which allowed me to put data into the class, but I need it to be an input field.  I also am still searching for  a way to enable and disable the class, but I will save that for next.

Is this possible, using the class as an input field within the table?
You're on the right track using the <table> and the <td>.  

If you're wanting to use an input element then you should review the HTML DOM in relation to that: http://www.w3schools.com/jsref/default.asp  Look for the properties of the input element.
But that refers to forms.  Am I to put a form input element in the table columns?
that's up to you - I was confused by

which allowed me to put data into the class, but I need it to be an input field.
because does it change anything by moving to a <td> from a <p>?
suddenly my blood pressure has risen dramatically.  I have gone through the whole w3schools tutorial and did not find the answer.  Being told to look at it again is not productive.
The only input variables that reference you sent me to refer only to input variable inside of forms.  I did not see your last comment before I sent the last comment.

I can continue to google the issue and continue to go in circles.
I changed to td from p because the vertical spacing of the screen output was unacceptable and I could not find a line spacing command to handle it.
From the code snipped I had in my 00:41:27 comment, I attempted to show how I was using new found knowledge to modify elements on the screen.  But I do not need to modify the elements in the second and third columns (which I am about to add), I need the user to be able to directly enter the data into those class elements in each table column.  I have not found a way to do that or if it is possible.
Look, nothing to panic about :)

You are on the right track using the <table>, <tr>, <td> elements and they can be substituted for the <p> element.
If you are going to need the user to INPUT directly into the "class elements" then please refer to the link I posted above re the DOM HTML elements that refer to form elements as you pointed out.l
You are able to combine these elements together.  Whether they're used or not may not be relevant eg you can use an <input> without a <form>
"Text Object

The Text object represents a single-line text input field in an HTML form.

For each <input type="text"> tag in an HTML form, a Text object is created.

You can access a text input field by searching through the elements[] array of the form, or by using document.getElementById()."

I looked at it and found nothing useful as it only referred to forms, so it is not relevent.  

This is a non answer and I don't have 4 hours tonight to waste as it is already quite late.  Answering if something exists does not violate the terms and conditions, but to assist you....

I have decided that I need this feature on one of my web sites.  So I will put away this assignment and start work on modifying my web site.  As this is business related, I will start a new thread related to my business work if that will assist in getting through the bull**** as it will not in any way violate some peoples interpretation of the terms and conditions.
I reread one of your answers and you used the word "form" in it.  I previously asked if the only way to input data was using a form.  Never received an answer.  The question does not violate T&C.
Ok i'll sign off then - you were almost there and a form is very relevant but you're trying to cram far too much into a small amount of time.

Good luck with the project.
"You are able to combine these elements together.  Whether they're used or not may not be relevant eg you can use an <input> without a <form> "

This information is not in that link you directed me to, nor anywhere else that I googled.
every bloody time I look for input, it always refers to forms.
I reread one of your answers and you used the word "form" in it.  I previously asked if the only way to input data was using a form.  Never received an answer.  The question does not violate T&C.
No it doesn't... i just missed it:
But that refers to forms.  Am I to put a form input element in the table columns?
the answer is yes you can.
http://www.w3schools.com/jsref/dom_obj_text.asp is the DOM reference regarding the text input element
I found this at another site.
<input type="text" name="first_name" value="" maxlength="100" />

Is it possible to add a class id to this type of instruction?
It may also be faster to put an input element in your table and see if it works.  You can also copy and paste your code into the validator and it will tell you if you're allowed to do it or not.
In response to your 02:24:08 comment, that is the item I mentioned in my earlier comment.  it is not helpful as I am NOT using forms unless that is the only way.  but it does not appear, so that reference does not appear to be relevant.
yes it is possible - it's on the w3schools site: http://www.w3schools.com/jsref/dom_obj_attributes.asp
no it is not in that reference

there is nothing there about input.  Now if you are referring to appending a child, which i read about earlier today, that is not helpful or relevant in the least as I need the data to be input in the table cell, not inputted somewhere else and then appended to the tree so it shows up in the cell.  hell i can do that with the document.getElementById
btw reference my comments via the ID not the time.  Your time is displayed to you and my time is displayed to me
Your terminology indicated to me that you wanted to use form elements because you stated above that you want the user to "input directly into the class".
I need the data to be input in the table cell, not inputted somewhere else and then appended to the tree so it shows up in the cell.  hell i can do that with the document.getElementById

then you need the input element
my terminology listed that forms were not relevant.  I was not going nor wished to use form unless it was the only way to do it.  I asked about forms in several comments but did not receive a proper reply that I am aware of.

"then you need the input element "  am i to infer from this that I need to use a form?
I know you're frustrated with this but I am doing my best to help but I'm not sure how much more I can help.  I don't think you will be able to do this by tomorrow without another experts help.

Unfortunately I've run out of time.  I'm going overseas tomorrow and need to make sure I'm ready.  

Please request attention to see if you can get someone else to help you.

I guarantee you all your answers are on the javascript tutorial on w3schools.  If you can't find it there then I don't know what to say other than you must've missed something.

I hope I see you've reached your goal when I'm onlline next
Thanks, but you did not do your best, otherwise I would not be so frustrated.   I assume you are more capable than you displayed.  You hid behind a misinterpretation of the T&C.  

I am an old man and little time left, so I do not have a lot time to be led around in circles by a vendor.

Good luck on your trip and God bless.
Wow.
tagit bent over backwards to help you. I've never seen so much back and forth in such a short time on this forum. Your frustration has nothing to do with him. We all get frustrated. This stuff isn't a cake walk. It is extremely difficult to help someone with code who is a newbie without being right there at their elbow.

Right now you are in the position of not knowing what you don't know. We've all been there. tagit is well aware of this situation and  honestly expressed with integrity that you may need more help than he can provide.

Like I said, I understand your frustration. I know I've thrown things because of not understanding or being able to solve something. (granted it was a yoga mat so I wouldn't break anything!) I find that coding is like running a 26 mile marathon, where you get off to a running start for about a mile then spend several hours trying to figure out why you can't put your bloody foot down for the next step.

We are here to help you figure this out, it's sometimes detective work for us too! We are not clairvoyant or all knowing.

This may not be a solution for you on this thread, but I felt the need to acknowledge your feelings and tagit's noble effort to help you.

Peace.
Not seeing any code, here is a start. All the code is readily available on the web in tutorials and references

I always use jsfiddle to test my code

I use the simplest DOCTYPE as possible

<!DOCTYPE html>
<html>
<head>
<title>Payroll</title>
<script type="text/javascript" src="payroll.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>

Open in new window


then you need the following according to the assignment

An collection of employees. I choose an Array, an object may be more insteresting in the future when there are more details like different pay and their job titles
var employeeArray = ["Fred","Jane","Bob"]; // can be extended

Open in new window


Yes you need document.getElementById to access the content div but you cannot access it until after the page loads
window.onload=function() { // here the page has rendered 
  var contentDiv = document.getElementById("content");
 
  /* When we prompt we need a loop that runs over all the employees - 
      since we have a simple array we need a for loop that runs from 0 (first employee) 
      to the length of the array-1 (last employee) since we need the 0th, 1st and 2nd
     employee and the length is 3 */

  var html= '<table>'; // here we assign the table tag to a string
  for (var i=0;i<employeeArray.length;i++) {
    var hours = prompt("What hours did "+employeeArray[i]+" work?","");
    if (isNaN(hours)) hours = 0; // a minimum of validation
    var payment = hours>40?hours*15*1.5:hours*15; // using a ternary construct
    // here we need to append rows with += 
    html += '<tr><td>'+(i+1)+'</td>'+
              '<td>'+employeeArray[i]+'</td>'+
              '<td>'+payment+'</td></tr>';
  }
  html += '</table>';
  contentDiv.innerHTML=html;
}

Open in new window


Please search MDN for the constructs you did not understand.

I cannot recommend w3schools for JavaScript - I ONLY EVER use w3schools for things like css reference. There are WAY too many mistakes in their JavaScript for me to take them seriously
If you wish to stop using a -1 you need an if statement and you need to read up on how to leave a loop

if (isNaN(hours)) hours = 0; // a minimum of validation
if (hours<0) {
    // leave the loop
}

Open in new window

To all the experts, thanks for the additional comments that were posted after I went to bed.  Some seem quite advanced.  

To COBOLdinosaur, I disagree with your premise.  The rest of the comment was a waste of my time and you should not have wasted your time with this drivel.  Though I like your handle, I am an old COBOL coder.

The web page was created and some code was posted.  I find it unusual that the discussion of concepts are a taboo topic

God bless you all.  I am finished with this thread.