Bill calculator project
VISHNU VISHWAKARMA
"ENABLING DEVELOPERS TO EXCEL IN THE WORLD OF CANISTER SMART CONTRACT DEVELOPMENT."
HTML REQUIRED?:-
<!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" />
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<title>Tip Calculator</title>
</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 type=”text/javascript” src=”calcu.js”></script>
</body>
</html>
CSS REQUIRED?:-
* {
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;
}
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;
}
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;
}
JAVASCRIPT REQUIRED?:-
/*
These are the 3 functions you must use
// it is the three behevior of our calculator
========================================
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 need TO access ??
================================================
#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
=================================================
*/
// Get global access to all inputs / divs here (you’ll need them later ??)
const billInput = document.getElementById(‘billTotalInput’)
const tipInput = document.getElementById(‘tipInput’)
const numberOfPeopleDiv = document.getElementById(‘numberOfPeople’)
const perPersonTotalDiv = document.getElementById(‘perPersonTotal’)
// by accessing these id?, we can uodate dom and can get the value inside it
// Get number of people from number of people div
let numberOfPeople = Number(numberOfPeopleDiv.innerText)
// ** Calculate the total bill per person **
// first behavior of our calculator
const calculateBill = () => {
// get bill from user input & convert it into a number
const bill = Number(billInput.value)
// get the tip from user & convert it into a percentage (divide by 100)
const tipPercent = Number(tipInput.value) / 100
// get the total tip amount
const tipAmount = bill * tipPercent
// calculate the total (tip amount + bill)
const total = tipAmount + bill
// calculate the per person total (total divided by number of people)
const perPersonTotal = total / numberOfPeople
// update the perPersonTotal on DOM & show it to user
//?.toFixed()method stop decimal values
perPersonTotalDiv.innerText = `$${perPersonTotal.toFixed(2)}`
}
// ** Splits the bill between more people **
// second behavior
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()
}
// ** Splits the bill between fewer people **
// third behavior
const decreasePeople = () => {
// guard clause
// if amount is 1 or less simply return
// (we can’t decrease the number of people to 0 or negative!)
if (numberOfPeople <= 1) {
return
}
// if condition is true it will not exicute
// 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()
}