Ejercicio Stopwatch de PUR

[pablo-umana]

Promtp (ChatGPT):

Utilizando tu rol de desarrollador frontend, necesito que implementes un sitio web similar a esto: https://www.online-stopwatch.com/.

Los requermientos tecnicos:

• El proyecto debe estar desarrollado con HTML, Javascript y Bootstrap.
• El proyecto debe estar compuesto por dos archivos, el index.html y el script.js
• En caso de ser necesario utiliza jQUery para facilitar la implementación.
• Utiliza CSS y Bootstrap para mejorar el diseño de la pagina web

Los requerimientos son los siguientes:

• El titulo del sitio es Stopwatch

• Crear sitio web que tenga cronometro y un cuenta atras.

• La pagina web debe tener un menú para seleccionar si quiero utilizar el cronometro o el cuenta atrás. En caso de seleccionar uno se debe ocultar el otro. Por defecto no se debe ninguno de los dos formularios. Cuando en cada uno de los formularios presione el botón volver, debería volver a este estado.

• Si selecciono el cronometro se debe visualizar las horas, minutos, segundos y los milisegundos, que deben se mostrados en un tamaño mas pequeño que las otras unidades de tiempo, los numeros deberían iniciar así: 00:00:00 000. Todo los numeros se debe actualizar en la medida que vaya aumentando el tiempo. Bajo los numeros deben haber tres botones, uno para iniciar el cronometro, otro para reiniciar el cronometro y finalmente uno para volver al menu anterior. Al presionar el botón iniciar debería cambiar a detener para pausar el avance del cronometro.

• Si selecciono el cuenta atrás, al iniciar debe visualizar un input por cada unidad de tiempo, que debería estar inicialmente en 00, para poder ingresar cuando tiempo tendra la cuenta regresiva. Bajo los input deberían haber 2 filas de botone, los cuales me permitiran ingresar numeros del 0 al 9, un botón para reiniciar a 00 los input llamado "Limpiar", un botón que al presionarlo me debería permitir pasar a un formulario llamado "Set", igual al del cronometro que me permita ver la cuenta regresiva, incluyendo los milisegundo y finalmente el botón volver.

  El funcionamiento de los botones del 0 al 9 debería ser siguiente: al hacer click en un numero se debería llenando los input de los numeros de derecha a izquierda, como los siguientes ejemplos:
  
  -- Si presiono el numero 5, los inputs deberían quedar así: 00:00:05
  -- Si presionara los siguientes numeros en este orden: 345, los inputs quedarían así: 00:03:45
  -- Si presionara los siguientes numeros en este orden: 3475, los inputs quedarian así: 00:03:47. Es es importante porque los valores no debe superar el 59
  
  Es importante que los inputs sigan las siguientes reglas:
  
  -- En caso de que se presione uno de los botones numericos y se vaya romper la regla de no superar el 59, se debe bloquear el ingreso del numero que se hizo clic.
  -- Si utilizo el teclado, solo me debería permitir ingresar numeros. No debería ser necesario que los input tenga en el foco, ya que si ingreso numeros desde mi teclado deberían agregarse lo numeros de derecha a izquierda, al igual que con los botones en pantalla.