<!-- Polyfills if needed -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<!-- Load the Web Component. Replace the values with your own -->
<script type="module" src="https://unpkg.com/@dwane-vonage/whatever-you-like-keypad@latest/whatever-you-like-keypad.js?module"></script>
<whatever-you-like-keypad no-asterisk no-hash no-display actionText="Start" cancelText="End"></whatever-you-like-keypad>
<input id="displayInput" style="font-size:24px;" />
// Replace whatever-you-like-keypad with value you chose
const keypadRef = document.querySelector("whatever-you-like-keypad");
const displayInputRef = document.querySelector("#displayInput");

keypadRef.addEventListener("digit-added", (event) => {
  console.log("digit-added: ", event.detail.digit);
  displayInputRef.value += event.detail.digit;
});

keypadRef.addEventListener("digits-sent", (event) => {
  let result;
  let numbersToSend = "";
  console.log("digits-sent: ", event.detail.digits);
  numbersToSend = displayInputRef.value;
  if (numbersToSend !== "") {
    result = window.confirm(
      `Dialing ${numbersToSend}... Connect call? Ok for Yes, Cancel for No`
    );
  }
  if (result) {
    console.log("result: ", result);
    keypadRef.createAction();
  }
});

keypadRef.addEventListener("action-ended", (event) => {
  displayInputRef.value = "";
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.