<!DOCTYPE html>
<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" />
<title>Tip Calculator</title>
<style>
* {
font-family: 'M PLUS Rounded 1c', Avenir Next, Helvetica, sans-serif;
color: white;
}
body {
background: #8990ec;
}
.wrapper {
height: 525px;
width: 360px;
color: white;
background: #272639;
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;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container" id="topContainer">
<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="increasePeople()">
<span class="buttonText">+</span>
</button>
</span>
<span class="splitAmount" id="numberOfPeople">1</span>
<span class="buttonContainer">
<button class="splitButton" onclick="decreasePeople()">
<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>
<script>
/*
🌟 APP: Tip Calculator
These are the 3 functions you must use 👇
=========================================
calculateBill()
increasePeople()
decreasePeople()
These functions are hard coded in the HTML. So, you can't change their names.
These are all the DIV ID's you're gonna need access to 👇
========================================================
#1 ID 👉 'billTotalInput' = User input for bill total
#2 ID 👉 'tipInput' = User input for tip
#3 ID 👉 'numberOfPeople' = Current number of people you're splitting the bill between
#4 ID 👉 'perPersonTotal' = Total dollar value owed per person
*/
billInput = document.getElementById('billTotalInput')
tipInput = document.getElementById('tipInput')
numberOfPeopleDiv = document.getElementById('numberOfPeople')
perPersonTotalDiv = document.getElementById('perPersonTotal')
// Get global access to all inputs / divs here (you'll need them later 😘)
// bill input, tip input, number of people div, and per person total div
// Get number of people from number of people div
let numberOfPeople = Number(numberOfPeopleDiv.innerText)
// ** Calculate the total bill per person **
const calculateBill = () => {
// get bill from user input & convert it into a number
let bill = Number(billInput.value)
// get the tip from user & convert it into a percentage (divide by 100)
const tipPercentage = Number(tipInput.value) / 100
console.log(tipPercentage)
// get the total tip amount
const tipAmount = bill * tipPercentage
console.log({ tipAmount })
// calculate the total (tip amount + bill)
let totalAmount = tipAmount + bill
console.log({ totalAmount })
// calculate the per person total (total divided by number of people)
const perPersonTotal = totalAmount / numberOfPeople
console.log({ perPersonTotal })
// update the perPersonTotal on DOM & show it to user
perPersonTotalDiv.innerText = `$${perPersonTotal.toFixed(1)}`
}
// ** Splits the bill between more people **
const increasePeople = () => {
// increment the amount of people
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()
}
// ** Splits the bill between fewer people **
const decreasePeople = () => {
// guard clause
if (numberOfPeople <= 1) {
return
}
// if amount is 1 or less simply return
// (a.k.a you can't decrease the number of people to 0 or negative!)
// decrement the amount of people
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()
}
</script>
</body>
</html>