SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    make a simple calculator?

    Have to make a calculator to calculate wallpaper sizes and cost (college course so not for the 'real world' so doesnt need a great deal of functionality. Do i make a form in html and then name each cell? what then? Lost as hell here and been watching countless tutorials for js, need guidance i think now.

    Alan

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by confusedone View Post
    Have to make a calculator to calculate wallpaper sizes and cost (college course so not for the 'real world' so doesnt need a great deal of functionality. Do i make a form in html and then name each cell? what then? Lost as hell here and been watching countless tutorials for js, need guidance i think now.

    Alan
    You use events.

    Have a form button called "Calculate", and use scripting to attach an onclick event to that button.
    That button can then use this.form to gain a reference to the form, and from there you can use the elements collection to easily refer to the named form fields.

    For example, here's a form to calculate BMI:

    Code html4strict:
    <form id="calculatebmi">
        <p><label>Height (metres): <input name="height"></label></p>
        <p><label>Weight (kilos): <input name="weight"></label></p>
        <p><input name="calculate" type="button" value="Calculate BMI"></p>
        <p>Calculated BMI: <input name="bmi"></p>
    </form>

    Now we use the form identifier to reference the form, and from there use the elements collection of that form to get to the element we need. In this case, the calculate button.

    Please note: We put scripts at the bottom, just before the </body> tag, to achieve several benefits, among which are faster page loading and no need to wait for the page to be loaded before working with page elements.

    Code javascript:
    var form = document.getElementById('calculatebmi');
    form.elements.calculate.onclick = calculateBMI;

    The calculateBMI() function will use this.form to gain a reference to the form, so that the other values can then be retrieved. All form values are strings, so it's a good idea to convert them to numbers when you retrieve them. If you don't, then "1"+"1" will equal "11"

    Code javascript:
    function calculateBMI() {
        var form = this.form,
            height = Number(form.elements.height.value),
            weight = Number(form.elements.weight.value),
            bmi;
     
        ...
    }

    After which you can perform sanity checks, if needed, and carry on with what needs to be done.

    Code javascript:
    function calculateBMI() {
        ...
     
        if (!height || !weight) {
            alert('Please enter a valid height and weight.');
            return;
        }
        bmi = weight / (height * height);
        bmi = Math.round(bmi * 100) / 100;
        form.elements.bmi.value = bmi;
    }

    The details will differ for you of course, but those are the fundamental general principles involved.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many many thanks! I shall try to implement this right now!

    One more question, asked this on another question but didnt get any response so thought id try again -well i asked similar anyway.

    To access this calculator, the assignment requires that someone needs an email and password verification. I did initially think about a prompt box in the head of the calculator page, but is this the best way to go about it? I have now 3 pages, intro, calculator (done soon fingers crossed!) and another page, should i put the verification on the intro page? as some sort of prompt box? if so do i verify what is in the box then it takes the user straight to the next page? or if incorrect remain on this page? or is it done on the calculator page?

    (from a begging unorganised student!))

    Many thanks for help so far again

    Alan

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by confusedone View Post
    To access this calculator, the assignment requires that someone needs an email and password verification.
    A PHP script or other server-side solution will be best suited for that.

    JavaScript is the worst thing in the world to use to authenticate users and passwords. Anyone asking you to use JavaScript to authenticate users is only giving you a rope to hang yourself with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    A PHP script or other server-side solution will be best suited for that.

    JavaScript is the worst thing in the world to use to authenticate users and passwords. Anyone asking you to use JavaScript to authenticate users is only giving you a rope to hang yourself with.

    Hi tried that calculator but having some problems, need to get my head around it but ill be here all day doing it anyway grr

    And sorry the verification thing has to be done in javascript. It is a bit of a crazy course really. I asked once why we are doing something in a certain way as there are so many other options for an easier life AND more search engine friendly. I was told it was needed as it is on the curriculum. It was around then that i decided to wind my neck in and just try and get this qualification....

    Anyway yes email and password verification to access the calculator is what is needed, either from the first page or from a pop up of some sort. Any suggestions?

    Thanks

    Alan

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by confusedone View Post
    Anyway yes email and password verification to access the calculator is what is needed, either from the first page or from a pop up of some sort. Any suggestions?
    Not from me

    Though you require it for your course, I won't help anyone shoot themself in the neck. It's just not right.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Not from me

    Though you require it for your course, I won't help anyone shoot themself in the neck. It's just not right.
    lol ok well thanks for the pointers so far and yes it has to be javascript to do the verification. Anyone else help here??

    With regards to the calc code you posted, I thought i was doing something wrong or worked it out wrong, so i tried copying and pasting your code and seeing if the BMI calc works, but id doesnt seem to? have you just gave me parts of the code for guidance, or is this the complete code for a working calculator?

    Many thanks

    Alan

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by confusedone View Post
    have you just gave me parts of the code for guidance, or is this the complete code for a working calculator?
    That's the complete code. If you're having trouble, post a link to a test page, or compress and attach to your post, and we'll help you work out here the problem lies.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do i post a test page?

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <script type="text/javascript">
    var form = document.getElementById('calculatebmi');
    form.elements.calculate.onclick = calculateBMI;
    function calculateBMI() {
    var form = this.form,
    height = Number(form.elements.height.value),
    weight = Number(form.elements.weight.value),
    bmi;

    if (!height || !weight) {
    alert('Please enter a valid height and weight.');
    return;
    }
    bmi = weight / (height * height);
    bmi = Math.round(bmi * 100) / 100;
    form.elements.bmi.value = bmi;

    </script>

    <body>
    <h1 align="center">THE WALLPAPER CENTRE</h1>




    <form id="calculatebmi">
    <p><label>Height (metres): <input name="height"></label></p>
    <p><label>Weight (kilos): <input name="weight"></label></p>
    <p><input name="calculate" type="button" value="Calculate BMI"></p>
    <p>Calculated BMI: <input name="bmi"></p>
    </form>


    here is a copy of the code i have there, basically a copy of yours put together?

    Alan

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Thanks for that.

    Go back to post #2 and reread the part that starts with: "Please note:"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" type = "text/css" href="wpcss.css">
    <script type ="text/javascript" src="wallpaper.js">;</script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Wallpaper Calculator</title>
    <table border="1" align="center">
    <tr>
    <td><a href="wpsitehome.html">Homepage</a></td>
    <td><a href="calculator.html">Calculator</a></td>
    <td><a href="suppliers.html">Suppliers</a></td>

    < /tr>
    </table>
    </head>

    <body>
    <h1 align="center">THE WALLPAPER CENTRE</h1>

    <a href = "http://www.t-mobile.co.uk"
    onmouseover="document.images.tmobile.src='tmobile2.jpg';"
    onmouseout="document.images.tmobile.src='tmobile1.jpg';">
    <img src="tmobile1.jpg" border="0" name="tmobile"/></a>

    <a href = "http://www.o2.co.uk"
    onmouseover="document.images.o2.src='o22.jpg';"
    onmouseout="document.images.o2.src='o21.jpg';">
    <img src="o21.jpg" border="0" name="o2"/></a>

    <a href="http://orange.co.uk"
    onmouseover="document.images.orange.src='orange2.jpg';"
    onmouseout="document.images.orange.src='orange1.jpg';" >
    <img src="orange1.jpg" border ="0" name="orange"/></a>

    <a href="http://www.vodafone.co.uk/personal/index.htm"
    onmouseover="document.images.vodafone.src='vodafone2.jpg';"
    onmouseout="document.images.vodafone.src='vodafone1.jpg';">
    <img src="vodafone1.jpg" border="0" name="vodafone"/></a>

    <form id="calculatebmi">

    <p><label>Height (metres): <input name="height"></label></p>
    <p><label>Weight (kilos): <input name="weight"></label></p>
    <p><input name="calculate" type="button" value="Calculate BMI"></p>
    <p>Calculated BMI: <input name="bmi"></p>
    </form>

    <script type="text/javascript">
    var form = document.getElementById('calculatebmi');
    form.elements.calculate.onclick = calculateBMI;
    function calculateBMI() {
    var form = this.form,
    height = Number(form.elements.height.value),
    weight = Number(form.elements.weight.value),
    bmi;
    if (!height || !weight) {
    alert('Please enter a valid height and weight.');
    return;
    }
    bmi = weight / (height * height);
    bmi = Math.round(bmi * 100) / 100;
    form.elements.bmi.value = bmi;
    </script>

    </body>

    </html>


    This? do you mean the bit where you say put the script at the bottom, just before the </body> ?

    Sorry about this, im sure you can see from my line of questioning that this really isnt my forte, although ive got a bad feeling that it is going to be by the end of the year.

    Thanks again

    Alan

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You have also missed out the closing brace for the function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A simple way to make the calculator password protected is to add HTTP Authentication to the page with .htaccess & .htpasswd

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by transio View Post
    A simple way to make the calculator password protected is to add HTTP Authentication to the page with .htaccess & .htpasswd
    He's not allowed to do it the right way though, because his course instructor requires him to do it only with JavaScript.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for all your help here Paul. And yes Javascript is needed for rollover links, email and password verification and the calculator.

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by confusedone View Post
    Cheers for all your help here Paul. And yes Javascript is needed for rollover links, email and password verification and the calculator.
    So how will you be encoding the passwords - with a salted hash of some kind?

    You don't want to write this kind of code:

    Code:
    if (email === 'paul@site.com' && password === 'mypassword') {
    Because anyone loading the web page can view that javascript code, and easily work out which password to use for what email.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have honestly not a clue how i will be doing the code as of yet. Basically family circumstances led me to missing a great portion of the course, but the course tutor has let me remain as long as i get in the assignments and pass them. Never done anything computer related before, so new to JS or any other type of programming It is a creative front end course so a lot is ok, but the javascript aspect - well ive been literally trying this since thurs now, so 4 days, and that is what has led me to asking for help in forums. Not a clue what im doing really, as long as i can work out how to do the minimum requirements ill be more than happy. the min is rollover links (managed that one), email and password verification, and calculator, cant even seem to work out the calculator to do a simple calculation with option of metric or imperial. Oh and a choice for the user to change colour and remain throughout the site. 4 days and my head is truly sozzled!! So any takers to these tasks, im all ears.
    Sorry if tone sounds like that of a beaten man, but im feeling like it a bit!

    Alan

  19. #19
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok back for another stab! Ive done some code to validate email, only working on the @ and . parts but hey that is all the guidelines ask. The password part i was thinking of validating that they type in '123' and anything else will be wrong. Here is the script i have at the minute.

    <script type="text/javascript">
    function validateForm()
    {
    var x=document.forms["myForm"]["email"].value
    var y=document.forms["myForm"]["password"].value

    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length ||"y"!=123)

    {
    alert("Not a valid e-mail address");
    return false;
    }

    {alert"not a valid password};
    return false
    }
    </script>



    ||"y"!=123 - without this bit the email verification works 'fine' - fine enough for this project anyway. Any suggestions on what to add or where to make it possible for the password to be 123 and anything else would be incorrect? Im sure it will be smackingly obvious to someone, but ive tried a few variations without success.

    Many thanks

    Alan


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •