https://moc-dapp.surge.sh/bundle.js

1let abi = [{
2        inputs: [],
3        payable: false,
4        stateMutability: "nonpayable",
5        type: "constructor"
6    },
7    {
8        constant: false,
9        inputs: [{
10            internalType: "uint256",
11            name: "x",
12            type: "uint256"
13        }],
14        name: "vote",
15        outputs: [{
16            internalType: "uint256",
17            name: "",
18            type: "uint256"
19        }],
20        payable: false,
21        stateMutability: "nonpayable",
22        type: "function"
23    },
24    {
25        constant: true,
26        inputs: [{
27            internalType: "uint256",
28            name: "x",
29            type: "uint256"
30        }],
31        name: "getItem",
32        outputs: [{
33            internalType: "uint256",
34            name: "",
35            type: "uint256"
36        }],
37        payable: false,
38        stateMutability: "view",
39        type: "function"
40    }
41];
42
43let web3;
44let moc;
45
46const initWeb3 = () => {
47    return new Promise((resolve, reject) => {
48        if (typeof window.ethereum !== "undefined") {
49            const web3 = new Web3(window.ethereum);
50            window.ethereum
51                .enable()
52                .then(() => {
53                    resolve(new Web3(window.ethereum));
54                })
55                .catch(e => {
56                    reject(e);
57                });
58            return;
59        }
60        if (typeof window.web3 !== "undefined") {
61            return resolve(new Web3(window.web3.currentProvider));
62        }
63        reject();
64        resolve(new Web3("http://localhost:9545"));
65    });
66};
67

68const initContract = () => {
69    return new web3.eth.Contract(
70        abi,
71        `0x4a25Dc113f29Cd54e83C5008e1A8EA907e708B3B`
72    );
73};
74
75let accounts = [];
76
77// document.getElementById('landing').style.display = 'none'
78// let contractAddress = "0x4a25Dc113f29Cd54e83C5008e1A8EA907e708B3B";
79// let web3 = new Web3(window.ethereum);
80// let moc = new web3.eth.Contract(contractABI, contractAddress);
81document.getElementById("landing").style.display = "none";
82document.getElementById("img").style.display = "none";
83document.addEventListener("DOMContentLoaded", () => {
84    initWeb3()
85        .then(_web3 => {
86            web3 = _web3;
87            moc = initContract();
88            refresh();
89            document.getElementById("landing").style.display = "flex";
90            document.getElementById("cover").style.display = "none";
91
92            web3.eth.getAccounts().then(_accounts => {
93                accounts = _accounts;
94                // console.log(accounts)
95            });
96        })
97        .catch(e => {
98            document.getElementById("cover").style.display = "none";
99            document.getElementById("img").style.display = "block";
100            document.getElementById("warn").innerHTML =
101                "Please install MetaMask or any Wallet Client";
102
103            // console.log(e.message)
104        });
105});
106
107const refresh = () => {
108    for (let i = 0; i < 3; i++)
109        moc.methods
110        .getItem(i)
111        .call()
112        .then(result => {
113            document.getElementById(`v${i}`).innerHTML = result;
114        });
115};
116
117function vote(e) {
118    document.getElementById("warn").innerHTML =
119        `Transactions started awating confirmation
120        <div class = "d-flex justify-content-center">
121            <div class = "spinner-border" role = "status">
122            <span class = "sr-only" >

122 Loading... </span> </div> </div>
123        
124        `;
125    moc.methods
126        .vote(e.id[4])
127        .send({
128            from: accounts[0]
129        })
130        .then(result => {
131            console.log(result);
132            document.getElementById("warn").innerHTML = `Transactions Success!`
133            refresh();
134        })
135        .catch(err => {
136            document.getElementById("warn").innerHTML = `Last Transactions failed`
137        });
138}