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
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…
Creating a responsive login form is a crucial skill for any web developer. In this…
In this tutorial will teach Laravel 12 CRUD API by step. Laravel 10 CRUD Application …
In this lesson we talk about laravel 12 image uploading and display the image step…
In this tutorial will teach Laravel 12 CRUD Application step by step. Laravel 12 CRUD…