41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | // Array to store donations
2 | let donations = [];
3 |
4 | // Function to make a new donation
5 | function makeDonation() {
6 | const cause = document.getElementById('cause').value;
7 | const amount = parseFloat(document.getElementById('donationAmount').value);
8 |
9 | if (!amount || amount <= 0) {
10 | alert("Please enter a valid donation amount.");
11 | return;
12 | }
13 |
14 | // Simulate a blockchain transaction ID (random)
15 | const transactionId = '0x' + Math.random().toString(16).substr(2, 10);
16 |
17 | // Create a donation object
18 | const donation = {
19 | cause: cause,
20 | amount: amount,
21 | transactionId: transactionId,
22 | timestamp: new Date().toLocaleString()
23 | };
24 |
25 | // Add to the donations array
26 | donations.push(donation);
27 |
28 | // Update the UI
29 | updateDonationsList();
30 | updateTotalDonations();
31 |
32 | // Reset the input field
33 | document.getElementById('donationAmount').value = '';
34 | }
35 |
36 | // Function to update the list of donations
37 | function updateDonationsList() {
38 | const donationsList = document.getElementById('donationsList');
39 | donationsList.innerHTML = ''; // Clear the list first
40 |
41 | donations.forEach((donation, index) => {
42 | const listItem = document.createElement('li');
43 | listItem.innerHTML = `
44 | Cause: ${donation.cause}
45 | Amount: ${donation.amount} ETH
46 | Transaction ID: ${donation.transactionId}
47 | Time: ${donation.timestamp}
48 | `;
49 | donationsList.appendChild(listItem);
50 | });
51 | }
52 |
53 | // Function to update the total donations
54 | function updateTotalDonations() {
55 | const totalDonationsElement = document.getElementById('totalDonations');
56 | const totalDonations = donations.reduce((total, donation) => total + donation.amount, 0);
57 | totalDonationsElement.textContent = totalDonations.toFixed(2);
58 | }
59 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🌍 Decentralized Crypto Donation Tracker
2 |
3 | This project is a **decentralized donation tracker** that allows users to donate cryptocurrency to various causes and track all donations in real time. The goal is to create a transparent and easy-to-use platform where users can support charitable initiatives using cryptocurrencies like **ETH**. Every donation is logged and displayed for transparency, simulating blockchain-like behavior.
4 |
5 | ---
6 |
7 | ## 📜 Features
8 |
9 | - **Donation Tracking**: Users can donate in ETH to selected charity causes.
10 | - **Transparency**: All donations, including amounts and causes, are displayed in real time.
11 | - **Simulated Blockchain**: Each donation is assigned a unique transaction ID, mimicking how blockchain donations are tracked.
12 | - **Real-Time Updates**: The total donations and recent donation list update automatically upon new contributions.
13 |
14 | ---
15 |
16 | ## 🛠️ Technologies Used
17 |
18 | - **HTML5**: For structuring the web page.
19 | - **CSS3**: For styling and layout.
20 | - **JavaScript**: Handles the donation logic and dynamic updates to the user interface.
21 |
22 | ---
23 |
24 | ## 🚀 How to Run Locally
25 |
26 | ### Prerequisites
27 |
28 | To run the project locally, you'll need:
29 |
30 | - A web browser (Google Chrome, Firefox, etc.)
31 | - A simple web server like **Live Server** (for VS Code) or **Python HTTP server**.
32 |
33 | ### Steps to Set Up
34 |
35 | 1. **Clone the repository**:
36 | ```bash
37 | git clone https://github.com/your-username/crypto-donation-tracker.git
38 | cd crypto-donation-tracker
39 | ```
40 |
41 | 2. **Open the project**:
42 | - Open the `index.html` file in a browser, or
43 | - Serve it using a local server like **Live Server** in VS Code or:
44 | ```bash
45 | # If you have Python installed
46 | python -m http.server 8000
47 | ```
48 |
49 | 3. **View in Browser**:
50 | - Open `http://localhost:8000` in your browser to see the project in action.
51 |
52 | ---
53 |
54 | ## 📂 Project Structure
55 |
56 | ```plaintext
57 | .
58 | ├── index.html # The main HTML file that contains the structure of the donation page.
59 | ├── styles.css # Contains all the styles for the project.
60 | ├── app.js # JavaScript logic for donations and real-time updates.
61 | └── README.md # Documentation for the project.
62 | ```
63 |
64 | ---
65 |
66 | ## 🌟 Usage Instructions
67 |
68 | 1. Select a **cause** from the dropdown list.
69 | 2. Enter the amount of **ETH** you want to donate.
70 | 3. Click on **Donate Now** to register your donation.
71 | 4. Your donation will appear in the **Recent Donations** list, including:
72 | - The cause.
73 | - The amount donated.
74 | - A unique transaction ID (simulated).
75 | - The timestamp of the donation.
76 | 5. Watch the **Total Donations** update in real time!
77 |
78 | ---
79 |
80 | ## 💡 Future Improvements
81 |
82 | - **Blockchain Integration**: Integrate with **Ethereum** or **Polygon** testnets using **Web3.js** to enable real crypto donations.
83 | - **Smart Contract Deployment**: Deploy a smart contract to handle real-time donation tracking on-chain.
84 | - **Multiple Cryptocurrencies**: Support additional tokens and cryptocurrencies for donations.
85 | - **Charity Verification**: Implement a system to verify and audit charities on the platform for increased trust.
86 |
87 | ---
88 |
89 | ## 🤝 Contributing
90 |
91 | Contributions are welcome! If you have ideas for new features or bug fixes, feel free to open an issue or submit a pull request.
92 |
93 | ---
94 |
95 | ## 📄 License
96 |
97 | This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more details.
98 |
99 | ---
100 |
101 | ## 🙏 Acknowledgements
102 |
103 | Special thanks to all the open-source libraries and contributors that helped make this project possible.
104 |
105 | ---
106 |
107 | ### Let's make crypto donations **transparent**, **trustworthy**, and **impactful**! 🌍
108 |
109 |
--------------------------------------------------------------------------------