Crowdfunding App using React

// App.js
import React from 'react';
import Project from './components/Project';
import './App.css';
import Footer from './components/Footer'

const App = () => {
	return (
		<>
			<h1>GeeksForGeeks</h1>
			<div className='project-container'>
				<h1>CrowdFunding</h1>
				<div className="project-list">
					<Project goal={1000} projectNumber={1} />
					<Project goal={500} projectNumber={2} />
					<Project goal={2000} projectNumber={3} />
					<Project goal={1500} projectNumber={4} />
				</div>
			</div>
			<Footer />
		</>
	);
};

export default App;

// DonationForm.js

import React, { useState } from 'react';

const DonationForm = (
	{
		onDonate, goal,
		amountRaised
	}) => {
	const [donationAmount, setDonationAmount] = useState("");
	const [goalReached, setGoalReached] = useState(false);

	const handleDonate = () => {
		if (donationAmount <= 0) {
			alert('Please enter a valid donation amount.');
		} else {
			onDonate(donationAmount);
			setDonationAmount("");
		}
	};
	const remainingAmount = goal - amountRaised;
	if (remainingAmount <= 0 && !goalReached) {
		setGoalReached(true);
	}

	return (
		<div className="form-section">
			{goalReached ? (
				<div className="goal-reached">
					<h2>Congratulations! Goal Reached!</h2>
					<p>Thank You for the Support</p>
				</div>
			) : (
				<div>
					<input
						type="number"
						placeholder='Enter Amount here'
						value={donationAmount}
						onChange={
							(e) =>
								setDonationAmount(parseInt(e.target.value, 10))
						} />
					<button onClick={handleDonate}>
						Donate
					</button>
					{amountRaised >= goal && <p>
						Congratulations! Goal achieved.
					</p>
					}
					{amountRaised < goal && (
						<p>Remaining amount needed:
							${remainingAmount}</p>
					)}
				</div>
			)}
		</div>
	);
};

export default DonationForm;

// Project.js

import React, { useState } from 'react';
import DonationForm from './DonationForm';
import '../App.css';

const Project = ({ goal, projectNumber }) => {
	const [amountRaised, setAmountRaised] = useState(0);

	const handleDonation = (donationAmount) => {
		const newAmount = amountRaised + donationAmount;

		if (amountRaised + donationAmount > goal) {
			alert(`Thank you for contributing, 
				but we need Remaining Amount.`);
			return;
		}

		if (newAmount > goal) {
			alert('Congratulations! Goal achieved.');
			// You can add additional logic here (e.g., closing donations).
		} else {
			setAmountRaised(newAmount);
		}
	};

	return (
		<div className="project">
			<div className="project-number">Project {projectNumber}</div>
			<h2>Project Goal: ${goal}</h2>
			<p>Amount Raised: ${amountRaised}</p>
			<DonationForm onDonate={handleDonation}
				goal={goal} amountRaised={amountRaised} />
		</div>
	);
};

export default Project;

// footer.jsx

import React from 'react'
import './Footer.css';

function footer() {
return (
	<div className='footer'>
		<h2> © 2024 CrwodFunding. All rights reserved.</h2>
		</div>
)
}

export default footer