Message Time Setter

by MegaScience

HTML

<form id="timeForm" name="timeForm">
    <h2>Time Message Creator</h2>
    <div id="primaryInput">
        <label for="mainDate">Set date for below times (UTC date):</label>
        <input id="mainDate" type="date" name="mainDate" />
    </div>
    <hr />
    <h3>Ursus Start and End Times</h3>
    <ol id="times" class="times"></ol>
    <hr />
    <textarea id="formattedText" name="formattedText" disabled=""></textarea>
</form>

<template id="time-pair-template">
    <li class="time-pair" data-pair-id="UNSET"><!--
        --><label for="start-time-UNSET" data-disabled-text="Field is disabled.">Start Time:</label><!--
        --><input name="start-time-UNSET" id="start-time-UNSET" type="time" disabled=""><!--
        --><label for="end-time-UNSET" data-disabled-text="Field is disabled.">End Time:</label><!--
        --><input name="end-time-UNSET" id="end-time-UNSET" type="time" disabled=""><!--
    --></li>
</template>

CSS

:root {
    --header-padding: 2px;
    --input-spacing: 4px;
    --background-color: black;
    --text-color: rgb(197, 197, 197);
}

html,
body {
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--background-color);
    font-family: 'Trebuchet MS', sans-serif;
    color: var(--text-color);
    padding: var(--input-spacing);
    box-sizing: border-box;
}

form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100vh;
}

h2, h3 {
    text-align: center;
    margin-top: var(--header-padding);
    margin-bottom: var(--header-padding);
}

hr {
    margin-left: 0;
    margin-right: 0;
}

input {
    background-color: var(--background-color);
    color: var(--text-color);
}

ol#times {
    margin: 0;
    padding: 0;

    li.time-pair {
        list-style-position: inside;

        label {
            position: relative;

            &[for^="end-time"i] {
                padding-left: var(--input-spacing);
            }

            &:has(+ input[type="time"i]:disabled:hover)::after {
                content: attr(data-disabled-text);

                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 10;

                background-color: var(--background-color);
                color: var(--text-color);
                border: 1px var(--text-color) solid;
                border-radius: 5px;
                padding: 4px 8px;
                box-shadow: 0 0 3px var(--background-color);
                font-size: 0.8em;
                pointer-events: none;
            }
        }

        input[type="time"i] {
            margin-left: var(--input-spacing);
        }
    }
}

textarea {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    color:...

JavaScript

//const { timeForm } = document.forms
//const { mainDate } = timeForm.elements
//const { timeStart1 } = timeForm.elements
//const { timeEnd1 } = timeForm.elements
//const { timeStart2 } = timeForm.elements
//const { timeEnd2 } = timeForm.elements
//const { formattedText } = timeForm.elements

class timeTimeClass {
    static timePairTemplate = document.getElementById('time-pair-template')
    static index = 0
    #index = null

    #start = null
    #startInput = null
    #end = null
    #endInput = null

    listElement = null

    #createInputs() {
        this.listElement = this.constructor.timePairTemplate.content.cloneNode(true).querySelector('li')
        this.listElement.dataset.pairId = this.#index

        const startLabel = this.listElement.querySelector('label[for="start-time-UNSET"]')
        this.#startInput = this.listElement.querySelector('input#start-time-UNSET')
        startLabel.htmlFor = this.#startInput.id = this.#startInput.name = `start-time-${this.#index}`
        this.#startInput.value = this.#start
        this.#startInput.disabled = true
        this.#startInput.addEventListener('change', e => this.#start = e.target.value)

        const endLabel = this.listElement.querySelector('label[for="end-time-UNSET"]')
        this.#endInput = this.listElement.querySelector('input#end-time-UNSET')
        endLabel.htmlFor = this.#endInput.id = this.#endInput.name = `end-time-${this.#index}`
        this.#endInput.value = this.#end
        this.#endInput.disabled = true
        this.#endInput.addEventListener('change', e => this.#end = e.target.value)

        return this.listElement
    }

    timestampRange(mainDate) {
        return `<t:${Date.parse(`${mainDate} ${this.#start} UTC`) / 1000}:t> - <t:${Date.parse(`${mainDate} ${this.#end} UTC`) / 1000}:t>`
    }

    constructor(start, end) {
        this.#index = ++this.constructor.index
        this.#start = start
        this.#end = end
       ...