diff --git a/aromacalc/aromacalc.js b/aromacalc/aromacalc.js
index 3c95ef4..e936a1a 100644
--- a/aromacalc/aromacalc.js
+++ b/aromacalc/aromacalc.js
@@ -1,7 +1,7 @@
-let buttoncalc = document.getElementById("calculate")
-buttoncalc.addEventListener("click", calculate)
+const calcForm = document.getElementById('calculator') // const ist hier besser als let, da immutable
+calcForm.addEventListener('submit', calculate)
-function 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 +30,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
}
diff --git a/aromacalc/index.html b/aromacalc/index.html
index 9800665..e2aff1f 100644
--- a/aromacalc/index.html
+++ b/aromacalc/index.html
@@ -1,87 +1,89 @@
-
-
-
-
- Aroma Calculator
-
-
-
-
-
-
-
+
+
+
+
+
+
+ Aroma Calculator
+
+
+
+Aroma Calculator
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/aromacalc/style.css b/aromacalc/style.css
new file mode 100644
index 0000000..ab5d133
--- /dev/null
+++ b/aromacalc/style.css
@@ -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;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 8d58434..737c3e2 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,13 @@
-
-
-
-
- Aroma Calc
-
-
-
+
+
+
+
+
+
+ Document
+
+
+Aroma Calc
+
+
\ No newline at end of file