Global Food Donation Simulator using React
unknown
javascript
2 months ago
2.3 kB
5
Indexable
[{"title":"zerohunger.com","list":[{"command":"import { useState } from \"react\";\nimport { Card"},{"command":" CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function DonationSimulator() {\n const [donations"},{"command":" setDonations] = useState([]);\n const [formData"},{"command":" setFormData] = useState({ name: \"John Doe\""},{"command":" amount: \"\" });\n\n const handleChange = (e) => {\n setFormData({ ...formData"},{"command":" [e.target.name]: e.target.value });\n };\n\n const handleDonate = () => {\n if (formData.name && formData.amount) {\n setDonations([...donations"},{"command":" formData]);\n setFormData({ name: \"John Doe\""},{"command":" amount: \"\" });\n }\n };\n\n return (\n <div className=\"p-6 max-w-2xl mx-auto\">\n <h1 className=\"text-xl font-bold mb-4\">Global Food Donation Simulator</h1>\n <p className=\"mb-4\">Simulate donating to help fight hunger worldwide.</p>\n <div className=\"mb-4\">\n <input\n type=\"text\"\n name=\"name\"\n placeholder=\"Your Name\"\n value={formData.name}\n onChange={handleChange}\n className=\"border p-2 rounded w-full mb-2\"\n />\n <input\n type=\"number\"\n name=\"amount\"\n placeholder=\"Donation Amount ($)\"\n value={formData.amount}\n onChange={handleChange}\n className=\"border p-2 rounded w-full mb-2\"\n />\n <Button onClick={handleDonate} className=\"w-full\">Simulate Donation</Button>\n </div>\n <h2 className=\"text-lg font-semibold mt-6\">Donation Records</h2>\n <div>\n {donations.length === 0 ? (\n <p>No donations recorded yet.</p>\n ) : (\n donations.map((donation"},{"command":" index) => (\n <Card key={index} className=\"my-2 p-2\">\n <CardContent>\n <p><strong>Name:</strong> {donation.name}</p>\n <p><strong>Amount:</strong> ${donation.amount}</p>\n </CardContent>\n </Card>\n ))\n )}\n </div>\n </div>\n );\n}\n"}],"id":"zerohungercom-0.7989250568502531"}]
Editor is loading...
Leave a Comment