一个计时器，用户可以在其中输入未来日期的变量

如果有人能为我正在进行的学校项目指明正确的方向，那就太好了。下面你会看到一个超级简单的计时器，我是在一个名为 Web Dev 的 youtube 用户的教程的帮助下制作的。该示例将新年前夜硬编码到脚本中。但我想更进一步，要求用户输入他们的特殊日期——例如，让计时器倒计时到他们的生日。

到目前为止，我已经设法使计数器从给定日期开始倒计时，而不仅仅是硬编码日期，而且我已经设法为用户生成的数据创建了输入表单。但是一旦我试图将两者结合起来，就出现了问题。我猜我需要将用户生成的数字输入到其中一个函数中，而不仅仅是将它们作为 let、var 和 const 列在上面？

哦，理想情况下，我应该想出一种方法，让用户点击“输入”按钮后，输入表单就会消失。

对于我之前的 StackOverflow 问题，有人非常友好地为我编写了完整的答案。但由于这在很大程度上是一个学习过程，我会非常满意一些正确方向的提示和指示。

        let userYear = userYearEntered;
        let userMonth = userMonthEntered;
        let userDay = userDayEntered;

        const userDate = new Date(userYear, userMonth, userDay, 0, 0, 0);
        const userOccasion = 'I need to present this project';


        function enterSpecialDate() {
            var userYearEntered = document.getElementById('userYear').value;
            console.log(userYearEntered);

            var userMonthEntered = document.getElementById('userMonth').value;
            console.log(userMonthEntered);

            var userDayEntered = document.getElementById('userDay').value;
            console.log(userDayEntered);
        }

        /*create countdown timer using substraction*/
        function updateCountdowntime() {
            const currentTime = new Date();
            const diff = userDate - currentTime;
            console.log(diff);

            /* we've been given the difference in milliseconds, so some division is needed */
            const d = Math.floor(diff / 1000 / 60 / 60 / 24);
            const h = Math.floor(diff / 1000 / 60 / 60) % 24;
            const m = Math.floor(diff / 1000 / 60) % 60;
            const s = Math.floor(diff / 1000) % 60;

            /* send values back into HTML document */

            document.getElementById('days').innerHTML = d;
            document.getElementById('hours').innerHTML = h;
            document.getElementById('minutes').innerHTML = m;
            document.getElementById('seconds').innerHTML = s;

            document.getElementById('userOccasion').innerHTML = userOccasion;
        }

        setInterval(updateCountdowntime, 1000);

       * {
            box-sizing: border-box;
        }

        body {
            background-color: rgb(44, 48, 48);
            font-family: sans-serif;
            color: rgb(239, 239, 239);
            font-size: 3em;
            font-weight: 300;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        div {
            margin-top: 1vh;
        }

        label {
            font-size: 0.4em;
        }

<div>
        <label for="userYear">year</label>
        <input id="userYear" type="number" value="" placeholder="e.g. 2021">

        <label for="userMonth">month</label>
        <input id="userMonth" type="number" value="" placeholder="e.g. 8">

        <label for="userDay">day</label>
        <input id="userDay" type="number" value="" placeholder="17">

        <button onclick="enterSpecialDate()">Enter</button>

    </div>

    <div>

        <p>there are</p>

        <div class="time">
            <span id="days"></span>
            <span>days</span>
        </div>

        <div class="time">
            <span id="hours"></span>
            <span>hours</span>
        </div>

        <div class="time">
            <span id="minutes"></span>
            <span>minutes</span>
        </div>

        <div class="time">
            <span id="seconds"></span>
            <span>seconds</span>
        </div>

        <p>until <span id="userOccasion"></span></p>

    </div>