Skip to content
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

Jump to bottom

Numerous improvements #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Numerous improvements #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8706767
Fixed typo
elmaester Oct 1, 2019
370f1b7
Numerous improvements
elmaester Oct 2, 2019
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
95 changes: 60 additions & 35 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="styles.css" />
<title>Tip Calculator</title>
</head>
<body>

</head>
<body>
<div class="calculator-container">
<div class="title">
<h1>Tip Calculator</h1>
<div class="title">
<h1>Tip Calculator</h1>
</div>
<form class="data-for-calculator">
<label for="amountBill">Amount $</label>
<input
id="amountBill"
type="number"
name="bill-amount"
placeholder="Amount of bill"
/>
<label for="percentageTip">Tip %</label>
<input
id="percentageTip"
type="number"
name="tip-percentage"
placeholder="Percentage to tip"
/>
<label for="peopleNumber">People #</label>
<input
id="peopleNumber"
type="number"
name="people-number"
placeholder="Number of people"
/>
</form>
<div class="button-flex">
<input
onclick="reset()"
type="button"
id="reset-button"
value="Reset"
/>
<input
onclick="calculateTip()"
type="button"
id="calculate-button"
value="Calculate"
/>
</div>
<div class="calculate-result">
<div class="result">
<p>Tip amount:</p>
<p id="tipAmount"></p>
</div>
<form class="data-for-calculator">
<input id="amountBill" type="number" name="bill-amount" placeholder="Amount of bill">
<input id="percentageTip" type="number" name="tip-percentage" placeholder="Percentage to tip">
<input id="peopleNumber" type="number" name="people-number" placeholder="Number of people">
</form>
<div class="button-flex">
<input type="button" id="reset-button" value="Reset">
<input onclick="calculateTip()" type="button" id="calculate-button" value="Calculate">
<div class="result">
<p>Total to pay:</p>
<p id="totalPay"></p>
</div>
<div class="calculate-result">
<div class="result">
<p>Tip amount:</p>
<p id="tipAmount"></p>
</div>
<div class="result">
<p>Total to pay:</p>
<p id="totalPay"></p>
</div>
<div class="result">
<p>Total per person:</p>
<p id="perPerson"></p>
</div>
<div class="result">
<p>Total per person:</p>
<p id="perPerson"></p>
</div>

</div>
</div>

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

</body>
</html>
</body>
</html>
42 changes: 31 additions & 11 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,35 @@
function calculateTip() {
const billAmount = document.getElementById('amountBill').value;
const tipPercentage = document.getElementById('percentageTip').value;
const peolpeNumber = document.getElementById('peopleNumber').value;


const finalTip = Math.floor((billAmount * (tipPercentage / 100)) / peolpeNumber);
const totalToPay = billAmount + finalTip;

document.getElementById('tipAmount').innerText = finalTip;
document.getElementById('totalPay').innerText = totalToPay;
// document.getElementById('perPerson').innerText = finalTip;
const billAmount = document.getElementById("amountBill").value;
const tipPercentage = document.getElementById("percentageTip").value;
const peopleNumber = document.getElementById("peopleNumber").value;

// Math was wrong
const finalTip = Math.floor(billAmount * (tipPercentage / 100));

// Without parseInt, as you had this previosly, the variables were evaluated as strings, not numbers. Because of that the result was wrong.
const totalToPay = parseInt(billAmount) + parseInt(finalTip);
// toFixed limits numbers shown after a decimal point. I.e. you won't get 0.6666666666666666... but 0.66 instead (if the argument passed to toFixed is 2)
const perPerson = (totalToPay / parseInt(peopleNumber)).toFixed(2);

if (
!isNaN(finalTip) &&
!isNaN(totalToPay) &&
!isNaN(perPerson) &&
finalTip > 0 &&
totalToPay > 0 &&
perPerson > 0
) {
document.getElementById("tipAmount").innerText = `$${finalTip}`;
document.getElementById("totalPay").innerText = `$${totalToPay}`;
document.getElementById("perPerson").innerText = `$${perPerson}`;
} else alert("Please enter valid numbers into each input field!");
}

const reset = () => {
document.getElementById("amountBill").value = "";
document.getElementById("percentageTip").value = "";
document.getElementById("peopleNumber").value = "";
document.getElementById("tipAmount").innerText = "";
document.getElementById("totalPay").innerText = "";
document.getElementById("perPerson").innerText = "";
};
136 changes: 77 additions & 59 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,98 +1,116 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap");

body {
font-family: 'Roboto', sans-serif;
max-width: 700px;
margin: auto;
background-image: url("dan-gold-E6HjQaB7UEA-unsplash.jpg");
background-size: 100%;
font-family: "Roboto", sans-serif;
max-width: 700px;
margin: auto;
background-image: url("dan-gold-E6HjQaB7UEA-unsplash.jpg");
background-repeat: no-repeat;
background-size: cover;
text-shadow: 1px 1px 1px #000;
}


.calculator-container {
background-color: rgb(155, 168, 159, 0.4);
height: 400px;
width: 400px;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 150px;
margin-left: 130px;
border-radius: 20px;
background-color: rgb(155, 168, 159, 0.4);
height: 400px;
width: 400px;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 150px;
margin-left: 130px;
border-radius: 20px;
}

.data-for-calculator{
display: flex;
flex-direction: column;
align-items: center;
margin: 0px 50px 10px 50px;
.data-for-calculator {
display: flex;
flex-direction: column;
align-items: center;
margin: 0px 50px 10px 50px;
}

.data-for-calculator input {
margin: 10px;
display: flex;
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 18px;
border: 1px solid #7a8388;
box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.31);
margin: 10px;
display: flex;
text-align: center;
font-family: "Roboto", sans-serif;
font-size: 18px;
border: 1px solid #7a8388;
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.31);
}

.title h1 {
display: flex;
justify-content: center;
font-size: 40px;
font-weight: 500;
color: #ecae35;
display: flex;
justify-content: center;
font-size: 40px;
font-weight: 500;
color: #ecae35;
}

h1 {
margin: 0 10px 10px 10px;
margin: 0 10px 10px 10px;
}

.button-flex {
display: flex;
flex-direction: row;
justify-content: center;
display: flex;
flex-direction: row;
justify-content: center;
}

#calculate-button, #reset-button {
margin: 0 15px 10px 20px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
background-color: #fabc2b;
color: #ffffff;
border: none;
border-radius: 10px;
#calculate-button,
#reset-button {
margin: 0 15px 10px 20px;
font-family: "Roboto", sans-serif;
font-size: 20px;
background-color: #fabc2b;
color: #ffffff;
text-shadow: 1px 1px 1px #000;
border: none;
border-radius: 10px;
transition: 0.5s ease-in-out;
cursor: pointer;
}

#calculate-button:hover,
#reset-button:hover {
background-color: orangered;
}

#reset-button {
padding: 3px 20px;
padding: 3px 20px;
}

.calculate-result {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 50px 0 50px;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 50px 0 50px;
}

.calculate-result p {
margin: 5px 0;
color: #ffffff;
font-size: 20px;
font-weight: bold;
margin: 5px 0;
color: #ffffff;
font-size: 20px;
font-weight: bold;
}

.result {
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
}

.result > p:first-child {
margin-right: 10px;
margin-right: 10px;
}

.result > p:last-child {
font-size: 20px;
}
font-size: 20px;
}

.result p {
text-shadow: 2px 2px 2px #000;
}

form label {
color: #fff;
}