Created
October 9, 2022 14:26
-
-
Save nithinexe/c97d76ebbbf72e6c47908b8605575056 to your computer and use it in GitHub Desktop.
TipCalculator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<link rel="preconnect" href="https://fonts.googleapis.com" /> | |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap" rel="stylesheet" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<link rel="stylesheet" href="style.css" type="text/css" /> | |
<title>Tip Calculator</title> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<div class="container" id="topContainer"> | |
<h2 id = "name">Nitt's Tip Calculator</h2> | |
<div class="title">Bill total</div> | |
<div class="inputContainer"> | |
<span>$</span> | |
<input onkeyup="calculateBill()" type="text" id="billTotalInput" placeholder="0.00" /> | |
</div> | |
</div> | |
<div class="container"> | |
<div class="title">Tip</div> | |
<div class="inputContainer"> | |
<span>%</span> | |
<input onkeyup="calculateBill()" type="text" id="tipInput" placeholder="10" /> | |
</div> | |
</div> | |
<div class="container" id="bottom"> | |
<div class="splitContainer"> | |
<div class="title">People</div> | |
<div class="controls"> | |
<span class="buttonContainer"> | |
<button class="splitButton" onclick="decreasePeople()"> | |
<span class="buttonText">-</span> | |
</button> | |
</span> | |
<span class="splitAmount" id="numberOfPeople">1</span> | |
<span class="buttonContainer"> | |
<button class="splitButton" onclick="increasePeople()"> | |
<span class="buttonText">+</span> | |
</button> | |
</span> | |
</div> | |
</div> | |
<div class="totalContainer"> | |
<div class="title">Total per Person</div> | |
<div class="total" id="perPersonTotal">$0.00</div> | |
</div> | |
</div> | |
<div class = "end">Thank You For Using 😊</div> | |
</div> | |
<script type="text/javascript" src="script.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const billInput = document.getElementById('billTotalInput') | |
const tipInput = document.getElementById('tipInput') | |
const numberOfPeopleDiv = document.getElementById('numberOfPeople') | |
const perPersonTotalDiv = document.getElementById('perPersonTotal') | |
//getting no of people from NoOfPeopleDiv | |
let numberOfPeople = Number(numberOfPeopleDiv.innerText) | |
const calculateBill = () => { | |
const Bill = Number(billInput.value) | |
const Tip = Number(tipInput.value) | |
const TipPercent = Tip/100 | |
const TotalTipAmount = TipPercent * Bill | |
const Total = Bill+TotalTipAmount | |
const TotalPerPerson = Total/numberOfPeople | |
perPersonTotalDiv.innerText = `$${TotalPerPerson.toFixed(2)}` | |
} | |
const increasePeople = () => { | |
// increment the amount | |
numberOfPeople += 1 | |
// update the DOM with the new number of people | |
numberOfPeopleDiv.innerText = numberOfPeople | |
// calculate the bill based on the new number of people | |
calculateBill() | |
} | |
const decreasePeople = () => { | |
// guard clause | |
// if amount is 1 or less simply return | |
// (a.k.a you can't decrease the number of people to 0 or negative!) | |
if (numberOfPeople <= 1) { | |
return | |
} | |
// decrement the amount | |
numberOfPeople -= 1 | |
// update the DOM with the new number of people | |
numberOfPeopleDiv.innerText = numberOfPeople | |
// calculate the bill based on the new number of people | |
calculateBill() | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
font-family: 'M PLUS Rounded 1c', Avenir Next, Helvetica, sans-serif; | |
color: white; | |
} | |
body { | |
background: white; | |
} | |
.wrapper { | |
height: 525px; | |
width: 360px; | |
color: white; | |
background: #000000; | |
border-radius: 1rem; | |
padding: 1.2rem; | |
margin: 100px auto; | |
} | |
#topContainer { | |
margin-top: 4rem; | |
} | |
.container { | |
margin-top: 1.4rem; | |
} | |
.title { | |
font-weight: bold; | |
margin-bottom: 0.6rem; | |
} | |
.inputContainer { | |
background: #353959; | |
border-radius: 1.4rem; | |
padding: 0 0.8rem; | |
display: flex; | |
align-items: center; | |
} | |
#billTotalInput, | |
#tipInput { | |
font-size: 1.2rem; | |
background: none; | |
border: none; | |
outline: none; | |
padding: none; | |
} | |
.buttonContainer { | |
background: #8990ec; | |
display: grid; | |
place-items: center; | |
width: 1.6rem; | |
height: 1.6rem; | |
border-radius: 50%; | |
} | |
.splitButton { | |
background: none; | |
border: none; | |
} | |
.controls { | |
display: flex; | |
align-items: center; | |
} | |
.splitButton { | |
font-size: 0.8rem; | |
font-weight: bold; | |
display: grid; | |
place-items: center; | |
} | |
.buttonText { | |
color: #353959 !important; | |
} | |
.splitAmount { | |
font-size: 1.6rem; | |
margin: 0.8rem; | |
} | |
#bottom { | |
display: flex; | |
justify-content: space-between; | |
} | |
.totalContainer { | |
display: flex; | |
flex-direction: column; | |
align-items: end; | |
} | |
.total { | |
font-size: 2rem; | |
} | |
#name{ | |
padding-left: 60px; | |
padding-bottom:40px; | |
} | |
.end{ | |
font-size: 1.8rem; | |
padding-left:24px; | |
padding-top:10px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment