content logo

React Forms:

React Online Calculator Tool

In industrial websites that sell roll-shaped products, it can be very useful to use a simple calculator to calculate the length of each roll and the amount that the user needs. In this form, we have prepared this calculator for you with a simple code. This calculator has a blue button and the rest of the fields are information that the user must enter to calculate.

#

Free Calculator Form Code

#

Online Calculator Code

#

React Js Calculator

#

Javascript Online Calculations

<!-- This script got from frontendfreecode.com -->
<div class="flex__wrapper">
    <div id="container" class="container"></div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
* {
  box-sizing: border-box;
}
.flex__wrapper {
  background: #f5f7fa;
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}
.container {
  background: white;
  border-top: 1px solid #e4e9f2;
  border-right: 1px solid #e4e9f2;
  border-bottom: 3px solid #e4e9f2;
  border-left: 1px solid #e4e9f2;
  border-radius: 3px;
  margin: 0 auto;
  max-width: 400px;
  padding: 20px;
  width: 100%;
}
@media (max-width: 400px) {
  .container {
    border-radius: 0;
  }
}
.form__container {
  display: flex;
  flex-direction: column;
  padding: 15px 0 0 0;
  width: 100%;
}
.form__container > * {
  margin: 5px 0;
}
.input-group {
  display: flex;
}
.input-group > * {
  flex-grow: 1;
}
.input-group input:first-of-type {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.input-group input:last-of-type {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.input {
  background: #f5f7fa;
  border: 1px solid #e7eaf2;
  border-radius: 3px;
  color: #a0a8b7;
  cursor: pointer;
  height: 40px;
  padding: 0 10px;
  transition: all 0.15s;
}
.input:focus {
  outline: none;
}
.input__radio {
  background: #e7eaf2;
  color: #6c6d71;
}
.input--active {
  background: #f5f7fa;
  color: #39ade8;
}
.input__text {
  cursor: text;
}
.input--error {
  border-bottom: 3px solid #FF002F;
  color: #FF002F;
}
.input__file {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.input__file--label {
  cursor: pointer;
  line-height: 40px;
}
.input__file--label i {
  margin-right: 10px;
}
.input__file:focus + label, .input__file + label:hover {
  background-color: #e7eaf2;
}
.button {
  background: #39ade8;
  border: none;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  height: 40px;
  padding: 0 10px;
}
.button:focus {
  outline: none;
}
.select {
  -webkit-appearance: none;
}
.output__container {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
}
.output__header {
  background: #f5f7fa;
  border: 1px solid #e7eaf2;
  border-bottom: 3px solid #e7eaf2;
  border-radius: 3px;
  color: #6c6d71;
  margin: 0;
  padding: 10px;
  text-align: right;
  width: 100%;
}
.flash__container {
  width: 100%;
  height: 30px;
  background: #FF002F;
  position: absolute;
  transition: all 0.25s;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -30px;
}
.flash__message {
  color: white;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 12px;
}
.admin {
  height: 50px;
  position: absolute;
  width: 50px;
}
.admin__btn {
  background: pink;
  border-radius: 15px;
  height: 30px;
  margin: 10px;
  width: 30px;
}
const materials = [
{
  'name': '022 Mesh',
  'type': 'Mesh',
  'thickness': '0.019',
  'rollWall': '0.375' },
{
  'name': '313 Mesh',
  'type': 'Mesh',
  'thickness': '0.02',
  'rollWall': '0.375' }];
class Output extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "output__container" }, /*#__PURE__*/
      React.createElement("h1", { id: "value", className: "output__header" }, "0")));
  }}
class RadioToggle extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "input-group" }, /*#__PURE__*/
      React.createElement("input", { id: "default", className: "input input__radio input--active", type: "button", value: "3" }), /*#__PURE__*/
      React.createElement("input", { id: "large", className: "input input__radio", type: "button", value: "6" })));
  }}
class Input extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("input", { id: "circumference", className: "input input__text", type: "text", placeholder: this.props.placeholder }));
  }}
