DIR : /home/kozerus/public_html/ko/timers2.html

/home/kozerus/public_html/ko

<html>
<head>





<style>
p {
    display: inline-flex;
    align-items: center;
}
label {
    float: left;
    display: block;
}
#userInput1 {
    display: flex;
    margin-bottom: 10px;
}

#userInput2 {
    display: flex;
    margin-bottom: 10px;
}

#userInput3 {
    display: flex;
    margin-bottom: 10px;
}

#userInput4 {
    display: flex;
    margin-bottom: 10px;
}

#userInput5 {
    display: flex;
    margin-bottom: 10px;
}

#Prepare {
    display: flex;
    margin-bottom: 10px;
}

#sets {
    display: flex;
    margin-bottom: 10px;
}

#timeon {
    display: flex;
    margin-bottom: 10px;
}

#timeoff {
    display: flex;
    margin-bottom: 10px;
}

#TotalTime {
    display: flex;
    margin-bottom: 10px;
}

#Counter {
    display: flex;
    margin-bottom: 10px;
}


input {
    height: 20px;
}


	</style>







<script>
var numsets = document.getElementById("userInput1");
var numex = document.getElementById("userInput2");
var numwork = document.getElementById("userInput3");
var numrest = document.getElementById("userInput4");
var numrestafterset = document.getElementById("userInput5");

var sets;
var OGtimeon;
var OGtimeoff;
var totalTime;
var timeRemaining;
var hasBeenStarted = false;  // Boolean value to test what time to use

var isTimeON = true;
var timeon;
var timeoff;
var timeonRemaining;
var timeoffRemaining;
var setsRemaining;
var OGsets;
var Prepare;
var OGExPS;
var OGTOASets;
var ExercisePS;
var RestAfterS;
var Intervals
var j = 0;
var ExercisesRemaining;
var RestRemaining;

// function sleep(milliseconds) { //function I found online to create a sleep function
//     const date = Date.now();
//     let currentDate = null;
//     do {
//       currentDate = Date.now();
//     } while (currentDate - date < milliseconds);
//   }

// function updateRest() {
//     if (RestAfterS > 0) {
//         interval3 = setInterval(RestCount, 1000);
//     }
//     else {
//         startTime();
//     }

// function RestCount() {
//     while (RestAfterS != 0) {
//         RestAfterS--;
//     }
//     j = 0;
// }

function updatePrep() {
    if  (hasBeenStarted == false) {
        Prepare = 5;
        interval2 = setInterval(PrepCount, 1000);
    }
    else {
        startTime();
    }
}


function PrepCount() {
    let seconds = parseFloat(Prepare) % 60;

    if (Prepare == 0) {
        clearInterval(interval2);
        startTime();
    }
    else {
        PWR.innerHTML = "Get Ready!";
        textarea.innerHTML = Prepare;
        console.log(Prepare);
        Prepare--;
    }
}



function startTime() {

    // Set values in code
    OGsets = numsets.value;
    OGtimeon = numwork.value;
    OGtimeoff = numrest.value;
    OGTOASets = numrestafterset.value;
    OGExPS = numex.value;
    

    timeon = (hasBeenStarted)? timeonRemaining : OGtimeon;
    timeoff = (hasBeenStarted)? timeoffRemaining : OGtimeoff;
    sets = (hasBeenStarted)? setsRemaining : OGsets;
    ExercisePS = (hasBeenStarted)? ExercisesRemaining : OGExPS;
    RestAfterS = (hasBeenStarted)? RestRemaining : OGTOASets;

    // How much time on timer
    // Var = (expression)? true : false this is basically an if statement
    totalTime = (hasBeenStarted)? timeRemaining : ((parseFloat(OGtimeon)*parseFloat(sets)*parseFloat(ExercisePS))+(parseFloat(OGTOASets)*(parseFloat(sets)-1))+(parseFloat(OGtimeoff)*(parseFloat(sets)*(parseFloat(ExercisePS)-1))));
    Intervals = ((parseFloat(sets)*parseFloat(ExercisePS))+((parseFloat(sets)-1))+((parseFloat(sets)*(parseFloat(ExercisePS)-1))));
    hasBeenStarted = true;
    

    // Start timer
    interval = setInterval(updateCountdown, 1000);
}



