I’ve followed [this tutorial]https://freshman.tech/pomodoro-timer to code a pomodoro timer, with a few changes :

const timer = {
  pomodoro: 25,
  shortBreak: 5,
  longBreak: 30,
  longBreakInterval: 4,
  sessions: 0,
};

let interval;

const mainButton = document.getElementById('js-btn');
mainButton.addEventListener('click', () => {
  const { action } = mainButton.dataset;
  if (action === 'start') {
    startTimer();
  } else {
    stopTimer();
  }
});


const modeButtons = document.querySelector('#js-mode-buttons');
modeButtons.addEventListener('click', handleMode);

function getRemainingTime(endTime) {
  const currentTime = Date.parse(new Date());
  const difference = endTime - currentTime;

  const total = Number.parseInt(difference / 1000, 10);
  const minutes = Number.parseInt((total / 60) % 60, 10);
  const seconds = Number.parseInt(total % 60, 10);
  
  return {
    total,
    minutes,
    seconds,
  };
}

function startTimer() {
  let { total } = timer.remainingTime;
  const endTime = Date.parse(new Date()) + total * 1000;

  if (timer.mode === 'pomodoro') timer.sessions++;
  
  mainButton.dataset.action = 'stop';
  mainButton.textContent="stop";
  mainButton.classList.add('active');

  interval = setInterval(function() {
    timer.remainingTime = getRemainingTime(endTime);
    updateClock();

    total = timer.remainingTime.total;
    if (total <= 0) {
      clearInterval(interval);

      switch (timer.mode) {
        case 'pomodoro':

          if (timer.sessions % timer.longBreakInterval === 0) {
            switchMode('longBreak');
          } else {
            switchMode('shortBreak');
          }
          break;
        // Starts pomodoro when break ends
        default:
          switchMode('pomodoro');
      }

      startTimer();
    }
  }, 1000);
}

function stopTimer() {
  clearInterval(interval);
  
  mainButton.dataset.action = 'start';
  mainButton.textContent="start";
  mainButton.classList.remove('active');
}



function updateClock() {
  const { remainingTime } = timer;
  const minutes = `${remainingTime.minutes}`.padStart(2, '0');
  const seconds = `${remainingTime.seconds}`.padStart(2, '0');

  const min = document.getElementById('js-minutes');
  const sec = document.getElementById('js-seconds');
  min.textContent = minutes;
  sec.textContent = seconds;

}

function switchMode(mode) {
  timer.mode = mode;
  timer.remainingTime = {

    total: timer[mode] * 60,
    minutes: timer[mode],
    seconds: 0,
  };

  document
    .querySelectorAll('button[data-mode]')
    .forEach(e => e.classList.remove('active'));
  document.querySelector(`[data-mode="${mode}"]`).classList.add('active');

  updateClock();
}

function handleMode(event) {
  const { mode } = event.target.dataset;

  if (!mode) return;

  switchMode(mode);
  stopTimer();
}

const resetButton = document.querySelector(".reset_button");

resetButton.addEventListener("click", function reset(mode){
  
  timer.mode = mode;
  timer.remainingTime = {
    total: timer[mode] * 60,
    minutes: timer[mode],
    seconds: 0,
  };

  const { remainingTime } = timer;
  const minutes = `${remainingTime.minutes}`.padStart(2, '0');
  const seconds = `${remainingTime.seconds}`.padStart(2, '0');

  const min = document.getElementById('js-minutes');
  const sec = document.getElementById('js-seconds');
  min.textContent = minutes;
  sec.textContent = seconds;

  mainButton.dataset.action = 'start';
  mainButton.textContent="start";
  mainButton.classList.remove('active');

});

document.addEventListener('DOMContentLoaded', () => {
    switchMode('pomodoro');
});


const setting = document.querySelector(".setting_button");

let toggleSettings = false;
let editableMinutes = document.getElementById("js-minutes").innerHTML;
let editableSeconds = document.getElementById("js-seconds").innerHTML;
let value = null;

setting.addEventListener('click', function () {
  if (!toggleSettings) {
    toggleSettings = true;
    editableMinutes.contentEditable = true;
    editableSeconds.contentEditable = true;
  } 
});
<body>
    <div class="pomodoro">
      <div class="timer">
        <div class="button-group mode-buttons" id="js-mode-buttons">
          <button
            data-mode="pomodoro"
            class="button active mode-button"
            id="js-pomodoro"
          >
            pomodoro
          </button>
          <button
            data-mode="shortBreak"
            class="button mode-button"
            id="js-short-break"
          >
            short break
          </button>
          <button
            data-mode="longBreak"
            class="button mode-button"
            id="js-long-break"
          >
            long break
          </button>
        </div>
        <div class="clock" id="js-clock">
          <span id="js-minutes">25</span>
          <span class="separator">:</span>
          <span id="js-seconds">00</span>
        </div>
        <button class="main-button" data-action="start" id="js-btn">
            start
        </button>
        <button class="setting_button">
            settings
        </button>
        <button class="reset_button">
            reset
        </button>
      </div>
</body>

I want to create buttons that allow users to reset the timer to the initial amount of time for each mode, and edit the session times. I tried but I’m not sure how to I’m new to Javascript.

Ma Ta is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.