How to create a counter from user input?

Question

Hello I want your help in something. So I have this html code below and I want create a counter in the div with class "counter". Basically the user will enter the number and the counter will start from 0 to that number and reset back to 0. I didn't quite know that much of Javascript. I want to show the counter like this : . Please help me.

<!DOCTYPE html>
<html>
<head>
    <style>
    .main{  width: 1000px;
            height: 250px;
            margin: 0 auto;
            background-color: #FBAB7E;
            background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);

        }
    
    h2{ 
            color: white;
            padding-top: 45px;
            text-align: center;
            text-shadow: 1px 1px 2px #000000;
        }
    
    .count{
            padding-left: 375px;
            padding-top: 50px;
        }
    
    .counter{
                background-color: gray;
                margin: 0 auto;
                margin-top: 50px;
                width: 750px;
                height: 150px;
        }
    p {
                
                font-size: 75px;
                text-align: center;
                padding-top: 25px;
        }
    </style>
<body>

<div class="main">
    <h2> ENTER THE COUNT FROM '1' TO '9999' </h2>
    <div class="count">
        <input type="number" name="number" id="value">
        <button type="submit" name="submit" id="button" onclick= > <b> Enter Counter </b> </button>
    </div>
</div>

<div class="counter">
 <p>9 9 9 9</p>
</div>

</body>
</html>


<script>
/** HELP HERE! /***
</script>

yeah sorry can you atleast tell how can make a simple counter. don't look at photo just a basic counter. — YashuC ッ
– YashuC ッ, Commented Jan 5, 2021 at 8:29
The best thing to do is to do a beginner tutorial to learn the basics of JS, then if necessary you can look for a tutorial that creates a simple counter with JS, which you can then customize to your needs. — Scenus
– Scenus, Commented Jan 5, 2021 at 8:34

Rifat Bin Reza · Accepted Answer · 2021-01-05 09:21:14Z

let timer = null; //to make a singleton timer
function startCounter() {
  if (timer) return;
  let timeVal = parseInt(document.getElementById('value').value);
  if (timeVal > 0 && timeVal < 1000) { //validate the timer input
    timer = setInterval(function () {
      if (timeVal < 0) { // if the timer is less than 0, then stop it and clear it up
        clearInterval(timer);
        document.getElementById('counter-label').textContent = '9 9 9 9';
        timer = null;
        return;
      }
      document.getElementById('counter-label').textContent = timeVal.toString().padStart(4, '0').split('').join(' '); // format the timer label text
      timeVal--;
    }, 1000);
  }
};

<!DOCTYPE html>
<html>
<head>
    <style>
    .main{  width: 1000px;
            height: 250px;
            margin: 0 auto;
            background-color: #FBAB7E;
            background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);

        }
    
    h2{ 
            color: white;
            padding-top: 45px;
            text-align: center;
            text-shadow: 1px 1px 2px #000000;
        }
    
    .count{
            padding-left: 375px;
            padding-top: 50px;
        }
    
    .counter{
                background-color: gray;
                margin: 0 auto;
                margin-top: 50px;
                width: 750px;
                height: 150px;
        }
    p {
                
                font-size: 75px;
                text-align: center;
                padding-top: 25px;
        }
    </style>
<body>

<div class="main">
    <h2> ENTER THE COUNT FROM '1' TO '9999' </h2>
    <div class="count">
        <input type="number" name="number" id="value">
        <button type="submit" name="submit" id="button" onclick="startCounter()" > <b> Enter Counter </b> </button>
    </div>
</div>

<div class="counter">
 <p id="counter-label">9 9 9 9</p>
</div>

</body>
</html>

Collectives™ on Stack Overflow

How to create a counter from user input?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related