Sowmayjain/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MTC Dapp</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
    <div class="container">

        <h1>Coursetro Instructor</h1>

        <h2 id="instructor"></h2>

        <label for="name" class="col-lg-2 control-label">Instructor Name</label>
        <input id="name" type="text">

        <label for="name" class="col-lg-2 control-label">Instructor Age</label>
        <input id="age" type="text">

        <button id="button">Update Instructor</button>


    </div>

    <script src="../node_modules/web3/dist/web3.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script>

        if (typeof web3 !== 'undefined') {
            web3 = new Web3(web3.currentProvider);
        } else {
            alert('No Metamask');
        }

        web3.eth.defaultAccount = web3.eth.accounts[0];

        var CoursetroContract = web3.eth.contract([
            {
                "constant": true,
                "inputs": [],
                "name": "getFullArr",
                "outputs": [
                    {
                        "name": "",
                        "type": "address[]"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [
                    {
                        "name": "",
                        "type": "address"
                    }
                ],
                "name": "Members",
                "outputs": [
                    {
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [
                    {
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "name": "ApplyArr",
                "outputs": [
                    {
                        "name": "",
                        "type": "address"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": false,
                "inputs": [],
                "name": "apply",
                "outputs": [
                    {
                        "name": "",
                        "type": "bool"
                    }
                ],
                "payable": false,
                "stateMutability": "nonpayable",
                "type": "function"
            }
        ]);

        var Coursetro = CoursetroContract.at('0x4d69C9879492FC0C69d5457bc5dFE830acC0d16b');

        Coursetro.getInstructor(function(err, res) {
            if (!err) {
                $("#instructor").html(res[0]+' ('+res[1]+' years old)');
            } else {
                console.error(err);
            }
        });

        $("#button").click(function() {
            Coursetro.setInstructor($("#name").val(), $("#age").val(), (err, res) => {
                if (err) {
                    $("#loader").hide();
                }
            });
        });

    </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>MTC Dapp</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	</head>

	<body>
	<div class="container">

	<h1>Coursetro Instructor</h1>

	<h2 id="instructor"></h2>

	<label for="name" class="col-lg-2 control-label">Instructor Name</label>
	<input id="name" type="text">

	<label for="name" class="col-lg-2 control-label">Instructor Age</label>
	<input id="age" type="text">

	<button id="button">Update Instructor</button>


	</div>

	<script src="../node_modules/web3/dist/web3.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

	<script>

	if (typeof web3 !== 'undefined') {
	web3 = new Web3(web3.currentProvider);
	} else {
	alert('No Metamask');
	}

	web3.eth.defaultAccount = web3.eth.accounts[0];

	var CoursetroContract = web3.eth.contract([
	{
	"constant": true,
	"inputs": [],
	"name": "getFullArr",
	"outputs": [
	{
	"name": "",
	"type": "address[]"
	}
	],
	"payable": false,
	"stateMutability": "view",
	"type": "function"
	},
	{
	"constant": true,
	"inputs": [
	{
	"name": "",
	"type": "address"
	}
	],
	"name": "Members",
	"outputs": [
	{
	"name": "",
	"type": "uint256"
	}
	],
	"payable": false,
	"stateMutability": "view",
	"type": "function"
	},
	{
	"constant": true,
	"inputs": [
	{
	"name": "",
	"type": "uint256"
	}
	],
	"name": "ApplyArr",
	"outputs": [
	{
	"name": "",
	"type": "address"
	}
	],
	"payable": false,
	"stateMutability": "view",
	"type": "function"
	},
	{
	"constant": false,
	"inputs": [],
	"name": "apply",
	"outputs": [
	{
	"name": "",
	"type": "bool"
	}
	],
	"payable": false,
	"stateMutability": "nonpayable",
	"type": "function"
	}
	]);

	var Coursetro = CoursetroContract.at('0x4d69C9879492FC0C69d5457bc5dFE830acC0d16b');

	Coursetro.getInstructor(function(err, res) {
	if (!err) {
	$("#instructor").html(res[0]+' ('+res[1]+' years old)');
	} else {
	console.error(err);
	}
	});

	$("#button").click(function() {
	Coursetro.setInstructor($("#name").val(), $("#age").val(), (err, res) => {
	if (err) {
	$("#loader").hide();
	}
	});
	});

	</script>

	</body>
	</html>