Skip to content

Commit

Permalink
Update script.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@sacrover
sacrover authored Aug 6, 2024
1 parent 1b15dd9 commit f0eee14
Showing 1 changed file with 109 additions and 29 deletions.
138 changes: 109 additions & 29 deletions js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@ checkbox.addEventListener('change', () => {
});

function generateTimeInfo() {

const countDate = new Date("May 31, 2023 16:00:00").getTime();
const now = new Date().getTime();

//calculate remaining time
// Calculate remaining time
const remianingTime = countDate - now;

// Check if remaining time is negative
Expand All @@ -21,23 +20,19 @@ function generateTimeInfo() {
minutes: { firstDigit: 0, lastDigit: 0 },
seconds: { firstDigit: 0, lastDigit: 0 }
};

}

// workout the time in Days, hrs, min, sec
// Calculate time in days, hours, minutes, and seconds
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;


const textDay = Math.floor(remianingTime / day)
const textHour = Math.floor((remianingTime % day) / hour)
const textMinute = Math.floor((remianingTime % hour) / minute)
const textSecond = Math.floor((remianingTime % minute) / second)
// const dateObj = new Date();
// const hrs = dateObj.getHours();
// const min = dateObj.getMinutes();
// const sec = dateObj.getSeconds();
const textDay = Math.floor(remianingTime / day);
const textHour = Math.floor((remianingTime % day) / hour);
const textMinute = Math.floor((remianingTime % hour) / minute);
const textSecond = Math.floor((remianingTime % minute) / second);

return {
remianingTime,
days: {
Expand All @@ -61,7 +56,7 @@ function generateTimeInfo() {

$(document).ready(function () {
$(".flip-clock").each(function (_, flipClock) {
// generate handles for each flip element and its child elements
// Generate handles for each flip element and its child elements
const daysFirst = createHandles($(flipClock).find(".days-first"));
const daysLast = createHandles($(flipClock).find(".days-last"));
const hoursFirst = createHandles($(flipClock).find(".hours-first"));
Expand All @@ -81,38 +76,34 @@ $(document).ready(function () {
setInitialValues(daysLast, intialTime.days.lastDigit);

const time = generateTimeInfo();
if (time.minutes.firstDigit == 0 && time.minutes.lastDigit == 1 ){
if (time.minutes.firstDigit == 0 && time.minutes.lastDigit == 1) {
document.querySelector(".minuteText").innerText = "Minute";
}
else {
} else {
document.querySelector(".minuteText").innerText = "Minutes";
}
if (time.hours.firstDigit == 0 && time.hours.lastDigit == 1 ){

if (time.hours.firstDigit == 0 && time.hours.lastDigit == 1) {
document.querySelector(".hourText").innerText = "Hour";
}
else {
} else {
document.querySelector(".hourText").innerText = "Hours";
}
if (time.days.firstDigit == 0 && time.days.lastDigit == 1 ){

if (time.days.firstDigit == 0 && time.days.lastDigit == 1) {
document.querySelector(".dayText").innerText = "Day";
}
else {
} else {
document.querySelector(".dayText").innerText = "Days";
}

setInterval(() => {
const time = generateTimeInfo();
if (time.remianingTime > 0){
if (time.remianingTime > 0) {
flipDigit(secondsLast, time.seconds.lastDigit);
flipDigit(secondsFirst, time.seconds.firstDigit);
flipDigit(minutesLast, time.minutes.lastDigit);
flipDigit(minutesFirst, time.minutes.firstDigit);
flipDigit(hoursLast, time.hours.lastDigit);
flipDigit(hoursFirst, time.hours.firstDigit);
}
else{
} else {
setInitialValues(minutesFirst, "0");
setInitialValues(minutesLast, "0");
setInitialValues(secondsFirst, "0");
Expand All @@ -121,9 +112,98 @@ $(document).ready(function () {
setInitialValues(hoursLast, "0");
setInitialValues(daysFirst, "0");
setInitialValues(daysLast, "0");
}}, 1000);
}
}, 1000);
});

function setInitialValues(flipElement, initialValue) {
const {
flipperTop,
flipperBottom,
flipperDisplayBottom,
flipperDisplayTop,
flipHiddenInput,
} = flipElement;
flipperTop.text(initialValue);
flipperBottom.text(initialValue);
flipperDisplayBottom.text(initialValue);
flipperDisplayTop.text(initialValue);
flipHiddenInput.val(initialValue);
}

function createHandles(flipElement) {
const flipperTop = flipElement.find(".flipper-top");
const flipperBottom = flipElement.find(".flipper-bottom");
const flipperDisplayTop = flipElement.find(".flip-display-top");
const flipperDisplayBottom = flipElement.find(".flip-display-bottom");
const flipHiddenInput = flipElement.find("[type='hidden']");
return {
flipElement,
flipperTop,
flipperBottom,
flipperDisplayBottom,
flipperDisplayTop,
flipHiddenInput,
};
}

function flipDigit(flipHandles, digitValue) {
const {
flipElement,
flipperTop,
flipperBottom,
flipperDisplayBottom,
flipperDisplayTop,
flipHiddenInput,
} = flipHandles;

const setPreviousValue = (value) => {
flipperTop.text(value);
flipperDisplayBottom.text(value);
};
const setAfterValue = (value) => {
flipperDisplayTop.text(value);
flipperBottom.text(value);
};

if (parseInt(flipHiddenInput.val()) !== digitValue) {
setPreviousValue(flipHiddenInput.val());
flipHiddenInput.val(digitValue).trigger("valueChanged");
}

flipHiddenInput.one("valueChanged", () => {
setAfterValue(flipHiddenInput.val());
flipElement.addClass("play");
});

flipperBottom.one("animationend", () => {
setAfterValue(flipHiddenInput.val());
setPreviousValue(flipHiddenInput.val());
flipElement.removeClass("play");
});

const time = generateTimeInfo();
if (time.minutes.firstDigit == 0 && time.minutes.lastDigit == 1) {
document.querySelector(".minuteText").innerText = "Minute";
} else {
document.querySelector(".minuteText").innerText = "Minutes";
}

if (time.hours.firstDigit == 0 && time.hours.lastDigit == 1) {
document.querySelector(".hourText").innerText = "Hour";
} else {
document.querySelector(".hourText").innerText = "Hours";
}

if (time.days.firstDigit == 0 && time.days.lastDigit == 1) {
document.querySelector(".dayText").innerText = "Day";
} else {
document.querySelector(".dayText").innerText = "Days";
}
}
});


function setInitialValues(flipElement, initialValue) {
const {
flipperTop,
Expand Down

0 comments on commit f0eee14

Please sign in to comment.