Created
January 22, 2019 05:04
-
-
Save cdsandoval/c07c1513e5f2bdad77cc649013e4629d to your computer and use it in GitHub Desktop.
Calculadora de Tips
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Propinas</title> | |
| <link rel="stylesheet" type="text/css" href="css/normalize.css" /> | |
| <link rel="stylesheet" type="text/css" href="css/styles.css" /> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <h1>Propinas</h1> | |
| <div id="calculator"> | |
| <form> | |
| <label> | |
| Cuanto costo la comida?<br /> | |
| <input type="text" id="costoComida" /> soles | |
| </label> | |
| <label> | |
| Como calificaria la atencion ? <br /> | |
| <select id="calidadServicio"> | |
| <option disabled selected value="0">--Eliga una opcion--</option> | |
| <option value="0.3">30% - Increible</option> | |
| <option value="0.2">20% - Muy buena</option> | |
| <option value="0.15">15% - Buena</option> | |
| <option value="0.1">10% - Mala</option> | |
| <option value="0.05">5% - Muy mala</option> | |
| </select> | |
| </label> | |
| <label> | |
| Cuantas personas pagaron la comida?<br /> | |
| <input type="text" id="totalPersonas" /> personas | |
| </label> | |
| <button type="button" id="calcular">Calcular!</button> | |
| </form> | |
| </div> | |
| <div id="propinaTotal"> | |
| <sup>S/.</sup><span id="propina">0.00</span> | |
| <small id="cadaUno">Cada uno</small> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function calcularPropina() { | |
| var costoComida = document.getElementById("costoComida").value; | |
| var calidadServicio = document.getElementById("calidadServicio").value; | |
| var totalPersonas = document.getElementById("totalPersonas").value; | |
| if (costoComida === "" || calidadServicio == 0) { | |
| window.alert("Por favor ingrese valores!"); | |
| return; | |
| } | |
| if (totalPersonas === "" || totalPersonas <= 1) { | |
| totalPersonas = 1; | |
| document.getElementById("cadaUno").style.display = "none"; | |
| } else { | |
| document.getElementById("cadaUno").style.display = "block"; | |
| } | |
| var total = (costoComida * calidadServicio) / totalPersonas; | |
| total = Math.round(total * 100) / 100; | |
| total = total.toFixed(2); | |
| document.getElementById("propinaTotal").style.display = "block"; | |
| document.getElementById("propina").innerHTML = total; | |
| } | |
| document.getElementById("propinaTotal").style.display = "none"; | |
| document.getElementById("cadaUno").style.display = "none"; | |
| document.getElementById("calcular").onclick = function() { | |
| calcularPropina(); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background: #042037; | |
| background-size: cover; | |
| color: white; | |
| } | |
| #container { | |
| width: 400px; | |
| margin: 150px auto 0; | |
| padding: 50px; | |
| box-sizing: border-box; | |
| background: #805215; | |
| box-shadow: 0 10px 15px -8px #000; | |
| -webkit-border-radius: 5px; | |
| text-align: center; | |
| } | |
| h1 { | |
| margin: 0 0 20px; | |
| padding: 0 0 20px; | |
| border-bottom: solid 1px #ddd; | |
| } | |
| form { | |
| text-align: left; | |
| } | |
| form label { | |
| display: block; | |
| margin: 25p 0; | |
| font-weight: bold; | |
| } | |
| form input, | |
| form select { | |
| padding: 8px; | |
| margin: 10px 0; | |
| color: black; | |
| } | |
| form input[type="text"] { | |
| width: 90px; | |
| } | |
| button { | |
| background: #042037; | |
| color: white; | |
| border: none; | |
| border-bottom: solid 4px #222; | |
| text-transform: uppercase; | |
| font-size: 18px; | |
| padding: 20px 30px; | |
| width: 100%; | |
| } | |
| button:hover { | |
| background: #123652; | |
| border-bottom-color: #111; | |
| } | |
| button:active { | |
| position: relative; | |
| top: 1px; | |
| } | |
| #propinaTotal { | |
| font-size: 50px; | |
| margin-top: 40px; | |
| } | |
| #propinaTotal:before { | |
| content: "Propina"; | |
| font-size: 14px; | |
| font-weight: bold; | |
| display: block; | |
| text-transform: uppercase; | |
| } | |
| #propinaTotal sup { | |
| font-size: 24px; | |
| top: -18px; | |
| } | |
| #propinaTotal small { | |
| font-size: 14px; | |
| font-weight: bold; | |
| display: block; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment