Click Counter event listener to increment and decrement count. I need to make the count weighted-CodePudding

I have a multi click counter that is coming together nicely. My JS code to increment and decrement is working fine. The two counters are added together to make total units. When the primary click counter goes up to the number nine the total units should increase to 1, 18 to 2 27 to 3 and so on. Also when the count goes down below 9 the unit total should be 0 again and so on. I know I need to use something along these lines units = Math.floor(primaryNumber / 9); but it returns NaN every time I try. I'll post my full code below but, if someone can explain to me how I can do this I would be so grateful.
So for example the primary result is 9 the total units = 1. Also if the primary result is 40 the total units should = 4 codepen link https://codepen.io/Jonbeckner/pen/GRGZLKM

JS code below

let primaryNumber = document.querySelector(".primaryResult");
let primaryPlus =  document.querySelector(".buttonPrimaryp"); 
let primaryMinus =  document.querySelector(".buttonPrimarym"); 
let primaryReset =  document.querySelector(".primaryReset"); 
let units = document.querySelector("#totalUnits");
primaryPlus.addEventListener("click",function(){
  primaryNumber.innerText  ;
  units.innerText  ;
})
primaryMinus.addEventListener("click",function(){
  if (primaryNumber.innerText == 0) {
document.getElementsByClassName("primaryResult").innerText = "";
  }
  else {
  primaryNumber.innerText--;
  units.innerText--;
  }
})
primaryReset.addEventListener("click",function(){ 
  let priReset = Number(totalUnits.innerText) - Number(primaryNumber.innerText);
units.innerHTML = priReset;
  primaryNumber.innerText = 0;
})

let secondaryNumber = document.querySelector(".secondaryResult");
let secondaryPlus =  document.querySelector(".buttonSecondaryp"); 
let secondaryMinus =  document.querySelector(".buttonSecondarym"); 
let secondaryReset =  document.querySelector(".secondaryReset"); 
secondaryPlus.addEventListener("click",function(){
  secondaryNumber.innerText  ;
  units.innerText  ;
})
secondaryMinus.addEventListener("click",function(){
  if (secondaryNumber.innerText == 0) {
document.getElementsByClassName("secondaryResult").innerText = "";
  }
  else {
  secondaryNumber.innerText--;
  units.innerText--;
  }
})
secondaryReset.addEventListener("click",function(){
  let secReset = Number(totalUnits.innerText) - Number(secondaryNumber.innerText);
units.innerHTML = secReset;
  primaryNumber.innerText = 0;
  secondaryNumber.innerText = 0;
})
const weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const d = new Date();
let day = weekday[d.getDay()];
let id = day;
document.getElementById("buttonSave").addEventListener("click", function () {
  const total = Number(document.getElementById("totalUnits").innerText);
  if (total > 0) {
 document.getElementById(id).innerText = document.getElementById("totalUnits").innerText;}
  
  else {
    document.getElementById(id).innerText = "0";
  }
});


const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;

const COLOR_CODES = {
    info: {
        color: "green"
    },
    warning: {
        color: "orange",
        threshold: WARNING_THRESHOLD
    },
    alert: {
        color: "red",
        threshold: ALERT_THRESHOLD
    }
}
let minutes = 120;
let TIME_LIMIT = minutes;
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval = null;
let remainingPathColor = COLOR_CODES.info.color;
let isRunning = false;

document.getElementById("app").innerHTML = `
<div >
  <svg  viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <g >
      <circle  cx="50" cy="50" r="45"></circle>
      <path
        id="base-timer-path-remaining"
        stroke-dasharray="283"
        
        d="
          M 50, 50
          m -45, 0
          a 45,45 0 1,0 90,0
          a 45,45 0 1,0 -90,0
        "
      ></path>
    </g>
  </svg>
  <span id="base-timer-label" >${formatTime(
            timeLeft
        )}</span>
</div>
`;
//Start timer button
document.querySelector(".button-start").addEventListener("click", function () {
    if (isRunning) return;
    isRunning = true;   
  startTimer();
});
//Enter custom countdown time 
document.customForm.addEventListener('submit', function(e) {
  e.preventDefault();
  onTimesUp();
  let minutes = document.getElementById("minutes").value;
  const mins = this.minutes.value;
  TIME_LIMIT = mins * 60;
document.getElementById('minutes').value=null;
  startTimer();
});
//Reset button
document
    .querySelector(".button-start-reset")
    .addEventListener("click", function () {
        onTimesUp();
        resetTimer();
    });
