In the aquaculture industry, managing fish inventory is crucial for ensuring operational efficiency and sustainable practices. A fish inventory management system assists businesses in keeping accurate records of fish stock, monitoring growth rates, and making informed decisions for breeding and harvesting.
Add the bootstrap style on Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
import React, { useState } from "react";
const App = () => {
const [option, setOption] = useState(""); // Separate state for option
const [qty, setQty] = useState(""); // Separate state for qty
const [total, setTotal] = useState(null);
const calculate = () => {
setError(""); // Clear any previous errors
const quantity = parseFloat(qty); // Convert qty to a number
if (isNaN(quantity) || quantity <= 0) {
setError("Please enter a valid quantity.");
return;
}
let result = 0;
if (option === "1") {
// GR calculation
result = (quantity / 1000) * 140;
} else if (option === "2") {
// KG calculation
result = quantity * 140;
} else {
setError("Invalid selection.");
return;
}
setTotal(result.toFixed(2)); // Display total with two decimal places
};
const reset = () => {
setOption("");
setQty("");
setTotal(null);
setError("");
};
return (
<div
className="container"
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh",
}}
>
<div
style={{
width: "350px",
backgroundColor: "#fff",
padding: "20px",
borderRadius: "8px",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
}}
>
<div
style={{
backgroundColor: "blue",
padding: "10px",
textAlign: "center",
borderRadius: "4px 4px 0 0",
color: "#fff",
fontWeight: "bold",
}}
>
Fish Inventory
</div>
<div style={{ marginTop: "10px" }}>
<label
style={{
display: "block",
marginBottom: "5px",
fontWeight: "bold",
}}
>
Fish
</label>
<select
className="form-control"
value={option}
onChange={(e) => setOption(e.target.value)}
style={{
width: "100%",
padding: "8px",
border: "1px solid #ccc",
borderRadius: "4px",
}}
>
<option value="">Please Select</option>
<option value="1">GR</option>
<option value="2">KG</option>
</select>
</div>
<div style={{ marginTop: "10px" }}>
<label
style={{
display: "block",
marginBottom: "5px",
fontWeight: "bold",
}}
>
Qty
</label>
<input
type="text"
className="form-control"
placeholder="Qty"
value={qty}
onChange={(e) => setQty(e.target.value)}
style={{
width: "100%",
padding: "8px",
border: "1px solid #ccc",
borderRadius: "4px",
}}
/>
</div>
<div
style={{
marginTop: "20px",
display: "flex",
justifyContent: "space-between",
}}
>
<button
type="button"
className="btn btn-warning-mt-4"
onClick={calculate}
style={{
padding: "8px 12px",
backgroundColor: "#28a745",
color: "#fff",
border: "none",
borderRadius: "4px",
cursor: "pointer",
}}
>
Calculate
</button>
<button
type="button"
className="btn btn-warning-mt-4"
onClick={reset}
style={{
padding: "8px 12px",
backgroundColor: "#ffc107",
color: "#000",
border: "none",
borderRadius: "4px",
cursor: "pointer",
}}
>
Reset
</button>
</div>
{total !== null && (
<div
style={{
marginTop: "20px",
fontSize: "16px",
fontWeight: "bold",
textAlign: "center",
}}
>
Total: ${total}
</div>
)}
</div>
</div>
);
};
export default App;
I have attached video below go through the video to make the project simple way
Have you ever wanted to talk to a friendly, smart robot that helps you with…
DeepSeek AI is becoming a friendly and powerful new tool in the world of artificial…
Do you want to become an expert in Spring Boot CRUD operations? This comprehensive tutorial…
Modern websites must have a navigation bar that is clear and responsive. FlexBox CSS is…
Introduction In this section, we will guide you step by step in the development of an image upload registration system in Java using MySQL and JDBC. In the application, users register…
The Touchable Shop POS (Point of Sale) system is a sophisticated software solution developed using…