Media Preparation Calculator

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function MediaPreparationCalculator() { const [mediaType, setMediaType] = useState('nutrient_agar'); const [totalVolume, setTotalVolume] = useState(1000); const [customComposition, setCustomComposition] = useState({ beefExtract: 0, peptone: 0, nacl: 0, agar: 0, pH: 0 }); // Standard media compositions (g/L) const mediaCompositions = { nutrient_agar: { name: 'Nutrient Agar', beefExtract: 3, peptone: 5, nacl: 5, agar: 15, distilledWater: 1000, pH: 7.4 }, nutrient_broth: { name: 'Nutrient Broth', beefExtract: 3, peptone: 5, nacl: 5, agar: 0, distilledWater: 1000, pH: 7.4 }, custom: { name: 'Custom Media', beefExtract: customComposition.beefExtract, peptone: customComposition.peptone, nacl: customComposition.nacl, agar: customComposition.agar, distilledWater: 1000, pH: customComposition.pH } }; const calculateMediaComposition = () => { const selectedMedia = mediaCompositions[mediaType]; const scaleFactor = totalVolume / 1000; return { mediaName: selectedMedia.name, beefExtract: Number((selectedMedia.beefExtract * scaleFactor).toFixed(2)), peptone: Number((selectedMedia.peptone * scaleFactor).toFixed(2)), nacl: Number((selectedMedia.nacl * scaleFactor).toFixed(2)), agar: Number((selectedMedia.agar * scaleFactor).toFixed(2)), distilledWater: totalVolume, pH: selectedMedia.pH }; }; const renderCustomInputs = () => { if (mediaType !== 'custom') return null; return (

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

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

🧫 Media Preparation Calculator

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

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

{mediaResult && (

Media Preparation Details

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

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}

)}

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

View Source

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

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

Scoder