Skip to content

Final Version #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BrendenBee wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Final Version #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 31 additions & 21 deletions Calulator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,71 +8,81 @@

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="./script.js" async defer></script>

<link rel="stylesheet" href="style.css">
</head>
<body class="bg-dark">
<div class="container">
<!-- <div class="container">
<div class="row"
<div class="buttonSpace">
<button id="splitBtn">Split!</button>
<button id="resetBtn">Reset</button>
</div>
<div id="perPerson">0</div>
</form>
</div>
<div class="col-md-6 mx-auto">
</div> -->

<div class="col-md-6 mx-auto">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">Tip Calculator</h1>
<form id="tip-form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" id="billTotal" placeholder="Total Bill">
<input type="number" class="form-control" id="userInputBill" placeholder="Total Bill">
<!-- <button class="btn btn-secondary" id="subButton">Submit</button> -->
</div>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Fair</label>
<input class="form-check-input" type="checkbox" id="userInputQualityFair">
<label class="form-check-label" for="flexSwitchCheckDefault">Fair - 10%</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Good</label>
<input class="form-check-input" type="checkbox" id="userInputQualityGood" >
<label class="form-check-label" for="flexSwitchCheck">Good - 15%</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Awesome</label>
<input class="form-check-input" type="checkbox" id="userInputQualityAwesome">
<label class="form-check-label" for="flexSwitchCheck">Awesome - 20%</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Outstanding</label>
<input class="form-check-input" type="checkbox" id="userInputQualityOutstanding">
<label class="form-check-label" for="flexSwitchCheck">Outstanding - 25%</label>
</div>

<p>How many people are sharing the bill?</p>
<input id="userInputSize" type="text" placeholder="Number of People">
<!-- <button type="button" id="calculate">Submit</button> -->

<div class="form-group tipPersent">
<div class="input-group">
<label for="">Tip:</label>
<!-- <label for="">Tip:</label> -->


<input type="range" class="form-control" id="tipInput" value="0">
<span class="input-group-addon" id="tipOutput"></span>
<!-- <input type="range" class="form-control" id="tipInput" value="0">
<span class="input-group-addon" id="tipOutput"></span> -->
</div>
</div>



</form>
<hr>

<!-- RESULTS -->
<div id="results" class="pt-4">
<h5>Results</h5>
<h5><button type="button" onclick="totalBillFunc(); OrderQualityFunc(); partySizeFunc(); calculateTotalFunc(); totalTipFunc();" id="calculate">Calculate</button></h5>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Tip amount</span>
<input type="number" class="form-control" id="tipAmount" disabled>
<span class="input-group-addon">Total tip:</span>
<input type="number" class="form-control" id="totalTip" disabled>
</div>
</div>

<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Total Bill with Tip</span>
<span class="input-group-addon">Each person pays:</span>
<input type="number" class="form-control" id="totalBillWithTip" disabled>
</div>
</div>
Expand All @@ -83,13 +93,14 @@ <h5>Results</h5>
</div>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<script src="Calulator.js" ></script>



</body>
Expand All @@ -106,4 +117,3 @@ <h5>Results</h5>




213 changes: 213 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
11 changes: 11 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}