Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const calculator = {
+ elements: {
+ averageOrder: document.getElementById('averageOrder'),
+ shippingCost: document.getElementById('shippingCost'),
+ profitMargin: document.getElementById('profitMargin'),
+ monthlyOrders: document.getElementById('monthlyOrders'),
+ calculateBtn: document.getElementById('calculate'),
+ currentProfit: document.querySelector('#currentProfit .value'),
+ breakeven: document.querySelector('#breakeven .value'),
+ ordersNeeded: document.querySelector('#ordersNeeded .value'),
+ currentBar: document.querySelector('.current-bar .bar-fill'),
+ neededBar: document.querySelector('.needed-bar .bar-fill')
+ },
+
+ initialize() {
+ this.elements.calculateBtn.addEventListener('click', () => this.calculate());
+ this.calculate(); // Initial calculation
+ },
+
+ calculate() {
+ const averageOrder = parseFloat(this.elements.averageOrder.value);
+ const shippingCost = parseFloat(this.elements.shippingCost.value);
+ const profitMargin = parseFloat(this.elements.profitMargin.value) / 100;
+ const monthlyOrders = parseInt(this.elements.monthlyOrders.value);
+
+ // Calculate current profit
+ const profitPerOrder = averageOrder * profitMargin;
+ const currentMonthlyProfit = profitPerOrder * monthlyOrders;
+
+ // Calculate break-even point
+ const newProfitPerOrder = profitPerOrder - shippingCost;
+ const breakEvenOrders = (currentMonthlyProfit / newProfitPerOrder);
+ const percentageIncrease = ((breakEvenOrders - monthlyOrders) / monthlyOrders) * 100;
+
+ // Update UI
+ this.elements.currentProfit.textContent = `$${currentMonthlyProfit.toFixed(2)}`;
+ this.elements.breakeven.textContent = `${percentageIncrease.toFixed(1)}%`;
+ this.elements.ordersNeeded.textContent = Math.ceil(breakEvenOrders);
+
+ // Update visualization
+ const maxHeight = 280; // Maximum height for bars
+ this.elements.currentBar.style.height = `${maxHeight * 0.5}px`; // Current orders at 50% height
+ this.elements.neededBar.style.height = `${maxHeight * 0.5 * (breakEvenOrders/monthlyOrders)}px`;
+ }
+ };
+
+ calculator.initialize();
+ });