Last active
December 27, 2017 13:10
-
-
Save oscarotero/d99ab0bbb00ac5e9c9379ca64d105f73 to your computer and use it in GitHub Desktop.
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 lang="gl"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Calculadora para facer pan</title> | |
| <style type="text/css"> | |
| body { | |
| font-family: sans-serif; | |
| text-align: center; | |
| margin-top: 5em; | |
| } | |
| form { | |
| padding: 1em; | |
| width: 20em; | |
| text-align: right; | |
| display: inline-block; | |
| margin-right: 3em; | |
| } | |
| label { | |
| display: block; | |
| padding: .5em 0; | |
| } | |
| hr { | |
| border: none; | |
| border-top: solid 1px; | |
| } | |
| input[type="number"] { | |
| width: 5em; | |
| } | |
| dl { | |
| display: inline-block; | |
| text-align: left; | |
| } | |
| dt { | |
| margin-top: 1em; | |
| font-weight: bold; | |
| } | |
| dd { | |
| margin-left: .5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Calculo do porcentaxe de panadeiro</h1> | |
| <form id="calculadora"> | |
| <label> | |
| Gramos de masa total: | |
| <input type="number" required id="input-masa" value="500"> | |
| </label> | |
| <hr> | |
| <label> | |
| Porcentaxe de auga: | |
| <input type="number" required id="input-auga" min="0" max="100" value="60"> | |
| </label> | |
| <label> | |
| Porcentaxe de sal: | |
| <input type="number" required id="input-sal" min="0" max="100" value="2"> | |
| </label> | |
| <label> | |
| Porcentaxe de masa nai: | |
| <input type="number" required id="input-masanai" min="0" max="100" value="30"> | |
| </label> | |
| <button type="submit">Calcular</button> | |
| </form> | |
| <dl> | |
| <dt>Gramos de fariña</dt> | |
| <dd id="farinha"></dd> | |
| <dt>Gramos de auga</dt> | |
| <dd id="auga"></dd> | |
| <dt>Gramos de sal</dt> | |
| <dd id="sal"></dd> | |
| <dt>Gramos de masa nai</dt> | |
| <dd id="masanai"></dd> | |
| </dl> | |
| <script type="text/javascript"> | |
| const calculadora = document.getElementById('calculadora'); | |
| const inputMasa = document.getElementById('input-masa'); | |
| const inputMasaNai = document.getElementById('input-masanai'); | |
| const inputAuga = document.getElementById('input-auga'); | |
| const inputSal = document.getElementById('input-sal'); | |
| const resultFarinha = document.getElementById('farinha'); | |
| const resultMasaNai = document.getElementById('masanai'); | |
| const resultAuga = document.getElementById('auga'); | |
| const resultSal = document.getElementById('sal'); | |
| calculadora.addEventListener('submit', function (e) { | |
| e.preventDefault(); | |
| calcular(); | |
| }); | |
| function calcular() { | |
| const valMasa = parseFloat(inputMasa.value); | |
| const valMasaNai = parseFloat(inputMasaNai.value); | |
| const valAuga = parseFloat(inputAuga.value); | |
| const valSal = parseFloat(inputSal.value); | |
| let farinha = (100 / (100 + valAuga + valSal)) * valMasa; | |
| let auga = (farinha * valAuga) / 100; | |
| let sal = (farinha * valSal) / 100; | |
| let masaNai = (farinha * valMasaNai) / 100; | |
| farinha -= masaNai / 2; | |
| auga -= masaNai / 2; | |
| resultFarinha.textContent = Math.round(farinha); | |
| resultMasaNai.textContent = Math.round(masaNai); | |
| resultAuga.textContent = Math.round(auga); | |
| resultSal.textContent = Math.round(sal); | |
| } | |
| calcular(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment