diff --git a/stopwatch/stopwatch-KCA/index.html b/stopwatch/stopwatch-KCA/index.html
new file mode 100644
index 0000000..747c133
--- /dev/null
+++ b/stopwatch/stopwatch-KCA/index.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ Herramientas de Tiempo
+
+
+
+
+
+
+
Selecciona una herramienta
+
+
+
+
+
+
+
00:00:00.000
+
+
+
+
+
+
+
+
+
+
+
00:00:00.000
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/stopwatch/stopwatch-KCA/prompt.md b/stopwatch/stopwatch-KCA/prompt.md
new file mode 100644
index 0000000..d1dd025
--- /dev/null
+++ b/stopwatch/stopwatch-KCA/prompt.md
@@ -0,0 +1,647 @@
+Buenas como desarrollador de aplicaciones web necesito que me hagas una página con un index.html y un script.js utilizando tailwind un cronómetro.
+
+
+Debe haber una caja para seleccionar la herramienta que queremos utilizar. en la cual se encuentre un botón con un texto que ponga "Cronometro" al pulsarlo debe aparecer la caja del cronometro.
+
+
+El objectivo es que empiece desde 00:00:00.
+
+Se compondrá de un botón que ponga iniciar que iniciará el conteo
+Un botón de pause que pausará el conteo
+Un botón de reestablecer que devolverá el conteo a 0.
+
+
+siempre se debe de mostrar los milisegundos.
+
+justo debajo de la caja del cronometro pintar un botón que ponga volver atrás y vuelva a la pantalla de selección de herramienta.
+
+si tienes alguna pregunta al respecto no dudes en hacérmela
+
+
+¡Claro! A continuación, te proporcionaré un ejemplo de cómo puedes implementar una página web que cumple con tus requisitos utilizando HTML, JavaScript y Tailwind CSS. Esta página tendrá un cronómetro que empieza desde 00:00:00, con botones para iniciar, pausar, restablecer y volver a la pantalla de selección de herramienta.
+
+### Estructura del Proyecto
+
+Tu proyecto tendrá dos archivos:
+
+1. `index.html`
+2. `script.js`
+
+### 1. `index.html`
+
+```html
+
+
+
+
+
+ Cronómetro
+
+
+
+
+
+
Selecciona una herramienta
+
+
+
+
+
00:00:00.000
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### 2. `script.js`
+
+```javascript
+let timerInterval;
+let timerStarted = false;
+let startTime;
+let elapsedTime = 0;
+
+const timerElement = document.getElementById("timer");
+const timerContainer = document.getElementById("timer-container");
+const toolSelection = document.getElementById("tool-selection");
+
+document.getElementById("start-timer-btn").addEventListener("click", () => {
+ toolSelection.classList.add("hidden");
+ timerContainer.classList.remove("hidden");
+ resetTimer();
+});
+
+document.getElementById("start-btn").addEventListener("click", () => {
+ if (!timerStarted) {
+ startTime = Date.now() - elapsedTime;
+ timerInterval = setInterval(updateTimer, 10);
+ timerStarted = true;
+ }
+});
+
+document.getElementById("pause-btn").addEventListener("click", () => {
+ clearInterval(timerInterval);
+ timerStarted = false;
+});
+
+document.getElementById("reset-btn").addEventListener("click", () => {
+ resetTimer();
+});
+
+document.getElementById("back-btn").addEventListener("click", () => {
+ timerContainer.classList.add("hidden");
+ toolSelection.classList.remove("hidden");
+ resetTimer();
+});
+
+function updateTimer() {
+ elapsedTime = Date.now() - startTime;
+ const milliseconds = Math.floor((elapsedTime % 1000));
+ const seconds = Math.floor((elapsedTime / 1000) % 60);
+ const minutes = Math.floor((elapsedTime / 60000) % 60);
+ const hours = Math.floor((elapsedTime / 3600000));
+
+ timerElement.innerText =
+ `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
+}
+
+function resetTimer() {
+ clearInterval(timerInterval);
+ elapsedTime = 0;
+ timerStarted = false;
+ timerElement.innerText = "00:00:00.000";
+}
+```
+
+### Descripción de la Implementación
+
+- **HTML:**
+ - Un contenedor para la selección de herramienta y un botón para abrir el cronómetro.
+ - Un contenedor para el cronómetro que incluye los botones de iniciar, pausar y restablecer, junto con un botón para volver atrás.
+
+- **JavaScript:**
+ - Funciones para iniciar, pausar, restablecer y actualizar el cronómetro.
+ - Control de eventos para los botones que permiten cambiar entre la selección de herramienta y el cronómetro.
+
+### Cómo Probarlo
+
+1. Crea una carpeta en tu computadora y guarda estos dos archivos (`index.html` y `script.js`) en esa carpeta.
+2. Abre el archivo `index.html` en tu navegador.
+
+¡Con esto, tendrás un cronómetro funcional con las características que solicitaste! Si tienes alguna pregunta o necesitas más ajustes, házmelo saber.
+
+Ahora quiero hacer otra herramienta, en este caso es una cuenta atrás para ello realizaremos lo siguiente.
+
+Debe haber una caja para seleccionar la herramienta que queremos utilizar. en la cual se encuentre un botón con un texto que ponga "Cuenta atrás" al pulsarlo debe aparecer la caja de la cuenta atrás.
+
+El objectivo es que su valor por defecto es 00:00:00.
+
+Debes añadir un num pad de 0 a 9, este num pad lo que debe hacer es, que de derecha a izquierda irá rellenando aquellos valores que se han introducido por ejemplo si el usuario clica en el 9, el valor de la cuenta atrás será de 00:00:09 y al clicar en iniciar la cuenta atrás se iniciará desde ahí.
+
+Se compondrá de un botón que ponga iniciar que iniciará el conteo
+Un botón de pause que pausará el conteo
+Un botón de reestablecer que devolverá el valor al seteado por el usuario
+Un botón de clear que devolverá el valor a 0.
+
+siempre se debe de mostrar los milisegundos.
+
+justo debajo de la caja de la cuenta atrás pintar un botón que ponga volver atrás y vuelva a la pantalla de selección de herramienta.
+
+si tienes alguna pregunta al respecto no dudes en hacérmela.
+
+
+¡Perfecto! Vamos a crear una herramienta de cuenta atrás siguiendo tus especificaciones. La estructura será similar a la del cronómetro, pero con las funcionalidades y elementos específicos que mencionaste para la cuenta atrás.
+
+### Estructura del Proyecto
+
+Tu proyecto tendrá los mismos archivos que antes, pero los modificaremos para incluir la nueva herramienta de cuenta atrás.
+
+### 1. `index.html`
+
+Actualizaremos el archivo `index.html` para incluir el botón de "Cuenta atrás" y el nuevo contenedor para la cuenta atrás.
+
+```html
+
+
+
+
+
+ Herramientas de Tiempo
+
+
+
+
+
+
Selecciona una herramienta
+
+
+
+
+
+
+
00:00:00.000
+
+
+
+
+
+
+
+
+
+
+
00:00:00.000
+
+
+
+ {[...Array(10).keys()].map(num => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### 2. `script.js`
+
+Modificaremos `script.js` para incluir la lógica de la cuenta atrás, así como la lógica del cronómetro.
+
+```javascript
+// Variables para el Cronómetro
+let timerInterval;
+let timerStarted = false;
+let startTime;
+let elapsedTime = 0;
+
+// Variables para la Cuenta Atrás
+let countdownInterval;
+let countdownStarted = false;
+let countdownTime = 0; // Tiempo en milisegundos
+
+const timerElement = document.getElementById("timer");
+const countdownElement = document.getElementById("countdown");
+const timerContainer = document.getElementById("timer-container");
+const countdownContainer = document.getElementById("countdown-container");
+const toolSelection = document.getElementById("tool-selection");
+
+// Funcionalidad de Cronómetro
+document.getElementById("start-timer-btn").addEventListener("click", () => {
+ toolSelection.classList.add("hidden");
+ timerContainer.classList.remove("hidden");
+ resetTimer();
+});
+
+document.getElementById("start-btn").addEventListener("click", () => {
+ if (!timerStarted) {
+ startTime = Date.now() - elapsedTime;
+ timerInterval = setInterval(updateTimer, 10);
+ timerStarted = true;
+ }
+});
+
+document.getElementById("pause-btn").addEventListener("click", () => {
+ clearInterval(timerInterval);
+ timerStarted = false;
+});
+
+document.getElementById("reset-btn").addEventListener("click", () => {
+ resetTimer();
+});
+
+document.getElementById("back-btn-timer").addEventListener("click", () => {
+ timerContainer.classList.add("hidden");
+ toolSelection.classList.remove("hidden");
+ resetTimer();
+});
+
+// Funciones del Cronómetro
+function updateTimer() {
+ elapsedTime = Date.now() - startTime;
+ const milliseconds = Math.floor((elapsedTime % 1000));
+ const seconds = Math.floor((elapsedTime / 1000) % 60);
+ const minutes = Math.floor((elapsedTime / 60000) % 60);
+ const hours = Math.floor((elapsedTime / 3600000));
+
+ timerElement.innerText =
+ `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
+}
+
+function resetTimer() {
+ clearInterval(timerInterval);
+ elapsedTime = 0;
+ timerStarted = false;
+ timerElement.innerText = "00:00:00.000";
+}
+
+// Funcionalidad de Cuenta Atrás
+document.getElementById("countdown-btn").addEventListener("click", () => {
+ toolSelection.classList.add("hidden");
+ countdownContainer.classList.remove("hidden");
+ resetCountdown();
+});
+
+document.getElementById("countdown-start-btn").addEventListener("click", () => {
+ if (!countdownStarted && countdownTime > 0) {
+ countdownStarted = true;
+ countdownInterval = setInterval(updateCountdown, 10);
+ }
+});
+
+document.getElementById("countdown-pause-btn").addEventListener("click", () => {
+ clearInterval(countdownInterval);
+ countdownStarted = false;
+});
+
+document.getElementById("countdown-reset-btn").addEventListener("click", () => {
+ resetCountdown();
+});
+
+document.getElementById("countdown-clear-btn").addEventListener("click", () => {
+ countdownTime = 0;
+ countdownElement.innerText = "00:00:00.000";
+});
+
+document.getElementById("back-btn-countdown").addEventListener("click", () => {
+ countdownContainer.classList.add("hidden");
+ toolSelection.classList.remove("hidden");
+ resetCountdown();
+});
+
+// Teclado Numérico
+for (let i = 0; i <= 9; i++) {
+ document.getElementById(`num-${i}`).addEventListener("click", () => {
+ const currentValue = countdownElement.innerText.replace(/\./g, '').split(':');
+ let newValue;
+
+ if (currentValue.length === 4) {
+ newValue = currentValue.slice(1); // Eliminar milisegundos
+ } else {
+ newValue = currentValue;
+ }
+
+ newValue.unshift(i.toString()); // Añadir el nuevo dígito al inicio
+ while (newValue.length < 3) { // Asegurar que siempre hay 3 dígitos
+ newValue.unshift('0');
+ }
+
+ countdownTime = (parseInt(newValue[0]) * 3600000) + (parseInt(newValue[1]) * 60000) + (parseInt(newValue[2]) * 1000);
+ countdownElement.innerText =
+ `${String(newValue[0]).padStart(2, '0')}:${String(newValue[1]).padStart(2, '0')}:${String(newValue[2]).padStart(2, '0')}.000`;
+ });
+}
+
+function updateCountdown() {
+ if (countdownTime <= 0) {
+ clearInterval(countdownInterval);
+ countdownStarted = false;
+ return;
+ }
+
+ countdownTime -= 10;
+ const hours = Math.floor((countdownTime / 3600000));
+ const minutes = Math.floor((countdownTime % 3600000) / 60000);
+ const seconds = Math.floor((countdownTime % 60000) / 1000);
+ const milliseconds = Math.floor((countdownTime % 1000));
+
+ countdownElement.innerText
+
+ =
+ `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
+}
+
+function resetCountdown() {
+ clearInterval(countdownInterval);
+ countdownTime = 0;
+ countdownStarted = false;
+ countdownElement.innerText = "00:00:00.000";
+}
+```
+
+### Descripción de Funcionalidades
+
+1. **Selección de Herramienta**: El usuario puede seleccionar entre "Cronómetro" y "Cuenta atrás". Al seleccionar "Cuenta atrás", se oculta la selección de herramientas y aparece la interfaz de la cuenta atrás.
+
+2. **Teclado Numérico**: Los botones del 0 al 9 rellenan el valor de la cuenta atrás de derecha a izquierda. La cuenta atrás se inicia desde el valor que el usuario ha introducido.
+
+3. **Controles de la Cuenta Atrás**:
+ - **Iniciar**: Comienza la cuenta atrás desde el valor actual.
+ - **Pausar**: Detiene la cuenta atrás.
+ - **Restablecer**: Devuelve la cuenta atrás al valor que el usuario estableció.
+ - **Clear**: Reinicia la cuenta atrás a 0.
+ - **Volver atrás**: Regresa a la pantalla de selección de herramientas.
+
+### Preguntas o Modificaciones
+
+Si necesitas hacer alguna modificación o tienes más preguntas sobre esta implementación, ¡hazmelo saber!
+
+
+Recuerda que es Javascript vanilla.
+
+ {[...Array(10).keys()].map(num => (
+
+ ))}
+
+
+ ¡Claro! Vamos a corregir el código de la cuenta atrás para que use JavaScript vanilla en lugar de la sintaxis JSX. Aquí tienes la versión actualizada del archivo `index.html` y `script.js` sin JSX.
+
+### 1. `index.html`
+
+Modificamos el archivo para crear los botones del teclado numérico utilizando solo HTML y JavaScript.
+
+```html
+
+
+
+
+
+ Herramientas de Tiempo
+
+
+
+
+
+
Selecciona una herramienta
+
+
+
+
+
+
+
00:00:00.000
+
+
+
+
+
+
+
+
+
+
+
00:00:00.000
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### 2. `script.js`
+
+Actualizamos `script.js` para agregar los botones del teclado numérico mediante JavaScript vanilla.
+
+```javascript
+// Variables para el Cronómetro
+let timerInterval;
+let timerStarted = false;
+let startTime;
+let elapsedTime = 0;
+
+// Variables para la Cuenta Atrás
+let countdownInterval;
+let countdownStarted = false;
+let countdownTime = 0; // Tiempo en milisegundos
+
+const timerElement = document.getElementById("timer");
+const countdownElement = document.getElementById("countdown");
+const timerContainer = document.getElementById("timer-container");
+const countdownContainer = document.getElementById("countdown-container");
+const toolSelection = document.getElementById("tool-selection");
+const numPad = document.getElementById("num-pad");
+
+// Crear botones del teclado numérico
+for (let i = 0; i <= 9; i++) {
+ const button = document.createElement("button");
+ button.id = `num-${i}`;
+ button.className = "bg-gray-300 px-4 py-2 rounded";
+ button.textContent = i;
+ button.addEventListener("click", () => addToCountdown(i));
+ numPad.appendChild(button);
+}
+
+// Funcionalidad de Cronómetro
+document.getElementById("start-timer-btn").addEventListener("click", () => {
+ toolSelection.classList.add("hidden");
+ timerContainer.classList.remove("hidden");
+ resetTimer();
+});
+
+document.getElementById("start-btn").addEventListener("click", () => {
+ if (!timerStarted) {
+ startTime = Date.now() - elapsedTime;
+ timerInterval = setInterval(updateTimer, 10);
+ timerStarted = true;
+ }
+});
+
+document.getElementById("pause-btn").addEventListener("click", () => {
+ clearInterval(timerInterval);
+ timerStarted = false;
+});
+
+document.getElementById("reset-btn").addEventListener("click", () => {
+ resetTimer();
+});
+
+document.getElementById("back-btn-timer").addEventListener("click", () => {
+ timerContainer.classList.add("hidden");
+ toolSelection.classList.remove("hidden");
+ resetTimer();
+});
+
+// Funciones del Cronómetro
+function updateTimer() {
+ elapsedTime = Date.now() - startTime;
+ const milliseconds = Math.floor((elapsedTime % 1000));
+ const seconds = Math.floor((elapsedTime / 1000) % 60);
+ const minutes = Math.floor((elapsedTime / 60000) % 60);
+ const hours = Math.floor((elapsedTime / 3600000));
+
+ timerElement.innerText =
+ `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
+}
+
+function resetTimer() {
+ clearInterval(timerInterval);
+ elapsedTime = 0;
+ timerStarted = false;
+ timerElement.innerText = "00:00:00.000";
+}
+
+// Funcionalidad de Cuenta Atrás
+document.getElementById("countdown-btn").addEventListener("click", () => {
+ toolSelection.classList.add("hidden");
+ countdownContainer.classList.remove("hidden");
+ resetCountdown();
+});
+
+document.getElementById("countdown-start-btn").addEventListener("click", () => {
+ if (!countdownStarted && countdownTime > 0) {
+ countdownStarted = true;
+ countdownInterval = setInterval(updateCountdown, 10);
+ }
+});
+
+document.getElementById("countdown-pause-btn").addEventListener("click", () => {
+ clearInterval(countdownInterval);
+ countdownStarted = false;
+});
+
+document.getElementById("countdown-reset-btn").addEventListener("click", () => {
+ resetCountdown();
+});
+
+document.getElementById("countdown-clear-btn").addEventListener("click", () => {
+ countdownTime = 0;
+ countdownElement.innerText = "00:00:00.000";
+});
+
+document.getElementById("back-btn-countdown").addEventListener("click", () => {
+ countdownContainer.classList.add("hidden");
+ toolSelection.classList.remove("hidden");
+ resetCountdown();
+});
+
+// Teclado Numérico
+function addToCountdown(num) {
+ const currentValue = countdownElement.innerText.replace(/\./g, '').split(':');
+ let newValue;
+
+ if (currentValue.length === 4) {
+ newValue = currentValue.slice(1); // Eliminar milisegundos
+ } else {
+ newValue = currentValue;
+ }
+
+ newValue.unshift(num.toString()); // Añadir el nuevo dígito al inicio
+ while (newValue.length < 3) { // Asegurar que siempre hay 3 dígitos
+ newValue.unshift('0');
+ }
+
+ countdownTime = (parseInt(newValue[0]) * 3600000) + (parseInt(newValue[1]) * 60000) + (parseInt(newValue[2]) * 1000);
+ countdownElement.innerText =
+ `${String(newValue[0]).padStart(2, '0')}:${String(newValue[1]).padStart(2, '0')}:${String(newValue[2]).padStart(2, '0')}.000`;
+}
+
+function updateCountdown() {
+ if (countdownTime <= 0) {
+ clearInterval(countdownInterval);
+ countdownStarted = false;
+ return;
+ }
+
+ countdownTime -= 10;
+ const hours = Math.floor((countdownTime / 3600000));
+ const minutes = Math.floor((countdownTime % 3600000) / 60000);
+ const seconds = Math.floor((countdownTime % 60000) / 1000);
+ const milliseconds = Math.floor((countdownTime % 100
+
+0));
+
+ countdownElement.innerText =
+ `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
+}
+
+function resetCountdown() {
+ clearInterval(countdownInterval);
+ countdownTime = 0;
+ countdownStarted = false;
+ countdownElement.innerText = "00:00:00.000";
+}
+```
+
+### Descripción de Funcionalidades
+
+1. **Selección de Herramienta**: Puedes seleccionar "Cronómetro" o "Cuenta atrás". Al hacer clic en "Cuenta atrás", se muestra la interfaz correspondiente.
+
+2. **Teclado Numérico**: Los botones del 0 al 9 se crean dinámicamente y permiten agregar dígitos a la cuenta atrás de manera que los nuevos dígitos se agregan de derecha a izquierda.
+
+3. **Controles de la Cuenta Atrás**:
+ - **Iniciar**: Comienza la cuenta atrás desde el valor que se ha introducido.
+ - **Pausar**: Detiene la cuenta atrás.
+ - **Restablecer**: Devuelve el valor a lo que el usuario haya introducido.
+ - **Clear**: Reinicia la cuenta atrás a 0.
+ - **Volver atrás**: Regresa a la pantalla de selección de herramientas.
+
+Si necesitas más ajustes o tienes preguntas sobre esta implementación, ¡dímelo!
\ No newline at end of file
diff --git a/stopwatch/stopwatch-KCA/script.js b/stopwatch/stopwatch-KCA/script.js
new file mode 100644
index 0000000..7130602
--- /dev/null
+++ b/stopwatch/stopwatch-KCA/script.js
@@ -0,0 +1,168 @@
+// Variables para el Cronómetro
+let timerInterval
+let timerStarted = false
+let startTime
+let elapsedTime = 0
+
+// Variables para la Cuenta Atrás
+let countdownInterval
+let countdownStarted = false
+let countdownTime = 0 // Tiempo en milisegundos
+
+const timerElement = document.getElementById("timer")
+const countdownElement = document.getElementById("countdown")
+const timerContainer = document.getElementById("timer-container")
+const countdownContainer = document.getElementById("countdown-container")
+const toolSelection = document.getElementById("tool-selection")
+const numPad = document.getElementById("num-pad")
+
+// Crear botones del teclado numérico
+for (let i = 0; i <= 9; i++) {
+ const button = document.createElement("button")
+ button.id = `num-${i}`
+ button.className = "bg-gray-300 px-4 py-2 rounded"
+ button.textContent = i
+ button.addEventListener("click", () => addToCountdown(i))
+ numPad.appendChild(button)
+}
+
+// Funcionalidad de Cronómetro
+document.getElementById("start-timer-btn").addEventListener("click", () => {
+ toolSelection.classList.add("hidden")
+ timerContainer.classList.remove("hidden")
+ resetTimer()
+})
+
+document.getElementById("start-btn").addEventListener("click", () => {
+ if (!timerStarted) {
+ startTime = Date.now() - elapsedTime
+ timerInterval = setInterval(updateTimer, 10)
+ timerStarted = true
+ }
+})
+
+document.getElementById("pause-btn").addEventListener("click", () => {
+ clearInterval(timerInterval)
+ timerStarted = false
+})
+
+document.getElementById("reset-btn").addEventListener("click", () => {
+ resetTimer()
+})
+
+document.getElementById("back-btn-timer").addEventListener("click", () => {
+ timerContainer.classList.add("hidden")
+ toolSelection.classList.remove("hidden")
+ resetTimer()
+})
+
+// Funciones del Cronómetro
+function updateTimer() {
+ elapsedTime = Date.now() - startTime
+ const milliseconds = Math.floor(elapsedTime % 1000)
+ const seconds = Math.floor((elapsedTime / 1000) % 60)
+ const minutes = Math.floor((elapsedTime / 60000) % 60)
+ const hours = Math.floor(elapsedTime / 3600000)
+
+ timerElement.innerText = `${String(hours).padStart(2, "0")}:${String(
+ minutes
+ ).padStart(2, "0")}:${String(seconds).padStart(2, "0")}.${String(
+ milliseconds
+ ).padStart(3, "0")}`
+}
+
+function resetTimer() {
+ clearInterval(timerInterval)
+ elapsedTime = 0
+ timerStarted = false
+ timerElement.innerText = "00:00:00.000"
+}
+
+// Funcionalidad de Cuenta Atrás
+document.getElementById("countdown-btn").addEventListener("click", () => {
+ toolSelection.classList.add("hidden")
+ countdownContainer.classList.remove("hidden")
+ resetCountdown()
+})
+
+document.getElementById("countdown-start-btn").addEventListener("click", () => {
+ if (!countdownStarted && countdownTime > 0) {
+ countdownStarted = true
+ countdownInterval = setInterval(updateCountdown, 10)
+ }
+})
+
+document.getElementById("countdown-pause-btn").addEventListener("click", () => {
+ clearInterval(countdownInterval)
+ countdownStarted = false
+})
+
+document.getElementById("countdown-reset-btn").addEventListener("click", () => {
+ resetCountdown()
+})
+
+document.getElementById("countdown-clear-btn").addEventListener("click", () => {
+ countdownTime = 0
+ countdownElement.innerText = "00:00:00.000"
+})
+
+document.getElementById("back-btn-countdown").addEventListener("click", () => {
+ countdownContainer.classList.add("hidden")
+ toolSelection.classList.remove("hidden")
+ resetCountdown()
+})
+
+// Teclado Numérico
+function addToCountdown(num) {
+ // Obtener el valor actual de la cuenta atrás y eliminar los milisegundos
+ const currentValue = countdownElement.innerText.replace(/\./g, "").split(":")
+
+ // Concatenar el nuevo dígito al final de la representación actual
+ let newValue = (currentValue.join("") + num.toString()).slice(-6) // Asegurar que no exceda 6 caracteres
+
+ // Asegurarse de que tenemos exactamente 6 caracteres
+ while (newValue.length < 6) {
+ newValue = "0" + newValue // Añadir ceros a la izquierda si es necesario
+ }
+
+ // Formatear horas, minutos y segundos
+ const hours = newValue.substring(0, 2) // Primeros 2 caracteres para horas
+ const minutes = newValue.substring(2, 4) // Siguientes 2 caracteres para minutos
+ const seconds = newValue.substring(4, 6) // Últimos 2 caracteres para segundos
+
+ // Actualizar la cuenta atrás en el formato HH:MM:SS.000
+ countdownElement.innerText = `${hours}:${minutes}:${seconds}.000`
+
+ // Calcular el tiempo total en milisegundos para iniciar la cuenta atrás
+ countdownTime =
+ parseInt(hours) * 3600000 +
+ parseInt(minutes) * 60000 +
+ parseInt(seconds) * 1000
+}
+
+function updateCountdown() {
+ if (countdownTime <= 0) {
+ clearInterval(countdownInterval)
+ countdownStarted = false
+ return
+ }
+
+ countdownTime -= 10
+ const hours = Math.floor(countdownTime / 3600000)
+ const minutes = Math.floor((countdownTime % 3600000) / 60000)
+ const seconds = Math.floor((countdownTime % 60000) / 1000)
+ const milliseconds = Math.floor(countdownTime % 1000)
+
+ countdownElement.innerText = `${String(hours).padStart(2, "0")}:${String(
+ minutes
+ ).padStart(2, "0")}:${String(seconds).padStart(2, "0")}.${String(
+ milliseconds
+ ).padStart(3, "0")}`
+}
+
+function resetCountdown() {
+ clearInterval(countdownInterval)
+ countdownTime = 0
+ countdownStarted = false
+ countdownElement.innerText = "00:00:00.000"
+}