Media Preparation Calculator

\n setCustomComposition(prev => ({\n ...prev, \n beefExtract: Number(e.target.value)\n }))}\n />\n setCustomComposition(prev => ({\n ...prev, \n peptone: Number(e.target.value)\n }))}\n />\n setCustomComposition(prev => ({\n ...prev, \n nacl: Number(e.target.value)\n }))}\n />\n setCustomComposition(prev => ({\n ...prev, \n agar: Number(e.target.value)\n }))}\n />\n setCustomComposition(prev => ({\n ...prev, \n pH: Number(e.target.value)\n }))}\n />\n

\n );\n };\n\n const [mediaResult, setMediaResult] = useState(null);\n\n const handleCalculateMedia = () => {\n const result = calculateMediaComposition();\n setMediaResult(result);\n };\n\n return (\n

🧫 Media Preparation Calculator

\n Created by Shubham Pandey, Student of KK Wagh College of Engineering\n

\n \n

\n Select Media Type:\n \n\n Total Volume (mL):\n setTotalVolume(Number(e.target.value))}\n placeholder=\"Enter total volume in mL\"\n />\n\n {renderCustomInputs()}\n\n \n

\n\n {mediaResult && (\n

Media Preparation Details

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {mediaResult.agar !== undefined && (\n \n \n \n \n )}\n \n \n \n \n \n \n \n \n \n

Media Component	Quantity
Media Name	{mediaResult.mediaName}
Beef Extract	{mediaResult.beefExtract} g
Peptone	{mediaResult.peptone} g
NaCl	{mediaResult.nacl} g
Agar	{mediaResult.agar} g
Distilled Water	{mediaResult.distilledWater} mL
pH	{mediaResult.pH}

\n )}\n\n

Preparation Instructions:

Weigh all dry ingredients precisely
Dissolve ingredients in distilled water
Adjust pH using NaOH or HCl if required
Autoclave at 121°C for 15 minutes

\n\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Media Preparation Calculator\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n background-color: #f0f4f8;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n\n.media-preparation-calculator {\n background-color: white;\n border-radius: 15px;\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n width: 100%;\n max-width: 600px;\n padding: 30px;\n text-align: center;\n}\n\n.creator-credit {\n font-size: 0.8em;\n color: #7f8c8d;\n margin-bottom: 15px;\n font-style: italic;\n}\n\nh2 {\n color: #2c3e50;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n}\n\n.input-section {\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-bottom: 20px;\n}\n\nlabel {\n text-align: left;\n color: #34495e;\n font-weight: 500;\n}\n\nselect, input {\n padding: 12px;\n border: 1px solid #bdc3c7;\n border-radius: 6px;\n font-size: 16px;\n}\n\n.custom-media-inputs {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\nbutton {\n background-color: #3498db;\n color: white;\n border: none;\n padding: 12px 20px;\n border-radius: 6px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n.result-section {\n background-color: #f1f5f8;\n border-radius: 8px;\n padding: 15px;\n margin-top: 20px;\n}\n\n.result-section table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.result-section th, \n.result-section td {\n border: 1px solid #ddd;\n padding: 8px;\n text-align: left;\n}\n\n.result-section th {\n background-color: #f2f2f2;\n}\n\n.preparation-notes {\n background-color: #e8f4f8;\n border-radius: 8px;\n padding: 15px;\n margin-top: 20px;\n text-align: left;\n}\n\n.preparation-notes h4 {\n margin-top: 0;\n color: #2c3e50;\n}\n\n.preparation-notes ol {\n padding-left: 20px;\n color: #34495e;\n}\n\n.source-link {\n display: block;\n margin-top: 20px;\n color: #7f8c8d;\n text-decoration: none;\n font-size: 0.9em;\n}\n\n.source-link:hover {\n text-decoration: underline;\n}\n\n@media (max-width: 600px) {\n .media-preparation-calculator {\n width: 95%;\n margin: 10px;\n padding: 20px;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Scoder/calculatorApp/code/main.tsx","extension","actionData","errors"]