JSFiddle - React, Tailwind, and code Playground

by lechevalierd3on

HTML

<script src="http://api.jslib.dotcloud.com/dev/js/68SLz.js"></script>
<div id="phone">
    <label for="sid">API SID:</label><input id="sid" type="text" placeholder="AC66085c62ee19e781907f5fd4d1e7c2e7"/>
    <label for="from">Your Twilio #:</label><input id="from" type="text" placeholder="+1 415-111-2233"/>
    <label for="to">A verified #:</label><input id="to" type="text" placeholder="+1 415-222-3344"/>
    <textarea id="message" placeholder="What's up ? I'm trying dotCloud JS"></textarea>
    <button id="sms">Send by SMS</button>
    <button id="call">Send as a Phone Call</button>
</div>

CSS

* {font-family:arial;font-size: 18px;}
html, body { height: 100%;}
body { background: url(http://www.twilio.com/packages/company/img/logos_downloadable_round.png) bottom right no-repeat, rgb(242,242,242) ;}
#phone {
  width: 80%;
  margin:auto;
  margin-top: 20px;  
}

#phone textarea {
    width: 80%;
    padding: 10px;
    font-size: 18px;
    display:block;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

#phone label {
    width: 25%;
    margin: 0px;
    margin-bottom: 10px;
    margin-right: 5%;
    padding: 0px;
    display: inline-block;
    text-align: right;
    color: red;
    font-weight: bold;
}
#phone input {
    width: 60%;
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
    margin-left: 10px;
    display: inline-block;
    padding: 2px;
}
#phone input, #phone textarea {
    border-radius: 4px;
    border: 2px solid red;
}

#phone button {
    border-radius: 4px;
    border: 2px solid rgb(142,142,142);
    background-color: rgb(200, 200, 200);
    color: rgb(88,88,88);
}
#phone button:active {
    background-color: rgb(200, 200, 200);
    border-color: red;
    color: red;
}
#sms {
    flaot:left;
    margin-left: 10%;
}
#call {
    float:right;
    margin-right:10%;
}

#phone button:hover {
    color: red;
}

JavaScript

dotcloud.ready(function(){
    $("#call").click(function(){
       var twilio = dotcloud.twilio.init($("#sid").val());
       var call = {
           To: $("#to").val(),
           From: $("#from").val(),
           say: $("#message").val()
       }
            
           twilio.makeCall(call, function(){ alert("Call made !");});            
    });


    $("#sms").click(function(){
       var twilio = dotcloud.twilio.init($("#sid").val());
       var sms = {
           To: $("#to").val(),
           From: $("#from").val(),
           Body: $("#message").val()
       }
            
           twilio.sendSMS(sms, function(){ alert("SMS sended !");});            
    });
});