www.wysiwygwebbuilder.com

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>

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>

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>