//Reset timer
function resetTimer() {
    isRunning = false;
    const { alert, warning, info } = COLOR_CODES;
    timeLeft = TIME_LIMIT=120;
    document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft);
    setCircleDasharray();
    document
        .getElementById("base-timer-path-remaining")
        .classList.remove(warning.color);
    document
        .getElementById("base-timer-path-remaining")
        .classList.remove(alert.color);
    document.getElementById("base-timer-path-remaining").classList.add(info.color);
}
//Times up
function onTimesUp() {
    clearInterval(timerInterval);
}
//Start timer
function startTimer() {
    timePassed = 0;
    timerInterval = setInterval(() => {
        timePassed = timePassed  = 1;
        timeLeft = TIME_LIMIT - timePassed;
        document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft);
        setCircleDasharray();
        setRemainingPathColor(timeLeft);

        if (timeLeft === 0) {
            onTimesUp();
            resetTimer();
        }
    }, 1000);
}

function formatTime(time) {
    const minutes = Math.floor(time / 60);
    let seconds = time % 60;

    if (seconds < 10) {
        seconds = `0${seconds}`;
    }

    return `${minutes}:${seconds}`;
}

function setRemainingPathColor(timeLeft) {
    const { alert, warning, info } = COLOR_CODES;
    if (timeLeft <= alert.threshold) {
        document
            .getElementById("base-timer-path-remaining")
            .classList.remove(warning.color);
        document
            .getElementById("base-timer-path-remaining")
            .classList.add(alert.color);
    } else if (timeLeft <= warning.threshold) {
        document
            .getElementById("base-timer-path-remaining")
            .classList.remove(info.color);
        document
            .getElementById("base-timer-path-remaining")
            .classList.add(warning.color);
    }
}

function calculateTimeFraction() {
    const rawTimeFraction = timeLeft / TIME_LIMIT;
    return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
}

function setCircleDasharray() {
    const circleDasharray = `${(calculateTimeFraction() * FULL_DASH_ARRAY).toFixed(
        0
    )} 283`;
    document
        .getElementById("base-timer-path-remaining")
        .setAttribute("stroke-dasharray", circleDasharray);
}