class SelectMaterial extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("select", { id: "material", className: "input select" }, /*#__PURE__*/
      React.createElement("option", { value: "", disabled: true }, "Material"),
      materials.map(material => {
        return /*#__PURE__*/React.createElement("option", { value: material.thickness }, material.name);
      })));
  }}
class SelectType extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("select", { className: "input select" }, /*#__PURE__*/
      React.createElement("option", { value: "", disabled: true }, "Type"),
      materials.map(material => {
        return /*#__PURE__*/React.createElement("option", { value: material.type }, material.type);
      })));
  }}
class CalculateBtn extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("input", { id: "calc", className: "button", type: "button", value: this.props.name }));
  }}
class Form extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "form__container" }, /*#__PURE__*/
      React.createElement(RadioToggle, null), /*#__PURE__*/
      React.createElement(Input, { placeholder: "roll circumference" }), /*#__PURE__*/
      React.createElement(SelectMaterial, null), /*#__PURE__*/
      React.createElement(SelectType, null), /*#__PURE__*/
      React.createElement(CalculateBtn, { name: "Calculate" })));
  }}
class Calculator extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(Output, null), /*#__PURE__*/
      React.createElement(Form, null)));
  }}
ReactDOM.render( /*#__PURE__*/
React.createElement(Calculator, null),
document.getElementById('container'));
const calculateBtn = document.getElementById('calc');
const circumferenceInput = document.getElementById('circumference');
const outputValue = document.getElementById('value');
const materialSelect = document.getElementById('material');
const flash = document.getElementById('flash');
const threeInchCoreBtn = document.getElementById('default');
const sixInchCoreBtn = document.getElementById('large');
let flashed = false;
let coreSize = 3;
let coreWall = 0.375;
threeInchCoreBtn.addEventListener('click', () => {
  coreSize = 3;
  toggleCoreSizeBtn(coreSize);
});
sixInchCoreBtn.addEventListener('click', () => {
  coreSize = 6;
  toggleCoreSizeBtn(coreSize);
});
calculateBtn.addEventListener('click', outputRemainingMaterialLength);
function toggleCoreSizeBtn(core) {
  if (core == 3) {
    threeInchCoreBtn.classList.add('input--active');
    sixInchCoreBtn.classList.remove('input--active');
  } else {
    threeInchCoreBtn.classList.remove('input--active');
    sixInchCoreBtn.classList.add('input--active');
  }
}
function outputRemainingMaterialLength() {
  const data = parseFloat(circumferenceInput.value);
  const selectedMaterial = parseFloat(
  materialSelect.options[materialSelect.selectedIndex].value);
  if (data === parseFloat(data)) {
    const remainingLength = getRemainingMaterialLength(coreSize, coreWall, selectedMaterial, data);
    if (remainingLength >= 0) {
      outputValue.innerHTML = `${Math.round(remainingLength / 12 * 1000) / 1000} ft`;
    } else {
      showFlashMessage('negative result');
    }
  } else {
    showFlashMessage('NaN');
  }
}
function showFlashMessage(err) {
  toggleFlashMessage(err);
  setTimeout(() => {
    toggleFlashMessage(err);
  }, 5000);
}
function toggleFlashMessage(err) {
  if (!flashed) {
    if (err == 'negative result') {
      flash.style.top = '0px';
    } else if (err == 'NaN') {
      circumferenceInput.classList.add('input--error');
    }
    flashed = true;
  } else
  {
    flash.style.top = '-30px';
    circumferenceInput.classList.remove('input--error');
    flashed = false;
  }
}
function getRemainingMaterialLength(coreDiameter, coreThickness, materialThickness, circumference) {
  const pi = Math.PI;
  const totalCoreDiameter = coreDiameter + 2 * coreThickness;
  const totalMaterialThickness = materialThickness * 2;
  const outsideDiameter = circumference / pi;
  const numberOfTurns = (outsideDiameter - totalCoreDiameter) / totalMaterialThickness;
  return (
    pi * (numberOfTurns * (totalCoreDiameter + materialThickness * (numberOfTurns - 1))));
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js'></script>
<style>
* {
  box-sizing: border-box;
}
.flex__wrapper {
  background: #f5f7fa;
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}
.container {
  background: white;
  border-top: 1px solid #e4e9f2;
  border-right: 1px solid #e4e9f2;
  border-bottom: 3px solid #e4e9f2;
  border-left: 1px solid #e4e9f2;
  border-radius: 3px;
  margin: 0 auto;
  max-width: 400px;
  padding: 20px;
  width: 100%;
}
@media (max-width: 400px) {
  .container {
    border-radius: 0;
  }
}
.form__container {
  display: flex;
  flex-direction: column;
  padding: 15px 0 0 0;
  width: 100%;
}
.form__container > * {
  margin: 5px 0;
}
.input-group {
  display: flex;
}
.input-group > * {
  flex-grow: 1;
}
.input-group input:first-of-type {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.input-group input:last-of-type {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.input {
  background: #f5f7fa;
  border: 1px solid #e7eaf2;
  border-radius: 3px;
  color: #a0a8b7;
  cursor: pointer;
  height: 40px;
  padding: 0 10px;
  transition: all 0.15s;
}
.input:focus {
  outline: none;
}
.input__radio {
  background: #e7eaf2;
  color: #6c6d71;
}
.input--active {
  background: #f5f7fa;
  color: #39ade8;
}
.input__text {
  cursor: text;
}
.input--error {
  border-bottom: 3px solid #FF002F;
  color: #FF002F;
}
.input__file {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.input__file--label {
  cursor: pointer;
  line-height: 40px;
}
.input__file--label i {
  margin-right: 10px;
}
.input__file:focus + label, .input__file + label:hover {
  background-color: #e7eaf2;
}
.button {
  background: #39ade8;
  border: none;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  height: 40px;
  padding: 0 10px;
}
.button:focus {
  outline: none;
}
.select {
  -webkit-appearance: none;
}
.output__container {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
}
.output__header {
  background: #f5f7fa;
  border: 1px solid #e7eaf2;
  border-bottom: 3px solid #e7eaf2;
  border-radius: 3px;
  color: #6c6d71;
  margin: 0;
  padding: 10px;
  text-align: right;
  width: 100%;
}
.flash__container {
  width: 100%;
  height: 30px;
  background: #FF002F;
  position: absolute;
  transition: all 0.25s;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -30px;
}
.flash__message {
  color: white;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 12px;
}
.admin {
  height: 50px;
  position: absolute;
  width: 50px;
}
.admin__btn {
  background: pink;
  border-radius: 15px;
  height: 30px;
  margin: 10px;
  width: 30px;
}
</style>

</head>
<body>
<div class="flex__wrapper">
    <div id="container" class="container"></div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
const materials = [
{
  'name': '022 Mesh',
  'type': 'Mesh',
  'thickness': '0.019',
  'rollWall': '0.375' },
{
  'name': '313 Mesh',
  'type': 'Mesh',
  'thickness': '0.02',
  'rollWall': '0.375' }];
class Output extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "output__container" }, /*#__PURE__*/
      React.createElement("h1", { id: "value", className: "output__header" }, "0")));
  }}
class RadioToggle extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "input-group" }, /*#__PURE__*/
      React.createElement("input", { id: "default", className: "input input__radio input--active", type: "button", value: "3" }), /*#__PURE__*/
      React.createElement("input", { id: "large", className: "input input__radio", type: "button", value: "6" })));
  }}
class Input extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("input", { id: "circumference", className: "input input__text", type: "text", placeholder: this.props.placeholder }));
  }}
class SelectMaterial extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("select", { id: "material", className: "input select" }, /*#__PURE__*/
      React.createElement("option", { value: "", disabled: true }, "Material"),
      materials.map(material => {
        return /*#__PURE__*/React.createElement("option", { value: material.thickness }, material.name);
      })));
  }}
class SelectType extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("select", { className: "input select" }, /*#__PURE__*/
      React.createElement("option", { value: "", disabled: true }, "Type"),
      materials.map(material => {
        return /*#__PURE__*/React.createElement("option", { value: material.type }, material.type);
      })));
  }}
class CalculateBtn extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("input", { id: "calc", className: "button", type: "button", value: this.props.name }));
  }}
class Form extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "form__container" }, /*#__PURE__*/
      React.createElement(RadioToggle, null), /*#__PURE__*/
      React.createElement(Input, { placeholder: "roll circumference" }), /*#__PURE__*/
      React.createElement(SelectMaterial, null), /*#__PURE__*/
      React.createElement(SelectType, null), /*#__PURE__*/
      React.createElement(CalculateBtn, { name: "Calculate" })));
  }}
class Calculator extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(Output, null), /*#__PURE__*/
      React.createElement(Form, null)));
  }}
ReactDOM.render( /*#__PURE__*/
React.createElement(Calculator, null),
document.getElementById('container'));
const calculateBtn = document.getElementById('calc');
const circumferenceInput = document.getElementById('circumference');
const outputValue = document.getElementById('value');
const materialSelect = document.getElementById('material');
const flash = document.getElementById('flash');
const threeInchCoreBtn = document.getElementById('default');
const sixInchCoreBtn = document.getElementById('large');
let flashed = false;
let coreSize = 3;
let coreWall = 0.375;
threeInchCoreBtn.addEventListener('click', () => {
  coreSize = 3;
  toggleCoreSizeBtn(coreSize);
});
sixInchCoreBtn.addEventListener('click', () => {
  coreSize = 6;
  toggleCoreSizeBtn(coreSize);
});
calculateBtn.addEventListener('click', outputRemainingMaterialLength);
function toggleCoreSizeBtn(core) {
  if (core == 3) {
    threeInchCoreBtn.classList.add('input--active');
    sixInchCoreBtn.classList.remove('input--active');
  } else {
    threeInchCoreBtn.classList.remove('input--active');
    sixInchCoreBtn.classList.add('input--active');
  }
}
function outputRemainingMaterialLength() {
  const data = parseFloat(circumferenceInput.value);
  const selectedMaterial = parseFloat(
  materialSelect.options[materialSelect.selectedIndex].value);
  if (data === parseFloat(data)) {
    const remainingLength = getRemainingMaterialLength(coreSize, coreWall, selectedMaterial, data);
    if (remainingLength >= 0) {
      outputValue.innerHTML = `${Math.round(remainingLength / 12 * 1000) / 1000} ft`;
    } else {
      showFlashMessage('negative result');
    }
  } else {
    showFlashMessage('NaN');
  }
}
function showFlashMessage(err) {
  toggleFlashMessage(err);
  setTimeout(() => {
    toggleFlashMessage(err);
  }, 5000);
}
function toggleFlashMessage(err) {
  if (!flashed) {
    if (err == 'negative result') {
      flash.style.top = '0px';
    } else if (err == 'NaN') {
      circumferenceInput.classList.add('input--error');
    }
    flashed = true;
  } else
  {
    flash.style.top = '-30px';
    circumferenceInput.classList.remove('input--error');
    flashed = false;
  }
}
function getRemainingMaterialLength(coreDiameter, coreThickness, materialThickness, circumference) {
  const pi = Math.PI;
  const totalCoreDiameter = coreDiameter + 2 * coreThickness;
  const totalMaterialThickness = materialThickness * 2;
  const outsideDiameter = circumference / pi;
  const numberOfTurns = (outsideDiameter - totalCoreDiameter) / totalMaterialThickness;
  return (
    pi * (numberOfTurns * (totalCoreDiameter + materialThickness * (numberOfTurns - 1))));
}
</script>

</body>
</html>
Preview