UNPKG

@cocreate/twilio

Version:

A simple twilio component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.

78 lines (70 loc) 2.6 kB
<!DOCTYPE html> <html lang="en"> <head> <title>Twilio</title> <style type="text/css"> .template { display: none; } .btnsubmit { margin: 25px; border-radius: 10px; font-size: 18px; font-family: "Cookie", cursive; cursor: pointer; } </style> <link rel="manifest" href="/manifest.webmanifest" /> </head> <body> <h1>Twilio Fetch Usages:-</h1> <form> accountId : <input twilio="twilioGetUsage.accountId" required /> authToken : <input twilio="twilioGetUsage.authToken" required /> Page size : <input placeholder="10" twilio="twilioGetUsage.pagesize" required /> <br /> <button class="btnsubmit" actions="twilioGetUsage"> Twilio Fetch Usages </button> </form> <div template_id="twilioGetUsage"> <h4>Twilio Fetch Usages :-</h4> <div class="template margin:10px" value="{{data.id}}" render="data"> <div style=" display: flex; align-items: center; width: 100%; flex-wrap: wrap; "> accountSid : - <h4 class="margin-right:10px" value="{{data.accountSid}}"></h4> category : - <h4 class="margin-right:10px" value=" {{data.category}} "></h4> price : - <h4 class="margin-right:10px" value=" {{data.price}} ({{data.priceUnit}}) "></h4> usage :- <h4 class="margin-right:10px" value=" {{data.usage}} ({{data.usageUnit}}) "></h4> count : - <h4 class="margin-right:10px" value=" {{data.count}} ({{data.countUnit}}) "></h4> </div> <hr /> </div> </div> </body> <!--CoCreateJS--> <!--<script src="https://CoCreate.app/dist/CoCreate.js" ></script>--> <!--CoCreate Plugins--> <script src="../dist/CoCreate-twilio.js"></script> </html>