La propina es el dinero que se da como regalo por un buen servicio, a la persona que te atiende en un restaurante. En este proyecto, se realiza una calculadora de propinas simple que toma como entrada el monto de la facturación, el tipo de servicio y el número de personas. Según las tres entradas, genera una propina para la persona que atiende.
Acercarse:
Para averiguar el consejo, tomaremos la entrada del usuario: Monto de la factura (es el monto de la factura total, estamos tomando esto como una cantidad variable), para el tipo de servicio que estamos usando un menú desplegable que tiene calidad como las opciones en porcentaje (como bueno, malo, excelente, etc.), por último, estamos tomando el número de personas como entrada (ayudará dividir la propina en partes iguales entre todas las personas). Según las entradas del usuario, calculamos la propina y luego la imprimimos usando la función console.log().
El total es básicamente la cantidad multiplicada por el tipo de servicio dividido por un número de personas.
Al usar HTML, estamos dando la estructura deseada, la opción para la entrada y el botón de envío. Con la ayuda de CSS, estamos embelleciendo nuestra estructura dándole los colores y la fuente deseada, etc.
En la sección de JavaScript, estamos procesando la entrada tomada y después de calcular, se imprime la salida respectiva.
Ejemplo:
Nombre de archivo: index.html
HTML
<html> <head> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="app.js"> </script> </head> <body> <div class="container"> <h1>TIP CALCULATOR</h1> <div class="wrapper"> <p>Bill Amount</p> <input type="text" id="amount" placeholder="Amount to be paid"> ₹ <p>How was the service ?</p> <select id="services"> <option selected disabled hidden> Select </option> <option value="0.25">25% - Top Notch</option> <option value="0.20">20% - Excellent</option> <option value="0.15">15% - Good</option> <option value="0.10">10% - Bad</option> <option value="0.05">5% - Worst</option> </select> <p>Total number of persons</p> <input type="text" id="persons" placeholder="Number of people sharing the bill"> <button id="calculate">Calculate</button> </div> <div class="tip"> <p>Tip Amount</p> <span id="total">0</span>₹ <span id="each">each</span> </div> </div> </body> </html>
Nombre de archivo: estilo.css
CSS
body {
background-color: #001f4f;
font-family: "Raleway", sans-serif;
}
.container {
width: 350px;
height: 500px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 20px;
}
h1 {
position: absolute;
left: 50%;
top: -60px;
width: 300px;
transform: translateX(-50%);
background-color: #ff851b;
color: #fff;
font-weight: 100;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-size: 18px;
text-align: center;
padding: 10px;
}
.wrapper {
padding: 20px;
}
input,
select {
width: 80%;
border: none;
border-bottom: 1px solid #0074d9;
padding: 10px;
}
input:focus,
select:focus {
border: 1px solid #0074d9;
outline: none;
}
select {
width: 88% !important;
}
button {
margin: 20px auto;
width: 150px;
height: 50px;
background-color: #39cccc;
color: #fff;
font-size: 16px;
border: none;
border-radius: 5px;
}
.tip {
text-align: center;
font-size: 18px;
display: none;
}
Nombre de archivo: app.js
Javascript
window.onload = () =>
//the function called when Calculate button is clicked.
{
/*calling a function calculateTip
which will calculate the tip for the bill.*/
document.querySelector('#calculate').onclick = calculateTip;
}
function calculateTip() {
/*assign values of ID : amount, person and service to
variables for further calculations.*/
let amount = document.querySelector('#amount').value;
let persons = document.querySelector('#persons').value;
let service = document.querySelector('#services').value;
console.log(service);
/*if statement will work when user presses
calculate without entering values. */
//so will display an alert box and return.
if (amount === '' && service === 'Select') {
alert("Please enter valid values");
return;
}
//now we are checking number of persons
if (persons === '1')
//if there is only one person then we need not to display each.
document.querySelector('#each').style.display = 'none';
else
//if there are more than one person we will display each.
document.querySelector('#each').style.display = 'block';
/*calculating the tip by multiplying total-bill and type of
service; then dividing it by number of persons.*/
//fixing the total amount upto 2 digits of decimal
let total = (amount * service) / persons;
total = total.toFixed(2);
//finally displaying the tip value
document.querySelector('.tip').style.display = 'block';
document.querySelector('#total').innerHTML = total;
}
Código completo:
HTML
<html>
<head>
<style>
body {
background-color: #001f4f;
font-family: 'Raleway', sans-serif;
}
.container {
width: 350px;
height: 500px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 20px;
}
h1 {
position: absolute;
left: 50%;
top: -60px;
width: 300px;
transform: translateX(-50%);
background-color: #FF851B;
color: #fff;
font-weight: 100;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-size: 18px;
text-align: center;
padding: 10px;
}
.wrapper {
padding: 20px;
}
input,
select {
width: 80%;
border: none;
border-bottom: 1px solid #0074D9;
padding: 10px;
}
input:focus,
select:focus {
border: 1px solid #0074D9;
outline: none;
}
select {
width: 88% !important;
}
button {
margin: 20px auto;
width: 150px;
height: 50px;
background-color: #39CCCC;
color: #fff;
font-size: 16px;
border: none;
border-radius: 5px;
}
.tip {
text-align: center;
font-size: 18px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>TIP CALCULATOR</h1>
<div class="wrapper">
<p>Bill Amount</p>
<input type="text"
id="amount"
placeholder="Amount to be paid"> ₹
<p>How was the service ?</p>
<select id="services">
<option selected disabled hidden>Select</option>
<option value="0.25">25% - Top Notch</option>
<option value="0.20">20% - Excellent</option>
<option value="0.15">15% - Good</option>
<option value="0.10">10% - Bad</option>
<option value="0.05">5% - Worst</option>
</select>
<p>Total number of persons</p>
<input type="text"
id="persons"
placeholder="Number of people sharing the bill">
<button id="calculate">Calculate</button>
</div>
<div class="tip">
<p>Tip Amount</p>
<span id="total">0</span>₹
<span id="each">each</span>
</div>
</div>
<script>
//the function called when Calculate button is clicked.
window.onload = () =>
{
/*calling a function calculateTip which
will calculate the tip for the bill.*/
document.querySelector('#calculate').onclick =
calculateTip;
}
function calculateTip() {
/*assign values of ID : amount, person and
service to variables for further calculations.*/
let amount = document.querySelector('#amount').value;
let persons = document.querySelector('#persons').value;
let service = document.querySelector('#services').value;
console.log(service);
/*if statement will work when user
presses calculate without entering values. */
//so will display an alert box and return.
if (amount === '' && service === 'Select') {
alert("Please enter valid values");
return;
}
//now we are checking number of persons
if (persons === '1')
//if there is only one person then we need not to display each.
document.querySelector('#each').style.display = 'none';
else
//if there are more than one person we will display each.
document.querySelector('#each').style.display = 'block';
/*calculating the tip by multiplying total-bill and type of service;
then dividing it by number of persons.*/
//fixing the total amount upto 2 digits of decimal
let total = (amount * service) / persons;
total = total.toFixed(2);
//finally displaying the tip value
document.querySelector('.tip').style.display = 'block';
document.querySelector('#total').innerHTML = total;
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por imsushant12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA