Input Calculator Forms?

Ask the community
8

Here is a generic calculated form calculator. You will need to update your code for your calculation needs.; Just chuck in the custom code block and go from there.

<style>

body {
  font-family: Arial, sans-serif;
  background-color: #f7f7f7;
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
}

form {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

fieldset {
  margin-bottom: 20px;
  border: none;
}

legend {
  font-weight: bold;
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="number"],
input[type="range"] {
  width: 100%;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
  transition: border-color 0.3s ease;
}

input[type="number"]:focus,
input[type="range"]:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input[type="number"].error,
input[type="range"].error {
  border-color: red;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
  transition: background-color 0.3s ease;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #007bff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

input[type="range"]:hover::-webkit-slider-thumb {
  background-color: #0056b3;
}

button[type="submit"],
button[type="reset"] {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button[type="submit"]:hover,
button[type="reset"]:hover {
  background-color: #0056b3;
}

#output {
  margin-top: 20px;
  padding: 20px;
  background-color: #f2f2f2;
  border-radius: 5px;
}

#output h2 {
  margin-bottom: 10px;
}

#calculationResult {
  font-size: 24px;
  font-weight: bold;
}



</style>

  <h1>Calculated Column Form</h1>

  <form>
    <fieldset>
      <legend>Section 1</legend>
      <label for="input1">Input 1:</label>
      <input type="number" id="input1" name="input1" required>
      
      <label for="input2">Input 2:</label>
      <input type="number" id="input2" name="input2" required>
    </fieldset>

    <fieldset>
      <legend>Section 2</legend>
      <label for="input3">Input 3:</label>
      <input type="number" id="input3" name="input3" required>
      
      <label for="slider">Slider:</label>
      <input type="range" id="slider" name="slider" min="0" max="100" step="1">
      <span id="sliderValue">50</span>
    </fieldset>
  </form>

  <div id="output">
    <h2>Calculated Column Output:</h2>
    <p id="calculationResult">-</p>
  </div>

  <script>
    // JavaScript code for slider value display and automatic output update
    var input1 = document.getElementById("input1");
    var input2 = document.getElementById("input2");
    var input3 = document.getElementById("input3");
    var slider = document.getElementById("slider");
    var sliderValue = document.getElementById("sliderValue");
    var calculationResult = document.getElementById("calculationResult");

    function updateOutput() {
      var result = parseInt(input1.value) + parseInt(input2.value) + parseInt(input3.value) + parseInt(slider.value);
      calculationResult.textContent = result;
    }

    input1.addEventListener("input", updateOutput);
    input2.addEventListener("input", updateOutput);
    input3.addEventListener("input", updateOutput);
    slider.addEventListener("input", function() {
      sliderValue.innerHTML = this.value;
      updateOutput();
    });
  </script>