JSFiddle - React, Tailwind, and code Playground

by falldeaf

HTML

Please enter your properties abbreviation and hit enter... i.e. (TCPalm.com = 'tcp')<br /><input type="text" id="sn" /><br />

<p>
    <div id="explain"></div>
</p>

<p>
    <a href="" id="bookmarklet">  </a>
</p>

CSS

#bookmarklet {
    background-color:#CCC;
    border:1px dashed gray;
    padding:4px;
}

JavaScript

$('#sn').change(function() {
    $('#explain').html("Great, that's it. Now all you have to do is drage the gray box with the dotted line to your bookmarks toolbar! Then, whenever you're on a story or photo gallery on the live site, click the button that you created, it will take you to the back end. Now, all you have to do is click 'edit story' or 'edit gallery' on the page that loads up.");
    
    $('#bookmarklet').text('Endplay: goto detail page');
    $('#bookmarklet').attr('href', "javascript:location.href='https://scripps-cms.endplay.com/web/"+ $('#sn').val() +"-staging'+window.location.pathname");
});