JSFiddle - React, Tailwind, and code Playground

by upsuper

HTML

<p><input type="range" min="-150" max="10" step="1" value="0" id="time">
<p>Time to migration: <span id="display"></span>
<p><button id="open">Open</button>

JavaScript

const $ = id => document.getElementById(id);

const $time = $('time');
const $display = $('display');

$time.addEventListener('input', () => {
	const value = -$time.value;
	if (value >= 60) {
  	$display.textContent = `${Math.floor(value / 60)}h ${value % 60}min`;
  } else {
  	$display.textContent = `${value}min`;
  }
});
$time.dispatchEvent(new InputEvent('input'));

const BASE_URL = 'https://e2.canva.tech/page/goggling-derby-puritanisms-sheds/index.html?bootstrap.page.M.2=';
$('open').addEventListener('click', () => {
	const value = Date.now() - $time.value * 60 * 1000;
	window.open(`${BASE_URL}${value}`, '_blank');
});