Need help again please

Joined
Jan 30, 2020
Messages
18
Reaction score
0
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.

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.
 
Joined
Nov 27, 2019
Messages
163
Reaction score
28
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.
 
Joined
Jan 30, 2020
Messages
18
Reaction score
0
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:
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 ?
 
Joined
Nov 27, 2019
Messages
163
Reaction score
28
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:
function buyTortilla(){
    if(change < tortilla){
        document.getElementById("balance").innerHTML = "$"+change+"  Denied: Insufficient balance" ;
    }else{ 
        change -= tortilla;
        document.getElementById("balance").innerHTML = "$"+change;
    }
}
 
Joined
Jan 30, 2020
Messages
18
Reaction score
0
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>
 
Joined
Nov 27, 2019
Messages
163
Reaction score
28
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:
<!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:
Joined
Jan 30, 2020
Messages
18
Reaction score
0
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.
 
Joined
Nov 27, 2019
Messages
163
Reaction score
28
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:
<!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>
 
Joined
Jan 30, 2020
Messages
18
Reaction score
0
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:
<!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?
 
Joined
Nov 27, 2019
Messages
163
Reaction score
28
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:
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.
 
Joined
Jan 30, 2020
Messages
18
Reaction score
0
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.
 
Joined
Nov 27, 2019
Messages
163
Reaction score
28
The best way to learn programming is to play with it (things) and see what happens. I don't know what you use as an editor, but the easiest way I found is to use vscode https://code.visualstudio.com/ - And get the extension Live Server - this lets you make a change in the code and watch the browser update automatically.

If you have just your browser and vscode open - hold down window key and hit the arrow key of your choice and what ever was open goes to that half of the screen and the other goes to the other side. Now you can change the code and watch the browser refresh and see what your changes did,
 
Joined
Jan 30, 2020
Messages
18
Reaction score
0
well thank you i appreciate your time dude, ive just been using sublime text and opening the file in firefox so see if it works, last time i tried visual studio being a beginner i have no idea what any of those plugins are or how they work but im going to give it another try cause ive tried it a few different times cause i hear its great i just cant get it setup to my needs. again thank you for your time bro your one of the good ones out there thank you.
 
Joined
Jan 30, 2020
Messages
18
Reaction score
0
hey how would i consolidate all these functions into one is that even possible?
Code:
<!DOCTYPE html>
<html>
<head><style>
* { font-family: arial }
</style></head>
<body>
<h2 style="background-color:lightyellow">Addition Calculator</hr>
<div style="background-color:lightblue">
<button onclick="funcOne()">+1</button>
<button onclick="funcTwo()">+2</button>
<button onclick="funcThree()">+3</button>
<button onclick="funcFour()">+4</button>
<button onclick="funcFive()">+5</button>
<button onclick="funcSix()">+6</button>
<button onclick="funcSeven()">+7</button>
<button onclick="funcEight()">+8</button>
<button onclick="funcNine()">+9</button>
<!-- ASSIGNMENT Task 1.: Copy the button code above  -->
<!--- For example:
<button onclick="funcFour()">+4</button>
-->

<button onclick="clearTotal()">Clear</button>
</div>
<p id="message"></p>

<script>
// javascript code begin
// These two lines of code happen as soon as the program runs:
var total=0; // start with zero for total
showTotal(); // display this initial total

// These functions only trigger when a button is pressed:
function funcOne(){
   // Algorithm: 1) add 1 to total, 2) display to User
   total = total + 1;
   showTotal();
}
function funcTwo(){
   // Algorithm: 1) add 2 to total, 2) display to User
   total = total + 2;
   showTotal();
}
function funcThree(){
   // Algorithm: 1) add 3 to total, 2) display to User
   total = total + 3;
   showTotal();
}
function funcFour(){
    total = total + 4;
    showTotal();
}
function funcFive(){
    total = total + 5;
    showTotal();
}
function funcSix(){
    total = total + 6;
    showTotal();
}
function funcSeven(){
    total = total + 7;
    showTotal;
}
function funcEight(){
    total = total + 8;
    showTotal();
}
function funcNine(){
    total = total + 9;
    showTotal();
}
// ASSIGNMENT Task 2: create a function for each new button
// Copy and modify the code above.
// START ADDING YOUR CODE HERE:
/// for example:
/* function funcFour(){
   // Algorithm: 1) add 3 to total, 2) display to User
   total = total + 4;
   showTotal();
} */


