Develop Reference

Flip clock not working after deploying on netlify

I am facing some issue with a jQuery plugin which I have used in my project to show countdown. Locally it is working fine but when I deploy it on Netlify others things works except the countdown. I am giving the code for your better understanding.
(Note: It is a basic index file & I have used the plugin by downloading.)
Index.html
<!-- Countdown attachments-->
<link rel="stylesheet" href="Assets/flipclock.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="Assets/flipclock.min.js"></script>
<!-- ------ -->
<div class="clock"></div>
<script>
var clock;
$(document).ready(function () {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(currentDate.getFullYear() + 1, 0); /* yyyy,mm,dd formate*/
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true
});
});
</script>
It looks like this:
click here
But it should look like this:
click here

How can I make a button clickable if countdown har reached 0?

I have a countdown until marvel movies have their premier and would like to have a button "Book Tickets" that is unclickable when counting down, and then make it clickable when the countdown has reached 0. How do I do that?
I have tried to make if-statements, but something is wrong.
var clock = $('.clock').FlipClock(new Date("July 5, 2019 00:00:00"),{
clockFace: 'DailyCounter',
countdown: true
});
You can see the countdown I currently have on: http://www.student.city.ac.uk/~aczc972/
The callback seems to work well with alerts, even though the alert comes at second 1 and not 0, although I just need to find a way of changing the behaviour of the button.
This is the new code
var clock = $('.clock3').FlipClock(new Date("April 10, 2019 12:27:00"), {
clockFace: 'DailyCounter',
countdown: true,
callbacks: {
stop: function() {
alert("Hello! I am an alert box!!");
}
}
});

It's hard to figure what code to put in for your button since there isn't one available on your website. Here's a potential solution: http://jsfiddle.net/kdyzxLbt/
var clock = $('.clock').FlipClock(new Date("July 5, 2019 00:00:00"),{
clockFace: 'DailyCounter',
countdown: true
});
setTimeout(function(){
checktime();
}, 1000);
function checktime(){
t = clock.getTime();
if(t<=0){
$('#myBtn').removeAttr('disabled');
}
setTimeout(function(){
checktime();
}, 1000);
}
Basically it starts your clock and checks the time every second. If the time is less than or equal to 0 it enables your button.
Source: Countdown flipclock and reset after counting to zero

why don't you bind a click handler on clock2 flip-clock-wrapper and then simply exit the function if the current datetime is less than July 5, 2019 ?
$('#clock2').off().on('click', function () { your code here } )
or maybe just had a normal button and do the same logic in the click handler ?

Javascript flipclock countdown generates incorrect date format

I'm working on a website were I'd like to use a countdown to a special event. I've now installed the flipclock.js script and it's up and working. But, it generates incorrect date formats, like attached image:
As you can see, the days, minutes and seconds are working as expected, but the "hour" is showing 93. I've used the following code to implement the flipclock.js:
var date = new Date(2018, 11, 8, 12, 0, 0);
var now = new Date();
var diff = (date.getTime() - now.getTime()) / 1000;
console.log(date);
var clock;
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter',
autoStart: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!')
}
}
});
clock.setTime(diff);
clock.setCountdown(true);
clock.start();
Does anyone know why it's doing like this? I haven't changed anything in the

Just in case someone is still looking for the solution... Here's the content of the link that NoLifeKing refers to in the comments section.
It looks like this issue occurs if you do the following:
clock = $('.clock').FlipClock({
'autoStart': false,
'clockFace': 'DailyCounter',
'countdown': true,
});
clock.setTime(diff);
clock.start();
as opposed to what is done below:
clock = $('.clock').FlipClock(diff, {
'autoStart': true,
'clockFace': 'DailyCounter',
'countdown': true,
});

Notify the user when time approaches to zero by changing colour or animation to the timer

I am using jQuery Countdown Timer & Digital Clock Plugin to create a countdown timer as follows:
<html>
<head>
<link rel="stylesheet" type="text/css" href="timeTo.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
< script src = "jquery.timeTo.js" >
</script>
<script src="jquery.timeTo.min.js"></script>
<script>
var timeval = 60;
var timeval = 60;
$(document).ready(function() {
$('#countdown').timeTo({
seconds: timeval,
displayHours: false
});
});
</script>
</head>
<body>
<div id="countdown"></div>
</body>
</html>
I need to change the color of the timer to red if the time <5sec mean approaches to zero. In order to notify the user that time is going to end.
Also want to redirect to another page once it reached zero.
Please check the Link for API
Please guide me how can make it?

you can use countdownAlertLimit: 5 for your requirement as follow :
var timeval = 60;
$('#countdown').timeTo({ seconds: timeval, displayHours: false, countdownAlertLimit: 5 });
also note if you want to redirect to another page you can use this line of code :
var timeval = 60;
$('#countdown').timeTo({ seconds: timeval, displayHours: false, countdownAlertLimit: 5,callback:function(){
window.location="your location"
} });
When the timer reach 5 the timer will become red.
hope that will help

Perhaps this is what you are looking for. It's already the way you want it if I understood right!
http://lexxus.github.io/jq-timeTo/

Make FlipClock JS work like a countdown

I can't make FlipClock.js work. I want to, for example, make a 10 days countdown.
I made this fiddle but the flipclock doesn't appear - http://jsfiddle.net/9hYef/
Html:
<html>
<head>
<link rel="stylesheet" href="/assets/css/flipclock.css">
</head>
<body>
<div class="your-clock"></div>
<script src="/assets/js/libs/jquery.js"></script>
<script src="/assets/js/flipclock/flipclock.min.js"></script>
</body>
</html>
JavaScript:
var clock = $('.your-clock').FlipClock({
clock.setCountdown(true);
clock.setTime(3600);
clock.setCountdown(true);
});

Try getting the current date and compare with the desired date:
var huh = new Date(Date.UTC(2014, 9, 17, 5, 15, 0));
var duh = new Date();
var wha = huh.getTime()/1000 - duh.getTime()/1000;
var clock = $('.clock').FlipClip(wha, { // <-- DID YOU MEAN FlipClock
clockFace: 'DailyCounter',
countdown: true
});

Flipclock() takes various options, but you'll need to make it a json array
var clock = $('.clock').FlipClock({
countdown: true
});
What they don't mention very well is that the first parameter can be the start offset, like so
var clock = $('.clock').FlipClock(3600*24*10, {
countdown: true
});
You can find more working example of this in the faces section of the docs - http://flipclockjs.com/faces
Here is a working JSFiddle http://jsfiddle.net/bensjones/swjo7wjt
How I made this work is by using the references section (on the left) rather than putting it in the code areas. This will often confuse the issue and, many times, JSFiddle itself.