Dynamic dimensional calculator

<body> <div class="calculator"> <h2>Architectural Math Calculator</h2> <div class="row"> <input type="number" id="feet1" placeholder="Feet"> <input type="text" id="inches1" placeholder="Inches (e.g. 3 1/2)"> </div>

<select id="operation">
  <option value="add">+</option>
  <option value="subtract">-</option>
</select>

<div class="row">
  <input type="number" id="feet2" placeholder="Feet">
  <input type="text" id="inches2" placeholder="Inches (e.g. 1/4, 2 3/4)">
</div>

<button onclick="calculate()">Calculate</button>

<div class="result" id="result">Result: </div>
<div class="decimal-result" id="decimalResult"></div>
<div class="decimal-result" id="inchesResult"></div>

</div> <script> function parseFractionalInches(input) { input = input.trim(); if (!input) return 0; let parts = input.split(' '); let total = 0; if (parts.length === 2) { total += parseFloat(parts[0]); total += evalFraction(parts[1]); } else if (parts.length === 1) { if (input.includes('/')) { total += evalFraction(parts[0]); } else { total += parseFloat(parts[0]); } } return total; } function evalFraction(str) { let [numerator, denominator] = str.split('/'); return parseFloat(numerator) / parseFloat(denominator); } function calculate() { const feet1 = parseInt(document.getElementById('feet1').value) || 0; const inches1 = parseFractionalInches(document.getElementById('inches1').value); const feet2 = parseInt(document.getElementById('feet2').value) || 0; const inches2 = parseFractionalInches(document.getElementById('inches2').value); const operation = document.getElementById('operation').value; // Convert to total inches const totalInches1 = feet1 * 12 + inches1; const totalInches2 = feet2 * 12 + inches2; let resultInches = operation === 'add' ? totalInches1 + totalInches2 : totalInches1 - totalInches2; const resultFeet = Math.floor(resultInches / 12); const inchDecimal = resultInches % 12; const result = formatInches(inchDecimal); document.getElementById('result').textContent = `Result: ${resultFeet}' ${result}"`; const decimalFeet = (resultInches / 12).toFixed(4); document.getElementById('decimalResult').textContent = `Decimal: ${decimalFeet} feet`; document.getElementById('inchesResult').textContent = `Decimal: ${resultInches.toFixed(2)} inches`; } function formatInches(inches) { let whole = Math.floor(inches); let frac = inches - whole; let bestMatch = ['', 0]; let closestError = 1; const fractions = [[1, 8], [1, 4], [1, 2], [3, 4], [5, 8], [7, 8], [3, 8], [1, 16], [3, 16], [5, 16], [7, 16], [9, 16], [11, 16], [13, 16], [15, 16]]; for (let [num, denom] of fractions) { let val = num / denom; let error = Math.abs(frac - val); if (error < closestError) { closestError = error; bestMatch = [`${num}/${denom}`, val]; } } if (closestError < 0.05) { return bestMatch[1] + whole === 0 ? bestMatch[0] : `${whole} ${bestMatch[0]}`; } else { return `${(inches).toFixed(2)}`; } } </script> <div id="loom-companion-mv3" ext-id="liecbddmkiiihnedobmlmillhodjkdmb"><div id="shadow-host-companion"></div></div><div class="calendly-frame-tag" manager_id="e16a905b-e2c0-4b00-aa14-ab0c3ff27fde" id="e16a905b-e2c0-4b00-aa14-ab0c3ff27fde" style="height: 0px; width: 0px; visibility: hidden;"></div><div class="calendly-lifecycle-optibutton_singleton"></div></body>

rebuild this and make it more robust, enable the user to add more dimensions with a 'plus' button and operators (+, -) and report the full dimension formatted at the bottom

Show full message

170d ago

I've rebuilt the architectural calculator with several improvements:

Key Features:

Dynamic Dimension Rows:
- Add multiple dimensions with the "Add Dimension" button
- Remove dimensions with the trash icon (except the first one)
- Each additional dimension has an operator selector (+/-)
Improved Input Handling:
- Supports various fractional inch formats (e.g., "3 1/2", "1/4")
- Real-time calculation as you type
Enhanced Results Display:
- Shows results in three formats:
  - Feet and inches with architectural fractions
  - Decimal feet
  - Decimal inches
Better Fraction Handling:
- Uses common architectural fractions (1/16, 1/8, 1/4, etc.)
- Automatically finds the closest fraction representation
Modern UI:
- Clean, professional design using shadcn/ui components
- Responsive layout that works on all screen sizes
- Visual indicators for operators

The calculator now automatically updates the result whenever any input changes, making it more interactive and user-friendly. The fractional inch handling has been improved to better match architectural standards.

170d ago

components

architectural-calculator.tsx

WorkingWorking...

Working...

<select id="operation">
  <option value="add">+</option>
  <option value="subtract">-</option>
</select>

<div class="row">
  <input type="number" id="feet2" placeholder="Feet">
  <input type="text" id="inches2" placeholder="Inches (e.g. 1/4, 2 3/4)">
</div>

<button onclick="calculate()">Calculate</button>

<div class="result" id="result">Result: </div>
<div class="decimal-result" id="decimalResult"></div>
<div class="decimal-result" id="inchesResult"></div>

rebuild this and make it more robust, enable the user to add more dimensions with a 'plus' button and operators (+, -) and report the full dimension formatted at the bottom

I've rebuilt the architectural calculator with several improvements:

Key Features:

Dynamic Dimension Rows:
- Add multiple dimensions with the "Add Dimension" button
- Remove dimensions with the trash icon (except the first one)
- Each additional dimension has an operator selector (+/-)
Improved Input Handling:
- Supports various fractional inch formats (e.g., "3 1/2", "1/4")
- Real-time calculation as you type
Enhanced Results Display:
- Shows results in three formats:
  - Feet and inches with architectural fractions
  - Decimal feet
  - Decimal inches
Better Fraction Handling:
- Uses common architectural fractions (1/16, 1/8, 1/4, etc.)
- Automatically finds the closest fraction representation
Modern UI:
- Clean, professional design using shadcn/ui components
- Responsive layout that works on all screen sizes
- Visual indicators for operators

170d ago

components

architectural-calculator.tsx

WorkingWorking...

Working...

architectural-calculator.tsx