Jump to content

Own module or own HTML/CSS/JS


Fifcok

Recommended Posts

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:

image.png.2fbfdee6b04a711ce0cef0aa7de6dcb8.png

 

I would like use it as module?:

 

image.png.1c4b29e40c0a91be0b9b0bc902586acc.png

 

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 by ProAvia
Moved to v7 section
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...