Compare commits
3 Commits
1a1770ddd1
...
master
Author | SHA1 | Date | |
---|---|---|---|
![]() |
e9718148f3 | ||
16cd2f79cd | |||
a15a7ba576 |
@@ -1,7 +1,7 @@
|
|||||||
let buttoncalc = document.getElementById("calculate")
|
const calcForm = document.getElementById('calculator') // const ist hier besser als let, da immutable
|
||||||
buttoncalc.addEventListener("click", calculate)
|
calcForm.addEventListener('submit', calculate)
|
||||||
|
|
||||||
function 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 +30,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
|
||||||
}
|
}
|
||||||
|
@@ -1,87 +1,89 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html>
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<body>
|
<meta charset="UTF-8">
|
||||||
<h1>Aroma Calculator</h1><br><br>
|
<meta name="viewport"
|
||||||
<table>
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
<td>
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<table>
|
<title>Aroma Calculator</title>
|
||||||
<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>
|
|
||||||
<tr>
|
|
||||||
<td><label for="volume"> Gesamtmenge:</label></td>
|
|
||||||
<td><input type="text" id="volume" name="volume"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><label for="countnicshot"> Zahl Nikotinshots:</label></td>
|
|
||||||
<td><input type="text" id="countnicshot" name="countnicshot"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><label for="amountvg"> Menge VG:</label></td>
|
|
||||||
<td><input type="text" id="amountvg" name="amountvg"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><label for="amountpg"> Menge PG:</label></td>
|
|
||||||
<td><input type="text" id="amountpg" name="amountpg"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="countnicshot"> Zahl Nikotinshots:</label></td>
|
||||||
|
<td><input type="text" id="countnicshot" name="countnicshot"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="amountvg"> Menge VG:</label></td>
|
||||||
|
<td><input type="text" id="amountvg" name="amountvg"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="amountpg"> Menge PG:</label></td>
|
||||||
|
<td><input type="text" id="amountpg" name="amountpg"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<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>
|
||||||
|
</html>
|
35
aromacalc/style.css
Normal file
35
aromacalc/style.css
Normal 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
21
index.html
@@ -1,8 +1,13 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html>
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<body>
|
<meta charset="UTF-8">
|
||||||
<a href="aromacalc/index.html">Aroma Calc</a>
|
<meta name="viewport"
|
||||||
</body>
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
</head>
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
</html?>
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a href="aromacalc/index.html">Aroma Calc</a>
|
||||||
|
</body>
|
||||||
|
</html>
|
Reference in New Issue
Block a user