STUDENT - Javascript problem

goldy300

goldy300

New Member
Messages
33
Reaction score
0
Points
0
Doing IT diploma but I'm stuck on an exercise for Java script.

Here it is:

The number of calories burned per hour by bicycling, jogging and swimming are 200, 475 and 275 respectively. A person loses 1Kg for each 1600 calories burned. Create a web application that allows the User to input the number of hours spent at each activity and then calculates the number of Kilograms burnt off.
 
Salvatos

Salvatos

Member
Prime Account
Messages
562
Reaction score
1
Points
18
Edit: Skip to next post for your solution ;)

Are you completely stuck or is there just a part that is unclear to you? I know virtually nothing about JavaScript but I could give ideas and if you can combine it to PHP it's gonna be even easier.

Very simply put, I would make an html form with a dropdown list of the three activities OR three text inputs each representing one activity (so the user can check the three of them at once). Then your onSubmit property would call a calculation function that would use the form input's name to identify which formula it must use to get the total amount of calories (multiplying the number of hours per 200, 475 or 275)and complete it with translating the calories to kilograms.

You could then use a second form, with a text input, that would display the number of kilograms burnt. To do this, you just have to do like forums that display a number of characters allowed vs. characters already used. Which, if I remember correctly, works by giving an id to the text input and making its value change with a JS function (something like this.form.input.value = "your kg amount calculated above" but I'm very approximate on this).

I'm just saying this to give you ideas though, I won't be able to help you much when it comes to actual coding.
Hope that helps.
 
Last edited:
dickey

dickey

New Member
Messages
128
Reaction score
0
Points
0
This is something I come up with. If this helps I don't mind reps and credit donations.
HTML: 
<html>
  <head>
    <script>
      function compute()
      {
        var input = document.getElementById('hours').value;
        var activity = document.getElementById('activity').value;
        calories = input * activity;
        out = document.getElementById('KG');
        out.value = calories/1600 + " KG";
        if (out.value>100) 
        {
          alert('Chances are you are dead by now. So wipe off that silly grin from your face!');
        }
        document.getElementById('message').style.display='block';        
      }
    </script>

  </head>
  <body>
    <form name='form1'>
      What form of activity did you do?
      <select name='activity'>
        <option value='200'>Cycling</option>
        <option value='475'>Jogging</option>
        <option value='275'>Swimming</option>
        <option value='2000000'>Harcore Sex</option>
      </select>
      <br />
      How many hours did you do it?
      <input type='text' name='hours' />
      <br />
      <input type='button' value='Compute' onclick='javascript:compute()' />
      <div id='message' style='display:none'>
        Congratulations you lost: 
        <input type='text' name='KG' />
        <br />
        <input type='reset' value='Again?' onclick="javascript:document.getElementById('message').style.display='none'" />
      </div>
    </form>
  </body>
</html>

if you are using firefox
HTML: 
<html>
  <head>
    <script>
      function compute()
      {
        input = document.getElementById('hours');
        input = input.value;
        var activity = document.getElementById('activity').value;
        calories = input * activity;
        KG=calories/1600;
        out = document.getElementById('KG');
        out.value = calories/1600 + " KG";
        if (KG > 100) 
        {
          alert('Chances are you are dead by now. So wipe off that silly grin from your face!');
        }
        document.getElementById('message').style.display='block';        
      }
    </script>

  </head>
  <body>
    <form name='form1'>
      What form of activity did you do?
      <select name='activity' id='activity'>
        <option value='200'>Cycling</option>
        <option value='475'>Jogging</option>
        <option value='275'>Swimming</option>
        <option value='2000000'>Harcore Sex</option>
      </select>
      <br />
      How many hours did you do it?
      <input type='text' name='hours' id='hours' />
      <br />
      <input type='button' value='Compute' onclick='javascript:compute()' />
      <div id='message' style='display:none'>
        Congratulations you lost: 
        <input type='text' name='KG' id='KG' />
        <br />
        <input type='reset' value='Again?' onclick="javascript:document.getElementById('message').style.display='none'" />
      </div>
    </form>
  </body>
</html>
 
Last edited:
N

Nahid_hossain

New Member
Messages
28
Reaction score
0
Points
0
Try this simple code:

HTML: 
<script type="text/javascript">
$byc=prompt("How many hours have you been bycycling?");
$jog=prompt("How many hours have you been jogging?");
$swm=prompt("How many hours have you been swimming?");
$loses=($byc*200+$jog*475+$swm*275)/1600;
$rloses=$loses.toFixed(2);
document.write("You have burnt "+$rloses+" Kilograms");
</script>
 
Last edited:
mattura

mattura

Member
Messages
570
Reaction score
2
Points
18
All very well, but why should we do your homework for you?
If you had at least made a start, and gone wrong, then perhaps I'd be more helpful.
 
dickey

dickey

New Member
Messages
128
Reaction score
0
Points
0
Nahid_hossain said:
Try this simple code:

HTML: 
<script type="text/javascript">
$byc=prompt("How many hours have you been bycycling?");
$jog=prompt("How many hours have you been jogging?");
$swm=prompt("How many hours have you been swimming?");
$loses=($byc*200+$jog*475+$swm*275)/1600;
$rloses=$loses.toFixed(2);
document.write("You have burnt "+$rloses+" Kilograms");
</script>
Click to expand...

It's good and simple. But I think if I was his instructor I would notice that it is not his work.

THis is a simple problem and he was stuck and it seems he didn't even have a code to start with.
 
mattura

mattura

Member
Messages
570
Reaction score
2
Points
18
Also, I've never seen javascript that uses php variables!

Goldy would have to explain how the code works, so the above code is probably not much use after all (but very neat -all credit to Nahid)
 
Salvatos

Salvatos

Member
Prime Account
Messages
562
Reaction score
1
Points
18
mattura said:
All very well, but why should we do your homework for you?
If you had at least made a start, and gone wrong, then perhaps I'd be more helpful.
Click to expand...
Well he didn't ask to make it for him, he just said he was stuck ;)

As I don't know much JS myself but am still fairly interested, is Nahid's code complete or would one have to add some html to provide the entries? I don't know how the prompt() function works, so... Just curiosity ^^
 
goldy30

goldy30

New Member
Messages
60
Reaction score
0
Points
0
mattura said:
All very well, but why should we do your homework for you?
If you had at least made a start, and gone wrong, then perhaps I'd be more helpful.
Click to expand...
Not do homework for me... it was as one other guy said, I was unclear and needed to understand it. Most people have been heaps helpful... thanx everyone else.
Edit:
I can see the variations of doing this but I was thinking of the user adding values to all separate fields and then calculating total kilos lost after that. As I said I'm very vague on this so this may look stupid if it's wrong...

<HTML>
<HEAD>
<TITLE> New Document </TITLE>

</HEAD>

<script>
function compute()
{
document.form1.sum.value=(document.form1.cyc.value)* 200/1600;

document.form1.sum.value=(document.form1.jog.value)* 475/1600;

document.form1.sum.value=(document.form1.swim.value)* 275/1600;
}
</script>

</head>
<body>
<form name='form1'>
<b><font face="arial">How many kilo's have you lost?</font></b><p>
<font face="arial">
Cycling: <input name="cyc" type="text" size="4" onChange="compute()"><br>
Jogging: <input name="jog" type="text" size="4" onChange="compute()"><br>
Swimming:<input name="swim" type="text" size="4" onChange="compute()"><br>
You have lost: <input name="sum" type="text" size="7" value="0"> Kilograms.<br>
<input type="button" name="" value="Calculate"> &nbsp; <input type="reset" value="Reset">
</font>
</div>
</form>
</body>
</html>

Let me know... thanx!
 
Last edited:
Salvatos

Salvatos

Member
Prime Account
Messages
562
Reaction score
1
Points
18
Watch the space on this line:
document.form1.sum.value=(document.form1.swim.valu e)* 275/1600;

Also "How many kilo's have you lost?" would be "How many kilos have you lost?" and you don't really need to close that first font tag since you're opening an identical one right after.

Now about the JS proper, there is the reset button which is not going to do anything.
Apart from that, I don't think your total is gonna come up right.
Again, I'm not an expert, but I'm pretty sure your sum is gonna end up to be equal to the amount related to swimming only, since you're overwriting the same variable on each line.
You should probably make three different variables and have a fourth combining all three, and this fourth one would be the one displayed.

Also, your submit (Calculate) button does not do anything since the sum updates as soon as the values are changed.
 
goldy30

goldy30

New Member
Messages
60
Reaction score
0
Points
0
yeah, I noticed the swim only working after I posted it. It's frustrating cause we're on holidays and I've got no one to ask so I appreciate all the feed back.

I'll fix it up now.
 
N

Nahid_hossain

New Member
Messages
28
Reaction score
0
Points
0
Your code was almost ok, the problem was that you have forgot adding the values. The thing is that any programming language always show the last assigned value. Here is the fixed code:
HTML: 
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

</HEAD>

<script>
function compute()
{
document.form1.sum.value=((document.form1.cyc.value)*200/1600)+((document.form1.jog.value)*475/1600)+((document.form1.swim.value)*275/1600);
}
</script>

</head>
<body>
<form name='form1'>
<b><font face="arial">How many kilo's have you lost?</font></b><p>
<font face="arial">
Cycling: <input name="cyc" type="text" size="4" onChange="compute()"/><br>
Jogging: <input name="jog" type="text" size="4" onChange="compute()"/><br>
Swimming: <input name="swim" type="text" size="4" onChange="compute()"/><br>
You have lost: <input name="sum" type="text" size="7" value="0"> Kilograms.<br>
<input type="button" name="" value="Calculate"> &nbsp; <input type="reset" value="Reset">
</font>
</div>
</form>
</body>
</html>
 
Last edited:
goldy30

goldy30

New Member
Messages
60
Reaction score
0
Points
0
Thank!!! I really appreciate that Nahid_hossain. I just needed to understand that part in the script. That will help me heaps through the exercises.

:bowrofl:
 
Salvatos

Salvatos

Member
Prime Account
Messages
562
Reaction score
1
Points
18
That Calculate button is still doing nothing though ;)
 
