From 3dd5ff6fe15e43e5368cf42c950ec16c8ada2487 Mon Sep 17 00:00:00 2001 From: BrendenBee Date: Thu, 15 Jul 2021 11:20:47 -0500 Subject: [PATCH] Final Version --- Calulator.html | 52 +++++++----- script.js | 213 +++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 11 +++ 3 files changed, 255 insertions(+), 21 deletions(-) create mode 100644 script.js create mode 100644 style.css diff --git a/Calulator.html b/Calulator.html index 75d01ab..8feb365 100644 --- a/Calulator.html +++ b/Calulator.html @@ -8,10 +8,12 @@ + + -
+ + +

Tip Calculator

$ - + +
- - + +
- - + +
- - + +
- - + +
+ +

How many people are sharing the bill?

+ +
- + - - +
+ +
-
Results
+
- Tip amount - + Total tip: +
- Total Bill with Tip + Each person pays:
@@ -83,13 +93,14 @@
Results
+ - + @@ -106,4 +117,3 @@
Results
- diff --git a/script.js b/script.js new file mode 100644 index 0000000..df25769 --- /dev/null +++ b/script.js @@ -0,0 +1,213 @@ +let totalBill; +function totalBillFunc() { + totalBill = document.getElementById('userInputBill').value; + console.log(totalBill); + return totalBill; +}; + +// let subButton = document.getElementById('subButton'); +// subButton.addEventListener('click', totalBillFunc, false); + + +let orderQuality; +function OrderQualityFunc() { + + + if (document.getElementById('userInputQualityFair').checked === true) { + orderQuality = 1.10; + } else if (document.getElementById('userInputQualityGood').checked === true) { + orderQuality = 1.15; + } else if (document.getElementById('userInputQualityAwesome').checked === true) { + orderQuality = 1.20; + } else { + orderQuality = 1.25; + + }; +}; + + // this disables the on checked boxes (should have used radio instead...) +$(':checkbox').change(function(){ + // "this" is the current checkbox + $(':checkbox').not(this).prop('disabled', this.checked); +}); + +// }; +// function OrderQualityGoodFunc() { +// OrderQuality = document.getElementById('userInputQualityGood').value; +// OrderQuality = 1.10; +// console.log(userInputQuality); +// return userInputQuality; +// }; +// function OrderQualityAwesomeFunc() { +// OrderQuality = document.getElementById('userInputQualityAwesome').value; +// OrderQuality = 1.15; +// console.log(userInputQuality); +// return userInputQuality; +// }; +// function OrderQualityOutstandingFunc() { +// OrderQuality = document.getElementById('userInputQualityOutstandingOutstandng').value; +// OrderQuality = 1.20; +// console.log(userInputQuality); +// return userInputQuality; +// }; + +let partySize; +function partySizeFunc() { + partySize = document.getElementById('userInputSize').value; + console.log(partySize); + return partySize; +}; +let totalAfterTip; +let totalTip; + + + + function calculateTotalFunc() { + totalAfterTip = (totalBill * orderQuality) / partySize; + totalAfterTip = Math.round(totalAfterTip * 100) / 100; + totalAfterTip = totalAfterTip.toFixed(2); + console.log(orderQuality); + console.log(totalAfterTip); + console.log(totalBill); + console.log(partySize); + document.getElementById("totalBillWithTip").placeholder = totalAfterTip; + return totalAfterTip; + } + + + + function totalTipFunc() { + totalTip = (orderQuality * totalBill - totalBill); + totalAfterTip = Math.round(totalAfterTip * 100) / 100; + totalTip = totalTip.toFixed(2); + console.log(totalTip); + document.getElementById("totalTip").placeholder = totalTip; + return totalTip; + } + + + + + + + + + + + + + + + + + + + +// let userInputBill = 10; + +// Gets the variable set by the text box +// let totalBill = function() { +// let userInput = document.getElementById('userInputBill').value; +// //To make sure we have the correct value +// console.log(userInput); +// return userInput; +// } +// let totalBill; +// function totalBillFunc() { +// totalBill = document.getElementById('userInputBill').value; +// console.log(totalBill); +// return totalBill; +// }; + +// let subButton = document.getElementById('subButton'); +// subButton.addEventListener('click', totalBillFunc, false); + +// let totalBill; +// function totalBillFunc() { +// totalBill = document.getElementById('userInputBill').value; +// console.log(totalBill); +// return totalBill; +// }; + +// //new line +// // console.log(totalBill()); + +// // let calculator = { +// // add: function(a,b) {return a+b; +// // }, +// // }; +// // function (a,b){console.log("I don't exist!")}; +// // //point is cleaner code scope management etc +// // console.log(calculator.add(1,2)); + +// // let totalBill = { +// // input: function(userInput) { +// // userInput = document.getElementById('userInputBill').value; +// // return userInput; +// // } + +// // } + +// // console.log(totalBill.input(userInputBill)); + + + + + +// function testFunc() { +// let newValue = totalBill * 1.5; +// console.log(newValue); +// return newValue; +// }; + +// let subButton2 = document.getElementById('subButton2'); +// subButton2.addEventListener('click', testFunc, false); + + + + + + + + +// function calculateTip (){ + +// let totalBill = document.getElementById('userInputTotalBill').value +// let partySize = document.getElementById('userInputPartySize').value +// let serviceQuality = document.getElementById('userInputServiceQuality').value +// } + + + + + +// console.log(totalBill.userInputBill); + + +// let numberOfGuests = function() { +// let userInput = document.getElementById('userInputGuests').value; +// //To make sure we have the correct value +// console.log(userInputGuests); +//} +// let numberOfGuests = function() { +// let userInput = document.getElementById('userInputGuests').value; +// //To make sure we have the correct value +// console.log(userInputGuests); +// } + +// test line 2 + + +// let qualityOfService = function() { +// let userInput = document.getElementById('userInputService').value; +// //To make sure we have the correct value +// console.log(userInputService); +// } + + + + + + +// var subButton = document.getElementById('subButton'); +// subButton.addEventListener('click', getInput, false) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..808e83f --- /dev/null +++ b/style.css @@ -0,0 +1,11 @@ +/* Chrome, Safari, Edge, Opera - Hide arrow keys input*/ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox - Hide arrow keys input*/ +input[type=number] { + -moz-appearance: textfield; +} \ No newline at end of file