index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IPv4 to Binary Converter!</title>
    <script src="./apiCallExample.js"></script>
    <!-- Add some CSS to change client UI -->
    <style>
    h1 {
        color: #FFFFFF;
        font-family: system-ui;
		margin-left: 20px;
        margin-top: 60px;
        }
    body {
        background-color: #222629;
        }
    label {
        color: #ffffff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 22px;
        margin-left: 20px;
        }
    button {
		color: #ffffff;
        background-color: #6a96d8;
        border-color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 600;
        font-size: 20px;
        margin-left: 30px;
        margin-top: 20px;
		width: 150px;
        }
     input {
        color: #292222;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 20px;
        width: 154px;  /* expanded the width on the button */
        }
    </style>
    <script>
        // define the callAPI function that takes the IPv4 number as a parameter
        var callAPI = (ipv4)=>{
            // 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({"ipv4":ipv4});
            // 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(apiCallExample, requestOptions) // the apiCallExample variable is stored in the source file apiCallExample.js, referenced above
            .then(response => response.text())
            .then(final => alert(JSON.parse(final).body))
            .catch(error => console.log('error', error));
        }
    </script>
</head>
<body>
    <h1>IPv4 to Binary Converter</h1>
    <form>
        <form>
            <label>Enter the IPv4 address that you want to convert to binary:</label>
            <input type="text" id="ipv4">
            <!-- set button onClick method to call function we defined passing input values as parameters -->
            <button type="button" onclick='callAPI(document.getElementById("ipv4").value)'>CALCULATE</button>
        </form>
</body>
</html>