【便利】AIに作ってもらったタイマー #JavaScript

フレームワークはもはや必要なくなった。なぜなら。。

最近私はフレームワーク不要論を唱えています。

なぜならAIがコーディングしてくれるのでフレームワークを使わない冗長的なコードのほうがAIとしては出力しやすいからです。

フレームワークはバージョンが上がると突然すべての書き方が変わったり、古すぎたりするとセキュリティ的なリスクが純正より高くなります。

普段のお仕事のお悩み、それは時間管理

私は普段教育関係のお仕事をしています。

そこでよく問題になるのが時間管理です。

受講生側や講師側も目の前のことに集中しすぎていて

いつの間にかお昼休みの時間になっていたり、終了予定の時間を超えて講義してしまったりします。

残業してる自分ってなんて会社に貢献してるんだろうなんていう価値観もいまだに根強く残っています。

シンプルなタイマーを使って共有しよう

こちらがシンプルなタイマーのスクショです。パラメーターにイベント名を入力すると勝手に見出しにしてくれます。

いよいよこちらがタイマーのソースコード！

タイマーはjQueryとHTMLとCSSといういつでもどこでも使える構成で作られています。

操作は直感的ですぐにわかります。

こちらがそのソースコードです。

コピペしてそのまま使えるようにいっぺんに貼っておきます

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .timer-container {
            text-align: center;
        }
        .timer-display {
            font-size: 10em;
            margin-top: 20px;
        }
    </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="timer-container">
        <h1><span class="event"></span>まであと</h1> 
        <div>
        <label for="datetime-input">タイマー設定：</label>  <input type="datetime-local" id="datetime-input" name="datetime-input">
        <button id="start-button">タイマー開始</button>
        </div>

        

        <div class="timer-display" id="timer-display">00:00:00</div>
    </div>

    <script>
        document.getElementById('start-button').addEventListener('click', function() {
            const inputDateTime = document.getElementById('datetime-input').value;
            if (!inputDateTime) {
                alert('Please enter a valid date and time.');
                return;
            }

            const targetTime = new Date(inputDateTime).getTime();
            const timerDisplay = document.getElementById('timer-display');

            const updateTimer = () => {
                const now = new Date().getTime();
                const distance = targetTime - now;

                if (distance < 0) {
                    clearInterval(timerInterval);
                    timerDisplay.textContent = '00:00:00';
                    alert('Time is up!');
                    return;
                }

                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                timerDisplay.textContent = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
            };

            updateTimer();
            const timerInterval = setInterval(updateTimer, 1000);
        });
    </script>
        <script>
            $(document).ready(function() {
                const OUTPUT_ELE = ".event";
                function getUrlParameters() {
                    var params = {};
                    var search = decodeURIComponent(window.location.search.substring(1));
                    var pairs = search.split('&');
        
                    for (var i = 0; i < pairs.length; i++) {
                        var pair = pairs[i].split('=');
                        params[pair[0]] = pair[1] || '';
                    }
        
                    return params;
                }
        
                var parameters = getUrlParameters();
                var output = '';
        
                $.each(parameters, function(key, value) {
                    output += value;
                });
        
                if (output === '') {
                    output = '次のイベント';
                }
        
                $(OUTPUT_ELE).html(output);
            });
            </script>
</body>
</html>