kami Posts - Answer Overflow

kami

•Created by kami on 11/11/2023 in #ui-ux

Which would be a better UX way?

Would choosing the hours and minutes be better since you scroll less or would the 15m interval be better since you click less? https://wasdkami.github.io/HourRegistration/ here you can test it if my explanation was a little confusing

4 replies

KPCKevin Powell - Community

•Created by kami on 10/28/2023 in #front-end

get (-) when i try too input the value for my input type="time"

error: (The specified value "08:-30" does not conform to the required format. The format is "HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is 000-999.)

let startTime = document.getElementById("startTime");
let endTime = document.getElementById("endTime");
let totalTime = document.getElementById("totalTime");

function CalculateTotalTime() {
    //console.log(startTime.value + " " + endTime.value);
    //console.log("totaltime: " + totalTime.value);

    const startTimeParts = startTime.value.split(":");
    const startHours = parseInt(startTimeParts[0]);
    const startMinutes = parseInt(startTimeParts[1]);
    console.log("Hours:" + " " + startHours + " " + "Minutes: " + startMinutes);

    const endTimeParts = endTime.value.split(":");
    const endHours = parseInt(endTimeParts[0]);
    const endMinutes = parseInt(endTimeParts[1]);
    console.log("Hours:" + " " + endHours + " " + "Minutes: " + endMinutes);

    const calculatedHours = endHours - startHours;
    const calculatedMinutes = endMinutes - startMinutes;
    const formattedTime = `${calculatedHours.toString().padStart(2, '0')}:${calculatedMinutes.toString().padStart(2, '0')}`;
    totalTime.value = formattedTime;
}

// Add event listeners to the input elements to calculate the time difference
startTime.addEventListener("input", CalculateTotalTime);
endTime.addEventListener("input", CalculateTotalTime);
totalTime.addEventListener("input", CalculateTotalTime);

let startTime = document.getElementById("startTime");
let endTime = document.getElementById("endTime");
let totalTime = document.getElementById("totalTime");

function CalculateTotalTime() {
    //console.log(startTime.value + " " + endTime.value);
    //console.log("totaltime: " + totalTime.value);

    const startTimeParts = startTime.value.split(":");
    const startHours = parseInt(startTimeParts[0]);
    const startMinutes = parseInt(startTimeParts[1]);
    console.log("Hours:" + " " + startHours + " " + "Minutes: " + startMinutes);

    const endTimeParts = endTime.value.split(":");
    const endHours = parseInt(endTimeParts[0]);
    const endMinutes = parseInt(endTimeParts[1]);
    console.log("Hours:" + " " + endHours + " " + "Minutes: " + endMinutes);

    const calculatedHours = endHours - startHours;
    const calculatedMinutes = endMinutes - startMinutes;
    const formattedTime = `${calculatedHours.toString().padStart(2, '0')}:${calculatedMinutes.toString().padStart(2, '0')}`;
    totalTime.value = formattedTime;
}

// Add event listeners to the input elements to calculate the time difference
startTime.addEventListener("input", CalculateTotalTime);
endTime.addEventListener("input", CalculateTotalTime);
totalTime.addEventListener("input", CalculateTotalTime);

13 replies

KPCKevin Powell - Community

•Created by kami on 4/17/2023 in #front-end

Proper way to scale text/max width with flexbox

11 replies

KPCKevin Powell - Community

•Created by kami on 11/16/2022 in #front-end

Create icons

19 replies

KPCKevin Powell - Community

•Created by kami on 10/21/2022 in #front-end

How to make the design work

7 replies

Gaming

Programming