How do I implement a timer on my bidding website?

Question

0.00/5 (No votes)

See more:

Hi guys, I am making my project, a bidding website in asp.net core. I am trying to make logic to show the remaining time of auctions on the auction post like 03H 35M 50S remaining or something like that and the time will decrease second by second.
Also if the specific auction time has passed it's automatically removed from the page and the new one will appear.

What I have tried:

I have tried following to make a timer on my auction post:

JavaScript

<pre>$.ajax({

                url: '@Url.Action("GetAllAuctions", "Home")',
                dataType: 'json',
                success: function (result) {

                    for (var i = 0; i < result.data.length; i++) {

                        var id = result.data[i].id;

                        var endDate = (result.data[i].endDate);
                        var startDate = (result.data[i].startDate);
                        
                        var t = makeTimer(endDate, startDate);


                        $('#auctions').append('<div class="col-lg-4 col-md-6 col-sm-10"><div data-wow-duration="1.5s" data-wow-delay="0.2s" class="eg-card auction-card1 wow animate fadeInDown"><div class="auction-img"> <img alt="image" src=' + result.data[i].coverPhoto + '> <div class="auction-timer"><div class="countdown" id="timer"><h4>' + hrs + 'H : ' + mins + 'M : ' + secs + 'S</h4></div></div><div class="author-area"><div class="author-emo"><img alt="image" src="/assets/images/icons/smile-emo.svg"></div><div class="author-name"><span>by robatfox</span> </div></div></div>  <div class="auction-content"> <h4><a href="@Url.Action("AuctionDetails", "Home")?id=' + id + '">' + result.data[i].title + '</a></h4> <p>Bidding Price : <span><span>' + result.data[i].price + '</span></span></p><div class="auction-card-bttm"><a href="@Url.Action("AuctionDetails", "Home")?id=' + id + '" class="eg-btn btn--primary btn--sm">Place a Bid</a> </div></div>   </div></div>');
                    }
                },
                error: function (data) {
                    console.log(data);
                }

            })

This is the timer function:

JavaScript

<pre>function makeTimer(endtime, starttime) {
                var endTime = new Date(endtime);
                var endTime = (Date.parse(endTime)) / 1000;
                var now = new Date(starttime);
                var now = (Date.parse(now) / 1000);
                var timeLeft = endTime - now;
                var days = Math.floor(timeLeft / 86400);
                var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
                var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
                var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
                // debugger;
                if (hours < "10") {
                    hours = "0" + hours;
                }
                if (minutes < "10") {
                    minutes = "0" + minutes;
                }
                if (seconds < "10") {
                    seconds = "0" + seconds;
                }
                return {
                    days,
                    hours,
                    minutes,
                    seconds
                };
            }
            setInterval(function () {
                makeTimer();
            }, 1000);

This is what i have tried but I am getting like on every post is 0hour 0minutes 0seconds only..

Posted 24-Jul-23 4:36am

Muhammad Usman Apr2022

Updated 24-Jul-23 10:25am

Add a Solution

Comments

Andre Oosthuizen 24-Jul-23 10:53am

Is your code returning proper start and end date/times? There need to be a variance between the 2 to count down properly.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Answer 1 · 2023-07-24T05:08:00

Solution 1

Here's an example JSFiddle with a working counter.[^] There's a few problems with your code:

Your makeTimer function returns the values into a var t variable, which is not actually used when generating the rows
You call the setInterval() outside of the makeTimer function and pass no values into the method, which means every time it triggers it's missing the start/end times
You call the makeTimer() method within the interval, but don't do anything with the actual return value, so the UI is not updated

Please see my example as a reference to how I might implement it. Feel free to adapt to your use-case.

Posted 24-Jul-23 5:08am

Chris Copeland

Updated 25-Jul-23 0:48am

v2

Comments

Muhammad Usman Apr2022 24-Jul-23 16:26pm

Thankyou for your guidance. I modified my code and I got the remaining time but still my timer is not working.
Here is my modified code:

<pre>function makeTimer(endtime) {
                var endTime = new Date(endtime);
                var endTime = (Date.parse(endTime)) / 1000;
                var now = new Date();
                var now = (Date.parse(now) / 1000);
                var timeLeft = endTime - now;
                var days = Math.floor(timeLeft / 86400);
                var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
                var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
                var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

                if (hours < "10") {
                    hours = "0" + hours;
                }
                if (minutes < "10") {
                        minutes = "0" + minutes;
                    }
                    if (seconds < "10") {
                        seconds = "0" + seconds;
                    }
                    return {
                        days,
                        hours,
                        minutes,
                        seconds
                    };
                    setInterval(() => makeTimer(endtime),1000);
                }

Chris Copeland 25-Jul-23 4:18am

So your function is still returning the days, hours, minutes and seconds as an object from the function, but you're still not doing anything with those values. See here:

setInterval(() => makeTimer(endtime),1000);

Your interval timer is calling the function but it's not making use of the value returned from the function. I recommend reading Functions - MDN to get a better idea of how functions work. In my example I provided to you, I update the HTML UI directly within the makeTimer method.

I'll admit an issue with my code example is that I call setInterval from within the makeTimer function which itself will stack multiple timers. Please see this version instead[^] where we only set the interval timer once within the loop.

Muhammad Usman Apr2022 26-Jul-23 3:57am

Thanks, it worked!!

How do I implement a timer on my bidding website?

1 solution

Solution 1

Add your solution here

Preview 0

How do I implement a timer on my bidding website?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us