En este artículo, crearemos una calculadora de pérdidas y ganancias utilizando HTML, CSS y Javascript para agregar la funcionalidad básica junto con el diseño y el diseño. La Calculadora de pérdidas y ganancias se utiliza básicamente para calcular la cantidad o el porcentaje recibido después de vender un precio o un bien en particular. Si la cantidad (precio de venta) recibida es mayor después de la venta que la cantidad real (precio de costo), se considera ganancia , de lo contrario , pérdida. Denotaremos el precio de costo como CP y el precio de venta como SP.
Fórmula utilizada:
- Beneficio: (SP) – (CP)
- Porcentaje de beneficio: Beneficio/CP x 100
- Pérdida: (SP) – (CP)
- Porcentaje de pérdida : Pérdida/CP x 100
Acercarse:
- En la etiqueta del cuerpo, cree el diseño y el diseño de la calculadora utilizando HTML básico.
- Use las propiedades CSS para estilos como alineación, tamaño, fondo, etc.
- Para calcular las ganancias y pérdidas, llame a una función usando JavaScript.
Ejemplo: Usaremos el enfoque anterior para crear una calculadora.
HTML
<div class="plcalculate"> <h1>Profit and Loss Calculator</h1> <p> Cost Price(CP) : <input class="cost__price" type="number" /> </p> <p> Selling Price(SP) : <input class="selling__price" type="number" /> </p> <button onclick="Calculate()">Calculate</button> <h2 class="profit__loss"></h2> <h2 class="profit__loss__percentage"></h2> <h2 class="nothing"></h2> </div>
Código CSS:
CSS
body {
background-color: rgb(99, 226, 99);
font-family: Verdana;
}
.plcalculate {
text-align: center;
background-color: rgb(102, 155, 22);
width: 500px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
h2 {
color: white;
}
JavaScript:
Javascript
function Calculate() {
const CP = document.querySelector(".cost__price").value;
const SP = document.querySelector(".selling__price").value;
const profit__loss = document.querySelector(".profit__loss");
const percentage = document.querySelector(".profit__loss__percentage");
const nothing = document.querySelector(".nothing");
profit__loss.innerHTML = "";
percentage.innerHTML = "";
nothing.innerHTML = "";
if (SP > CP) {
const profit = SP - CP;
const profit_percent = ((profit / CP) * 100).toFixed(2);
profit__loss.innerHTML = "Profit : " + profit;
percentage.innerHTML = "Profit Percentage : " + profit_percent;
}
if (SP < CP) {
const loss = CP - SP;
const loss_percent = ((loss / CP) * 100).toFixed(2);
profit__loss.innerHTML = "Loss : " + loss;
percentage.innerHTML = "Loss Percentage : " + loss_percent;
}
if (SP == CP) {
nothing.innerHTML = "No Profit No Loss";
}
};
Explicación: se invocará una función Calcular() cuando el usuario ingrese la cantidad de CP y SP en la entrada y haga clic en el botón Calcular usando el atributo de evento onclick . En esta función, hemos utilizado el método DOM querySelector() para seleccionar el valor ingresado en las entradas en una variable usando sus nombres de clase. Si la cantidad de SP es mayor que la cantidad de CP, la función Calcular() calculará la ganancia y el porcentaje de ganancia; de lo contrario, calculará la pérdida y el porcentaje de pérdida usando las fórmulas mencionadas anteriormente y mostrará el texto usando la propiedad innerHTML .
Código completo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Profit and Loss Calculator</title>
<style>
body{
background-color: rgb(99, 226, 99);
font-family: Verdana;
}
.plcalculate{
text-align: center;
background-color: rgb(102, 155, 22);
width: 500px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
h2{
color: white;
}
</style>
</head>
<body>
<div class="plcalculate">
<h1>Profit and Loss Calculator</h1>
<p>Cost Price(CP) :
<input class="cost__price" type="number" />
</p>
<p>Selling Price(SP) :
<input class="selling__price" type="number" />
</p>
<button onclick="Calculate()">Calculate</button>
<p>
<h2 class="profit__loss"></h2>
<h2 class="profit__loss__percentage"></h2>
<h2 class="nothing"></h2>
</p>
</div>
<script>
function Calculate(){
const CP= document.querySelector(".cost__price").value;
const SP= document.querySelector(".selling__price").value;
const profit__loss=document.querySelector(".profit__loss");
const percentage=document.querySelector(".profit__loss__percentage");
const nothing=document.querySelector(".nothing");
profit__loss.innerHTML="";
percentage.innerHTML="";
nothing.innerHTML="";
if(SP>CP){
const profit=SP - CP;
const profit_percent= ((profit/CP)*100).toFixed(2);
profit__loss.innerHTML="Profit : "+ profit;
percentage.innerHTML="Profit Percentage : "+ profit_percent;
}
if(SP<CP){
const loss=CP - SP;
const loss_percent= ((loss/CP)*100).toFixed(2);
profit__loss.innerHTML="Loss : "+ loss;
percentage.innerHTML="Loss Percentage : "+ loss_percent;
}
if(SP==CP){
nothing.innerHTML="No Profit No Loss";
}
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA