title: javascript manual countdown timer (based on the user input)
body: <p>i want to make a countdown timer for a project in which the countdown start when the user inputs some time in 00:00:00 h-m-s format, i have written some code which is half correct and i'm lost what to do next</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Wait for user to click the button before reading the value
  window.onload=function(){
   var work = document.getElementById("dl");
   work.addEventListener("click", handler);
  }
  
  
  function handler() {
   
    //taking user input
    var time1 = document.getElementById('hms').value;
    //splitting it to seperate variables
    var pieces = time1.split(":");
    
    var hours = pieces[0];
    var minutes = pieces[1];
    var seconds = pieces[2];
    
    //just calculating total number of seconds
    seconds = seconds + minutes*60 + hours*3600;
    
    var tot = seconds + minutes*60 + hours*3600;
    
    // Save the interval's handle to `timer`
    var timer = setInterval(countdown, 1000);
  
    function countdown() {
    var container = document.getElementById('count');
    
    var counter = 0, k=1, j=1, i=0, s1= pieces[2];
    
    //loop to print the timer 
    for(i=0; i&lt;tot; i++){
     if(seconds&gt;0){
     counter ++ ;
  
     if(counter==60*k){
      minutes--;
      k++;
     }
     if(counter==3600*j){
      hours--;
      j++;
     }
     
     container.innerHTML = 'Please wait &lt;b&gt;' + hours + '&lt;/b&gt; hours, &lt;b&gt;' + minutes + '&lt;/b&gt; minutes, &lt;b&gt;' + seconds + '&lt;/b&gt; seconds';
     }//end of if
     else {
     container.innerHTML = 'Time over';
     clearInterval(timer);
     }
    }
    
    /* seconds--;
    if (seconds &gt; 0) {
     container.innerHTML = 'Please wait &lt;b&gt;' + seconds + '&lt;/b&gt; seconds..';
     } else {
     container.innerHTML = 'Time over';
     clearInterval(timer);
     } */
    }
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="hms" placeholder="enter in the format 00:00:00 " /&gt;
   &lt;input type="button" id="dl" value="Start" /&gt;
   &lt;div id="count"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>i know i have made this complicated, can someone please make it simple? it will be a great help, thanks!</p>