okay thanks, also I want to make the original bill and the tip be added together when the button is clicked but when using the ‘add’ function in the line, nothing shows (ignore the comments made)
var pickEvent
var img;
var img2;
var img3;
var sel;
var sel1;
var title;
var bill;
var tip;
var output;
var output2;
var output3;
// preload some images
function preload() {
img = loadImage('mandarin.jpg');
img2 = loadImage('bostonpizza.jpg');
img3 = loadImage('nandos.jpg');
}
function setup() {
title = createElement('h1', 'Tip calculator'); // Create the main title for the question
title.position(265, 40); // Set the position of the title
createCanvas(900, 500);
bill = createInput(); // Create the input box for the user to enter a number
bill.position(312, 175); // Set the position of the input box
textAlign(CENTER);
background(200);
sel = createSelect();
sel.position(315, 110);
sel.option('Mandarins');
sel.option('Nandos');
sel.option('Boston Pizza');
sel.selected(pickEvent);
textAlign(CENTER);
background(200);
sel1 = createSelect();
sel1.position(325, 245);
sel1.option('Very Bad');
sel1.option('Bad');
sel1.option('Okay');
sel1.option('Good');
sel1.option('Great');
sel1.option('Excellent');
sel1.option('Random Amount');
sel1.selected('Service');
output = createElement('h3', "") // Creating a placeholder for the final output
output2 = createElement('h3' , "")
output3 = createElement('h3' , "")
button = createButton('tip it'); // Create a button and the name inside the button
button.position(345, 285); // Set the position of the button
button.mousePressed(calculation); // When the mouse button is pressed on the button it goes to the calculation function
}
function draw() {
background(153);
let pickEvent = sel.value()
if (pickEvent == 'Mandarins') {
background(img);
}
if (pickEvent == 'Nandos') {
background(img3);
}
if (pickEvent == 'Boston Pizza') {
background(img2);
}
}
// Calculate the conversion
function calculation() {
let conversion = sel1.value(); // Set the drop down menu option to the variable conversion
//convert fahrenheit to celsius
if (conversion == ('Very Bad')) { // Run this if the selection is set to F to C
tip = round(((bill.value() * .01), 2)) // Math to convert
total = tip + bill.value()
output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
output2.html('Tip: ' + tip)
output3.html('Total: ' + total)
output.position(315, 300) // Set the position of the answer
output2.position(315, 325) // Set the position of the answer
output3.position(315, 350) // Set the position of the answer
}
if (conversion == ('Bad')) { // Run this if the selection is set to F to C
tip = round(((bill.value() * .02), 3)) // Math to convert
total = tip + bill.value()
output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
output2.html('Tip: ' + tip)
output3.html('Total: ' + total)
output.position(315, 300) // Set the position of the answer
output2.position(315, 325) // Set the position of the answer
output3.position(315, 350) // Set the position of the answer
}
if (conversion == ('Okay')) { // Run this if the selection is set to F to C
tip = round(((bill.value() * .03), 4)) // Math to convert
total = tip + bill.value()
output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
output2.html('Tip: ' + tip)
output3.html('Total: ' + total)
output.position(315, 300) // Set the position of the answer
output2.position(315, 325) // Set the position of the answer
output3.position(315, 350) // Set the position of the answer
}
if (conversion == ('Good')) { // Run this if the selection is set to F to C
tip = round(((bill.value() * .04), 5)) // Math to convert
total = tip + bill.value()
output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
output2.html('Tip: ' + tip)
output3.html('Total: ' + total)
output.position(315, 300) // Set the position of the answer
output2.position(315, 325) // Set the position of the answer
output3.position(315, 350) // Set the position of the answer
}
if (conversion == ('Great')) { // Run this if the selection is set to F to C
tip = round(((bill.value() * .05), 6)) // Math to convert
total = tip + bill.value()
output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
output2.html('Tip: ' + tip)
output3.html('Total: ' + total)
output.position(315, 300) // Set the position of the answer
output2.position(315, 325) // Set the position of the answer
output3.position(315, 350) // Set the position of the answer
}
if (conversion == ('Excellent')) { // Run this if the selection is set to F to C
tip = round(((bill.value() * .06), 7)) // Math to convert
total = tip + bill.value()
output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
output2.html('Tip: ' + tip)
output3.html('Total: ' + total)
output.position(315, 300) // Set the position of the answer
output2.position(315, 325) // Set the position of the answer
output3.position(315, 350) // Set the position of the answer
}
if (conversion == ('Random Amount')) { // Run this if the selection is set to F to C
tip = round(((bill.value() * .01), 2)) // Math to convert
total = tip + bill.value()
output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
output2.html('Tip: ' + tip)
output3.html('Total: ' + total)
output.position(315, 300) // Set the position of the answer
output2.position(315, 325) // Set the position of the answer
output3.position(315, 350) // Set the position of the answer
}
}