I am just beginning to learn html and tried to make an html page with a date input with a submit button and a clock that shows the remaining time when time is selected and submit button is clicked but code is simply not working and I don't know where to fix it.
here is html:
<body class="body">
<ul class="header">
<p id="header_name">
Countdown
</p>
</ul>
<div class="menu">
<form class="form">
<div>
<p class="date">choose a date</p>
</div>
<div>
<input autocomplete="off" autofocus class="input__time" id="input__time" type="date">
</div>
<div>
<button class="submit" type="submit">start countdown</button>
</div>
</form>
<div class="until" id="myCountdown">
<div class="until__component">
<div class="until__numeric until__numeric--days">00</div>
<div class="until__unit ">Days</div>
</div>
<div class="until__component">
<div class="until__numeric until__numeric--hours">00</div>
<div class="until__unit ">Hours</div>
</div>
<div class="until__component">
<div class="until__numeric until__numeric--minutes">00</div>
<div class="until__unit ">minutes</div>
</div>
<div class="until__component">
<div class="until__numeric until__numeric--seconds">00</div>
<div class="until__unit ">seconds</div>
</div>
<div class="until__event">Until DD MM YYYY</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.1/dayjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.1/plugin/duration.min.js"></script>
<script src="main.js"></script>
</body>
and js:
dayjs.extend(dayjs_plugin_duration);
function activateCountdown(date) {
const targetDate = dayjs(date);
document.getElementById("myCountdown").querySelector(".until__event").textContent = `Counting down until ${ targetDate.format("YYYY MM DD")}`;
setInterval(() => {
const now = dayjs();
const duration = dayjs.duration(targetDate.diff(now));
if (duration.asMilliseconds() <= 0) return;
document.getElementById("myCountdown").querySelector(".until__numeric--seconds").textContent = duration.seconds().toString().padStart(2, "0");
document.getElementById("myCountdown").querySelector(".until__numeric--minutes").textContent = duration.minutes().toString().padStart(2, "0");
document.getElementById("myCountdown").querySelector(".until__numeric--hours").textContent = duration.hours().toString().padStart(2, "0");
document.getElementById("myCountdown").querySelector(".until__numeric--days").textContent = duration.asDays().toFixed(0).toString().padStart(2, "0");
}, 250);
}
document.querySelector("form").addEventListener('submit', activateCountdown(document.getElementById("input__time")))```