import React, { useState } from 'react';
const App = () => {
const [kilometers, setKilometers] = useState(0);
const [history, setHistory] = useState([]);
const addKilometers = () => {
const newKilometers = parseFloat(prompt('Enter kilometers ridden:'));
if (!isNaN(newKilometers) && newKilometers > 0) {
setKilometers(kilometers + newKilometers);
setHistory([...history, newKilometers]);
} else {
alert('Please enter a valid number of kilometers.');
}
};
const resetKilometers = () => {
setKilometers(0);
setHistory([]);
};
return (
<div className="min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 text-white p-8">
<div className="max-w-4xl mx-auto">
<h1 className="text-4xl font-bold mb-8 text-center">Bike Kilometer Tracker</h1>
<div className="bg-white bg-opacity-10 p-6 rounded-lg shadow-lg">
<div className="text-2xl mb-4">Total Kilometers: {kilometers.toFixed(2)} km</div>
<div className="flex space-x-4">
<button
onClick={addKilometers}
className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300"
>
Add Kilometers
</button>
<button
onClick={resetKilometers}
className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300"
>
Reset
</button>
</div>
</div>
<div className="mt-8">
<h2 className="text-2xl font-bold mb-4">Ride History</h2>
<ul className="space-y-2">
{history.map((km, index) => (
<li key={index} className="bg-white bg-opacity-10 p-3 rounded-lg">
Ride {index + 1}: {km.toFixed(2)} km
</li>
))}
</ul>
</div>
</div>
<footer className="mt-12 text-center text-sm text-white opacity-75">
© 2025 Bike Kilometer Tracker. All rights reserved.
</footer>
</div>
);
};
export default App;