Time Format Converter using ReactJS

In this article, we will develop a Time Format Converter Project application using the ReactJS library. A Time Format Converter is a React-based tool that allows users to convert between 12-hour and 24-hour time formats. It validates input, performs the conversion, and displays the result or error message in a user-friendly interface. In this application, we will use the Functional-based components and various hooks to manage the state of the application. Also, we will style the application with different CSS properties and effects. In this application, the user needs to select the conversion format give the input time, and get the results in just one click.

Example:

The user can select the Time Conversion Format as (24-Hour to 12-Hour). 
Then, the user can specify the time as = 22.56. When the user clicks on the 
Convert Button, the Result will be: Time in 12 Hour Format is: 10:56 PM.

Prerequisites and Technologies

• ReactJS
• CSS
• JSX
• Function Components in React

Project Structure

Steps to Create the Application

Step 1: Set up the React project using the below command in VSCode IDE.

npx create-react-app time-converter

Step 2: Navigate to the newly created project folder by executing the below command.

cd time-converter

The updated dependencies in package.json will look like this:

{
    "name": "time-converter",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-hook-form": "^7.46.1",
        "react-scripts": "5.0.1",
        "util": "^0.12.5",
        "web-vitals": "^2.1.4"
    }
}

Step 3: Now, in the src directory create a file as Converter. jsx, which will consist of the code for performing the conversion of user input into different scales

Approach

• For developing the Time Format Converter application, first the user needs to choose the Conversion format, the user can select the conversion format from the drop-down list. After selecting the conversion format, the user needs to enter the time as per the selected format.
• The field is been validated with the particular time range. For example, when the user selects the conversion of 12-Hours to 24-Hours then, the user can only give the input till midnight/PM. So, overall the proper validation of time values is been done.
• In converter.jsx file we use React's useState hook to manage four pieces of state: input time, output time, error message, and selected conversion format (24-hour to 12-hour or vice versa).
• Conversion Logic: The convertFunction handles the time conversion based on the selected format. It validates input, performs the conversion, and updates state with the result. It handles both 12-hour to 24-hour and 24-hour to 12-hour conversions.
• UI Elements: The code renders a simple UI with a title, input field for time, a dropdown for format selection, and a Convert button. Error messages and converted time are displayed conditionally based on state.
• User Interaction: When the Convert button is clicked, it triggers the convertFunction, which performs the conversion and displays the result or an error message if the input is invalid. Users can select the conversion format and enter a time in the specified format.
• We have styled the application using the CSS classes and properties. This makes the application more attractive interactive and user-friendly for usage.

Example: Insert the below code in the App.js and Converter. jsx file mentioned in the above directory structure.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #fbfaa9;
}

