crono-cool/CronoCool.js

Cronómetro que ya te incluye todos los botones, la lógica, el resultado final y los estilos.

class CronoCool {
  #tiempoInicio = 0
  #tiempoFinal = 0

  #startBtn = document.createElement('button')
  #stopBtn = document.createElement('button')
  #resetBtn = document.createElement('button')
  #outputSegundos = document.createElement('div')
  #segundos = 0
  #idIntervalo = 0


  constructor (outputDelCrono) {
    this.outputDelCrono = outputDelCrono
    this.createButtons()
    this.estilizarCrono()
  }

  createButtons () {
    this.#startBtn.innerText = 'Start'
    this.#stopBtn.innerText = 'Stop'
    this.#resetBtn.innerText = 'Reset'
    this.#outputSegundos.innerText = 0


    this.#startBtn.onclick = () => this.start()
    this.#stopBtn.onclick = () => this.stop()
    this.#resetBtn.onclick = () => this.reset()

    
    this.outputDelCrono.append(this.#outputSegundos)
    this.outputDelCrono.append(this.#startBtn)
    this.outputDelCrono.append(this.#stopBtn)
    this.outputDelCrono.append(this.#resetBtn)
  }


  estilizarCrono () {
    this.outputDelCrono.style.textAlign = 'center'
    this.#outputSegundos.style.fontSize = '1.5rem' 
    this.#outputSegundos.style.margin = '1rem' 

    this.#startBtn.style.backgroundColor = 'lightseagreen'


  }

  start () {
    if (this.#tiempoInicio !== 0) {
      console.log('Ya le has dado a start')
      return
    }

    this.#idIntervalo = setInterval(() => {      

      this.#segundos += 0.01
      this.#outputSegundos.innerText = this.#segundos.toFixed(2)
       
    }, 10)

    this.#tiempoInicio = Date.now()
  }

  stop () {
    this.#tiempoFinal = Date.now()

    
    const segundos = (this.#tiempoFinal - this.#tiempoInicio) / 1000


    this.#outputSegundos.innerText = segundos + ' seg.'

    clearInterval(this.#idIntervalo)

  }

  reset () {
    this.#tiempoInicio = 0
    this.#tiempoFinal = 0
    this.#outputSegundos.innerText = 0
  }
}

export default CronoCool