calculation on the web

Joan Ferrer · Post by **Joan Ferrer** » Mon Sep 15, 2025 6:15 am

Hello, I need to do a calculation on the web, is there any information available with examples?
Thank you.
Joan

BaconFries · Post by **BaconFries** » Mon Sep 15, 2025 8:03 am

I need to do a calculation on the web,

Very vague question would really depend on what you're wanting to calculate is it just a simple 1+1=?
See the following:
Form Conditions and Calculations
Or something like
volume calculator for width, length and depth

Joan Ferrer · Post by **Joan Ferrer** » Tue Sep 16, 2025 6:21 am

Hi
For now, it is a generic question, but especially it is for calculating units of products with prices, with their possible variables.
Tnk's

onlye · Post by **onlye** » Tue Sep 16, 2025 3:41 pm

Joan Ferrer wrote: Tue Sep 16, 2025 6:21 am Hi
For now, it is a generic question, but especially it is for calculating units of products with prices, with their possible variables.
Tnk's

for that application an ecommerce could work? phpjabbers stiva cart is possible, plus a number of wizzy options.

BaconFries · Post by **BaconFries** » Tue Sep 16, 2025 9:28 pm

Maybe the following is what you are referring to. I do not take any credit for this it is provided as just an example to what I think you are asking.

For testing on a new blank workspace simply copy all of it and insert using Page HTML Between the <body></body> tags*

Code: Select all

<p>Select a product and the total amount you have to see how many units you can buy.</p>

    <label for="productSelect">Choose a Product:</label>
    <select id="productSelect">
        <option value="1.25">Pencil ($1.25)</option>
        <option value="0.75">Eraser ($0.75)</option>
        <option value="5.50">Notebook ($5.50)</option>
        <option value="2.00">Pen ($2.00)</option>
    </select>
    
    <br><br>

    <label for="amountSelect">Choose your Total Amount:</label>
    <select id="amountSelect">
        <option value="10"> $10.00</option>
        <option value="25"> $25.00</option>
        <option value="50" selected> $50.00</option>
        <option value="100">$100.00</option>
    </select>
    
    <hr>

    <div id="results"></div>

<script>
        // Get references to the select elements and the results div
        const productSelect = document.getElementById('productSelect');
        const amountSelect = document.getElementById('amountSelect');
        const resultsDiv = document.getElementById('results');

        // Function to perform the calculation and update the display
        function updateCalculation() {
            // Get the selected values from the dropdowns
            let unitPrice = parseFloat(productSelect.value);
            let totalAmount = parseFloat(amountSelect.value);

            // Calculate the total units
            let totalUnits = totalAmount / unitPrice;
            let wholeUnits = Math.floor(totalUnits);

            // Clear any previous results
            resultsDiv.innerHTML = '';
            
            // Create a new paragraph element to display the result
            const paragraph = document.createElement('p');
            paragraph.innerHTML = `With <b>$${totalAmount}</b> and a unit price of <b>$${unitPrice}</b>, you can buy <b>${totalUnits.toFixed(2)}</b> units.`;
            resultsDiv.appendChild(paragraph);

            // Create another paragraph for the whole units
            const wholeParagraph = document.createElement('p');
            wholeParagraph.innerHTML = `You can buy <b>${wholeUnits}</b> full units.`;
            resultsDiv.appendChild(wholeParagraph);
        }

        // Add event listeners to both dropdowns
        // The updateCalculation function will run whenever a user changes a selection
        productSelect.addEventListener('change', updateCalculation);
        amountSelect.addEventListener('change', updateCalculation);

        // Run the function once on page load to display the initial result
        updateCalculation();

    </script>

****Note just a Example****

Joan Ferrer · Post by **Joan Ferrer** » Tue Sep 23, 2025 8:14 am

Thank you very much for the information, it helped me create this.
Regards

PD.
I'm trying to create a formula to calculate the ratio (4:3, 2:3) of different sizes and I can't figure it out, is there any information?

https://www.fotografiamanresa.es/calcul ... -wiro.html
https://www.fotografiamanresa.es/calcul ... -seda.html
https://www.fotografiamanresa.es/calculadores/
https://www.fotografiamanresa.es/calcul ... lucio.html

Joan Ferrer · Post by **Joan Ferrer** » Tue Sep 23, 2025 3:29 pm

Joan Ferrer wrote: Tue Sep 23, 2025 8:14 am Thank you very much for the information, it helped me create this.
Regards

PD.
I'm trying to create a formula to calculate the ratio (4:3, 2:3) of different sizes and I can't figure it out, is there any information?

How can the greatest common factor (GCF)?.

https://www.fotografiamanresa.es/calcul ... -wiro.html
https://www.fotografiamanresa.es/calcul ... -seda.html
https://www.fotografiamanresa.es/calculadores/
https://www.fotografiamanresa.es/calcul ... lucio.html

BaconFries · Post by **BaconFries** » Tue Sep 23, 2025 3:49 pm

As before I take no credit for this. For testing on a blank workspace open Page HTML and insert between the <body></body>

Code: Select all

  <label for="ratio">Enter Ratio (e.g. 4:3)</label>
  <input type="text" id="ratio" placeholder="4:3">

  <label for="baseValue">Enter Base Value</label>
  <input type="number" id="baseValue" placeholder="e.g. 400">

  <label for="scaleBy">Scale By</label>
  <select id="scaleBy">
    <option value="width">Width</option>
    <option value="height">Height</option>
  </select>

  <div id="result">Result will appear here</div>

  <script>
    function parseRatio(ratioStr) {
      const [w, h] = ratioStr.split(':').map(Number);
      return { w, h };
    }

    function calculateSize(base, w, h, scaleBy) {
      if (scaleBy === 'width') {
        return { width: base, height: (base * h) / w };
      } else {
        return { width: (base * w) / h, height: base };
      }
    }

    function updateResult() {
      const ratioStr = document.getElementById('ratio').value;
      const baseValue = parseFloat(document.getElementById('baseValue').value);
      const scaleBy = document.getElementById('scaleBy').value;
      const resultDiv = document.getElementById('result');

      if (!ratioStr.includes(':') || isNaN(baseValue)) {
        resultDiv.textContent = 'Please enter a valid ratio and base value.';
        return;
      }

      const { w, h } = parseRatio(ratioStr);
      const { width, height } = calculateSize(baseValue, w, h, scaleBy);

      resultDiv.textContent = `Calculated Size: ${Math.round(width)} × ${Math.round(height)}`;
    }

    document.getElementById('ratio').addEventListener('input', updateResult);
    document.getElementById('baseValue').addEventListener('input', updateResult);
    document.getElementById('scaleBy').addEventListener('change', updateResult);
  </script>

www.wysiwygwebbuilder.com

calculation on the web

calculation on the web

Re: calculation on the web

Re: calculation on the web

Re: calculation on the web

Re: calculation on the web

Re: calculation on the web

Re: calculation on the web

Re: calculation on the web