body {
    background: #000000;
    height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.block-wrapper {
    display: flex;
    justify-content: center;
    margin: auto;
}

.primaryResult, .secondaryResult {
  display: flex;
  justify-content: center;
    color: rgb(0, 190, 255);
    font-size: 100px;
    margin-top: 40px;
    margin-bottom: 40px;
}

button{
    display: flex;
  justify-content: center;
    text-align: center;
}

button {
    border: none;
    cursor: pointer;
}

button:focus {
    outline: none;
}
.plusminus {
  display: flex;
  justify-content: center;
  margin: auto;
}
.tile {
    background-color: #000000;
    margin-top: 40px;
    width: 375px;
    height: 425px;
    border-radius: 12px;
    border: solid;
  border-width: 6px;
    border-color: rgb(170, 170, 170, 0.5);
    display: flex;
    justify-content: center;
    margin: 20px;
}

.button {
    margin-top: 40px;
    color: rgb(0, 190, 255);
    border-radius: 6px;
    border: solid;
  border-width: 3px;
    border-color: rgb(170, 170, 170, 0.5);
    font-size: 32px;
}

.buttontimer {
    margin-top: 40px;
    color: rgb(0, 190, 255);
    padding: 4px 10px;
    border-radius: 6px;
    border: solid;
  border-width: 3px;
    border-color: rgb(170, 170, 170, 0.5);
    font-size: 32px;
}

input {
  display: flex;
    justify-content: center;
  margin: auto;
  margin-top: 10px;
  background-color: rgb(85, 85, 85, 0.4);
    color: rgb(0, 190, 255);
    padding: 5px 5px;
    border-radius: 6px;
    border: solid;
  border-width: 3px;
    border-color: rgb(170, 170, 170, 0.5);
    color: rgb(0, 190, 255);
  font-size: 16px;
  outline: none;
}

.button:hover {
    opacity: 0.9;
}

.button[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

.buttonPrimaryp, .buttonPrimarym  {
  display: block;
    background-color: rgb(85, 85, 85, 0.4);
  width: 40px;
  margin-top: 10px;
}

.buttonSecondaryp, .buttonSecondarym {
    display: block;
    background-color: rgb(85, 85, 85, 0.4);
  width: 40px;
  margin-top: 10px;
}
.primaryReset, .secondaryReset,.buttonReset {
    background-color: rgb(85, 85, 85, 0.4);
    color: rgb(0, 190, 255);
    margin: 12px auto 0;
    font-size: 16px;
    padding: 4px 56px;
    border-radius: 6px;
    border: solid;
    border-width: 3px;
    border-color: rgb(170, 170, 170, 0.5);
}

#app {
    display: flex;
    justify-content: center;
    margin: auto;
    margin-bottom: 50px;
}

.button-start {
    background-color: rgb(85, 85, 85, 0.4);
    color: rgb(0, 190, 255);
    margin: 12px auto 0;
    border-radius: 6px;
    border: solid;
    border-width: 3px;
    border-color: rgb(170, 170, 170, 0.5);
}

.button-start-reset {
    background-color: rgb(85, 85, 85, 0.4);
    color: rgb(0, 190, 255);
    margin: 12px auto 0;
    font-size: 16px;
    padding: 4px 56px;
    border-radius: 6px;
    border: solid;
    border-width: 3px;
    border-color: rgb(170, 170, 170, 0.5);
}



.totaltile {
    width: 500px;
    height: 50px;
    padding: 4px 10px;
    border-radius: 6px;
    border: solid;
  border-width: 6px;
    border-color: rgb(170, 170, 170, 0.5);
    font-size: 32px;
    display: flex;
    justify-content: center;
    margin: auto;
    margin-bottom: 20px;
}

#buttonSave {
    background-color: rgb(85, 85, 85, 0.4);
    color: rgb(0, 190, 255);
    margin: 5px 0;
  margin-left: 50px;
    font-size: 16px;
    padding: 4px 26px;
    border-radius: 6px;
    border: solid;
    border-width: 3px;
    border-color: rgb(170, 170, 170, 0.5);
}

p {
  display: flex;
    justify-content: center;
    margin: auto;
    color: rgb(0, 190, 255);
    font-size: 32px;
}

.base-timer {
  margin-top: 20px;
    position: relative;
    width: 200px;
    height: 200px;
}

.base-timer__svg {
    transform: scaleX(-1);
}

.base-timer__circle {
    fill: none;
    stroke: none;
}

.base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: grey;
}

.base-timer__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
}

.base-timer__path-remaining.green {
    color: rgb(65, 184, 131);
}

.base-timer__path-remaining.orange {
    color: orange;
}

.base-timer__path-remaining.red {
    color: red;
}

.base-timer__label {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    color: rgb(0, 190, 255);
}

.timerpadding {
    margin-top: 50px;
}

::placeholder {
  color: rgb(0, 190, 255);
  text-align: center;
}

.weekdays {
    width: 500px;
    height: 100px;
    padding: 4px 10px;
    font-size: 32px;
  color: rgb(0, 190, 255);
    display: flex;
    justify-content: center;
    margin: auto;
    margin-bottom: 20px;
  
}

.weeklyTotals {
    color: rgb(0, 190, 255);
  font-size: 16px;
    display: flex;
    justify-content: center;
    margin: auto;
    margin-bottom: 0px;
}

#sun, #mon, #tues, #wed, #thur, #fri, #sat{
  width: 40px;
  height: 80px;
  margin-left: 3px;
  margin-right: 3px;
    padding: 4px 15px;
    border-radius: 6px;
    border: solid;
  border-width: 5px;
    border-color: rgb(170, 170, 170, 0.5);
}

#Sunday, #Monday, #Tuesday, #Wednesday, #Thursday, #Friday, #Saturday {
  width: 40px;
  height: 80px;
    display: flex;
    justify-content: center;
    margin: auto;
}