.converter-container {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 400px;
    padding: 30px;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease-in-out;
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.converter-container:hover {
    transform: scale(1.02);
}

.app-title {
    font-size: 34px;
    color: #2c9e30;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.converter-title {
    font-size: 24px;
    color: #0821ff;
    text-transform: uppercase;
    margin-bottom: 30px;
    font-weight: bold;
}

.input-group {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.label {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
    font-weight: bold;
}

.form-control {
    width: 100%;
    margin-bottom: 20px;
    padding: 15px;
    border: 2px solid #e91e63;
    background-color: #ffffff;
    color: #e91e63;
    font-weight: bold;
    border-radius: 5px;
    transition: border-color 0.3s, color 0.3s, 
          background-color 0.3s, transform 0.2s;
    text-align: center;
    font-size: 20px;
    outline: none;
}

.form-control:hover {
    transform: scale(1.02);
}

.form-control:focus {
    border-color: #ff6600;
    color: #ff6600;
    background-color: #fff;
}

.form-select {
    width: 100%;
    padding: 15px;
    border: 2px solid #e91e63;
    background-color: #ffffff;
    color: #e91e63;
    font-weight: bold;
    border-radius: 5px;
    font-size: 20px;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s, 
          background-color 0.3s, transform 0.2s;
}

.form-select:hover {
    transform: scale(1.02);
}

.form-select:focus {
    border-color: #ff6600;
    color: #ff6600;
    background-color: #fff;
}

.convert-button {
    width: 100%;
    margin-bottom: 20px;
    padding: 15px;
    border: 2px solid #e91e63;
    background-color: #e91e63;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    transition: border-color 0.3s, 
          background-color 0.3s, transform 0.2s;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
}

.convert-button:hover {
    transform: scale(1.02);
    background-color: #ff6600;
}

.result {
    margin-top: 20px;
    padding: 15px;
    border: 2px solid #e91e63;
    background-color: #ffffff;
    border-radius: 5px;
    color: #e91e63;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    transition: border-color 0.3s;
}

.error {
    color: #e74c3c;
    font-weight: bold;
    margin-top: 10px;
    font-size: 18px;
}

// App.js 
import React from 'react'; 
import Converter from './Converter'; 
function App() { 
	return ( 
		<div className="body"> 
			<div className="converter-card"> 
				<Converter /> 
			</div> 
		</div> 
	); 
} 
export default App;

import React, { useState } from 'react'; 
import './App.css'; 
function Converter() { 
	let [input_Time, set_Input_Time] = useState(''); 
	let [output_Time, set_Output_Time] = useState(''); 
	let [error_Msg, set_Error_Msg] = useState(''); 
	let [select_Format, set_Select_Format] = useState('to24'); 
	let convertFunction = () => { 
		set_Error_Msg(''); 
		try { 
			let hr, min, per; 
			if (select_Format === 'to24') { 
				[hr, min] = input_Time.split(':'); 
				hr = parseInt(hr, 10); 
				min = parseInt(min, 10); 
				if (isNaN(hr) || isNaN(min) || 
					hr < 0 || hr > 23 || min < 0 || min > 59) { 
					throw new Error('Invalid time format'); 
				} 
				if (hr === 12 && min === 0) { 
					set_Output_Time(`Time in 12 Hour Format is: 12:00 AM`); 
				} else if (hr >= 12) { 
					per = 'PM'; 
					if (hr > 12) { 
						hr -= 12; 
					} 
					set_Output_Time(`Time in 12 Hour Format is: 
		${hr.toString().padStart(2, '0')}: 
		${min.toString().padStart(2, '0')} 
		${per}`); 
				} else { 
					per = 'AM'; 
					if (hr === 0) { 
						hr = 12; 
					} 
					set_Output_Time(`Time in 12 Hour Format is: 
		${hr.toString().padStart(2, '0')}: 
		${min.toString().padStart(2, '0')} 
		${per}`); 
				} 
			} else if (select_Format === 'to12') { 
				let [time, givenPeriod] = input_Time.split(' '); 
				if (!time) { 
					throw new Error('Invalid input format'); 
				} 
				[hr, min] = time.split(':'); 
				hr = parseInt(hr, 10); 
				min = parseInt(min, 10); 
				if (isNaN(hr) || isNaN(min) || min < 0 || min > 59) { 
					throw new Error('Invalid time format'); 
				} 
				if (givenPeriod === 'AM' || givenPeriod === 'PM') { 
					if (hr === 12) { 
						hr = givenPeriod === 'AM' ? 0 : 12; 
					} else if (givenPeriod === 'PM') { 
						hr += 12; 
					} 
				} else { 
					throw new Error('Invalid input format'); 
				} 
				set_Output_Time(`Time in 24 Hour Format is: 
		${hr.toString().padStart(2, '0')}: 
		${min.toString().padStart(2, '0')}`); 
			} 
		} catch (err) { 
			set_Error_Msg( 
				'Invalid input. Please enter a valid time in the specified format.'); 
			set_Output_Time(''); 
		} 
	}; 
	return ( 
		<div className="converter-container"> 
			<h1 className='app-title'> 
				GeeksforGeeks 
			</h1> 
			<h2 className="converter-title"> 
				Time Converter 
			</h2> 
			<div className="input-group"> 
				<label className="label"> 
					Enter Time ( 
					{select_Format === 'to24' ? '24-Hour' : '12-Hour'} Format) 
				</label> 
				<input 
					type="text"
					className="form-control"
					value={input_Time} 
					onChange={(e) => set_Input_Time(e.target.value)} 
					placeholder={`e.g., 
		${select_Format === 'to24' ? '14:30' : '02:30 PM'}`} 
				/> 
			</div> 
			<div className="input-group"> 
				<label className="label"> 
					Select Time Conversion Format 
				</label> 
				<select 
					className="form-select"
					value={select_Format} 
					onChange={(e) => 
						set_Select_Format(e.target.value)} 
				> 
					<option value="to24"> 
						24-Hour to 12-Hour 
					</option> 
					<option value="to12"> 
						12-Hour to 24-Hour 
					</option> 
				</select> 
			</div> 
			<button className="convert-button"
				onClick={convertFunction}> 
				Convert 
			</button> 
			{error_Msg && <div className="error"> 
				{error_Msg} 
			</div>} 
			{output_Time && 
				<div className="result"> 
					{output_Time} 
				</div>} 
		</div> 
	); 
} 
export default Converter;

Steps to Run the Application

• Run the application by executing the following command in the terminal.

npm start
or
npm run start

• Open a web browser like Chrome, type the following URL in the address bar.

http://localhost:3000/

Output: