index.js

/// <reference path="./node_modules/@types/p5/lib/addons/p5.sound.d.ts" />
/// <reference path="./node_modules/@types/p5/global.d.ts" />
/// <reference  path="./node_modules/@types/p5/literals.d.ts" />
/// <reference path="./node_modules/@types/p5/constants.d.ts" />

//timer code is from JamieMcGibbon/TechnicalCafe

let seconds = 0;
let minutes = 0;
let hours = 0;

//Define vars to hold "display" value
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;

//Define var to hold setInterval() function
let interval = null;

//Define var to hold stopwatch status
let status = "stopped";

//Stopwatch function (logic to determine when to increment next value, etc.)
function stopWatch() {
  seconds++;

  //Logic to determine when to increment next value
  if (seconds / 60 === 1) {
    seconds = 0;
    minutes++;

    if (minutes / 60 === 1) {
      minutes = 0;
      hours++;
    }
  }

  //If seconds/minutes/hours are only one digit, add a leading 0 to the value
  if (seconds < 10) {
    displaySeconds = "0" + seconds.toString();
  } else {
    displaySeconds = seconds;
  }

  if (minutes < 10) {
    displayMinutes = "0" + minutes.toString();
  } else {
    displayMinutes = minutes;
  }

  if (hours < 10) {
    displayHours = "0" + hours.toString();
  } else {
    displayHours = hours;
  }

  //Display updated time values to user
  document.getElementById("display").innerHTML =
    displayHours + ":" + displayMinutes + ":" + displaySeconds;
}

function startStop() {
  if (status === "stopped") {
    //Start the stopwatch (by calling the setInterval() function)
    interval = window.setInterval(stopWatch, 1000);
    document.getElementById("startStop").innerHTML = "Stop";
    status = "started";
  } else {
    window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    status = "stopped";
  }
}

//Function to reset the stopwatch
function reset() {
  window.clearInterval(interval);
  seconds = 0;
  minutes = 0;
  hours = 0;
  document.getElementById("display").innerHTML = "00:00:00";
  document.getElementById("startStop").innerHTML = "Start";
}

function oneclick() {
  document.getElementById("one").hidden =
    !document.getElementById("one").hidden;
}

function twoclick() {
  document.getElementById("two").hidden =
    !document.getElementById("two").hidden;
}

function threeclick() {
  document.getElementById("three").hidden =
    !document.getElementById("three").hidden;
}

function fourclick() {
  document.getElementById("four").hidden =
    !document.getElementById("four").hidden;
}

function fiveclick() {
  document.getElementById("ive").hidden =
    !document.getElementById("five").hidden;
}

function aclick() {
  document.getElementById("ac").hidden = !document.getElementById("ac").hidden;
}

function jclick() {
  document.getElementById("cj").hidden = !document.getElementById("cj").hidden;
}

function aboutclick() {
  document.getElementById("about").hidden =
    !document.getElementById("about").hidden;
}



function load() {
  document.getElementById("one").hidden = true;
  document.getElementById("two").hidden = true;
  document.getElementById("three").hidden = true;
  document.getElementById("four").hidden = true;
  document.getElementById("about").hidden = true;
  document.getElementById("cj").hidden = true;


  startStop();
}