<body>
    <div >
        <div >
            <div >
      <div >0 </div>
        <p>Document Count</p>
                <span >
        <button  type="button">
                     
                </button>
          &nbsp;&nbsp;
        <button  type="button">
                    -
          </button> </span>
                <button >
                    Reset
                </button>
            </div>
        </div>
        <div >
            <div >
        <span >0 </span>
                <p>Verified Videos</p>
                <span >
        <button  type="button">
                     
                </button>
          &nbsp;&nbsp;
        <button  type="button">
                    -
          </button> </span>
                <button >
                    Reset
                </button>
            </div>
        </div>
        <div >
            <div >
                <div id="app">
                </div>
        <button  type="button">
                    Start Timer
                </button>
        <form name="customForm" id="custom">
        <input type="text" id="minutes" placeholder="Enter Minutes" autocomplete="off">
      </form>
                <button  type="button">
                    Reset
                </button>
            </div>
        </div>
    </div>

    <script src="./script.js"></script>
    <span >
        <p>Total Units =&nbsp;
            <span id="totalUnits">
                0
            </span>
      <button id="buttonSave">
                    Save Total
                </button>
        </p>
    </span>
  <span >
  <div >
  Weekly Totals
  </div>
<div >
  <span id="sun">
    <p>Sun</p>
    <span id="Sunday"> 0 </span>
  </span>
    <span id="mon">
      <p>Mon</p>
      <span id="Monday">0 </span>
  </span>
  <span id="tues">
    <p>Tue</p>
      <span id="Tuesday">0 </span>
  </span>
  <span id="wed">
    <p>Wed</p>
      <span id="Wednesday">0 </span>
  </span>
  <span id="thur">
    <p>Thu</p>
     <span id="Thursday">0 </span>
  </span>
  <span id="fri">
    <p>Fri</p>
      <span id="Friday">0 </span>
  </span>
  <span id="sat">
    <p>Sat</p>
    <span id="Saturday">0 </span>
  </span>
  </div>
</body>

CodePudding user response：

You should parse primaryNumber.innerText to a number and also need to use secondaryNumber.innerText for units calculation. You can try the below approach

primaryPlus.addEventListener("click", function() {
  const updatedPrimaryNumber = primaryNumber.innerText  ;
  
  units.innerText = Math.floor(parseInt(updatedPrimaryNumber) / 9)   parseInt(secondaryNumber.innerText);
})
primaryMinus.addEventListener("click", function() {
  if (primaryNumber.innerText == 0) {
    document.getElementsByClassName("primaryResult").innerText = 0;
  } else {
    const updatedPrimaryNumber = primaryNumber.innerText--;
    units.innerText = Math.floor(parseInt(updatedPrimaryNumber) / 9)   parseInt(secondaryNumber.innerText);
  }
})

let primaryNumber = document.querySelector(".primaryResult");
let primaryPlus = document.querySelector(".buttonPrimaryp");
let primaryMinus = document.querySelector(".buttonPrimarym");
let primaryReset = document.querySelector(".primaryReset");
let units = document.querySelector("#totalUnits");
primaryPlus.addEventListener("click", function() {
  const updatedPrimaryNumber = primaryNumber.innerText  ;
  
  units.innerText = Math.floor(parseInt(updatedPrimaryNumber) / 9)   parseInt(secondaryNumber.innerText);
})
primaryMinus.addEventListener("click", function() {
  if (primaryNumber.innerText == 0) {
    document.getElementsByClassName("primaryResult").innerText = 0;
  } else {
    const updatedPrimaryNumber = primaryNumber.innerText--;
    units.innerText = Math.floor(parseInt(updatedPrimaryNumber) / 9)   parseInt(secondaryNumber.innerText);
  }
})
primaryReset.addEventListener("click", function() {
  let priReset = Number(totalUnits.innerText) - Number(primaryNumber.innerText);
  units.innerHTML = priReset;
  primaryNumber.innerText = 0;
})