// END OF ADDING YOUR CODE
function clearTotal(){
  // Algorithm: 1) set total to zero, 2) display to User
  total=0;
  showTotal();
}
//--------------------------------------------------------------
// A utility function simply because the code below is correct but gross to look at.
// Everywhere you see showTotal() above, will be automatically replaced with this code.
function showTotal(){// Algorithm: use this scary code to change text
  document.getElementById("message").innerHTML=total;
}

// javascript code end
</script>
</body>
</html>
 
Joined
Nov 27, 2019
Messages
163
Reaction score
28
Code:
<!DOCTYPE html>
<html>
<head><style>
* { font-family: arial }
</style></head>
<body>
<h2 style="background-color:lightyellow">Addition Calculator</hr>
<div style="background-color:lightblue">
  <button onclick="myFunction(1)">+1</button>
  <button onclick="myFunction(2)">+2</button>
  <button onclick="myFunction(3)">+3</button>
  <button onclick="myFunction(4)">+4</button>
  <button onclick="myFunction(5)">+5</button>
  <button onclick="myFunction(6)">+6</button>
  <button onclick="myFunction(7)">+7</button>
  <button onclick="myFunction(8)">+8</button>
  <button onclick="myFunction(9)">+9</button>
<!-- ASSIGNMENT Task 1.: Copy the button code above  -->
<!--- For example:
<button onclick="funcFour()">+4</button>
-->

<button onclick="clearTotal()">Clear</button>
</div>
<p id="message"></p>

<script>
// javascript code begin
// These two lines of code happen as soon as the program runs:
var total=0; // start with zero for total
showTotal(); // display this initial total

// This function only trigger when a button is pressed:

function myFunction(val){
  total = total + val;
  showTotal();
}

// ASSIGNMENT Task 2: create a function for each new button
// Copy and modify the code above.
// START ADDING YOUR CODE HERE:
/// for example:
/* function funcFour(){
   // Algorithm: 1) add 3 to total, 2) display to User
   total = total + 4;
   showTotal();
} */



// END OF ADDING YOUR CODE
function clearTotal(){
  // Algorithm: 1) set total to zero, 2) display to User
  total=0;
  showTotal();
}
//--------------------------------------------------------------
// A utility function simply because the code below is correct but gross to look at.
// Everywhere you see showTotal() above, will be automatically replaced with this code.
function showTotal(){// Algorithm: use this scary code to change text
  document.getElementById("message").innerHTML=total;
}

// javascript code end
</script>
</body>
</html>
 
Joined
Jan 30, 2020
Messages
18
Reaction score
0
thank you again im gonna play around a bit with this to understand it better, I already turn my assignments in before I ask for your help but im always trying to improve my understanding of what I couldve done so I appreciate your help and patience everytime thank you
 
Joined
Jan 30, 2020
Messages
18
Reaction score
0
Ok ive been doing pretty good all the way to this point and I havent turned this assignment in yet cause I dont understand really what its asking of me , pretty much where do I start this isnt a mandatory assignment at all but still I like to do these for fun but this is the only one left and the only one I have no idea where to begin .

Program Description:
Given some number of eggs, this program calculates:

  1. the maximum number of full egg containers, where each container can hold one dozen eggs
  2. the number of left over eggs not packaged
Input:
  1. numberOfEggs : a positive integer number
Output:
  1. containerCount12 : the number of dozens
  2. notPackaged : the number of left over eggs
 
Joined
Nov 27, 2019
Messages
163
Reaction score
28
At first this looks as if something is missing, the number of eggs, but this is an algebra question.
Given x amount of eggs how many cartons will I have and how many left over.
To write the function we must know this operator => % The modulus operator. When we divide with it we get the remainder, but we don't have any idea what the quotient is. ex.: 23%5 gives us a remainder of 3. So that would be part of the answer. If we then subtract that from the amount(23) we will have a number that will yield an integer or in our case the number of containers

Does that make sense to you?
Write the function and test it and post it here.
See Ya
 
Joined
Jan 30, 2020
Messages
18
Reaction score
0
It make sense let me see if I can figure it out and ill post it here tomorrow, math has always been the worse subject for me even basic math but somehow I love to try and understand a little code for fun lol.
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,733
Messages
2,569,439
Members
44,829
Latest member
PIXThurman

Latest Threads

Top