Reference no: EM133217100
<div id="tip-calculator">
</div>
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
display: grid;
place-items: center;
background: rgb(12, 141, 195);
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.75;
}
#tip-calculator
{
width: 80%;
max-width: 350px;
padding: 1rem;
background: white;
border-radius: 0.3rem;
}
<h1>Tip Calculator</h1>
h1{
background: rgb(11, 108, 161);
color: white;
font-size: 27px;
text-align: center;
margin-top: -17px;
margin-left: -17px;
margin-right: -17px;
}
<form id="form">
<label for="bill" class="h3">
Bill: $
<input type="number" min="0" step="0.01" value="50" name="bill" id="bill" />
</label>
<label for="people" class="h3">
People:
<input type="number" min="1" step="1" value="1" name="people" id="people" />
</label>
<label for="percentage" class="h3">
Tip Percentage:
<span id="percentage-output"></span>
<input type="range" min="0" max="100" step="1" value="20" name="percentage" id="percentage" />
</label>
</form>
form {
border-top: 1px solid hsl(149, 31%, 25%);
}
label {
display: block;
}
input[type="number"] {
width: 100%;
max-width: 4em;
background: none;
border: none;
font-size: 20px;
color: rgb(26, 64, 237);
border-bottom: 1px dashed black;
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#people {
max-width: 3em;
}
I designed the range slider using the CSS codes below.
#percentage {
-webkit-appearance: none;
width: 100%;
margin: 2rem 0;
height: 10px;
background: hsl(193, 94%, 34%);
border-radius: 3px;
}
#percentage::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid rgb(5, 47, 156);
background: hsl(255, 14%, 66%);
cursor: pointer;
}
<div id="output" class="h3"></div>
.h3 {
margin: 1.38rem 0;
font-size: 1.424rem;
}
#output {
text-align: center;
box-shadow: 0 0 20px rgba(0,139,253,0.25);
padding: 10px;
color: rgb(9, 73, 171);
}
const form = document.getElementById("form");
const totalBill = document.getElementById("bill");
const totalPeople = document.getElementById("people");
const tipPercentage = document.getElementById("percentage");
const percentageOutput = document.getElementById("percentage-output");
const output = document.getElementById("output");
All information will be stored in the "tipPercentage" function. The value of this function is displayed in the display using "innerText" at the end of all.
// event listeners
form.addEventListener("change", calculateTip);
tipPercentage.oninput = calculateTip;
//I have added a manual formula to calculate the tip in the "calculate Tip" function.
function calculateTip() {
//Manual tip calculation formula stored in "dollar suPerPerson" constant
const dollarsPerPerson = (
(totalBill.value * (tipPercentage.value / 100)) /
totalPeople.value
).toFixed(2); //The toFixed() method converts a number to a string.
displayTip(`${dollarsPerPerson}`);
displayPercentage();
}
The condition here is that if the value of 'totalPeople' is more than 1, then the text "Each person should tip" can be seen. If the value of 'totalPeople' is 1, then the text "You should tip" will appear.
function displayTip(totalPerPerson) {
output.innerText =
totalPeople.value > 1
? `Each person should tip ${totalPerPerson}`
: `You should tip ${totalPerPerson}`;
}
Now with the help of 'innerText', the value of "tipPercentage" is displayed on the webpage as a result.
function displayPercentage() {
percentageOutput.innerText = `${tipPercentage.value}%`;
}
// on load
calculateTip();
Rewrite the program to use server-side PHP instead. The syntax of PHP is similar to that of JavaScript; keep in mind the following differences:
PHP uses the print function instead of JavaScript's document.write function.
PHP prefixes a dollar sign ($) on every variable name.
PHP encloses its code in <?php and ?> tags, where JavaScript uses <script> and </script?>.
JavaScript and PHP provide different function libraries. For example, the JavaScript Math.round() and the PHP round() functions work differently.
JavaScript uses "+" to concatenate strings while PHP substitutes values for variables inside a string. With PHP, you cannot calculate and concatenate in one statement.