JSFiddle - React, Tailwind, and code Playground

by djkojb

HTML

<HTML>
    
    <BODY>
        <div class="container">  
        <input type="button" class="btn" id="Button1" value="Execute GET Query">   
<input type="button" class="btn" id="Button2" value="Execute POST Query">                
        <p>Result</p>
        <pre id="result" class="result"></pre>     
       </div>  
    </BODY>
</HTML>

CSS

p {font-size: 20px; font-weight: bold; color: #212326; font-family: adelle,arial; margin-bottom: 10px; margin-top: 10px;}

.string { color: green; }
.number { color: darblue; }
.boolean { color: brown; }
.null { color: magenta; }
.key { color: red; }

.container{padding: 10px;}

.btn{background-color: #71BF49; border-bottom-color: transparent;border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: transparent; border-left-style: solid; border-left-width: 1px; border-right-color: transparent;border-right-style: solid; border-right-width: 1px; border-top-color: transparent;
border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 2px 2px 3px 0px; box-sizing: content-box; color: white;
cursor: pointer; display: inline-block; font-family: arial, helvetica, sans-serif; font-size: 13px; font-weight: bold; height: 30px; letter-spacing: normal; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; overflow-y: visible; padding-bottom: 0px; padding-left: 14px; padding-right: 14px; padding-top: 0px; text-align: center; text-decoration: none; text-indent: 0px; text-shadow: #77B704 1px 1px 0px; text-transform: none;
vertical-align: middle; word-spacing: 0px;
}

.result {width:1600px;outline: 1px solid #ccc; padding: 5px; margin: 5px;background-image:...

JavaScript

// NIK's Fiddle

var appUrl ="http://debitoorqa:7002";

var credentials = {
    email:'[email protected]',
    password:'12qwaszx',
    applicationId: '5B68D504A4D011E1A0BB9F026188709B',
    // applicationId: '51D266CCA4D011E1BB4692026188709B', //Debitoor PE
    edition: 'GB' // ALLOWED VALUES: DE, GB, DK 
};


var token;
var useJson = true;

//var myURL = appUrl +"/api/sales/draftinvoices?token="
var myURL = appUrl +"/api/settings?token="
// var myURL = appUrl +"/api/usersettings?token="
// var myURL = appUrl +"/api/units?token="
//var myURL = appUrl +"/apidoc?token="
// var myURL = appUrl +"/api/texts/SBA?token="
// var myURL = appUrl + "/api/sales/draftinvoices/500577dd03ad3145c800000c/book?updateAutonumber=true&token="
    // Also check: booksend, sales/invoices
    // scenarios: (1) no Autonumber=true -> max invoice number not updated
    // (2) book with smaller number than max number -> max number not updated
// var myURL = appUrl + "/api/sales/draftinvoices/5006599376af28ff0e000037/booksend?updateAutonumber=true&token="  

var postData =
    //Email request for an invoice
{
    //Email of the recipient
    //Required
    recipient:"[email protected]",
    //The subject
    //Required
    subject:"subject -> new",
    //The message
    //Optional
    message:"message",
    //Attachment name
    //Required
    attachmentName:"value"
}
  
//LOGIN
$.ajax({
    url: appUrl + "/api/login",
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify(credentials),
    type: "POST",
    success: function(data){
        token = data.token;     
    }
});


$("#Button1").click(function() {
     getCall(token);
});    

$("#Button2").click(function() {
     postCall(token, postData);
});    
    
// CORE API GET CALL
function getCall(token){
    var targetURL = myURL + token;
        $.ajax({
        url: targetURL,
        dataType: "json",
        contentType: "application/json",
        type: "GET",
        success: function(data){
         ...