CountDown-Progressive Bar

Question

I was trying to build a clean countdown timer with a progress bar, I came up with this code I am not sure what seems to be the problem. CSS is working great I am pretty sure something is wrong with the JavaScript code.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
</head>

<body>
<script>
function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(600, 600, $('#progressBar'));
</script>
<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
  <div class="bar"></div>
</div>
</body>

</html>

Since the code is not on a runnable Snippet, can you please explain what the current behavior is? otherwise. please put it on snippet with css so that we can run it and make changes to make it work. — Mosia Thabo, Sep 16 '20 at 06:10
Hi Pranay. Welcome in Stack Overflow community. I strongly recommend you to read two topics: https://stackoverflow.com/help/how-to-ask and https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users then edit your question to give us minimal amount of code focused on your problem. — Daniel, Sep 16 '20 at 06:23
I have changed it into a runnable snippet. Please try if you could help me out. I don't quite understand the error. — , Sep 16 '20 at 06:24
@Daniel FYI you can use `[ask]` to generate the [ask] link (the other is `[tour]` for [tour] if they don't have the flag). Don't think there's a shortcut for the how-much-research link. — freedomn-m, Sep 16 '20 at 06:25
I've updated the snippet to include jquery, if that's what you meant by "don't quite understand the error" - but otherwise the snippet works as expected. — freedomn-m, Sep 16 '20 at 06:32
When it gets to zero, the progress bar doesn't quite go to zero - this is because of `padding: 0 10px;` - is that the issue? — freedomn-m, Sep 16 '20 at 06:33
If you don't want the initial animation from zero->100, then change `width: 0;` to `width: 100%;` — freedomn-m, Sep 16 '20 at 06:35
Thanks for all of your input and taking time out to look into the project, on the browser through the snippet player, everything seems to be working fine but in my local machine it does not work, it might happen because I probably am not able to connect javascript file correctly. — , Sep 16 '20 at 06:46
I am getting an error in Javascript when I run this on Codepen "Uncaught TypeError: Cannot read property 'style' of undefined" — , Sep 16 '20 at 06:53
Does this answer your question? [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — Ken Y-N, Sep 16 '20 at 07:43

score 0 · Accepted Answer · answered Sep 16 '20 at 08:44

You need to restructure your code. There are few errors found

1.Uncaught ReferenceError: $ is not defined because link was added in between the tag it should be added with src attribute.

2.The $element argument is getting undefined because script is added before html and is unable to get the required data as it is called on page load so, I have moved it to bottom of the page.

function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(600, 600, $('#progressBar'));

#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div id="progressBar">
      <div class="bar"></div>
    </div>
</body>
</html>

CountDown-Progressive Bar

1 Answers1

Linked