Simple Breathing Counter

by Ahmed Hosny

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<div id="container">
  <p>
    After each complete breathing, just hit the <b>Enter</b> button.
  </p>
  <p>
    You can press <b>Esc</b> button at anytime to reset.
  </p>
  <p>
    <span id="rate"></span>
  </p>
</div>

CSS

span#rate {
  font-size: 18pt;
  color: blue;
}

div#container {
  direction: rtl;
  border: solid 2px orange;
  padding: 4px;
}

JavaScript

let breaths = 0;
let startAt = moment().unix();
let breathingRate = 0;

reset = () => {
  breaths = 0;
  startAt = moment().unix();

  jQuery('span#rate').text("Still need " + (4 - breaths) + " breaths");
};

jQuery(document).ready(() => {
  reset();

  jQuery(document).keyup(function(e) {
    if (e.key === "Enter") {
      breaths++;

      breathingRate = (breaths / ((moment().unix() - startAt) / 60)).toFixed(0);
      if (breaths > 3)
        jQuery('span#rate').text("Your current breathing rate is: " + breathingRate + " breath / minute");
      else
        jQuery('span#rate').text("Still need " + (4 - breaths) + " breaths");
    } else if (e.key === "Escape") {
      reset();
      alert("Your breathing counting has been reset. You can start over.");
    }

    console.log("Breaths", breaths, "Started At", startAt, "Breathing Rate Per Minute", breathingRate);
  });
});