let secondaryNumber = document.querySelector(".secondaryResult");
let secondaryPlus = document.querySelector(".buttonSecondaryp");
let secondaryMinus = document.querySelector(".buttonSecondarym");
let secondaryReset = document.querySelector(".secondaryReset");
secondaryPlus.addEventListener("click", function() {
  secondaryNumber.innerText  ;
  units.innerText  ;
})
secondaryMinus.addEventListener("click", function() {
  if (secondaryNumber.innerText == 0) {
    document.getElementsByClassName("secondaryResult").innerText = 0;
  } else {
    secondaryNumber.innerText--;
    units.innerText--;
  }
})
secondaryReset.addEventListener("click", function() {
  let secReset = Number(totalUnits.innerText) - Number(secondaryNumber.innerText);
  units.innerHTML = secReset;
  primaryNumber.innerText = 0;
  secondaryNumber.innerText = 0;
})
const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const d = new Date();
let day = weekday[d.getDay()];
let id = day;
document.getElementById("buttonSave").addEventListener("click", function() {
  const total = Number(document.getElementById("totalUnits").innerText);
  if (total > 0) {
    document.getElementById(id).innerText = document.getElementById("totalUnits").innerText;
  } else {
    document.getElementById(id).innerText = "0";
  }
});


const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;

const COLOR_CODES = {
  info: {
    color: "green"
  },
  warning: {
    color: "orange",
    threshold: WARNING_THRESHOLD
  },
  alert: {
    color: "red",
    threshold: ALERT_THRESHOLD
  }
}
let minutes = 120;
let TIME_LIMIT = minutes;
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval = null;
let remainingPathColor = COLOR_CODES.info.color;
let isRunning = false;

document.getElementById("app").innerHTML = `
<div >
  <svg  viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <g >
      <circle  cx="50" cy="50" r="45"></circle>
      <path
        id="base-timer-path-remaining"
        stroke-dasharray="283"
        
        d="
          M 50, 50
          m -45, 0
          a 45,45 0 1,0 90,0
          a 45,45 0 1,0 -90,0
        "
      ></path>
    </g>
  </svg>
  <span id="base-timer-label" >${formatTime(
            timeLeft
        )}</span>
</div>
`;
//Start timer button
document.querySelector(".button-start").addEventListener("click", function() {
  if (isRunning) return;
  isRunning = true;
  startTimer();
});
//Enter custom countdown time 
document.customForm.addEventListener('submit', function(e) {
  e.preventDefault();
  onTimesUp();
  let minutes = document.getElementById("minutes").value;
  const mins = this.minutes.value;
  TIME_LIMIT = mins * 60;
  document.getElementById('minutes').value = null;
  startTimer();
});
//Reset button
document
  .querySelector(".button-start-reset")
  .addEventListener("click", function() {
    onTimesUp();
    resetTimer();
  });
//Reset timer
function resetTimer() {
  isRunning = false;
  const {
    alert,
    warning,
    info
  } = COLOR_CODES;
  timeLeft = TIME_LIMIT = 120;
  document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft);
  setCircleDasharray();
  document
    .getElementById("base-timer-path-remaining")
    .classList.remove(warning.color);
  document
    .getElementById("base-timer-path-remaining")
    .classList.remove(alert.color);
  document.getElementById("base-timer-path-remaining").classList.add(info.color);
}
//Times up
function onTimesUp() {
  clearInterval(timerInterval);
}
//Start timer
function startTimer() {
  timePassed = 0;
  timerInterval = setInterval(() => {
    timePassed = timePassed  = 1;
    timeLeft = TIME_LIMIT - timePassed;
    document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft);
    setCircleDasharray();
    setRemainingPathColor(timeLeft);

    if (timeLeft === 0) {
      onTimesUp();
      resetTimer();
    }
  }, 1000);
}

function formatTime(time) {
  const minutes = Math.floor(time / 60);
  let seconds = time % 60;

  if (seconds < 10) {
    seconds = `0${seconds}`;
  }

  return `${minutes}:${seconds}`;
}

function setRemainingPathColor(timeLeft) {
  const {
    alert,
    warning,
    info
  } = COLOR_CODES;
  if (timeLeft <= alert.threshold) {
    document
      .getElementById("base-timer-path-remaining")
      .classList.remove(warning.color);
    document
      .getElementById("base-timer-path-remaining")
      .classList.add(alert.color);
  } else if (timeLeft <= warning.threshold) {
    document
      .getElementById("base-timer-path-remaining")
      .classList.remove(info.color);
    document
      .getElementById("base-timer-path-remaining")
      .classList.add(warning.color);
  }
}

function calculateTimeFraction() {
  const rawTimeFraction = timeLeft / TIME_LIMIT;
  return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
}

function setCircleDasharray() {
  const circleDasharray = `${(calculateTimeFraction() * FULL_DASH_ARRAY).toFixed(
        0
    )} 283`;
  document
    .getElementById("base-timer-path-remaining")
    .setAttribute("stroke-dasharray", circleDasharray);
}

body {
  background: #000000;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.block-wrapper {
  display: flex;
  justify-content: center;
  margin: auto;
}

.primaryResult,
.secondaryResult {
  display: flex;
  justify-content: center;
  color: rgb(0, 190, 255);
  font-size: 100px;
  margin-top: 40px;
  margin-bottom: 40px;
}

button {
  display: flex;
  justify-content: center;
  text-align: center;
}

button {
  border: none;
  cursor: pointer;
}

button:focus {
  outline: none;
}

.plusminus {
  display: flex;
  justify-content: center;
  margin: auto;
}

.tile {
  background-color: #000000;
  margin-top: 40px;
  width: 375px;
  height: 425px;
  border-radius: 12px;
  border: solid;
  border-width: 6px;
  border-color: rgb(170, 170, 170, 0.5);
  display: flex;
  justify-content: center;
  margin: 20px;
}

.button {
  margin-top: 40px;
  color: rgb(0, 190, 255);
  border-radius: 6px;
  border: solid;
  border-width: 3px;
  border-color: rgb(170, 170, 170, 0.5);
  font-size: 32px;
}

.buttontimer {
  margin-top: 40px;
  color: rgb(0, 190, 255);
  padding: 4px 10px;
  border-radius: 6px;
  border: solid;
  border-width: 3px;
  border-color: rgb(170, 170, 170, 0.5);
  font-size: 32px;
}

input {
  display: flex;
  justify-content: center;
  margin: auto;
  margin-top: 10px;
  background-color: rgb(85, 85, 85, 0.4);
  color: rgb(0, 190, 255);
  padding: 5px 5px;
  border-radius: 6px;
  border: solid;
  border-width: 3px;
  border-color: rgb(170, 170, 170, 0.5);
  color: rgb(0, 190, 255);
  font-size: 16px;
  outline: none;
}

.button:hover {
  opacity: 0.9;
}

.button[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.buttonPrimaryp,
.buttonPrimarym {
  display: block;
  background-color: rgb(85, 85, 85, 0.4);
  width: 40px;
  margin-top: 10px;
}

.buttonSecondaryp,
.buttonSecondarym {
  display: block;
  background-color: rgb(85, 85, 85, 0.4);
  width: 40px;
  margin-top: 10px;
}

.primaryReset,
.secondaryReset,
.buttonReset {
  background-color: rgb(85, 85, 85, 0.4);
  color: rgb(0, 190, 255);
  margin: 12px auto 0;
  font-size: 16px;
  padding: 4px 56px;
  border-radius: 6px;
  border: solid;
  border-width: 3px;
  border-color: rgb(170, 170, 170, 0.5);
}

#app {
  display: flex;
  justify-content: center;
  margin: auto;
  margin-bottom: 50px;
}

.button-start {
  background-color: rgb(85, 85, 85, 0.4);
  color: rgb(0, 190, 255);
  margin: 12px auto 0;
  border-radius: 6px;
  border: solid;
  border-width: 3px;
  border-color: rgb(170, 170, 170, 0.5);
}

.button-start-reset {
  background-color: rgb(85, 85, 85, 0.4);
  color: rgb(0, 190, 255);
  margin: 12px auto 0;
  font-size: 16px;
  padding: 4px 56px;
  border-radius: 6px;
  border: solid;
  border-width: 3px;
  border-color: rgb(170, 170, 170, 0.5);
}

.totaltile {
  width: 500px;
  height: 50px;
  padding: 4px 10px;
  border-radius: 6px;
  border: solid;
  border-width: 6px;
  border-color: rgb(170, 170, 170, 0.5);
  font-size: 32px;
  display: flex;
  justify-content: center;
  margin: auto;
  margin-bottom: 20px;
}