natsuki

natsuki

New Member
Messages
112
Reaction score
0
Points
0
The calculate button really does nothing at all...^^

I think it's better to give and explain the formula than actually giving the whole code especially if it's a homework, so he can still make it himself.

calories that are burned per activity per hour are:
bicycle
jogging
swimming

create separate variables for each so it will be easier to manipulate data:

Code: 
.....
var cyc, jog, swim, kg,....blah;

cyc = document.form1.cyc.value;
jog = ..
..
return kg;
}
....
<input type="button" ....... onclick="blah"

etc.
 
goldy30

goldy30

New Member
Messages
60
Reaction score
0
Points
0
I see your points guys... onClick is better but where i've used onChange I'd just put the button in there for the user to click which would be the same as clicking anywhere on the page. Just motivates them to take action. I will change though. Thanks everyone.
 
mattura

mattura

Member
Messages
570
Reaction score
2
Points
18
Agree with natsuki.
Nothing against you goldy30, it's just your first post looked like you hadn't made any effort yourself.
Since then you have posted your code - don't be ashamed to do so! Nobody will make fun of it, people will help.
 
Salvatos

Salvatos

Member
Prime Account
Messages
562
Reaction score
1
Points
18
Well if you read the first post you'll see it says he was was stuck on a JS exercise for school...
I don't think his teacher would have appreciated a PHP solution :D
 
You must log in or register to reply here.
Top