enricop89/index.html

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

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="nexmoClient.js"></script>
</head>

<body>
    <div class="content-fluid">
        <h1>Call Phone from App</h1>
        <div class="row" style="margin: 10px;">
            <form id="call-phone-form" class="col-xs-12">
                <div class="input-group">
                    <input id="phone-number-input" type="text" name="phonenumber" value="" class="form-control"
                        placeholder="Recipient's phone number">
                </div>
                <button class="btn btn-primary" value="Call" name="call"> Call </button>
                <button class="btn btn-primary" value="hangup" name="hangup"> hangup </button>
            </form>
        </div>
    </div>
    </div>

</body>


<script>
    // const USER_JWT = "PASTE YOUR JWT HERE";
    const USER_JWT = "";
    const callPhoneForm = document.getElementById("call-phone-form");
    const callButton = callPhoneForm.children.call;
    const hangUpButton = callPhoneForm.children.hangup;
    let currentCall = null;
    var NXClient = new NexmoClient({ debug: true })
        .login(USER_JWT)
        .then(app => {
            callButton.addEventListener("click", event => {
                event.preventDefault();
                let number = document.getElementById('phone-number-input').value;
                if (!number){
                    return;
                }
                app.callServer(number).then((call) => {
                    console.log('Call Server:', call);
                    currentCall = call;
                }).catch((err) => {
                    console.log('Error:', err);
                });
                app.on("member:call", (member, call) => {
                    console.log("call ", call);
                    hangupButton.addEventListener("click", () =>    {
                        call.hangUp();
                    });
                });
            });
        })
        .catch(console.error);
</script>

</body>

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

	<head>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script src="nexmoClient.js"></script>
	</head>

	<body>
	<div class="content-fluid">
	<h1>Call Phone from App</h1>
	<div class="row" style="margin: 10px;">
	<form id="call-phone-form" class="col-xs-12">
	<div class="input-group">
	<input id="phone-number-input" type="text" name="phonenumber" value="" class="form-control"
	placeholder="Recipient's phone number">
	</div>
	<button class="btn btn-primary" value="Call" name="call"> Call </button>
	<button class="btn btn-primary" value="hangup" name="hangup"> hangup </button>
	</form>
	</div>
	</div>
	</div>

	</body>


	<script>
	// const USER_JWT = "PASTE YOUR JWT HERE";
	const USER_JWT = "";
	const callPhoneForm = document.getElementById("call-phone-form");
	const callButton = callPhoneForm.children.call;
	const hangUpButton = callPhoneForm.children.hangup;
	let currentCall = null;
	var NXClient = new NexmoClient({ debug: true })
	.login(USER_JWT)
	.then(app => {
	callButton.addEventListener("click", event => {
	event.preventDefault();
	let number = document.getElementById('phone-number-input').value;
	if (!number){
	return;
	}
	app.callServer(number).then((call) => {
	console.log('Call Server:', call);
	currentCall = call;
	}).catch((err) => {
	console.log('Error:', err);
	});
	app.on("member:call", (member, call) => {
	console.log("call ", call);
	hangupButton.addEventListener("click", () => {
	call.hangUp();
	});
	});
	});
	})
	.catch(console.error);
	</script>

	</body>

	</html>