diff --git a/README.md b/README.md index 7c0789c..a2c3d2b 100644 --- a/README.md +++ b/README.md @@ -57,11 +57,11 @@ Below `MFD. BY FORD MOTOR CO.`: You can also use the Trailer Weight Calculator through a web interface. The web interface allows you to input cargo weights, max weight, and gross vehicle weight, and calculates the trailer weight for you. -Access the web interface here: [Trailer Weight Calculator](https://your-github-username.github.io/trailer_weight/) +Access the web interface here: [Trailer Weight Calculator](https://djdefi.github.io/trailer_weight/) ### Instructions for using the web interface: -1. Open the [Trailer Weight Calculator](https://your-github-username.github.io/trailer_weight/) in your web browser. +1. Open the [Trailer Weight Calculator](https://djdefi.github.io/trailer_weight/) in your web browser. 2. Enter the cargo weights as a comma-separated list in the "Cargo Weights" field. 3. Enter the max combined weight in the "Max Combined Weight" field. 4. Enter the gross vehicle weight in the "Gross Vehicle Weight" field. diff --git a/index.html b/index.html index c0325ab..a82f643 100644 --- a/index.html +++ b/index.html @@ -8,35 +8,101 @@

Trailer Weight Calculator

+
+

Tow Vehicle Information

+

Enter information from your truck/tow vehicle only. Trailer specifications are found separately for comparison.

+
-
Enter the weights of all cargo items separated by commas. Example: 210,180,40,125
- + + -
Enter the maximum combined weight of cargo and occupants. This value can be found on the yellow payload sticker inside the driver side door. Example: 1500
- + + -
Enter the gross vehicle weight (GVWR). This value can be found on the gross vehicle weight sticker inside the driver side door. Example: 7350
- + +

Results

-

-

-

-

-

-

+
+

+
+
+

+

+

+
+
+

Weight Distribution Analysis

+

+

+

+
+
+

Reference Values

+

+

+
+
+

Using Trailer Specifications for Comparison + ? +

+ +

Important: Find your trailer's "Dry Weight" or "UVW" on the trailer's data plate and ensure it's less than your calculated max towable weight.

+
+
+ + diff --git a/script.js b/script.js index 7bd198f..c60416a 100644 --- a/script.js +++ b/script.js @@ -8,24 +8,219 @@ document.addEventListener('DOMContentLoaded', function() { const combinedCargoWeight = document.getElementById('combined-cargo-weight'); const maxCombinedWeight = document.getElementById('max-combined-weight'); const grossVehicleWeightResult = document.getElementById('gross-vehicle-weight-result'); + const hitchWeight = document.getElementById('hitch-weight'); + const payloadUtilization = document.getElementById('payload-utilization'); + const weightDistributionRatio = document.getElementById('weight-distribution-ratio'); - calculateButton.addEventListener('click', function() { - const cargo = form.cargo.value.split(',').map(Number); - const maxWeight = parseInt(form['max-weight'].value); - const grossVehicleWeight = parseInt(form['gross-vehicle-weight'].value); + // Trailer analysis elements + const trailerForm = document.getElementById('trailer-form'); + const analyzeTrailerButton = document.getElementById('analyze-trailer-button'); + const trailerAnalysis = document.getElementById('trailer-analysis'); + const trailerCompatibilityStatus = document.getElementById('trailer-compatibility-status'); + const trailerPayloadCapacity = document.getElementById('trailer-payload-capacity'); + const maxTrailerCargo = document.getElementById('max-trailer-cargo'); + const trailerSafetyMargin = document.getElementById('trailer-safety-margin'); + const recommendedCargoDistribution = document.getElementById('recommended-cargo-distribution'); + const hitchWeightAnalysis = document.getElementById('hitch-weight-analysis'); + + // Store calculated values for trailer analysis + let calculatedMaxTrailerWeight = 0; + + // Initialize tooltips + initializeTooltips(); + calculateButton.addEventListener('click', function() { + // Clear any previous error messages + clearErrors(); + + // Parse and validate inputs + const cargoInput = form.cargo.value.trim(); + if (!cargoInput) { + showError('Please enter cargo weights'); + return; + } + + let cargo; + try { + cargo = cargoInput.split(',').map(item => { + const weight = parseFloat(item.trim()); + if (isNaN(weight) || weight <= 0) { + throw new Error('All cargo weights must be positive numbers'); + } + return weight; + }); + } catch (error) { + showError(error.message); + return; + } + + const maxWeight = parseFloat(form['max-weight'].value); + const grossVehicleWeight = parseFloat(form['gross-vehicle-weight'].value); + + // Validate inputs + if (isNaN(maxWeight) || maxWeight <= 0) { + showError('Max combined weight must be a positive number'); + return; + } + + if (isNaN(grossVehicleWeight) || grossVehicleWeight <= 0) { + showError('Gross vehicle weight must be a positive number'); + return; + } + const combinedCargoWeightValue = cargo.reduce((a, b) => a + b, 0); - const maxTrailerWeightValue = ((maxWeight - combinedCargoWeightValue) / 0.13).toFixed(2); + + if (combinedCargoWeightValue >= maxWeight) { + showError('Combined cargo weight must be less than max combined weight'); + return; + } + + // Calculate results using 13% rule: remaining payload capacity divided by 0.13 gives max trailer weight + const maxTrailerWeightValue = Math.round((maxWeight - combinedCargoWeightValue) / 0.13); + calculatedMaxTrailerWeight = maxTrailerWeightValue; // Store for trailer analysis const loadedTruckWeightValue = grossVehicleWeight - (maxWeight - combinedCargoWeightValue); const remainingWeightValue = grossVehicleWeight - loadedTruckWeightValue; + + // Calculate additional weight distribution metrics + const hitchWeightValue = Math.round(maxTrailerWeightValue * 0.13); // 13% of trailer weight for hitch weight + const payloadUtilizationValue = Math.round((combinedCargoWeightValue / maxWeight) * 100); + const remainingCapacityPercentage = Math.round(((maxWeight - combinedCargoWeightValue) / maxWeight) * 100); - maxTrailerWeight.textContent = `Max towable gross trailer weight: ${maxTrailerWeightValue}`; - loadedTruckWeight.textContent = `Loaded Truck weight: ${loadedTruckWeightValue}`; - remainingWeight.textContent = `Remaining weight: ${remainingWeightValue}`; - combinedCargoWeight.textContent = `Combined cargo weight: ${combinedCargoWeightValue}`; - maxCombinedWeight.textContent = `Max combined weight: ${maxWeight}`; - grossVehicleWeightResult.textContent = `Gross vehicle weight: ${grossVehicleWeight}`; + maxTrailerWeight.textContent = `Max towable gross trailer weight: ${maxTrailerWeightValue} lbs`; + loadedTruckWeight.textContent = `Loaded Truck weight: ${loadedTruckWeightValue} lbs`; + remainingWeight.textContent = `Remaining weight: ${remainingWeightValue} lbs`; + combinedCargoWeight.textContent = `Combined cargo weight: ${combinedCargoWeightValue} lbs`; + maxCombinedWeight.textContent = `Max combined weight: ${maxWeight} lbs`; + grossVehicleWeightResult.textContent = `Gross vehicle weight: ${grossVehicleWeight} lbs`; + hitchWeight.textContent = `Estimated hitch weight (13%): ${hitchWeightValue} lbs`; + payloadUtilization.textContent = `Payload utilization: ${payloadUtilizationValue}%`; + weightDistributionRatio.textContent = `Remaining capacity: ${remainingCapacityPercentage}%`; results.style.display = 'block'; + + // Show the optional trailer information section after results are calculated + document.getElementById('trailer-info-section').style.display = 'block'; + }); + + // Trailer analysis functionality + analyzeTrailerButton.addEventListener('click', function() { + const trailerDryWeight = parseFloat(trailerForm['trailer-dry-weight'].value); + const trailerGVWR = parseFloat(trailerForm['trailer-gvwr'].value); + + // Validate inputs + if (isNaN(trailerDryWeight) || trailerDryWeight <= 0) { + alert('Please enter a valid trailer dry weight'); + return; + } + + if (isNaN(trailerGVWR) || trailerGVWR <= 0) { + alert('Please enter a valid trailer GVWR'); + return; + } + + if (trailerGVWR <= trailerDryWeight) { + alert('Trailer GVWR must be greater than dry weight'); + return; + } + + // Calculate trailer analysis + const trailerPayloadCapacityValue = trailerGVWR - trailerDryWeight; + const isCompatible = trailerDryWeight <= calculatedMaxTrailerWeight; + const safetyMarginValue = calculatedMaxTrailerWeight - trailerDryWeight; + const maxSafeTrailerCargoWeight = Math.min(trailerPayloadCapacityValue, safetyMarginValue); + + // Calculate hitch weight analysis + const currentHitchWeight = Math.round(trailerDryWeight * 0.13); + const maxLoadedHitchWeight = Math.round(trailerGVWR * 0.13); + + // Display compatibility status + if (isCompatible) { + trailerCompatibilityStatus.innerHTML = `✓ COMPATIBLE: Your trailer (${trailerDryWeight} lbs dry weight) is within your tow vehicle's capacity (${calculatedMaxTrailerWeight} lbs max).`; + } else { + trailerCompatibilityStatus.innerHTML = `⚠ INCOMPATIBLE: Your trailer (${trailerDryWeight} lbs dry weight) exceeds your tow vehicle's capacity (${calculatedMaxTrailerWeight} lbs max).`; + } + + // Display trailer loading capacity + trailerPayloadCapacity.textContent = `Trailer payload capacity: ${trailerPayloadCapacityValue} lbs (GVWR ${trailerGVWR} - Dry Weight ${trailerDryWeight})`; + + if (isCompatible) { + maxTrailerCargo.innerHTML = `Max safe cargo for trailer: ${maxSafeTrailerCargoWeight} lbs`; + trailerSafetyMargin.textContent = `Safety margin: ${safetyMarginValue} lbs remaining tow capacity`; + } else { + maxTrailerCargo.innerHTML = `Cannot safely tow this trailer - exceeds capacity by ${Math.abs(safetyMarginValue)} lbs`; + trailerSafetyMargin.textContent = `Overweight by: ${Math.abs(safetyMarginValue)} lbs`; + } + + // Loading recommendations + if (isCompatible) { + if (maxSafeTrailerCargoWeight > 0) { + recommendedCargoDistribution.textContent = `Recommended: Load up to ${maxSafeTrailerCargoWeight} lbs of cargo in the trailer, with heavier items toward the front (but not beyond the axle).`; + } else { + recommendedCargoDistribution.textContent = `Recommended: Trailer is at capacity when empty. Do not add cargo to the trailer.`; + } + + hitchWeightAnalysis.textContent = `Hitch weight: ${currentHitchWeight} lbs empty, up to ${maxLoadedHitchWeight} lbs when fully loaded. Ensure your hitch can handle this weight.`; + } else { + recommendedCargoDistribution.innerHTML = `This trailer cannot be safely towed with your current vehicle setup. Consider reducing truck cargo weight or using a different trailer.`; + hitchWeightAnalysis.textContent = `Estimated hitch weight would be ${currentHitchWeight} lbs, which may exceed safe limits.`; + } + + trailerAnalysis.style.display = 'block'; }); + + function showError(message) { + clearErrors(); + const errorDiv = document.createElement('div'); + errorDiv.className = 'error-message'; + errorDiv.textContent = `Error: ${message}`; + errorDiv.style.color = 'red'; + errorDiv.style.marginBottom = '10px'; + errorDiv.style.fontWeight = 'bold'; + form.insertBefore(errorDiv, form.firstChild); + } + + function clearErrors() { + const existingErrors = form.querySelectorAll('.error-message'); + existingErrors.forEach(error => error.remove()); + results.style.display = 'none'; + document.getElementById('trailer-info-section').style.display = 'none'; + trailerAnalysis.style.display = 'none'; + } + + function initializeTooltips() { + const tooltips = document.querySelectorAll('.tooltip'); + + tooltips.forEach(tooltip => { + const targetId = tooltip.getAttribute('aria-describedby'); + const description = document.getElementById(targetId); + + if (description) { + // Show tooltip on hover + tooltip.addEventListener('mouseenter', function() { + description.classList.add('show'); + }); + + // Hide tooltip when mouse leaves + tooltip.addEventListener('mouseleave', function() { + description.classList.remove('show'); + }); + + // Show tooltip on focus (for keyboard navigation) + tooltip.addEventListener('focus', function() { + description.classList.add('show'); + }); + + // Hide tooltip on blur + tooltip.addEventListener('blur', function() { + description.classList.remove('show'); + }); + + // Toggle tooltip on click (for touch devices) + tooltip.addEventListener('click', function(e) { + e.preventDefault(); + description.classList.toggle('show'); + }); + } + }); + } }); diff --git a/styles.css b/styles.css index 65c1fba..bd532b6 100644 --- a/styles.css +++ b/styles.css @@ -15,6 +15,24 @@ h1 { color: #333; } +.section-header { + text-align: center; + margin-bottom: 1rem; +} + +.section-header h2 { + color: #007bff; + margin: 0 0 0.5rem 0; + font-size: 1.2rem; +} + +.section-description { + color: #6c757d; + font-size: 0.9rem; + margin: 0; + font-style: italic; +} + form { background: #fff; padding: 1.25rem; @@ -72,15 +90,81 @@ button:hover { margin: 0.3125rem 0; } +.primary-result { + background-color: #e8f4f8; + padding: 1rem; + border-radius: 0.5rem; + border-left: 4px solid #007bff; + margin-bottom: 1rem; +} + +.primary-result p { + font-size: 1.1rem; + font-weight: bold; + color: #0056b3; + margin: 0; +} + +.detailed-results { + margin-bottom: 1rem; +} + +.weight-distribution { + background-color: #f8f9fa; + padding: 0.75rem; + border-radius: 0.5rem; + margin-bottom: 1rem; +} + +.weight-distribution h3 { + margin: 0 0 0.5rem 0; + font-size: 1rem; + color: #495057; +} + +.reference-values { + padding-top: 0.75rem; + border-top: 1px solid #dee2e6; +} + +.reference-values h3 { + margin: 0 0 0.5rem 0; + font-size: 1rem; + color: #495057; +} + .tooltip { display: inline-block; margin-left: 0.3125rem; cursor: pointer; color: #007bff; + border-radius: 50%; + width: 1.25rem; + height: 1.25rem; + text-align: center; + font-weight: bold; } -.tooltip:hover { +.tooltip:hover, +.tooltip:focus { color: #0056b3; + outline: 2px solid #007bff; + outline-offset: 2px; +} + +.tooltip-description { + display: none; + margin-bottom: 0.625rem; + padding: 0.5rem; + background-color: #f8f9fa; + border: 1px solid #dee2e6; + border-radius: 0.25rem; + font-size: 0.875rem; + color: #6c757d; +} + +.tooltip-description.show { + display: block; } @media (prefers-color-scheme: dark) { @@ -108,6 +192,52 @@ button:hover { button:hover { background-color: #007bff; } + + .tooltip { + color: #66b3ff; + } + + .tooltip:hover, + .tooltip:focus { + color: #99ccff; + outline: 2px solid #66b3ff; + } + + .tooltip-description { + background-color: #555; + border: 1px solid #666; + color: #ccc; + } + + .primary-result { + background-color: #2d3436; + border-left: 4px solid #66b3ff; + } + + .primary-result p { + color: #99ccff; + } + + .weight-distribution { + background-color: #555; + } + + .weight-distribution h3, + .reference-values h3 { + color: #ccc; + } + + .reference-values { + border-top: 1px solid #666; + } + + .section-header h2 { + color: #66b3ff; + } + + .section-description { + color: #ccc; + } } @media (max-width: 37.5rem) { @@ -123,3 +253,76 @@ button:hover { padding: 0.5rem; } } + +/* Trailer analysis specific styles */ +#trailer-info-section { + margin-top: 1.5rem; +} + +#trailer-analysis { + background: #fff; + padding: 1.25rem; + border-radius: 0.5rem; + box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1); + max-width: 25rem; + width: 100%; + margin-top: 1rem; +} + +.compatibility-result { + background-color: #f8f9fa; + padding: 1rem; + border-radius: 0.5rem; + margin-bottom: 1rem; + border-left: 4px solid #28a745; +} + +.compatibility-result:has([style*="color: red"]) { + border-left-color: #dc3545; + background-color: #f8d7da; +} + +.trailer-detailed-results { + margin-bottom: 1rem; +} + +.trailer-detailed-results h4, +.loading-recommendations h4 { + margin: 0 0 0.5rem 0; + font-size: 1rem; + color: #495057; +} + +.loading-recommendations { + background-color: #e8f4f8; + padding: 0.75rem; + border-radius: 0.5rem; + border-left: 3px solid #007bff; +} + +@media (prefers-color-scheme: dark) { + #trailer-analysis { + background: #444; + color: #f4f4f4; + } + + .compatibility-result { + background-color: #555; + border-left-color: #28a745; + } + + .compatibility-result:has([style*="color: red"]) { + background-color: #441f20; + border-left-color: #dc3545; + } + + .trailer-detailed-results h4, + .loading-recommendations h4 { + color: #ccc; + } + + .loading-recommendations { + background-color: #2d3436; + border-left-color: #66b3ff; + } +} diff --git a/test_trailer_weight.rb b/test_trailer_weight.rb index d164c32..9f36010 100644 --- a/test_trailer_weight.rb +++ b/test_trailer_weight.rb @@ -1,36 +1,46 @@ # test_trailer_weight.rb -require 'optparse' require 'rspec' RSpec.describe "TrailerWeightCalculator" do - it "calculates max trailer weight correctly" do - options = { - max_weight: 1500, - cargo: [200, 150, 50] - } - - # Mocking command-line options for testing - allow_any_instance_of(OptionParser).to receive(:parse!).and_return(options) - - # Capture stdout output during script execution - output = capture_output { require './trailer_weight.rb' } - - # Calculate expected gross trailer weight based on mock options - expected_gross_trailer_weight = ((options[:max_weight] - options[:cargo].sum) / 0.13).round + it "calculation consistency test - Ruby and JavaScript should give same results" do + # Test the core calculation that both Ruby and JavaScript use + max_weight = 1500 + cargo_weights = [210, 180, 45, 50] + cargo_sum = cargo_weights.sum + + # This is the formula used by both implementations + result = ((max_weight - cargo_sum) / 0.13).round + + # Verify the result matches expected value from manual testing + expect(result).to eq(7808) + expect(cargo_sum).to eq(485) + expect(max_weight - cargo_sum).to eq(1015) + end - # Verify script output contains expected trailer weight message - expect(output).to include("Max towable gross trailer weight: #{expected_gross_trailer_weight}") + it "validates input boundary conditions" do + # Test edge case where cargo weight equals max weight (should cause division by zero) + max_weight = 500 + cargo_sum = 500 + remaining_weight = max_weight - cargo_sum + + expect(remaining_weight).to eq(0) + # This would cause division by zero: remaining_weight / 0.13 = 0 / 0.13 = 0 + expect((remaining_weight / 0.13).round).to eq(0) end -end -# Helper method to capture stdout for testing purposes -def capture_output(&block) - original_stdout = $stdout - output_catcher = StringIO.new - $stdout = output_catcher - yield - output_catcher.string -ensure - $stdout = original_stdout -end + it "validates calculation precision" do + # Test that our calculation produces consistent results + test_cases = [ + { max_weight: 1500, cargo: [210, 180, 40, 125], expected: 7269 }, + { max_weight: 1200, cargo: [200, 150], expected: 6538 }, + { max_weight: 1800, cargo: [300, 200, 100], expected: 9231 } + ] + + test_cases.each do |test_case| + cargo_sum = test_case[:cargo].sum + result = ((test_case[:max_weight] - cargo_sum) / 0.13).round + expect(result).to eq(test_case[:expected]) + end + end +end \ No newline at end of file diff --git a/trailer_weight.rb b/trailer_weight.rb index c4c1b67..a119daa 100644 --- a/trailer_weight.rb +++ b/trailer_weight.rb @@ -51,19 +51,43 @@ exit end +# Additional input validation +if options[:max_weight] <= 0 + puts 'ERROR: Max combined weight must be positive' + exit +end + +if options[:gross_vehicle_weight] && options[:gross_vehicle_weight] <= 0 + puts 'ERROR: Gross vehicle weight must be positive' + exit +end + # Set defaults options[:cargo] ||= [210, 180, 40, 125] options[:gross_vehicle_weight] ||= options[:max_weight] +# Validate cargo weights +if options[:cargo].any? { |weight| weight <= 0 } + puts 'ERROR: All cargo weights must be positive' + exit +end + +cargo_sum = options[:cargo].sum +if cargo_sum >= options[:max_weight] + puts 'ERROR: Combined cargo weight must be less than max combined weight' + exit +end + # Calculate gross trailer weight -gross_trailer_weight = (options[:max_weight] - options[:cargo].sum) / 0.13 +# Using 13% rule: remaining payload capacity divided by 0.13 gives max trailer weight +gross_trailer_weight = (options[:max_weight] - cargo_sum) / 0.13 gross_trailer_weight = gross_trailer_weight.round puts "Max towable gross trailer weight: #{gross_trailer_weight}" # Calculate and display truck weight if gross vehicle weight is provided if options[:gross_vehicle_weight] != options[:max_weight] - truck_weight = options[:gross_vehicle_weight] - (options[:max_weight] - options[:cargo].sum) + truck_weight = options[:gross_vehicle_weight] - (options[:max_weight] - cargo_sum) puts "Loaded Truck weight: #{truck_weight}" alt_weight = options[:gross_vehicle_weight] - truck_weight @@ -72,7 +96,7 @@ # Output additional information if verbose mode is enabled if options[:verbose] - puts "Combined cargo weight: #{options[:cargo].sum}" + puts "Combined cargo weight: #{cargo_sum}" puts "Max combined weight: #{options[:max_weight]}" puts "Gross vehicle weight: #{options[:gross_vehicle_weight]}" end