JSFiddle - React, Tailwind, and code Playground

by MrSala

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Tabla de producción</title>
	<link rel="stylesheet" href="estilos.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
	<h1>Balance de capacidad de línea (Situación inicial de la línea)</h1>
  <label for="tiempoTurno">Minutos por turno :</label>
  <input type="number" id="tiempoTurno" min="0" step="1">
  <label for="salario">Salario de un operario por turno ($):</label>
  <input type="number" id="salarioTurno" min="0" step="0.01">
  <p></p>
	<table>
  <thead>
    <tr>
      <th>Descripción de la operación</th>
      <th>Tiempo para procesar una unidad por operario (minutos)</th>
      <th>Nº de trabajadores en la operación</th>
      <th>Tasa de producción por unidad (minutos por unidad)</th>
    </tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="text" id="descripcion1"></td>
				<td><input type="number" id="tiempo1" min="0" step="1"></td>
				<td><input type="number" id="trabajadores1" min="0" step="1"></td>
				<td id="tasa1"></td>
			</tr>
			<tr>
				<td><input type="text" id="descripcion2"></td>
				<td><input type="number" id="tiempo2" min="0" step="1"></td>
				<td><input type="number" id="trabajadores2" min="0" step="1"></td>
				<td id="tasa2"></td>
			</tr>
			<tr>
				<td><input type="text" id="descripcion3"></td>
				<td><input type="number" id="tiempo3" min="0" step="1"></td>
				<td><input type="number" id="trabajadores3" min="0" step="1"></td>
				<td id="tasa3"></td>
			</tr>
      <tr>
				<td><input type="text" id="descripcion4"></td>
				<td><input type="number" id="tiempo4" min="0" step="1"></td>
				<td><input type="number" id="trabajadores4" min="0" step="1"></td>
				<td id="tasa4"></td>
			</tr>
      <tr>
				<td><input type="text" id="descripcion5"></td>
				<td><input type="number" id="tiempo5" min="0" step="1"></td>
				<td><input type="number" id="trabajadores5" min="0" step="1"></td>
				<td id="tasa5"></td>
			</tr>
     ...

CSS

body {
  font-family: Averta, sans-serif;
  background-color: #f2f2f2;
  font-size: 13px;
}

h1 {
  font-size: 24px;
  text-align: center;
  margin: 20px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  background-color: #fff;
}

th, td {
  padding: 12px;
  text-align: left;
  text-align: center; /* Agregar esta línea */
  border-right: 1px solid #ccc;
}

th {
  background-color: #333;
  color: #fff;
  text-align: center; /* Agregar esta línea */
}


tr:nth-child(even) {
  background-color: #f9f9f9;
}


button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 30px;
  font-weight: bold;
}

button:hover {
  background-color: #444;
}

p {
  margin: 20px 0;
}

span {
  font-weight: bold;
  font-size: 15px;
  margin-right: 10px;
}

JavaScript

function calcularProduccion() {
  // Obtener los valores de cada campo y convertirlos a números
  var trabajadores = [
  	null, 
    Number(document.getElementById("trabajadores1").value), 
    Number(document.getElementById("trabajadores2").value), 
    Number(document.getElementById("trabajadores3").value), 
    Number(document.getElementById("trabajadores4").value), 
    Number(document.getElementById("trabajadores5").value), 
    Number(document.getElementById("trabajadores6").value), 
    Number(document.getElementById("trabajadores7").value), 
    Number(document.getElementById("trabajadores8").value),
    Number(document.getElementById("trabajadores9").value),
    Number(document.getElementById("trabajadores10").value)
  ];
  var tiempos = [
  	null, 
    Number(document.getElementById("tiempo1").value), 
    Number(document.getElementById("tiempo2").value), 
    Number(document.getElementById("tiempo3").value), 
    Number(document.getElementById("tiempo4").value), 
    Number(document.getElementById("tiempo5").value), 
    Number(document.getElementById("tiempo6").value), 
    Number(document.getElementById("tiempo7").value), 
    Number(document.getElementById("tiempo8").value), 
    Number(document.getElementById("tiempo9").value), 
    Number(document.getElementById("tiempo10").value)
  ];
  
  const tiempoTurno = Number(document.getElementById("tiempoTurno").value);
  var salarioTurno = Number(document.getElementById("salarioTurno").value);
  
  let numero_operarios = [];
  let costo_mano_obra = [];
  let produccion_turno = [];

  // Calcular la tasa de producción por unidad para cada operación
  const tasas = [
    (tiempos[1] / trabajadores[1]).toFixed(2),
    (tiempos[2] / trabajadores[2]).toFixed(2),
    (tiempos[3] / trabajadores[3]).toFixed(2),
    (tiempos[4] / trabajadores[4]).toFixed(2),
    (tiempos[5] / trabajadores[5]).toFixed(2),
    (tiempos[6] / trabajadores[6]).toFixed(2),
    (tiempos[7] / trabajadores[7]).toFixed(2),
    (tiempos[8]...