Do you have 3 columns like the following, where the {{deadline}} column must be replaced with the deadline date column?
Yes, but I thought that what was required was Unix time, not a regular date
You just follow my settings. In the code there is indeed an adjustment to remove the “at” from the date.
Or you can ask for help from GPT to help convert your date format.
It’s the format in the table that matters, not the front-end component. I don’t have time to test it. You can play with GPT.
OK. Thanks again, you’re very kind.
hmm, that’s quite fragile and will probably break on many devices, depending on regional settings.
I think I’d be inclined to pass the date/time as either an epoch timestamp or an integer, and then modify the JavaScript accordingly.
2 Likes
Thanks Darren. You are free to change my script if you will. However, I didn’t continue the script anymore because it was originally just a demo version and now I have other work going on which doesn’t allow me to answer it.
1 Like
Do you have any other workarounds for the size? I am on a Legacy Starter plan and according to this article I can’t use custom CSS and since I’m only paying $25/mo I’d rather not switch to a different plan! 
Sorry, I don’t have any ideas other than CSS to reduce the size of the web embed. Maybe you could try an alternative with custom components from @ThinhDinh and see if the starter plan has it too.
Now I combine the template column into the JavaScript column to make it simpler. Column p1 is targeted directly to the deadline column. @Darren_Murphy is there anything wrong with my epoch timestamp approach? Thanks.
function generateCountdownURI(p1) {
const date = new Date(p1);
const deadlineTimestamp = Math.floor(date.getTime() / 1000);
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown</title>
<style>
html, body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
#deadline {
font-size: 1em;
margin-bottom: 10px;
}
#countdown {
font-size: 2em;
}
</style>
</head>
<body>
<div class="container">
<div id="deadline">Deadline: Loading...</div>
<div id="countdown">Loading...</div>
</div>
<script>
function updateCountdown(timestamp) {
const now = new Date().getTime();
const remainingTime = timestamp * 1000 - now;
if (remainingTime <= 0) {
document.getElementById('countdown').textContent = '00:00:00';
document.getElementById('deadline').textContent = "Time's up!";
} else {
const hours = String(Math.floor(remainingTime / (1000 * 60 * 60))).padStart(2, '0');
const minutes = String(Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
const seconds = String(Math.floor((remainingTime % (1000 * 60)) / 1000)).padStart(2, '0');
document.getElementById('countdown').textContent = \`\${hours}:\${minutes}:\${seconds}\`;
}
}
function formatDate(date) {
const options = {
weekday: 'short',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
};
return new Intl.DateTimeFormat('en-US', options).format(date);
}
const timestamp = ${deadlineTimestamp};
const deadlineDate = new Date(timestamp * 1000);
document.getElementById('deadline').textContent = 'Deadline: ' + formatDate(deadlineDate);
updateCountdown(timestamp);
setInterval(() => updateCountdown(timestamp), 1000);
</script>
</body>
</html>
`;
return `data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`;
}
const uri = generateCountdownURI(p1);
return(uri);
1 Like
Just giving it a cursory glance, it looks like a much more robust approach 
2 Likes