JSFiddle - React, Tailwind, and code Playground

by Ivo Tanev

HTML

<!-- Logger div -->
<div id="log"><h4>Logs:</h4></div>

<!-- HTML Code start here -->

<input id="imageid" type="text" />
<button>Send</button>

CSS

#log {display: none;background-color: black;font-family: "Courier New", Courier, monospace;color: white;margin-top: 60px;}#log h4 {text-align: center;}#log p {padding: 0 5px;}hr {border-color: rgb(63, 63, 63);}

/*CSS starting here ----> */

JavaScript

// Just Looger inside the iframe.
var Logger = {count: 1,log: function(obj) {var msg = JSON.stringify(obj) || '-Cannot show this obj-';var $line = $('<p>').text(this.count + '. ' + msg);$('#log').show().append($line).append($('<hr>'));this.count++;}};function log(obj) {Logger.log(obj);}

// Code starting here --->

var orientation = 'left';


var urlLocation;

$('button').on('click', function() {
    var value = $('#imageid').val();
    
    if (!isNaN(value)) {
       urlLocation = "http://www.url.com/rest/v1/cms/story/id/" + value + "/orientation/" + orientation;
    }
    else {
        urlLocation = "http://www.url.com/rest/v1/cms/story/guid/" + value + "/orientation/" + orientation;
    }
    
    log(urlLocation);
});