Image description can be found here
Your assistance is greatly appreciated, as I am currently inexperienced with React and JavaScript. I am self-studying, so please excuse any basic questions. I have encountered a challenge with this issue.
In the image below,
Distance, Time, and Pace are centered. I would like to align Distance: Time: Pace: left, followed by individual input boxes arranged like this:
https://i.sstatic.net/11TGP.png
// Using JSX
import React, {useState, useEffect} from 'react';
import Logo from '../components/Logo';
import './styles.css'
// Defining a functional React component
function Home() {
const [message, setMessage]=useState([]);
useEffect(()=>{
fetch("/test/hello")
.then((response)=>{
return response.json();
})
.then((data)=>{
setMessage(data);
});
},[]);
return (
<div>
<div className="logo-container">
<Logo />
<h1 style={{ fontSize: '40px', color: '#333333' }}>Pace Calculator</h1>
</div>
<div className="input-container">
<div className="input-group">
<label className="label">
Distance<span className="colon">:</span>
<input className="input-field" type="text" placeholder="min" />
:
<input className="input-field" type="text" placeholder="sec" />
/km
</label>
</div>
<div className="input-group">
<label className="label">
Time<span className="colon">:</span>
<input className="input-field" type="text" placeholder="hr" />
:
<input className="input-field" type="text" placeholder="min" />
:
<input className="input-field" type="text" placeholder="sec" />
</label>
</div>
<div className="input-group">
<label className="label">
Pace<span className="colon">:</span>
<input className="input-field" type="text" placeholder="min" />
:
<input className="input-field" type="text" placeholder="sec" />
/km
</label>
</div>
</div>
<button className="calculate-button">Calculate</button>
</div>
);
}
export default Home;
/* styles.css */
.input-container {
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid #333; /* Add a solid border with the color of your choice */
border-radius: 10px;
padding: 10px; /* Add padding for better visual appearance */
max-width: 500px;
margin: auto;
margin-bottom: 20px;
}
.input-group {
display: flex; /* Display the input groups in a row */
align-items: center; /* Align items vertically in the input groups */
margin-bottom: 10px;
}
.label {
font-size: 30px; /* Adjust the font size as needed */
}
.input-field {
width: 40px;
height: 25px;
border-radius: 5px;
}
.calculate-button {
margin-top: 30px;
background-color: #808080;
color: #fff;
padding: 10px 20px;
font-size: 30px;
cursor: pointer;
border: none;
border-radius: 5px;
display: block;
margin: 0 auto; /* Center the button */
}
.calculate-button:hover {
background-color: #1b1b1b; /* Darker green color on hover */
}