Need help again please

Discussion in 'Javascript' started by Linuxmade88, Feb 14, 2020.

  1. Linuxmade88

    Linuxmade88

    Joined:
    Jan 30, 2020
    Messages:
    9
    Likes Received:
    0
    Location:
    Grover Beach
    so i have this assignment and for the life of me i cant figure it out or even begin anywhere im hoping this will be enough information for some one to kinda give me a head in the right direction, ive tried reading all kinds everywhere and just dont know where to begin.

    Code (Javascript):
    <!DOCTYPE html>
    <html><head><style>p {font-family: arial; font-size: 20px;} </style></head>
    <body>

    <button onclick='buyApple()'>Purchase Appple</button>
    <button onclick='buyOrange()'>Purchase Orange</button>
    <button onclick='buyTortilla()'>Purchase Tortilla</button>
    <button onclick='freeMoney()'>Found Money</button>

    <!-- This marks space for a paragraph that we can update during the program -->
    <p id="balance"></p>

    <script>
    // javascript code begin
    // Step 1. initialize variables:
    change=100 // starting balance
    apple=10   // price of 1 apple
    orange=20  // price of 1 orange
    tortilla=30 // price of 1 tortilla
    foundMoney=25 // pretend found $25

    // initialize the user-interface when this page loads:
    document.getElementById("balance").innerHTML = "$"+change;


    // Step 2.  define event functions for each button
    function buyApple(){
       change -= apple;
       document.getElementById("balance").innerHTML = "$"+change;
    }
    function buyOrange(){
       change -= orange;
       document.getElementById("balance").innerHTML = "$"+change;
    }
    function buyTortilla(){
       change -= tortilla;
       document.getElementById("balance").innerHTML = "$"+change;
    }
    function freeMoney(){
       change += foundMoney;
       document.getElementById("balance").innerHTML = "$"+change;
    }


    // javascript code end
    </script>
    </body>
    </html>
     
    above is the code and below are my directions

    Bug report: the previous algorithm allows people to buy things when they don't have enough money.

    Correct that bug: Perform some maintenance on your Button's program.

    1. Don't allow purchases when the change is less than the purchase.
    2. Provide some feedback when that happens.
    How:

    • Using conditionals, prevent people from buying things when they don't have enough money.
    • For each button function, add some type of notification in your if-statments when that happens such as
      • You could give them a popup alert:
        alert("Denied: Insufficient balance");
      • Or write a message:
        document.write("Denied: Insufficient balance");
      • Or update a spot on the page (best method):
        document.getElementById("message").innetHTML= "Denied: Insufficient balance");
    this is a college intro class if someone can take a moment to explain to me where exactly i need to begin i would appreciate it, I want to learn so please just dont provide the answer.
     
    Linuxmade88, Feb 14, 2020
    #1
    1. Advertisements

  2. Linuxmade88

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    53
    Likes Received:
    9
    If you test the buttons (like buy the tortilla) the program will deduct the cost ($30) from the money you have (change). You can watch the balance go down as you press the button, but when it gets to $10 it keeps going on -$20 etc. You need to stop that
    Using conditionals, prevent people from buying things when they don't have enough money.
    The condition is an IF statement.
    Does that help? If not plase explain what I'm missing for you to understand.
     
    sunfighter, Feb 14, 2020
    #2
    1. Advertisements

  3. Linuxmade88

    Linuxmade88

    Joined:
    Jan 30, 2020
    Messages:
    9
    Likes Received:
    0
    Location:
    Grover Beach
    I get what your saying, what i dont get is where to begin the if statement do i put it at the end bit of the code or do i need to work it into a function? another part i dont get though is how to make change not go into the negative i keep trying something like this
    Code (Text):
    if ( change <= 0)
    and thats where im getting stuck my mind keeps wanting to make that works cause i have no idea what or where to begin. does that make any sense ?
     
    Linuxmade88, Feb 14, 2020
    #3
  4. Linuxmade88

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    53
    Likes Received:
    9
    NO, your IF statement is wrong. - You do know that if you place it (your code) into a COPY of your program, you can test it out and see if it's working the way you want.

    I'm sorry, but to answer your question I must spill the beans.

    Your IF statement should be placed in every BUY function, because your dealing with different prices. It should look like this look like this:














    Code (Text):

    function buyTortilla(){
        if(change < tortilla){
            document.getElementById("balance").innerHTML = "$"+change+"  Denied: Insufficient balance" ;
        }else{
            change -= tortilla;
            document.getElementById("balance").innerHTML = "$"+change;
        }
    }
     
     
    sunfighter, Feb 15, 2020
    #4
  5. Linuxmade88

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    53
    Likes Received:
    9
    Do you understand why?
    This is the big question.
     
    sunfighter, Feb 15, 2020
    #5
  6. Linuxmade88

    Linuxmade88

    Joined:
    Jan 30, 2020
    Messages:
    9
    Likes Received:
    0
    Location:
    Grover Beach
    No problem I actually figured it out with some notes from class and this is what i came up with, so now my only help if you could be so kind(seriously appreciate your time dude honestly this was the only forum to actually consistently help me ouch which was you and one other) i ran the program and everything works as is should except on part. when i run the program and purchase i believe its tortilla all the way till it displays on the header below "denied insufficient funds" , how do i get that to go away once i click that free money and i have more then enough funds, Does that make sense? cause i can give myself more free money but the "denied" part wont go away and ive been playing aroung with it and can figure it out.
    HTML:

    <!DOCTYPE html>
    <html><head><style>p {font-family: arial; font-size: 20px;} </style></head>
    <body>
    <em><h2>Sfarzo Grocery</h2></em>
    <button onclick='buyApple()'>Purchase Apple</button>
    <button onclick='buyOrange()'>Purchase Orange</button>
    <button onclick='buyTortilla()'>Purchase Tortilla</button>
    <button onclick='freeMoney()'>Found Money</button>


    <em><p id="balance"></p></em>


    <p id="bankrupt"></p>

    <script>

    var change = 100;
    var apple = 10;
    var orange = 20;
    var tortilla = 30;
    var foundMoney = 25;
    ///initialize user interface
    document.getElementById("balance").innerHTML = "$"+change;

    function buyApple(){
        if (change >= apple){
            change -= apple;
            document.getElementById("balance").innerHTML = "$"+change;
        } else {
            alert("Not enough to buy a apple");
        }
    }
    function buyOrange(){
        if (change >= orange){
            change -= orange;
            document.getElementById("balance").innerHTML = "$"+change;
        } else { document.getElementById("bankrupt").innerHTML = "DENIED: Insuficient funds!";
        }
    }
    function buyTortilla(){
        if (change >= tortilla){
            change -= tortilla;
            document.getElementById("balance").innerHTML = "$"+change;
        } else {
            document.getElementById("balance").innerHTML = "Not enough for a tortillla!";
        }
    }
    function freeMoney(){
        change += foundMoney
        document.getElementById("balance").innerHTML = "$"+change;
    }  


    </script>
    </body>
    </html>
     
    Linuxmade88, Feb 16, 2020
    #6
  7. Linuxmade88

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    53
    Likes Received:
    9
    The "problem" does not occur with the code I gave you. It occurs from the code your classmates supplied.
    First they have introduced "<p id="bankrupt"></p>" which is not needed and the place where the problem exists.

    Simple solution would have been to not use that and do as I suggested and just replicate the code I gave you in each function. I'll do that below, but before that: buyApple() function introduces an alert. Alerts are not good practice. They are frowned upon. Don't use them in final code or you will be looked down on. And they are not needed.

    FYI you have placed 3 Ls in tortilla again.
    Code (Text):

    <!DOCTYPE html>
    <!DOCTYPE html>
    <html><head><style>p {font-family: arial; font-size: 20px;font-style: italic;}</style></head>

    <body>
    <em><h2>Sfarzo Grocery</h2></em>
    <button onclick='buyApple()'>Purchase Apple</button>
    <button onclick='buyOrange()'>Purchase Orange</button>
    <button onclick='buyTortilla()'>Purchase Tortilla</button>
    <button onclick='freeMoney()'>Found Money</button>

    <p id="balance"></p>

    <script>
    var change = 100;
    var apple = 10;
    var orange = 20;
    var tortilla = 30;
    var foundMoney = 25;
    ///initialize user interface
    document.getElementById("balance").innerHTML = "$"+change;

    function buyApple(){
        if (change >= apple){
            change -= apple;
            document.getElementById("balance").innerHTML = "$"+change;
        } else {
            document.getElementById("balance").innerHTML = "$"+change+"  Not enough for an apple!";
        }
    }
    function buyOrange(){
        if (change >= orange){
            change -= orange;
            document.getElementById("balance").innerHTML = "$"+change;
        } else {
            document.getElementById("balance").innerHTML = "$"+change+"  Not enough for an orange!";
        }
    }
    function buyTortilla(){
        if (change >= tortilla){
            change -= tortilla;
            document.getElementById("balance").innerHTML = "$"+change;
        } else {
            document.getElementById("balance").innerHTML = "$"+change+"  Not enough for a tortilla!";
        }
    }
    function freeMoney(){
        change += foundMoney
        document.getElementById("balance").innerHTML = "$"+change;
    }
    </script>
    </body>
    </html>
     
    PS
    If I were your instructor I would say:
    These three functions all look similar. They seem to have the same code in each. Bad practice. Write one function that does the same thing as these.

    Another PS
    <em> is used to emphasize text and not a paragraph so <em><p id="balance"></p></em> is wrong
    Use <p><em><span id="balance"></span></em></p>

    Or better yet and less complex use CSS
    <style>p {font-family: arial; font-size: 20px;font-style: italic;}</style>
     
    Last edited: Feb 16, 2020
    sunfighter, Feb 16, 2020
    #7
  8. Linuxmade88

    Linuxmade88

    Joined:
    Jan 30, 2020
    Messages:
    9
    Likes Received:
    0
    Location:
    Grover Beach
    Ok thanks i appreciate it i'm gonna update it now , one last thing. how would you write all those functions in one?

    (
    PS
    If I were your instructor I would say:
    These three functions all look similar. They seem to have the same code in each. Bad practice. Write one function that does the same thing as these.)

    im curious to see how you do that and didnt know you could do that.
     
    Linuxmade88, Feb 16, 2020
    #8
  9. Linuxmade88

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    53
    Likes Received:
    9
    This is done by passing information to a function, The information in this case is called a parameter or more commonly an argument. Keeping everything the same has me passing two arguments one with quotes to pass a variable string (the name of the item) and one without the quotes that is the variable assigned in JS to be the cost of the item.
    Code (Text):

    <!DOCTYPE html>
    <html><head><style>p {font-family: arial; font-size: 20px;font-style: italic;}</style></head>

    <body>
    <em><h2>Sfarzo Grocery</h2></em>
    <button onclick='buyItem(apple,"apple")'>Purchase Apple</button>
    <button onclick='buyItem(orange,"orange")'>Purchase Orange</button>
    <button onclick='buyItem(tortilla,"tortilla")'>Purchase Tortilla</button>
    <button onclick='freeMoney()'>Found Money</button>

    <p id="balance"></p>

    <script>
    var change = 100;
    var apple = 10;
    var orange = 20;
    var tortilla = 30;
    var foundMoney = 25;
    ///initialize user interface
    document.getElementById("balance").innerHTML = "$"+change;
    document.getElementById("temp").innerHTML = "$"+change;

    function buyItem(cost,itemName){
        if (change >= cost){
            change -= cost;
            document.getElementById("balance").innerHTML = "$"+change;
        } else {
            document.getElementById("balance").innerHTML = "$"+change+"  Not enough for an "+itemName+"!";
        }
    }

    function freeMoney(){
        change += foundMoney
        document.getElementById("balance").innerHTML = "$"+change;
    }
    </script>
    </body>
    </html>
     
     
    sunfighter, Feb 17, 2020
    #9
  10. Linuxmade88

    Linuxmade88

    Joined:
    Jan 30, 2020
    Messages:
    9
    Likes Received:
    0
    Location:
    Grover Beach
    im sorry to bug you again if you dont have the time to help me with this again its ok , i just cant see the tutor till next week for help. Im going to show you the code he gave us and the instructions and what ive been trying and hopefully you can guide me to the light.
    Code (Text):
    <!DOCTYPE html><html><body>

    90°<input type="range" min="90" max="110" id="temperature" step=.1 oninput="changeTemp()">110°
    <p id="assessmentText">Move the slider</p>
    <img id="assessmentImage" width=50 src='https://www.maxpixel.net/static/photo/1x/Questions-Puzzle-Cartoon-Consider-Smiley-3082809.png'>


    <script>
    const temperatureFever = 99.5 ; // maximum
    const temperatureHypothermia = 95 ; // minimum
    const imageFever='https://cdn.pixabay.com/photo/2018/12/24/17/07/catch-a-cold-3893262_960_720.png';
    const imageHypothermia='https://cdn.pixabay.com/photo/2018/12/19/20/23/samuel-3884706_960_720.png';
    const imageNormal='https://cdn.pixabay.com/photo/2019/02/19/19/45/thumbs-up-4007573_960_720.png';
    changeTemp();
    function changeTemp() { // Automatically happens when the slider
      // Algorithm step 1: get the temperature
      // Implementation: get it from the range finder:
      var userResponse=document.getElementById("temperature").value;
      var assessmentText='?';
      var assessmentImage='';
     
      // Algorithm step 2: assess
      // Implementation: not much different than before
      if ( false /* REPLACE THIS false WITH THE LOGICAL CONDITIONAL EXPRESSION*/ ) {
         assessmentText=" Hypothermia";
         assessmentImage=imageHypothermia;
      }
      else if (false /* REPLACE THIS false WITH THE LOGICAL CONDITIONAL EXPRESSION*/ ) {
         assessmentText=" Fever";
         assessmentImage=imageFever;
      }
      else {
         assessmentText=" Normal";
         assessmentImage=imageNormal;
      }
      // Algorithm step 3: display user-friendly output
      // Implementation: using variables makes this code work every time
      document.getElementById('assessmentText').innerHTML=userResponse+'° '+assessmentText;
      document.getElementById('assessmentImage').src=assessmentImage;
    }
    </script></body></html>

    Algorithm to Assess Temperature
    The Algorithm for Patient Temperature:

    1. get the temperature
      • retrieved from the range finder widget
    2. assess it with conditionals and variables
      • some combination of two variables and < or >
    3. output a user-friendly message
      • some text and images
    Your Task:
    For each of the two if-statements: replace false , as indicated below in the yellow boxes, with the correct conditional expressions for this program to make sense.

    So first what i have been trying for the first false in the hypothermia if statement is replacing false with (changeTemp <= temperatureHypothermia) #it obviously doesnt work like this or i wouldnt be here but am i at all in the right direction?
     
    Linuxmade88, Feb 21, 2020 at 6:30 PM
    #10
  11. Linuxmade88

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    53
    Likes Received:
    9
    changeTemp is the name of the function. Look lower and you'll see
    document.getElementById('assessmentText').innerHTML=userResponse+'° '+assessmentText;
    You can also find it in the first variable assignment:
    var userResponse=document.getElementById("temperature").value;

    If we use that - the two FALSE statements become:
    Code (Text):

    if (userResponse < temperatureHypothermia) {
        assessmentText=" Hypothermia";
        assessmentImage=imageHypothermia;
    }
        else if (userResponse > temperatureFever) {
            assessmentText=" Fever";
            assessmentImage=imageFever;
    }
     
    This does not look like a problem with coding, but understanding what's in the code.
     
    sunfighter, Feb 22, 2020 at 1:34 AM
    #11
  12. Linuxmade88

    Linuxmade88

    Joined:
    Jan 30, 2020
    Messages:
    9
    Likes Received:
    0
    Location:
    Grover Beach
    I'm trying to understand why its the userResponse that is able to make the code work. I understand its a variable now looking threw it a bit more i think i was just a bit overwhelmed by the looks of the code theres alot of stuff in here i dont understand and we just havent learned yet. what im confused about is the variable (to me) says (var userResponse=document.getElementById("temperature").value;) correct me if im wrong or help me make sense of it but says when i use the userResponse variable it will get the information from the id created temperature in this case but is the id="temperature" the slider?


    if (userResponse < temperatureHypothermia) {
    assessmentText=" Hypothermia";
    assessmentImage=imageHypothermia;

    so i dont know if i even make sense trying to explain it how i see it but i guess can you explain a bit better why its the userRespone id that is making the code work when you move the slider? i thought that the (id=) was just i space reserved in the code to show information.
     
    Linuxmade88, Feb 24, 2020 at 3:22 AM
    #12
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.