Эмулятор работы нагревательного прибора

class Teapot {
  constructor (options) {
    this.container = options.container instanceof HTMLElement ?
      options.container : undefined;
    
    this.volume = typeof options.volume === `number` &&
      options.volume !== NaN &&
      options.volume > 1 ?
      options.volume :
    (console.log(`Volume, l: incorrect or wasn't data; was set default value - 10 litre`), 10);
    
    this.power = typeof options.power === `number` &&
      options.power !== NaN &&
      options.power > 1 ?
      options.power :
    (console.log(`Power, kW: incorrect or wasn't data; was set default value - 20000 kilowatt`), 20000);
    
    this.water = typeof options.water === `number` &&
      options.water !== NaN &&
      options.water < this.volume &&
      options.water >= 1 ?
      options.water :
    (console.log(`Water, l: incorrect or wasn't data; was set default value - 1 litre`), 1);
    
    this.init_t = typeof options.init_t === `number` &&
      options.init_t !== NaN &&
      options.init_t < 100 &&
      options.init_t >= 0 ?
      options.init_t :
    (console.log(`Init temperature, C: incorrect or wasn't data; was set default value - 20 degrees`), 20);
    
  }
  
  init() {
    
    if (this.container === undefined) {
      console.log(`Container: ERROR !!!`);
      throw new Error(`Must be specified the parent element - instance of HTMLELement`);
    }
    
    if (this.volume <= this.water) {
      console.log(`Water: ERROR !!!`);
      throw new Error(`The volume of water is out of range !`);
    }
    
    let opHD = {
      boilingTime: Math.round((4200 * this.water * (100 - this.init_t)) / this.power),
      idTimer: null,
      flag: true,
      events: {
        mUp: e => {
          if (e.target.classList.contains(`control-button`)) {
            e.target.textContent = opHD.flag ? `pause` : `continue`;
            opHD.idTimer = opHD.flag ? window.setInterval(() => {
              e.target.nextElementSibling.lastElementChild.textContent = `Time to finish (sec): ${opHD.boilingTime--}`;
              e.target.nextElementSibling.firstElementChild.textContent = `Current temperature (C): ${Math.round(100 - ((this.power * opHD.boilingTime) / (this.water * 4200)))}`;
              if (opHD.boilingTime < 0) {
                clearInterval(opHD.idTimer);
                e.target.textContent = `start`;
                e.target.nextElementSibling.firstElementChild.textContent = `Current temperature (C): ${this.init_t}`;
                opHD.flag = !opHD.flag;
              }
            }, 1000) : clearInterval(opHD.idTimer);
            opHD.flag = !opHD.flag;
          }
        }
      }
    }
    
    document.documentElement.children[0].insertAdjacentHTML(`beforeend`,`<style>#module-heating-device {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color: transparent;box-sizing: border-box;padding: 0;margin: 0;outline: 0;display: flex;flex-direction: column;justify-content: center;align-content: center;align-items: center;}#module-heating-device .features-device {font-weight: bolder;font-size: 20px;}#module-heating-device .cistern {position: relative;margin-top: 20px;border-radius: 20px;width: 300px;height: ${this.volume * 20}px;background: #9E9E9E;box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);overflow: hidden;}#module-heating-device .cistern .water {position: absolute;left: 0;right: 0;bottom: 0;background: #42A5F5;font-weight: bold;text-align: center;line-height: ${this.water * 20}px;height: ${this.water * 20}px;transition: height 1s;}#module-heating-device .control-button {display: flex;justify-content: center;align-items: center;margin-top: 20px;border-radius: 20px;background: #9CCC65;box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);height: 50px;width: 300px;text-transform: uppercase;font-weight: bold;cursor: pointer;transition: .5s;}#module-heating-device .control-button:hover {background: #8BC34A;box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);}#module-heating-device .control-button:active {box-shadow: 0 0 5px black;}#module-heating-device .progrees-sensors {margin-top: 20px;cursor: text;font-weight: bold;text-align: center;}#module-heating-device .progrees-sensors .temperature {margin-bottom: 10px;}</style>`);
    
    this.container.insertAdjacentHTML(`beforeend`, `<div id="module-heating-device"><div class="features-device">${this.volume}(l) | ${this.power}(kW)</div><div class="cistern"><div class="water">${this.water}(l)</div></div><div class="control-button">start</div><div class="progrees-sensors"><div class="temperature">Current temperature (C): ${this.init_t}</div><div class="time-lap">Time to finish (sec): 0</div></div></div>`);
    
    this.container.addEventListener(`mouseup`, opHD.events.mUp);
  }
}
 
// create instance
new Teapot({
  container: document.body,
  power: 30000,
  init_t: 15,
  volume: 10,
  water: 5
}).init();

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
class Teapot {
    constructor(maxValue, value, power, startT) {
        this.maxValue = maxValue;
        this.value = value;
        this.power = power;
        this.startT = startT;
        this.currentT = startT;
        this.paused = false;
    }
    calcTime() {
        return 4200 * this.value * (100 - this.currentT) / this.power;
    }
    draw(parent) {
        this.parent = parent;
        let s = `
    <div class="header">
    <span class="maxvolume">${this.maxValue}</span>(l)&nbsp;|&nbsp;<span class="power">${this.power}</span>(W)
    </div>
    <div class="container">
        <div class="water" style="height: ${Math.round(this.value / this.maxValue * 100)}px;">
            <span>${this.value}(l)</span>
        </div>
 
    </div>
    <input type="button" class="btn" value="Start"><br />
    Current temperature (C): <span class="temperature">${this.currentT}</span><br />
    Time to finish (sec): <span class="time">${Math.ceil(this.calcTime())}</span>        
`;
        parent.insertAdjacentHTML("beforeend", s);
        this.button = this.parent.querySelector(".btn");
        let onStart = async () => {
            this.paused = false;
            this.button.value = "Pause";
            this.button.onclick = onPaused;
            while (this.currentT < 100 && !this.paused) {
                await delay(1000);
                this.currentT += this.power / 4200 / this.value;
                if (this.currentT > 100)
                    this.currentT = 100;
                this.redraw();
            }
            if (this.paused && this.currentT < 100) {
                this.button.value = "Continue";
                this.button.onclick = onStart;
                return;
            }
            this.button.value = "Reset";
            this.button.onclick = onReset;
        };
        let onReset = () => {
            this.button.value = "Start";
            this.button.onclick = onStart;
            this.currentT = this.startT;
            this.redraw();
        };
        let onPaused = () => {
            this.paused = true;
        };
        this.button.onclick = onStart;
    }
    redraw() {
        this.parent.querySelector(".temperature").textContent = this.currentT.toFixed(0);
        this.parent.querySelector(".time").textContent = Math.ceil(this.calcTime()).toString();
    }
}
new Teapot(10, 1, 20000, 15).draw(document.body);