Created
August 11, 2022 18:20
-
-
Save anburocky3/e702909e0f43861309129a5d1dca5c47 to your computer and use it in GitHub Desktop.
Fuel Cost Calculator App made on ReactJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from "react"; | |
function App() { | |
const [tripDistance, setTripDistance] = useState(0) | |
const [fuelConsumption, setFuelConsumption] = useState(0) | |
const [costPerLitre, setCostPerLitre] = useState(102) | |
const [totalCost, setTotalCost] = useState(0) | |
const calculateCost = () => { | |
const total_fuel_burnt = tripDistance / fuelConsumption | |
const totalCost = total_fuel_burnt * costPerLitre | |
setTotalCost(totalCost) | |
} | |
return ( | |
<div className="min-h-screen bg-indigo-500 p-10"> | |
<div className="bg-white p-5 max-w-md mx-auto rounded"> | |
<h1 className="text-xl font-bold">Fuel Cost Calculator</h1> | |
<p className="text-gray-600">Used to calculate your fuel expense.</p> | |
<div className="space-y-2 mt-5"> | |
<div className="flex justify-between items-center"> | |
<p>Trip Distance</p> | |
<input type="number" placeholder="Distance in Numbers" className="border px-2 py-1 rounded" onChange={e => setTripDistance(e.target.value)} /> | |
</div> | |
<div className="flex justify-between items-center"> | |
<p>Fuel Consumption</p> | |
<input type="number" placeholder="Fuel Consumption" className="border px-2 py-1 rounded" onChange={e => setFuelConsumption(e.target.value)} /> | |
</div> | |
<div className="flex justify-between items-center"> | |
<p>Cost Per Litre (₹)</p> | |
<input type="number" placeholder="Cost Per Litre" className="border px-2 py-1 rounded" onChange={e => setCostPerLitre(e.target.value)} /> | |
</div> | |
<div className="text-center space-x-4 pt-5"> | |
<button className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200">Reset</button> | |
<button className="px-2 py-1 rounded bg-indigo-500 text-white hover:bg-indigo-600" onClick={calculateCost}>Calculate</button> | |
</div> | |
{totalCost === 0 || <p className="text-xl font-semibold border-t pt-3">Total Fuel cost is ₹{totalCost}</p>} | |
</div> | |
</div> | |
</div> | |
); | |
} | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment