Pre-course project

The Pre-course project was challenging but I had fun doing it. One thing important about this small project is time event in JavaScript.

I wanted to countdown from a specific number, there is method called setInterval(), which repeats a given function accordingly to a given time. At the beginning, I thought that I will use setTimeout()which checks the function given after a given time. It took me a while to figure out but I guess that is the learning process.

Notice that The setInterval() method is written with two parameters, a function and the time in milliseconds (1000= 1 sec) between each execution of the function.

Here is the link : https://cedric-countdown.netlify.com/ .

Yesterday, I shared the Html and Css files and now for JavaScript:

var counter= document.querySelector(".counter");
var secInput = document.getElementById("seconds");
var  buttons = document.querySelector(".buttons");

var seconde, remSeconds, minute, toCount= false;

function toSubmit(){
    display('start');
    remove('seconds');
    seconde = Number(secInput.value);
    counting();
    remove('submit');
}

function display(element){
    document.getElementById(element).style.display = "block";
}
function remove(element){
    document.getElementById(element).style.display = "none";
}

 function check(element){
     toCount = element.value;
     if(element.id== "start"){
         display("stop");
         remove("start");
     }else if(element.id== "stop"){
           display("continue");
           remove("stop");
        }
        else{
            display("stop");
            remove("continue");
        }
 }

function count(){
   if(seconde >0){
       if(toCount == true){
            seconde--;
            remSeconds = seconde % 60;
            minute = Math.floor(seconde / 60);

            if(minute < 10){
               minute = "0" + minute;
              }
             if(remSeconds < 10){
                remSeconds = "0" + remSeconds;
                   }
            counter.innerHTML = minute + " : " + remSeconds;
       }
   }else{
    counter.innerHTML = "Done!";
    buttons.style.opacity="0";
}
}
function counting(){
    setInterval(count,1000);
}

Coding with JavaScript it is essential to follow the logic, as you can see through different functions either to display buttons or to calculate the minute or remain seconds.

I had a little time to work on English and Typing lessons.