timer

HTML

<div id="timer">...</div>
<button id="up">up</button>
<button id="down">down</button>

JavaScript

//get DOM elements
let up = document.getElementById('up');
let down = document.getElementById('down');
let timerElement = document.getElementById('timer');
var timeOut;
//global variables
let index = 0;
let indexState = {
  decrement: false,
  increment: true
};


//increment / decrement functions
let increment = (x = true) => {

  if (x !== true) {
    console.log('not x increment')
    intervalStop()
  }

  if (index === 10) { //change count direction
    indexState.decrement = true;
    indexState.increment = false;
    console.log('1')
  } else { //keep counting
    indexState.decrement = false;
    indexState.increment = true;
    index++;
    timerElement.innerHTML = index;
    console.log('2')
  }
}


let decrement = (x = true) => {
  if (x !== true) {
    console.log('not x decrement')
    intervalStop()
  }

  if (index === 0) { //change count direction
    indexState.increment = true;
    indexState.decrement = false;
    console.log('3')
  } else { //keep counting
    indexState.increment = false;
    indexState.decrement = true;
    index--;
    timerElement.innerHTML = index;
    console.log('4')
  }
}

//decide wich direction to count(up or dow)
function count() {
  indexState.increment === true ? increment(true) : decrement(true);
}

//start timer
let interval = setInterval(count, 1000);

function intervalStart() {
  interval = setInterval(count, 1000);
}

function intervalStop() {
  if (timeOut) {
    clearTimeout(timeOut)
  }
  interval = clearInterval(interval)
  timeOut = setTimeout(function() {
    intervalStart()
  }, 3000)
}

//control timer with user input
up.addEventListener('click', increment);
down.addEventListener('click', decrement);