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>

Joan Ferrer · Post by **Joan Ferrer** » Wed Sep 24, 2025 7:46 am

Hi BaconFries
Your presentation is very interesting and I appreciate it very much, I have reviewed it very carefully.

My question (or presentation) is:

With WWB, two "spinners", one with the width value, and the other with the height value, calculate the greatest common divisor (GCF) of these values and the result placed in an "editbox".

Divide each of the values entered as height and width, by the result of the greatest common divisor (GCF).

I do not know if these operations can be done only with WWB, what I have the most doubts about is with the greatest common divisor (GCF), the others I think can be done.

Example: 10x15cm., what ratio does it have?

Answer: 10 x 15 = 2 : 3

The greatest common divisor (GCF) of 10 and 15 is: 5

Divide both terms by the greatest common divisor (GCF), 5:
10 ÷ 5 = 2
15 ÷ 5 = 3

Ratio = 2:3

BaconFries · Post by **BaconFries** » Wed Sep 24, 2025 9:08 am

It's not whether it can be done in the software or not. Its the logic behind it. It is possible by implementing a script to allow user input and the output displayed. Both examples show that scripts can be used to calculate width/height with the result displayed. What your asking is a step further and requires a different script implementation.

Joan Ferrer · Post by **Joan Ferrer** » Wed Sep 24, 2025 10:59 am

Okay, understood, I appreciate your interest. Greetings.

BaconFries · Post by **BaconFries** » Wed Sep 24, 2025 11:37 am

Like before I don't take any credit for this but it might be a step closer to what your asking.
Insert using Page HTML between <body></body> to test in a blank workspace.

Code: Select all

<label for="width">Enter Width</label>
  <input type="number" id="width" placeholder="e.g. 1920">

  <label for="height">Enter Height</label>
  <input type="number" id="height" placeholder="e.g. 1080">

  <div id="result">Simplified ratio will appear here</div>

  <script>
    function gcd(a, b) {
      return b === 0 ? a : gcd(b, a % b);
    }

    function simplifyRatio(width, height) {
      const divisor = gcd(width, height);
      return {
        simplifiedWidth: width / divisor,
        simplifiedHeight: height / divisor,
        divisor
      };
    }

    function updateResult() {
      const width = parseInt(document.getElementById('width').value);
      const height = parseInt(document.getElementById('height').value);
      const resultDiv = document.getElementById('result');

      if (isNaN(width) || isNaN(height)) {
        resultDiv.textContent = 'Please enter valid numbers for width and height.';
        return;
      }

      const { simplifiedWidth, simplifiedHeight, divisor } = simplifyRatio(width, height);
      resultDiv.textContent = `Original: ${width}:${height}\nGCD: ${divisor}\nSimplified: ${simplifiedWidth}:${simplifiedHeight}`;
    }

    document.getElementById('width').addEventListener('input', updateResult);
    document.getElementById('height').addEventListener('input', 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

Re: calculation on the web

Re: calculation on the web

Re: calculation on the web

Re: calculation on the web