hello world
categories:
miscellaneous
javascript
| This one just multiplies two numbers together. |
| The output below is not sent anywhere or saved. You can copy it so you've got a record of what you did. |
| Submit the form both by either pressing enter or clicking the 'Try it' button. |
Fill in your data and then submit the form both by either pressing enter or clicking the 'Try it' button:
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>
As of 8/6/2024, I updated some formatting and moved the stying to an external file. Below is the html file:
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css\calc-style.css">
</head>
<body>
<div class="table-legend">
<table>
<tr><td>This one just multiplies two numbers together.</td></tr>
<tr><td>The output below is not sent anywhere or saved. You can copy it so you've got a record of what you did. </td></tr>
<tr><td>Submit the form both by either pressing enter or clicking the 'Try it' button. </td></tr>
</table>
</div>
<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>
<div id="confirmation-notice" class="confirmation-notice">The result has been copied to the clipboard.</div>
<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.textContent)
.then(() => {
var text = document.getElementById("confirmation-notice");
text.style.display = "block";
setTimeout(function() {
text.style.display = "none";
}, 2500); // 3 seconds
})
.catch((err) => {
alert(err.message);
});
};
</script>
</div>
</body>
The styling (css) file is in the same directory in a folder called “css”. The contents of the external file (calc-style.css) is here:
body {
background-color: #fff1e5;
font-family: Tahoma, sans-serif;
}
form {
text-align: left;
}
textarea {
max-width: 75%;
max-height: 40%;
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: #e5f9ff;
font-size: 0.75em; /* 14px/16=0.875em */
}
.form-label-detail {
max-width: 50%;
font-weight: normal;
overflow: auto;
padding: 2px;
border: 2px solid #ccc;
background-color: #e5f9ff;
font-size: 0.75em; /* 14px/16=0.875em */
}
.table-legend {
overflow-x:auto;
font-weight: normal;
padding: 2px;
border: 2px solid #ccc;
background-color: #e5f9ff;
font-size: 0.75em;
}
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;
}
.confirmation-notice {
max-width: 50%;
display: none;
overflow-x:auto;
font-weight: bolder;
padding: 2px;
border: 2px solid #ccc;
background-color: #e5f9ff;
font-size: 0.75em;
color: darkorange;
}