Skip to content

Instantly share code, notes, and snippets.

@ImHM7

ImHM7/CALCULADORA.HTML

Created May 6, 2026 08:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ImHM7/0d582b1468069202f89516b2eb86c5e2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ImHM7/0d582b1468069202f89516b2eb86c5e2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CALCULADORA.HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<title>Price Calculator</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,sans-serif;background:#1c1c1e;color:#fff;padding:15px}
.box{background:#2c2c2e;border-radius:18px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.6)}
header{background:#007aff;color:#fff;padding:25px;text-align:center}
header h1{font-size:22px}
.inner{padding:16px}
label{font-weight:bold;display:block;margin-bottom:8px}
input[type=number]{
-webkit-appearance:none;
appearance:none;
display:block;
padding:16px;
font-size:24px;
background:#3c3c3e;
color:#fff;
border:1px solid #555;
border-radius:12px;
margin-bottom:14px;
text-align:left;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}
.res{padding:16px;margin:10px 0;border-left:6px solid;border-radius:12px;background:#3c3c3e}
.precio{font-size:30px;font-weight:bold;margin:6px 0}
.rojo{border-left-color:#ff3b30}
.amarillo{border-left-color:#ffcc00}
.verde{border-left-color:#34c759}
button{background:#007aff;color:#fff;border:none;padding:18px;border-radius:12px;font-size:18px;margin-top:10px;display:block}
</style>
</head>
<body>
<div class="box">
<header><h1>🧾 Price Calculator</h1></header>
<div class="inner">
<label>Product Cost ($)</label>
<input type="number" id="c" placeholder="0" oninput="calc()">
<div id="r"></div>
<button id="btn" onclick="calc()">🔄 Calculate Prices</button>
</div>
</div>
<script>
function fixSizes(){
var vw=document.documentElement.clientWidth||window.innerWidth;
var w=vw-30-32; // 15px padding body x2 + 16px padding inner x2
var el=document.getElementById('c');
var btn=document.getElementById('btn');
el.style.width=w+'px';
btn.style.width=w+'px';
}
function f(n){return new Intl.NumberFormat('es-MX',{style:'currency',currency:'MXN',minimumFractionDigits:0}).format(Math.round(n))}
function calc(){
var c=parseFloat(document.getElementById('c').value)||0;
var p35=c?Math.round(c/0.65):0;
var p40=c?Math.round(c/0.6):0;
var p45=c?Math.round(c/0.55):0;
document.getElementById('r').innerHTML=`
<div class="res rojo"><strong>35% margin</strong><div class="precio" style="color:#ff3b30">${f(p35)}</div><small>Profit: ${f(p35-c)}</small></div>
<div class="res amarillo"><strong>40% margin</strong><div class="precio" style="color:#ffcc00">${f(p40)}</div><small>Profit: ${f(p40-c)}</small></div>
<div class="res verde"><strong>45% margin</strong><div class="precio" style="color:#34c759">${f(p45)}</div><small>Profit: ${f(p45-c)}</small></div>`;
}
window.onload=function(){
setTimeout(function(){fixSizes();calc();},100);
};
window.onresize=fixSizes;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment