Own module or own HTML/CSS/JS

Fifcok · April 12, 2022

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>

Edited April 12, 2022 by ProAvia
Moved to v7 section

DisposableHero · April 13, 2022

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

Sign In

Own module or own HTML/CSS/JS

Recommended Posts

Fifcok

DisposableHero

Join the conversation