How to compose two different input values and printing its value compared?

Question

Thank you for opening this question in advance.

The thing I want to make(and understood)is time input feature, that allows user to see the expected time; by comparing two (given) input value provided by user.

For example, (1) user will input any starting time to first time input section.

(2) user will input any ending time to set.

(3) By substracting ending value with starting value, it should print the outcome.

(start) 10:00

(end) 14:00

And this is goal: End - start = 4 hours (expected time; to accomplish its task)

So far, I have attmpted searching for useState, getTime method as a clue to make the feature I described above.

But something is missing...for example:

var diffTime = (end.getTime() - start.getTime()) / (1000);

But I have no idea how to expand this idea further than this point.

How should I print the (expected time) value by comparing the input values received from two different time input values?

import React from "react";
import styled from "styled-components";

function App() {
  return (
    <div className="App">
        <h3>Section</h3>
        <div className="time">
          <label for="due">Set your time to compare it</label>
          <p></p>
          Start
          <input id="due" type="datetime-local" name="duedate" />
          End
          <input id="due" type="datetime-local" name="duedate" />
          <p>
            <label for="due">Time you spent</label>
            <StylingBox>
              <div className="square-box">
                <div className="sqaure-content">
                  <p>(place to display the calculated value here)</p>
                </div>
              </div>
            </StylingBox>
          </p>
        </div>
    </div>
  );
}

export default App;

Does this answer your question? [How to convert seconds to minutes and hours in javascript](https://stackoverflow.com/questions/37096367/how-to-convert-seconds-to-minutes-and-hours-in-javascript) — Daniel Beck, Aug 19 '22 at 12:34

Kostas Minaidis · Accepted Answer · 2022-08-19T21:32:43.547

This is a minimal setup that can help you get started:

import { useEffect, useState } from "react";

export default function App() {

  // This state variable will hold the starting date:
  const [start, setStart ] = useState(null);
  // This state variable will hold the ending date:
  const [end, setEnd ] = useState(null);
  // This state variable will hold the difference between the starting and ending date:
  const [ final, setFinal ] = useState(null);

  // Update starting date on input change event:
  function handleStartChange(e){
    setStart(new Date(e.target.value).getTime());
  }
  // Update ending date on input change event:
  function handleEndChange(e){
    setEnd(new Date(e.target.value).getTime());
  }
  useEffect(function runWhenStartOrEndChange(){
    // Calculate difference only if both starting and ending dates are present and not null
    if ( end && start){
      const diffTime = ((new Date(end).getTime() - new Date(start).getTime()) / (1000)) / 60;
      setFinal( diffTime );
    }
  }, [start, end])

  return (
    <>
      <label htmlFor="due">Set your time to compare it</label>
      Start: 
      <input onChange={handleStartChange} id="due" type="datetime-local" name="duedate" />
      End:
      <input onChange={handleEndChange} id="due" type="datetime-local" name="duedate" />
      <label htmlFor="due">Time you spent</label>
      <div>{final} minutes</div>
    </>
  );
}

You can even approach this using just a single state variable, but I'll leave this up to you as a practice.

Working demo:

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const useEffect = React.useEffect;
const useState = React.useState;

function App() {

  // This state variable will hold the starting date:
  const [start, setStart ] = useState(null);
  // This state variable will hold the ending date:
  const [end, setEnd ] = useState(null);
  // This state variable will hold the difference between the starting and ending date:
  const [ final, setFinal ] = useState(null);

  // Update starting date on input change event:
  function handleStartChange(e){
    setStart(new Date(e.target.value).getTime());
  }
  // Update ending date on input change event:
  function handleEndChange(e){
    setEnd(new Date(e.target.value).getTime());
  }
  useEffect(function runWhenStartOrEndChange(){
    // Calculate difference only if both starting and ending dates are present and not null
    if ( end && start){
      const diffTime = ((new Date(end).getTime() - new Date(start).getTime()) / (1000)) / 60;
      setFinal( diffTime );
    }
  }, [start, end])

  return (
    <React.Fragment>
      <label htmlFor="due">Set your time to compare it</label>
      <br /> Start: 
      <input onChange={handleStartChange} id="due" type="datetime-local" name="duedate" />
      <br/> End:
      <input onChange={handleEndChange} id="due" type="datetime-local" name="duedate" />
      <br /><label htmlFor="due">Time you spent: {final} minutes</label>
    </React.Fragment>
  );
}
const el = document.querySelector("#root");
const rootEl = ReactDOM.createRoot(el);
rootEl.render(<App />);
</script>

How to compose two different input values and printing its value compared?

1 Answers1