mpuchstein/VapeHP
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

code cleanup

Browse Source
This commit is contained in:
vikingowl
2021-11-27 19:01:08 +01:00
parent 1a1770ddd1
commit a15a7ba576
4 changed files with 144 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
aromacalc/aromacalc.js
View File

@@ -1,7 +1,10 @@
let buttoncalc = document.getElementById("calculate") // let buttoncalc = document.getElementById("calculate")
buttoncalc.addEventListener("click", calculate) // buttoncalc.addEventListener("click", calculate)
function calculate(){ const calcForm = document.getElementById('calculator') // const ist hier besser als let, da immutable
calcForm.addEventListener('submit', calculate)
function calculate(e){
let aromaamount = document.getElementById("aromaamount").value let aromaamount = document.getElementById("aromaamount").value
let aromaconc = document.getElementById("aromaconc").value / 100 let aromaconc = document.getElementById("aromaconc").value / 100
let vg = document.getElementById("vg").value let vg = document.getElementById("vg").value
@@ -30,4 +33,6 @@ function calculate(){
document.getElementById("amountvg").value = amountvg document.getElementById("amountvg").value = amountvg
document.getElementById("amountpg").value = amountpg document.getElementById("amountpg").value = amountpg
} }
e.preventDefault() // https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
} }

126
aromacalc/index.html
View File

@@ -1,63 +1,66 @@
<!DOCTYPE html> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Aroma Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body> <body>
<h1>Aroma Calculator</h1><br><br> <h1>Aroma Calculator</h1>
<table>
<td> <form id="calculator">
<table> <div class="mischrechner">
<caption>Mischrechner</caption> <h3>Mischrechner</h3>
<tr>
<td><label for="aromaamount"> Aromamenge:</label></td> <label for="aromaamount">Aromamenge: </label>
<td><input type="text" id="aromaamount" name="aromaamount"></td> <input type="text" id="aromaamount" name="aromaamount">
</tr>
<tr> <label for="aromaconc">Aromakonzentration in %: </label>
<td><label for="aromaconc"> Aromakonzentration in %:</label></td> <input type="text" id="aromaconc" name="aromaconc">
<td><input type="text" id="aromaconc" name="aromaconc"></td>
</tr> <label for="vg">Teile VG: </label>
<tr> <input type="text" id="vg" name="vg">
<td><label for="vg"> Teile VG:</label></td>
<td><input type="text" id="vg" name="vg"></td> <label for="pg">Teile PG: </label>
</tr> <input type="text" id="pg" name="pg">
<tr>
<td><label for="pg"> Teile PG:</label></td> <label for="other">Teile Sonstiges: </label>
<td><input type="text" id="pg" name="pg"></td> <input type="text" id="other" name="other">
</tr>
<tr> <label for="nicdose">Nikotindosis: </label>
<td><label for="other"> Teile Sonstiges:</label></td> <input type="text" id="nicdose" name="nicdose">
<td><input type="text" id="other" name="other"></td> </div>
</tr>
<tr> <div class="nikotinshot">
<td><label for="nicdose"> Nikotindosis:</label></td> <h3>Nikotinshot</h3>
<td><input type="text" id="nicdose" name="nicdose"></td>
</tr> <label for="nicshotamount"> Menge:</label>
</table> <input type="text" id="nicshotamount" name="nicshotamount">
</td>
<td> <label for="nicshotnicppm"> Nikotin pro mL:</label>
<table> <input type="text" id="nicshotnicppm" name="nicshotnicppm">
<caption>Nikotinshot</caption>
<tr> <label for="nicshotvg"> Teile VG:</label>
<td><label for="nicshotamount"> Menge:</label></td> <input type="text" id="nicshotvg" name="nicshotvg">
<td><input type="text" id="nicshotamount" name="nicshotamount"></td>
</tr> <label for="nicshotpg"> Teile PG:</label>
<tr> <input type="text" id="nicshotpg" name="nicshotpg">
<td><label for="nicshotnicppm"> Nikotin pro mL:</label></td> </div>
<td><input type="text" id="nicshotnicppm" name="nicshotnicppm"></td>
</tr> <div class="break"></div>
<tr>
<td><label for="nicshotvg"> Teile VG:</label></td> <button id="calculate" type="submit">Berechne</button>
<td><input type="text" id="nicshotvg" name="nicshotvg"></td> </form>
</tr>
<tr>
<td><label for="nicshotpg"> Teile PG:</label></td>
<td><input type="text" id="nicshotpg" name="nicshotpg"></td>
</tr>
</table>
</td>
</table>
<button id="calculate" type="button">Berechne</button>
<table style="display:none" id="results"> <table style="display:none" id="results">
<caption>Ergebnisse:</caption> <caption>
<h3>Ergebnisse:</h3>
</caption>
<tr> <tr>
<td><label for="volume"> Gesamtmenge:</label></td> <td><label for="volume"> Gesamtmenge:</label></td>
<td><input type="text" id="volume" name="volume"></td> <td><input type="text" id="volume" name="volume"></td>
@@ -79,9 +82,8 @@
<td><input type="text" id="amountothers" name="amountothers"></td> <td><input type="text" id="amountothers" name="amountothers"></td>
</tr> </tr>
</table> </table>
<script src="aromacalc.js">
</script>
</body>
</head>
</html>
<script src="aromacalc.js"></script>
</body>
</html>

35
aromacalc/style.css Normal file
View File

@@ -0,0 +1,35 @@
.mischrechner,
.nikotinshot {
width: 380px;
}
form {
display: flex;
flex-wrap: wrap;
}
h3 {
text-align: center;
}
label {
display: inline-block;
width: 180px;
text-align: right;
line-height: 2rem;
}
input {
width: 180px;
}
.break {
flex-basis: 100%;
height: 0;
}
button {
flex-wrap: wrap;
margin-top: 2rem;
margin-left: 1rem;
}

13
index.html
View File

@@ -1,8 +1,13 @@
<!DOCTYPE html> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> <body>
<a href="aromacalc/index.html">Aroma Calc</a> <a href="aromacalc/index.html">Aroma Calc</a>
</body> </body>
</head> </html>
</html?>