percybolmer · February 11, 2021 07:32
diff --git a/AWS - Programming With Percy Full HTML code.html b/AWS - Programming With Percy Full HTML code.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="UTF-8">
    <title>Programming with Percy</title>

    <!-- Add some CSS to change client UI -->
    <style>
    body {
        background-color: #232F3E;
        }
    h2 {
        color: #FF9900;
        margin: 20px 20px 20px 20px;
    }
    textarea {
        margin: 20px 20px 20px 20px;
    }
    label, button {
        color: #FF9900;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 40px;
        }
     input {
        color: #232F3E;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 20px;
        }
    </style>

    <script>
        // define the callAPI function that takes a first name and last name as parameters
        var callAPI = (firstName,lastName)=>{
            // instantiate a headers object
            var myHeaders = new Headers();
            // add content type header to object
            myHeaders.append("Content-Type", "application/json");
            // using built in JSON utility package turn object to string and store in a variable
            var raw = JSON.stringify({"name":firstName,"sirname":lastName});
            // create a JSON object with parameters for API call and store in a variable
            var requestOptions = {
                method: 'POST',
                headers: myHeaders,
                body: raw,
                redirect: 'follow'
            };
            // make API call with parameters and use promises to get response
            fetch("https://m9xoypuff2.execute-api.eu-north-1.amazonaws.com/development", requestOptions)
            .then(response => response.text())
            .then(result => document.getElementById('greets').value(JSON.parse(result).body)
            .catch(error => console.log('error', error));
        }
    </script>
 </head>

 <body>
    <div class="content">
    <h2> Hello, your using AWS Amplify to host this via a GitHub Repo! </h2>
    <form>
        <label>First Name :</label>
        <input type="text" id="fName">
        <label>Last Name :</label>
        <input type="text" id="lName">
        <!-- set button onClick method to call function we defined passing input values as parameters -->
        <button type="button" onclick="callAPI(document.getElementById('fName').value,document.getElementById('lName').value)">Call API</button>
    </form>

    <textarea name="greets" id="greets" rows="4" cols="50" placeholder="Greetings will be displayed here">

    </textarea>

    </div>
    


 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Programming with Percy</title>

	<!-- Add some CSS to change client UI -->
	<style>
	body {
	background-color: #232F3E;
	}
	h2 {
	color: #FF9900;
	margin: 20px 20px 20px 20px;
	}
	textarea {
	margin: 20px 20px 20px 20px;
	}
	label, button {
	color: #FF9900;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	margin-left: 40px;
	}
	input {
	color: #232F3E;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	margin-left: 20px;
	}
	</style>

	<script>
	// define the callAPI function that takes a first name and last name as parameters
	var callAPI = (firstName,lastName)=>{
	// instantiate a headers object
	var myHeaders = new Headers();
	// add content type header to object
	myHeaders.append("Content-Type", "application/json");
	// using built in JSON utility package turn object to string and store in a variable
	var raw = JSON.stringify({"name":firstName,"sirname":lastName});
	// create a JSON object with parameters for API call and store in a variable
	var requestOptions = {
	method: 'POST',
	headers: myHeaders,
	body: raw,
	redirect: 'follow'
	};
	// make API call with parameters and use promises to get response
	fetch("https://m9xoypuff2.execute-api.eu-north-1.amazonaws.com/development", requestOptions)
	.then(response => response.text())
	.then(result => document.getElementById('greets').value(JSON.parse(result).body)
	.catch(error => console.log('error', error));
	}
	</script>
	</head>

	<body>
	<div class="content">
	<h2> Hello, your using AWS Amplify to host this via a GitHub Repo! </h2>
	<form>
	<label>First Name :</label>
	<input type="text" id="fName">
	<label>Last Name :</label>
	<input type="text" id="lName">
	<!-- set button onClick method to call function we defined passing input values as parameters -->
	<button type="button" onclick="callAPI(document.getElementById('fName').value,document.getElementById('lName').value)">Call API</button>
	</form>

	<textarea name="greets" id="greets" rows="4" cols="50" placeholder="Greetings will be displayed here">

	</textarea>

	</div>



	</body>
	</html>