manabubannai/simple_donate.php

## simple_donate.php
<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Donation Contract</title>
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
</head>
<body>
    <h3>Donation Contract</h3>
    <button class="enableEthereumButton">Connect</button>
    (address: <span class="showAccount"></span>)
    <br>
    <input type="text" placeholder="name"  id="your_name">
    <input type="text" placeholder="eth"  id="your_eth">
    <button onclick="donateFunction();">Donate</button>
    <br><br>
    <h3>Donaters</h3>
    <span id="people1"></span><span id="price1"></span><span id="address1"></span>
    <span id="people2"></span><span id="price2"></span><span id="address2"></span>
    <span id="people3"></span><span id="price3"></span><span id="address3"></span>
    <span id="people4"></span><span id="price4"></span><span id="address4"></span>
    <span id="people5"></span><span id="price5"></span><span id="address5"></span>

<script>

//Enable Web3
async function loadWeb3(){
    if(window.ethereum) {
        window.web3 = new Web3(window.ethereum);
    }
}

// Load Contract
async function loadContract(){
    return await new window.web3.eth.Contract(
    [
        {
            "inputs": [
                {
                    "internalType": "string",
                    "name": "name",
                    "type": "string"
                }
            ],
            "name": "addPerson",
            "outputs": [],
            "stateMutability": "payable",
            "type": "function"
        },
        {
            "inputs": [
                {
                    "internalType": "uint256",
                    "name": "",
                    "type": "uint256"
                }
            ],
            "name": "people",
            "outputs": [
                {
                    "internalType": "uint256",
                    "name": "id",
                    "type": "uint256"
                },
                {
                    "internalType": "string",
                    "name": "name",
                    "type": "string"
                },
                {
                    "internalType": "uint256",
                    "name": "amount",
                    "type": "uint256"
                },
                {
                    "internalType": "address",
                    "name": "sender_address",
                    "type": "address"
                }
            ],
            "stateMutability": "view",
            "type": "function"
        }
    ]
        ,'0x8c4eF56332f43f2f6351F10ef4468c2bC135a9cD');
}

// Read data from the contract
async function getFunction() {
    for (let i = 1; i <= 100; i++) {
        get = await window.contract.methods.people(i).call();
        if ( get[0] != 0 ){ // Continue for a loop until the ID is not equal to 0.
            document.getElementById('people' +i).innerHTML = get[1] + ": ";
            document.getElementById('price' +i).innerHTML = get[2]/1000000000000000000 + " ("; // Change wei to ETH
            document.getElementById('address' +i).innerHTML = get[3] + ") <br>";
        } else break;
    }
}

// Load all functions
async function load(){
    await loadWeb3(); //Enable Web3
    window.contract = await loadContract(); //Load Contract
    getFunction(); //Read data from the contract
}
load();

// Connect to MetaMask by clicking connect button. ( https://bit.ly/3qfe1Na )
const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');
ethereumButton.addEventListener('click', () => {
    getAccount();
});

// Get the user's wallet address
async function getAccount() {
    const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    showAccount.innerHTML = accounts;
    return account = accounts[0];
}

// Donate function
async function donateFunction() {
    $name = document.getElementById('your_name').value;
    $wei = document.getElementById('your_eth').value;
    $eth = $wei * 1000000000000000000; // Change wei to ETH
    $account = await getAccount();
    set = await window.contract.methods.addPerson($name).send(
        {
            from: $account,
            value: $eth
        }
    );
}
</script>

</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<title>Donation Contract</title>
	<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
	</head>
	<body>
	<h3>Donation Contract</h3>
	<button class="enableEthereumButton">Connect</button>
	(address: <span class="showAccount"></span>)
	<br>
	<input type="text" placeholder="name" id="your_name">
	<input type="text" placeholder="eth" id="your_eth">
	<button onclick="donateFunction();">Donate</button>
	<br><br>
	<h3>Donaters</h3>
	<span id="people1"></span><span id="price1"></span><span id="address1"></span>
	<span id="people2"></span><span id="price2"></span><span id="address2"></span>
	<span id="people3"></span><span id="price3"></span><span id="address3"></span>
	<span id="people4"></span><span id="price4"></span><span id="address4"></span>
	<span id="people5"></span><span id="price5"></span><span id="address5"></span>

	<script>

	//Enable Web3
	async function loadWeb3(){
	if(window.ethereum) {
	window.web3 = new Web3(window.ethereum);
	}
	}

	// Load Contract
	async function loadContract(){
	return await new window.web3.eth.Contract(
	[
	{
	"inputs": [
	{
	"internalType": "string",
	"name": "name",
	"type": "string"
	}
	],
	"name": "addPerson",
	"outputs": [],
	"stateMutability": "payable",
	"type": "function"
	},
	{
	"inputs": [
	{
	"internalType": "uint256",
	"name": "",
	"type": "uint256"
	}
	],
	"name": "people",
	"outputs": [
	{
	"internalType": "uint256",
	"name": "id",
	"type": "uint256"
	},
	{
	"internalType": "string",
	"name": "name",
	"type": "string"
	},
	{
	"internalType": "uint256",
	"name": "amount",
	"type": "uint256"
	},
	{
	"internalType": "address",
	"name": "sender_address",
	"type": "address"
	}
	],
	"stateMutability": "view",
	"type": "function"
	}
	]
	,'0x8c4eF56332f43f2f6351F10ef4468c2bC135a9cD');
	}

	// Read data from the contract
	async function getFunction() {
	for (let i = 1; i <= 100; i++) {
	get = await window.contract.methods.people(i).call();
	if ( get[0] != 0 ){ // Continue for a loop until the ID is not equal to 0.
	document.getElementById('people' +i).innerHTML = get[1] + ": ";
	document.getElementById('price' +i).innerHTML = get[2]/1000000000000000000 + " ("; // Change wei to ETH
	document.getElementById('address' +i).innerHTML = get[3] + ") <br>";
	} else break;
	}
	}

	// Load all functions
	async function load(){
	await loadWeb3(); //Enable Web3
	window.contract = await loadContract(); //Load Contract
	getFunction(); //Read data from the contract
	}
	load();

	// Connect to MetaMask by clicking connect button. ( https://bit.ly/3qfe1Na )
	const ethereumButton = document.querySelector('.enableEthereumButton');
	const showAccount = document.querySelector('.showAccount');
	ethereumButton.addEventListener('click', () => {
	getAccount();
	});

	// Get the user's wallet address
	async function getAccount() {
	const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
	showAccount.innerHTML = accounts;
	return account = accounts[0];
	}

	// Donate function
	async function donateFunction() {
	$name = document.getElementById('your_name').value;
	$wei = document.getElementById('your_eth').value;
	$eth = $wei * 1000000000000000000; // Change wei to ETH
	$account = await getAccount();
	set = await window.contract.methods.addPerson($name).send(
	{
	from: $account,
	value: $eth
	}
	);
	}
	</script>

	</body>
	</html>