#buttonSave {
  background-color: rgb(85, 85, 85, 0.4);
  color: rgb(0, 190, 255);
  margin: 5px 0;
  margin-left: 50px;
  font-size: 16px;
  padding: 4px 26px;
  border-radius: 6px;
  border: solid;
  border-width: 3px;
  border-color: rgb(170, 170, 170, 0.5);
}

p {
  display: flex;
  justify-content: center;
  margin: auto;
  color: rgb(0, 190, 255);
  font-size: 32px;
}

.base-timer {
  margin-top: 20px;
  position: relative;
  width: 200px;
  height: 200px;
}

.base-timer__svg {
  transform: scaleX(-1);
}

.base-timer__circle {
  fill: none;
  stroke: none;
}

.base-timer__path-elapsed {
  stroke-width: 7px;
  stroke: grey;
}

.base-timer__path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor;
}

.base-timer__path-remaining.green {
  color: rgb(65, 184, 131);
}

.base-timer__path-remaining.orange {
  color: orange;
}

.base-timer__path-remaining.red {
  color: red;
}

.base-timer__label {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 45px;
  color: rgb(0, 190, 255);
}

.timerpadding {
  margin-top: 50px;
}

::placeholder {
  color: rgb(0, 190, 255);
  text-align: center;
}

.weekdays {
  width: 500px;
  height: 100px;
  padding: 4px 10px;
  font-size: 32px;
  color: rgb(0, 190, 255);
  display: flex;
  justify-content: center;
  margin: auto;
  margin-bottom: 20px;
}

.weeklyTotals {
  color: rgb(0, 190, 255);
  font-size: 16px;
  display: flex;
  justify-content: center;
  margin: auto;
  margin-bottom: 0px;
}

#sun,
#mon,
#tues,
#wed,
#thur,
#fri,
#sat {
  width: 40px;
  height: 80px;
  margin-left: 3px;
  margin-right: 3px;
  padding: 4px 15px;
  border-radius: 6px;
  border: solid;
  border-width: 5px;
  border-color: rgb(170, 170, 170, 0.5);
}

#Sunday,
#Monday,
#Tuesday,
#Wednesday,
#Thursday,
#Friday,
#Saturday {
  width: 40px;
  height: 80px;
  display: flex;
  justify-content: center;
  margin: auto;
}

<body>
  <div >
    <div >
      <div >
        <div >0 </div>
        <p>Document Count</p>
        <span >
        <button  type="button">
                     
                </button>
          &nbsp;&nbsp;
        <button  type="button">
                    -
          </button> </span>
        <button >
                    Reset
                </button>
      </div>
    </div>
    <div >
      <div >
        <span >0 </span>
        <p>Verified Videos</p>
        <span >
        <button  type="button">
                     
                </button>
          &nbsp;&nbsp;
        <button  type="button">
                    -
          </button> </span>
        <button >
                    Reset
                </button>
      </div>
    </div>
    <div >
      <div >
        <div id="app">
        </div>
        <button  type="button">
                    Start Timer
                </button>
        <form name="customForm" id="custom">
          <input type="text" id="minutes" placeholder="Enter Minutes" autocomplete="off">
        </form>
        <button  type="button">
                    Reset
                </button>
      </div>
    </div>
  </div>

  <script src="./script.js"></script>
  <span >
        <p>Total Units =&nbsp;
            <span id="totalUnits">
                0
            </span>
  <button id="buttonSave">
                    Save Total
                </button>
  </p>
  </span>
  <span >
  <div >
  Weekly Totals
  </div>
<div >
  <span id="sun">
    <p>Sun</p>
    <span id="Sunday"> 0 </span>
  </span>
  <span id="mon">
      <p>Mon</p>
      <span id="Monday">0 </span>
  </span>
  <span id="tues">
    <p>Tue</p>
      <span id="Tuesday">0 </span>
  </span>
  <span id="wed">
    <p>Wed</p>
      <span id="Wednesday">0 </span>
  </span>
  <span id="thur">
    <p>Thu</p>
     <span id="Thursday">0 </span>
  </span>
  <span id="fri">
    <p>Fri</p>
      <span id="Friday">0 </span>
  </span>
  <span id="sat">
    <p>Sat</p>
    <span id="Saturday">0 </span>
  </span>
  </div>
</body>