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`;","createdAt",["D",1739366390812],"version",13,"currentUserHasLiked","likeCount","forkCount",1,"referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","Scoder","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJyUlI1ZFc1WHVYaGRYWjl5ZGJGVjNQRm9ZZCJ9","forkedVal","interval","slug","Scoder/calculatorApp","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141,144,148,152,156,160,164,168,172,176,180,184,187,190],{"_117":118,"_142":-5,"_115":143,"_112":110},"prId",["D",1739366390812],{"_117":145,"_142":-5,"_115":146,"_112":147},12,["D",1739366367975],"fc7de234-e943-11ef-9728-e6cdfca9ef9f",{"_117":149,"_142":-5,"_115":150,"_112":151},11,["D",1737793235412],"4068fd60-daf5-11ef-b23f-e6cdfca9ef9f",{"_117":153,"_142":-5,"_115":154,"_112":155},10,["D",1737793131725],"029d3212-daf5-11ef-a6db-e6cdfca9ef9f",{"_117":157,"_142":-5,"_115":158,"_112":159},9,["D",1737532735581],"ba69ad3c-d896-11ef-a806-e6cdfca9ef9f",{"_117":161,"_142":-5,"_115":162,"_112":163},8,["D",1737532580342],"5de22a3a-d896-11ef-ad08-e6cdfca9ef9f",{"_117":165,"_142":-5,"_115":166,"_112":167},7,["D",1737531919704],"d41cac18-d894-11ef-8e4b-e6cdfca9ef9f",{"_117":169,"_142":-5,"_115":170,"_112":171},6,["D",1737531412023],"a58348b8-d893-11ef-973a-e6cdfca9ef9f",{"_117":173,"_142":-5,"_115":174,"_112":175},5,["D",1736671091030],"8e3dca6e-d0c0-11ef-a630-e6cdfca9ef9f",{"_117":177,"_142":-5,"_115":178,"_112":179},4,["D",1736521123848],"62d51bce-cf63-11ef-adf4-e6cdfca9ef9f",{"_117":181,"_142":-5,"_115":182,"_112":183},3,["D",1736520826369],"b185f3d4-cf62-11ef-832d-e6cdfca9ef9f",{"_117":90,"_142":-5,"_115":185,"_112":186},["D",1736520265757],"635eb3a4-cf61-11ef-ad64-e6cdfca9ef9f",{"_117":122,"_142":-5,"_115":188,"_112":189},["D",1736520126859],"1094df22-cf61-11ef-8548-e6cdfca9ef9f",{"_117":31,"_142":-5,"_115":191,"_112":192},["D",1736519820255],"59d5c3be-cf60-11ef-a482-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":200,"_201":202,"_94":203},"single","redirect","/v/Scoder/calculatorApp/versions",{"_112":147,"_113":204,"_117":145,"_115":205,"_206":99,"_100":101,"_107":108,"_129":130,"_11":96,"_207":-5,"_208":-5,"_209":-5,"_197":26,"_135":136},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction MediaPreparationCalculator() {\n const [mediaType, setMediaType] = useState('potato_dextrose_agar');\n const [totalVolume, setTotalVolume] = useState(1000);\n const [customComposition, setCustomComposition] = useState({\n beefExtract: 0,\n potatoInfusion: 0,\n peptone: 0,\n dextrose: 0,\n nacl: 0,\n agar: 0,\n pH: 0\n });\n\n // Standard media compositions (g/L)\n const mediaCompositions = {\n potato_dextrose_agar: {\n name: 'Potato Dextrose Agar (PDA)',\n beefExtract: 3,\n potatoInfusion: 200,\n dextrose: 20,\n agar: 15,\n distilledWater: 1000,\n pH: 5.6\n },\n nutrient_agar: {\n name: 'Nutrient Agar',\n beefExtract: 3,\n peptone: 5,\n nacl: 5,\n agar: 15,\n distilledWater: 1000,\n pH: 7.4\n },\n nutrient_broth: {\n name: 'Nutrient Broth',\n beefExtract: 3,\n peptone: 5,\n nacl: 5,\n agar: 0,\n distilledWater: 1000,\n pH: 7.4\n },\n custom: {\n name: 'Custom Media',\n beefExtract: customComposition.beefExtract,\n potatoInfusion: customComposition.potatoInfusion,\n peptone: customComposition.peptone,\n dextrose: customComposition.dextrose,\n nacl: customComposition.nacl,\n agar: customComposition.agar,\n distilledWater: 1000,\n pH: customComposition.pH\n }\n };\n\n const calculateMediaComposition = () => {\n const selectedMedia = mediaCompositions[mediaType];\n const scaleFactor = totalVolume / 1000;\n\n return {\n mediaName: selectedMedia.name,\n beefExtract: Number((selectedMedia.beefExtract * scaleFactor).toFixed(2)),\n potatoInfusion: Number((selectedMedia.potatoInfusion * scaleFactor).toFixed(2)),\n peptone: Number((selectedMedia.peptone || 0 * scaleFactor).toFixed(2)),\n dextrose: Number((selectedMedia.dextrose || 0 * scaleFactor).toFixed(2)),\n nacl: Number((selectedMedia.nacl || 0 * scaleFactor).toFixed(2)),\n agar: Number((selectedMedia.agar * scaleFactor).toFixed(2)),\n distilledWater: totalVolume,\n pH: selectedMedia.pH\n };\n };\n\n const renderCustomInputs = () => {\n if (mediaType !== 'custom') return null;\n\n return (\n

\n setCustomComposition(prev => ({\n ...prev, \n beefExtract: Number(e.target.value)\n }))}\n />\n {mediaType === 'potato_dextrose_agar' && (\n <>\n setCustomComposition(prev => ({\n ...prev, \n potatoInfusion: Number(e.target.value)\n }))}\n />\n setCustomComposition(prev => ({\n ...prev, \n dextrose: Number(e.target.value)\n }))}\n />\n \n )}\n {mediaType !== 'potato_dextrose_agar' && (\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 \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

calculatorApp

Version 12