dddddd

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Production Calculator</title>
    <style>
        /* Add your styles here */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
        input {
            width: 100%;
            text-align: center;
        }
    </style>
</head>
<body>

    <h2>Production Calculator</h2>

    <div>
        <label for="inpCycleTime">Cycle Time (seconds): </label>
        <input type="number" id="inpCycleTime" step="any">
    </div>
    <div>
        <label for="inpProductionTime">Production Time Total (hours): </label>
        <input type="number" id="inpProductionTime" step="any">
    </div>

    <table>
        <thead>
            <tr>
                <th>Hour</th>
                <th>Expected Output</th>
                <th>Rejections</th>
                <th>Downtime (minutes)</th>
                <th>Good Output</th>
            </tr>
        </thead>
        <tbody id="sectionBody">
            <!-- Rows will be filled dynamically -->
            <tr>
                <td>1</td>
                <td><input type="text" class="inp-calculated" disabled></td>
                <td><input type="number" class="inp-rejection" step="any"></td>
                <td><input type="number" class="inp-downtime" step="any"></td>
                <td><input type="text" class="inp-good" disabled></td>
            </tr>
            <tr>
                <td>2</td>
                <td><input type="text" class="inp-calculated" disabled></td>
                <td><input type="number" class="inp-rejection" step="any"></td>
                <td><input type="number" class="inp-downtime" step="any"></td>
                <td><input...

JavaScript

// Main function to recalculate all rows and update the table
function recalculateTable() {
    const cycleTime = parseFloat(document.getElementById('inpCycleTime').value);
    const productionTime = parseFloat(document.getElementById('inpProductionTime').value);
    
    // Ensure valid input values
    if (isNaN(cycleTime) || isNaN(productionTime) || cycleTime <= 0 || productionTime <= 0) {
        return; // Exit if inputs are invalid
    }

    const table = document.getElementById('sectionBody');
    const rows = table.getElementsByTagName('tr');

    // Recalculate and update every row
    for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        updateRow(row, cycleTime, productionTime);  // Recalculate and update the row
    }
}

// Function to update a single row in the table
function updateRow(row, cycleTime, productionTime) {
    const calculatedInput = row.querySelector('.inp-calculated');
    const goodInput = row.querySelector('.inp-good');
    const rejectionInput = row.querySelector('.inp-rejection');
    const downtimeInput = row.querySelector('.inp-downtime');
    
    // Get the current values from inputs (Rejections and Downtime)
    const rejected = parseFloat(rejectionInput.value) || 0;
    const downtime = parseFloat(downtimeInput.value) || 0;
    
    // Calculate expected hourly output based on cycle time
    const hourlyProduction = (3600 / cycleTime).toFixed(2);  // 3600 seconds in 1 hour
    
    // Adjust the production based on downtime
    const effectiveProductionTime = (60 - downtime) / 60;  // Convert downtime to fraction of hour
    const adjustedProduction = hourlyProduction * effectiveProductionTime;
    
    // Calculate good output after considering rejections
    const goodOutput = adjustedProduction - rejected;
    
    // Update the calculated output and good output fields
    calculatedInput.value = hourlyProduction;
    goodInput.value = goodOutput.toFixed(2);
}

// Event listeners for top inputs...