function updateCountdown() {
    IntervalsLeft.innerHTML = Intervals;
    setsLeft.innerHTML = sets;

    var minutes= Math.floor (parseFloat(totalTime) / 60);
    var seconds = parseFloat(totalTime) % 60;
    if (seconds < 10) {
        textareaRemaining.innerHTML = minutes + ":0" + seconds;
    } else {
        textareaRemaining.innerHTML = minutes + ":" + seconds;
    }

    // Update TimeON / Time OFF
    if(isTimeON){          
        PWR.innerHTML = "Work!";    
        textarea.innerHTML = timeon;
        timeon--;
        if(timeon == 0){
            isTimeON = false;
            timeon = OGtimeon;
            Intervals--;
            IntervalsLeft.innerHTML = Intervals;
        }
        
    }
    //BELOW IS THE AREA I AM STUCK ON

    else{
        
       textarea.innerHTML = timeoff;
       timeoff--;
       PWR.innerHTML = "Rest!";
       if(timeoff == 0){
            isTimeON = true;
            timeoff = OGtimeoff;
            j++;
            Intervals--;
            IntervalsLeft.innerHTML = Intervals;
            if (j == OGExPS) {
                sets--;
                //updateRest();
                j = 0;
            }
             
        }
    }
        if( totalTime == 0 ){
            clearTimeout(interval);
            hasBeenStarted = false;
            console.log(sets);
            sets--;
            setsLeft.innerHTML = sets;
            PWR.innerHTML = "OMG YOU'RE DONE";
        }
        totalTime--;    
    }


    

    function updateRest() {
        if (RestAfterS > 0) {
            interval3 = setInterval(RestCount, 5000);
        }
        else {
            startTime();
        }
    }
    
    function RestCount() {
        while (RestAfterS != 0) {
            RestAfterS--;
            PWR.innerHTML = "Set Rest!";
            textarea.innerHTML = RestAfterS;
        }
        j = 0;
        clearInterval(interval3);
    }




function stop(){
    timeRemaining = totalTime;
    timeonRemaining = timeon;
    timeoffRemaining = timeoff;
    RestRemaining = RestAfterS;
    ExercisesRemaining = OGExPS;
    setsRemaining = sets;
    clearTimeout(interval);
    // document.getElementById("Counter").innerHTML = j;
    

}
	</script>
	</head>

<body bgcolor=linen>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="Countdown From Scratch.css" />
</head>
<script src="Countdown From Scratch.js" defer></script>
<body>
    <label>Number of Sets </label>    
    <input id="userInput1" type="numsets" value = "0"/>
    <label>Number of Exercises per Set </label>    
    <input id="userInput2" type="numex" value = "0"/>
    <label>Time to Work </label>
    <input id="userInput3" type="numwork" value = "0"/>
    <label>Time to Rest </label>
    <input id="userInput4" type="numrest" value = "0"/>
    <label>Time Inbetween Sets </label>
    <input id="userInput5" type="numrestafterset" value = "0"/>   

    <p id="Prepare"></p>
    <div id="sets"> </div>
    <div id="timeon"> </div>
    <div id="timeoff"> </div>
    <div id="TotalTime"> </div>
    <textarea id="textarea" placeholder="00:00"></textarea>
    <textarea id="PWR" placeholder="Hello!"></textarea>
    <textarea id="textareaRemaining" placeholder="00:00"></textarea>
    <textarea id="setsLeft" placeholder="00"></textarea>
    <textarea id="IntervalsLeft" placeholder="00"></textarea>

    
    <button onclick="updatePrep()">Start time</button>
    <button onclick="stop()">Stop time</button>


</body>
</html>

Expand snippet



	</body>
	</html>
//


koh5_pano



Your browser does not support the HTML5 canvas element.
Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer