abijaK

<main class="wraper">
        <div class="rec">
            <div class="progress">
                <div class="outer">
                    <div class="inner">
                        <div class="timer">
                            <p id="min"></p>
                            <span>:</span>
                            <p id="sec"></p>
                        </div>

abijaK

            // if seconds get value 0 then decrement minutes (onWorking)
            if (decrementSec === 0) {
                onWorking -= 1;

                // commute between session time and break time
                if (onWorking === -1) {
                    if (isSwitching % 2 === 0) {
                        // Start with breack timer
                        onWorking = initial.breakTime;

abijaK

    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    :root{
        --p-width: 200px;
        --p-height: 200px;
        --button-width : 60px;

abijaK

    .controls{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap:160px;
    }

    .start-break{
        display: flex;
    }

abijaK

    // Add function that will be called onClick
    let start = () => {

        // Display break button and hide start button
        breakButton.style.display = "block";
        startButton.style.display = "none";
        
        // Set minutes to start count down
        let onWorking = initial.startTime;       

abijaK

    // Add event listener to start button :
    startButton.addEventListener('click', () => {
        start();
    });

    // Add event listener to start button :
    breakButton.addEventListener('click', () => {
        breakSession();
        startButton.style.display = "block";

abijaK

    // Declare variables to point to elements
    let min = document.getElementById("min");
    let sec = document.getElementById("sec");
    let startButton = document.getElementById("start");
    let breakButton = document.getElementById("break");
    let resetButton = document.getElementById("reset");

    // Initialization
    let initial = {
        startTime: 24,

abijaK

<main class="wraper">
        <div class="rec">
            <div class="progress">
                <div class="outer">
                    <div class="inner">
                        <div class="timer">
                            <p id="min"></p>
                            <span>:</span>
                            <p id="sec"></p>
                        </div>