DevloperHS/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <!--Adding Meta Data For Browser-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>Mood Dairy</title>
</head>

<body>
    <div>
        <h1>Mood Dairy</h1>
        <p>Here you can SET or GET mood:</p>

        <!--Create input form to enter mood-->
        <label for="mood">Input Your Mood:</label> <br />
        <input type="text" id="mood" />

    <!--Adding buttons to set and get mood-->
    <button onclick="getMood()">Get Mood</button>
    <button onclick="setMood()">Set Mood</button>

    </div>

    <!--Adding functionality to interact with smart contract - MoodDairy-->

    <!--Importing ether.js library-->
    <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js" type="application/javascript"></script>
    </script>

    <!--Declaring Contract Address, ABI, ETH Account Connect - Request and asynchnous fn -->
    <script>

        // Add provider - ropsten
        const provider = new ethers.providers.Web3Provider(
        window.ethereum,
        "ropsten"
        );

        //Contract Address & ABI
        const MoodContractAddress = "0xb74C9881649672333d5418eAf337C9A177eB3F97";
        const MoodContractABI = [
            {
                "inputs": [
                    {
                        "internalType": "string",
                        "name": "_mood",
                        "type": "string"
                    }
                ],
                "name": "setMood",
                "outputs": [],
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "getMood",
                "outputs": [
                    {
                        "internalType": "string",
                        "name": "",
                        "type": "string"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            }
        ];

        //Declare constant
        let MoodContract;
        let signer;

        //Adding wallet popup support
        provider.send("eth_requestAccounts", []).then(() => {
            provider.listAccounts().then(function (accounts) {
                signer = provider.getSigner(accounts[0]);
                MoodContract = new ethers.Contract(
                    MoodContractAddress,
                    MoodContractABI,
                    signer
                );
            });
        });

        // async fn to get mood
        async function getMood() {
            const getMoodPromise = MoodContract.getMood();
            const Mood = await getMoodPromise;
            console.log(Mood);
        }

        // async fn to set mood
        async function setMood() {
            const mood = document.getElementById("mood").value;
            const setMoodPromise = MoodContract.setMood(mood);
            await setMoodPromise;
        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<!--Adding Meta Data For Browser-->
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="main.css">
	<title>Mood Dairy</title>
	</head>

	<body>
	<div>
	<h1>Mood Dairy</h1>
	<p>Here you can SET or GET mood:</p>

	<!--Create input form to enter mood-->
	<label for="mood">Input Your Mood:</label> <br />
	<input type="text" id="mood" />

	<!--Adding buttons to set and get mood-->
	<button onclick="getMood()">Get Mood</button>
	<button onclick="setMood()">Set Mood</button>

	</div>

	<!--Adding functionality to interact with smart contract - MoodDairy-->

	<!--Importing ether.js library-->
	<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js" type="application/javascript"></script>
	</script>

	<!--Declaring Contract Address, ABI, ETH Account Connect - Request and asynchnous fn -->
	<script>

	// Add provider - ropsten
	const provider = new ethers.providers.Web3Provider(
	window.ethereum,
	"ropsten"
	);

	//Contract Address & ABI
	const MoodContractAddress = "0xb74C9881649672333d5418eAf337C9A177eB3F97";
	const MoodContractABI = [
	{
	"inputs": [
	{
	"internalType": "string",
	"name": "_mood",
	"type": "string"
	}
	],
	"name": "setMood",
	"outputs": [],
	"stateMutability": "nonpayable",
	"type": "function"
	},
	{
	"inputs": [],
	"name": "getMood",
	"outputs": [
	{
	"internalType": "string",
	"name": "",
	"type": "string"
	}
	],
	"stateMutability": "view",
	"type": "function"
	}
	];

	//Declare constant
	let MoodContract;
	let signer;

	//Adding wallet popup support
	provider.send("eth_requestAccounts", []).then(() => {
	provider.listAccounts().then(function (accounts) {
	signer = provider.getSigner(accounts[0]);
	MoodContract = new ethers.Contract(
	MoodContractAddress,
	MoodContractABI,
	signer
	);
	});
	});

	// async fn to get mood
	async function getMood() {
	const getMoodPromise = MoodContract.getMood();
	const Mood = await getMoodPromise;
	console.log(Mood);
	}

	// async fn to set mood
	async function setMood() {
	const mood = document.getElementById("mood").value;
	const setMoodPromise = MoodContract.setMood(mood);
	await setMoodPromise;
	}
	</script>
	</body>

	</html>