hello world

categories: javascript

This one just multiplies two numbers.

Fill in your data and then submit the form both by either pressing enter or clicking the 'Try it' button:

Result

It’s pretty easy to save this calculator for offline use, as well

This is the prototype for all subsequent calculators.
As of 2/25/2024, it had jquery and looked like this:

<head>
	<meta charset="utf-8">
	<style>
		body {
			background-color: #fff1e5;
			font-family: Tahoma, sans-serif;
		}
		form {
			text-align: left;
		}
		textarea {
			width: 75%;
			height: 150px;
			padding: 12px 20px;
			box-sizing: border-box;
			border: 2px solid #ccc;
			border-radius: 4px;
			background-color: #f8f8f8;
			resize: none;
		}
		.form-label {
			font-weight: bolder;
			overflow: auto;
			padding: 2px;
			border: 2px solid #ccc;
			background-color: #FFFFFF;
			font-size: 0.75em; /* 14px/16=0.875em */
		}
		input[type=text] {
			column-count: 10;
			padding: 12px 20px;
			margin: 8px 0;
			box-sizing: border-box;
		}
		.calculator-container {
			margin: auto;
			border: 1px solid darksalmon;
			padding: 10px;
		}
	</style>
</head>
<body>
<div class="calculator-container">
<p>Fill in your data and then submit the form both by either pressing enter or clicking the 'Try it' button:</p>

<form>    
	<label class="form-label">number 1</label> <input id="number_1" name="number_1" type="text"><br>
	<label class="form-label">number 2</label> <input id="number_2" name="number_2" type="text"><br>	
	<button id="button_1" type="submit">Try it</button><br>
</form>
<br>
<label class="form-label">Result</label> <textarea id="cliniborg-result" class="cliniborg-result" cols="80" rows="12" readonly="readonly" autocomplete="off"></textarea><br>
<button onclick="copyToClipboard('#cliniborg-result')">Copy Result</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script> 
		// Attach an event for when the user submits the form
		$('form').on('submit', function(event) {
			
			// Prevent the page from reloading
			event.preventDefault();
			
			// inputs
			var input_1 = $("#number_1").val();
			var input_2 = $("#number_2").val();
			$('#cliniborg-result').text( input_1 * input_2 );
		});
		function copyToClipboard(element) {
		  var $temp = $("<input>");
		  $("body").append($temp);
		  $temp.val($(element).text()).select();
		  document.execCommand("copy");
		  $temp.remove();
		}
		</script>
</div>
</body>

As of 3/3/2024, I updated it so it no longer has the jquery dependency:

<head>
	<meta charset="utf-8">
	<style>
		body {
			background-color: #fff1e5;
			font-family: Tahoma, sans-serif;
		}
		form {
			text-align: left;
		}
		textarea {
			width: 75%;
			height: 150px;
			padding: 12px 20px;
			box-sizing: border-box;
			border: 2px solid #ccc;
			border-radius: 4px;
			background-color: #f8f8f8;
			resize: none;
		}
		.form-label {
			font-weight: bolder;
			overflow: auto;
			padding: 2px;
			border: 2px solid #ccc;
			background-color: #FFFFFF;
			font-size: 0.75em; /* 14px/16=0.875em */
		}
		input[type=text] {
			column-count: 10;
			padding: 12px 20px;
			margin: 8px 0;
			box-sizing: border-box;
		}
		.calculator-container {
			margin: auto;
			border: 1px solid darksalmon;
			padding: 10px;
		}
	</style>
</head>
<body>
<div class="calculator-container">
<p>Fill in your data and then submit the form both by either pressing enter or clicking the 'Try it' button:</p>

<form>    
	<label class="form-label">number 1</label> <input id="item_1" type="text"><br>
	<label class="form-label">number 2</label> <input id="item_2" type="text"><br>	
	<button id="button_1" type="submit">Try it</button><br>
</form>
<br>
<label class="form-label">Result</label> <textarea id="cliniborg-result" class="cliniborg-result" cols="80" rows="12" readonly="readonly" autocomplete="off"></textarea><br>
<button id="button_2" onclick="copyText()">Copy Result</button><br>
<script> 
	document.querySelector("#button_1").addEventListener("click", () => {
		event.preventDefault();
		let inputMote_1 = document.querySelector("#item_1").value;
		let inputMote_2 = document.querySelector("#item_2").value;
		let outputMote = document.querySelector("#cliniborg-result");
		let computation_1 = inputMote_1 * inputMote_2
		outputMote.innerHTML = computation_1;
	});
	const text = document.getElementById("cliniborg-result");
	let copyText = () => {
		navigator.clipboard
		.writeText(text.innerHTML)
		.then(() => {
		alert("Text copied!");
		})
		.catch((err) => {
		alert(err.message);
		});
	};
</script>
</div>
</body>