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")
buttoncalc.addEventListener("click", calculate)
// let buttoncalc = document.getElementById("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 aromaconc = document.getElementById("aromaconc").value / 100
let vg = document.getElementById("vg").value
@@ -30,4 +33,6 @@ function calculate(){
document.getElementById("amountvg").value = amountvg
document.getElementById("amountpg").value = amountpg
}
e.preventDefault() // https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
}

134
aromacalc/index.html
View File

@@ -1,63 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<body>
<h1>Aroma Calculator</h1><br><br>
<table>
<td>
<table>
<caption>Mischrechner</caption>
<tr>
<td><label for="aromaamount"> Aromamenge:</label></td>
<td><input type="text" id="aromaamount" name="aromaamount"></td>
</tr>
<tr>
<td><label for="aromaconc"> Aromakonzentration in %:</label></td>
<td><input type="text" id="aromaconc" name="aromaconc"></td>
</tr>
<tr>
<td><label for="vg"> Teile VG:</label></td>
<td><input type="text" id="vg" name="vg"></td>
</tr>
<tr>
<td><label for="pg"> Teile PG:</label></td>
<td><input type="text" id="pg" name="pg"></td>
</tr>
<tr>
<td><label for="other"> Teile Sonstiges:</label></td>
<td><input type="text" id="other" name="other"></td>
</tr>
<tr>
<td><label for="nicdose"> Nikotindosis:</label></td>
<td><input type="text" id="nicdose" name="nicdose"></td>
</tr>
</table>
</td>
<td>
<table>
<caption>Nikotinshot</caption>
<tr>
<td><label for="nicshotamount"> Menge:</label></td>
<td><input type="text" id="nicshotamount" name="nicshotamount"></td>
</tr>
<tr>
<td><label for="nicshotnicppm"> Nikotin pro mL:</label></td>
<td><input type="text" id="nicshotnicppm" name="nicshotnicppm"></td>
</tr>
<tr>
<td><label for="nicshotvg"> Teile VG:</label></td>
<td><input type="text" id="nicshotvg" name="nicshotvg"></td>
</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">
<caption>Ergebnisse:</caption>
<!doctype html>
<html lang="en">
<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>
<h1>Aroma Calculator</h1>
<form id="calculator">
<div class="mischrechner">
<h3>Mischrechner</h3>
<label for="aromaamount">Aromamenge: </label>
<input type="text" id="aromaamount" name="aromaamount">
<label for="aromaconc">Aromakonzentration in %: </label>
<input type="text" id="aromaconc" name="aromaconc">
<label for="vg">Teile VG: </label>
<input type="text" id="vg" name="vg">
<label for="pg">Teile PG: </label>
<input type="text" id="pg" name="pg">
<label for="other">Teile Sonstiges: </label>
<input type="text" id="other" name="other">
<label for="nicdose">Nikotindosis: </label>
<input type="text" id="nicdose" name="nicdose">
</div>
<div class="nikotinshot">
<h3>Nikotinshot</h3>
<label for="nicshotamount"> Menge:</label>
<input type="text" id="nicshotamount" name="nicshotamount">
<label for="nicshotnicppm"> Nikotin pro mL:</label>
<input type="text" id="nicshotnicppm" name="nicshotnicppm">
<label for="nicshotvg"> Teile VG:</label>
<input type="text" id="nicshotvg" name="nicshotvg">
<label for="nicshotpg"> Teile PG:</label>
<input type="text" id="nicshotpg" name="nicshotpg">
</div>
<div class="break"></div>
<button id="calculate" type="submit">Berechne</button>
</form>
<table style="display:none" id="results">
<caption>
<h3>Ergebnisse:</h3>
</caption>
<tr>
<td><label for="volume"> Gesamtmenge:</label></td>
<td><input type="text" id="volume" name="volume"></td>
@@ -78,10 +81,9 @@
<td><label for="amountothers"> Menge Sonstiges:</label></td>
<td><input type="text" id="amountothers" name="amountothers"></td>
</tr>
</table>
<script src="aromacalc.js">
</script>
</body>
</head>
</html>
</table>
<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;
}

21
index.html
View File

@@ -1,8 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<body>
<a href="aromacalc/index.html">Aroma Calc</a>
</body>
</head>
</html?>
<!doctype html>
<html lang="en">
<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>
<a href="aromacalc/index.html">Aroma Calc</a>
</body>
</html>