Own module or own HTML/CSS/JS

Hello,

 

I written short code whith contains calculator to calculate wind on takeoff (headwind / tailwind)

 

I would like to add this as module or as my own code, is it possible?

 

It looks as below:

 

I would like use it as module?:

 

 

Code:

 

\<!DOCTYPE html\> \<html\> \<head\> \<title\>Kalkulator wiatru\</title\> \<meta charset="utf-8" /\> \<style type="text/css"\> #calculator { background: #eaeaea; margin: 0 auto; padding: 35px 25px 35px 25px; width: 200px; text-align: center; } #calculator button { padding: 10px; width: 100px; } #calculator input[type="number"] { padding: 10px; width: 147px; margin-bottom: 5px; } #calculator input[type="text"] { padding: 10px; width: 147px; margin-bottom: 5px; } \</style\> \<script\> function Calculator(operator) { var a = parseInt(document.getElementById('a').value); var b = parseInt(document.getElementById('b').value); var c = parseInt(document.getElementById('c').value); switch(operator) { case 'Licz': if (a \>= b) { var kat = parseFloat(a) - parseFloat(b); if (kat == 90) { var wynik = 0; } else { var cosin = Math.cos(kat \* Math.PI / 180); var wynik = parseFloat(c) \* cosin; var wynik2 = wynik.toFixed(2); } } else { var kat = parseFloat(b) - parseFloat(a); if (kat == 90) { var wynik = 0; } else { var cosin = Math.cos(kat \* Math.PI / 180); var wynik = parseFloat(c) \* cosin; var wynik2 = wynik.toFixed(2); } } break; } if (wynik \>= 0) { if (wynik == 0) { var result = 0; document.getElementById('result').value = + result; document.getElementById('wind').value = "HD"; } else { var result = Math.abs(wynik2); document.getElementById('result').value = + result; document.getElementById('wind').value = "HD"; } } else { var result = Math.abs(wynik2); document.getElementById('result').value = + result; document.getElementById('wind').value = "TL"; } } \</script\> \</head\> \<body\> \<form id="calculator"\> \<h2\>Kalkulator wiatru (HD/TL)\</h2\> Kierunek pasa [°] \<input type="number" name="a" id="a" min="0" max="360" placeholder="HDG pasa" required/\> Kierunek wiatru [°] \<input type="number" name="b" id="b" min="0" max="360" placeholder="Kierunek wiatru" required/\> Wiatr [knots] \<input type="number" name="c" id="c" min="0" placeholder="Siła wiatru" required/\> Wynik: \<input type="text" name="wind" id="wind" placeholder="" disabled="disabled" /\> \<input type="number" name="result" id="result" placeholder="" disabled="disabled" /\> \<button type="button" onclick="Calculator(this.innerHTML)"\>Licz\</button\> \</form\> \</body\> \</html\>

 

I kindly suggest you to read the docs, main difference between a widget and a module is explained there.

 

Basically, above example is pure js. So it does not need to be a module, does not need to be a widget either. 
 

So in theory, it can be used as html/js in a blade OR can be converted to a (ultra) simple widget.

 

Good luck