Codementor Events

How To Create A Simple Counter Using Javascript, HTML & CSS

Published Sep 14, 2017
How To Create A Simple Counter Using Javascript, HTML & CSS

So I was a little bored and decided to play around with Javascript. The idea was to create something like the counter on this page using javascript, HTML and a little CSS; using a different layout. I guess it looks nice, right?.
I figured someone might find this useful so I decided to share the snippet here.
The final output is as shown in the image above and increments from the left.
And the snippet in action is available on this JS fiddle.

The HTML

Saved as index.html

<!DOCTYPE html>
<html>
  <head>
    <title>JS Counter</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body onload="incrementCount(10)">
    <div class="main_container" id="id_main_container">
      <div class="container_inner" id="display_div_id">
      </div>
    </div>
  </body>
</html>

The CSS

Saved as style.css

.main_container {
  height: 46px;
  width: auto;
  padding: 3px;
  margin: 2px;
  max-width: 300px;
  background-color: #555555;
  align-content: center;
}
.container_inner {
  height: auto;
  border: none;
  background-color: #555555;
  max-width: 290px;
  vertical-align: center;
  padding-top: 12px;
  padding-left: 10px;
  align-content: center;
}
 .num_tiles {
  width:30px;
  height: 30px;
  background-color: #888888;
  color: #ffffff;
  font-size: 22px;
  text-align: center;
  line-height: 20px;
  padding: 3px;
  margin: 1.5px;
  font-family: verdana;
  vertical-align: center;
}

The Javascript

<script>
  var counter_list = [10,10000,10000];
  var str_counter_0 = counter_list[0];
  var str_counter_1 = counter_list[1];
  var str_counter_2 = counter_list[2];
  var display_str = "";
  var display_div = document.getElementById("display_div_id");

  function incrementCount(current_count){
    setInterval(function(){
      // clear count
      while (display_div.hasChildNodes()) {
          display_div.removeChild(display_div.lastChild);
      }
      str_counter_0++;
      if (str_counter_0 > 99) {
        str_counter_0 = 10; // reset count
        str_counter_1++;    // increase next count
      }
      if(str_counter_1>99999){
        str_counter_2++;
      }
      display_str = str_counter_2.toString() + str_counter_1.toString() + str_counter_0.toString();
      for (var i = 0; i < display_str.length; i++) {
        var new_span = document.createElement('span');
        new_span.className = 'num_tiles';
        new_span.innerText = display_str[i];
        display_div.appendChild(new_span);
      }
    },1000);
  }
</script>

You can play around with the values in the counter_list variable to change the display on the screen.
The time interval set using Javascript's setInterval() function is currently set at 1000 microseconds(1 second), you can also alter this to change the counting interval.
The HTML and JS codes are in the same file such that final index.html file is as shown below.

<!DOCTYPE html>
<html>
  <head>
    <title>JS Counter</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body onload="incrementCount(10)">
    <div class="main_container" id="id_main_container">
      <div class="container_inner" id="display_div_id">
      </div>
    </div>
  </body>
</html>

<script>
  var counter_list = [10,10000,10000];
  var str_counter_0 = counter_list[0];
  var str_counter_1 = counter_list[1];
  var str_counter_2 = counter_list[2];
  var display_str = "";
  var display_div = document.getElementById("display_div_id");

  function incrementCount(current_count){
    setInterval(function(){
      // clear count
      while (display_div.hasChildNodes()) {
          display_div.removeChild(display_div.lastChild);
      }
      str_counter_0++;
      if (str_counter_0 > 99) {
        str_counter_0 = 0; // reset count
        str_counter_1++;    // increase next count
      }
      if(str_counter_1>99999){
        str_counter_2++;
      }
      display_str = str_counter_2.toString() + str_counter_1.toString() + str_counter_0.toString();
      for (var i = 0; i < display_str.length; i++) {
        var new_span = document.createElement('span');
        new_span.className = 'num_tiles';
        new_span.innerText = display_str[i];
        display_div.appendChild(new_span);
      }
    },1000);
  }
</script>

I hope it helps someone out there.
Happy Coding!

Discover and read more posts from James Ezechukwu
get started
post comments11Replies
FRANK NTOSOUR
3 years ago

I need a help, I am a beginner in web development

Clement ishaka
3 years ago

Please how can I make a slider using JavaScript that slides to the right within three seconds?

Nasir Khan
4 years ago

Thanks for sharing this code

Show more replies