JSFiddle - React, Tailwind, and code Playground

by kinduff

HTML

<h3>1. Add content</h3>
<textarea id="pr_content">
#### What this PR do?
#### Where should the reviewer start?
#### How should this be manually tested?
#### Any background context you want to provide?
#### What are the relevant tickets?
#### Screenshots (if appropriate)
#### Questions
</textarea>
<h3>2. Click to Generate</h3>
<button id="generate">Generate</button>
<h3>3. Drag and Drop to your Bookmarks</h3>
<a href="#" id="bookmarklet" title="PR Template">PR Template</a>
<p class="author">by kinduff</p>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    padding: 25px;
    font-family: 'Verdana';
}
h3 {
    font-size: 12pt;
    font-weight: 300;
    padding: 15px 0 5px;
}
textarea {
    width: 100%;
    height: 150px;
}
#generate {
    width: 100%;
}
#bookmarklet {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    background-color: #2c3e50;
    padding: 15px 0;
    border-radius: 50px;
}
.author {
    font-size: 8pt;
    text-align: right;
}

JavaScript

var pr_content = $("#pr_content"),
	generate_btn = $("#generate"),
    bookmarklet = $("#bookmarklet");

function generate_bookmarklet() {
    var pr = pr_content.val().replace(/\n/g, "\\n");
    var template = "javascript:(function(){var e=document.getElementById('pull_request_body');if(e){e.value+='"+pr+"';}})();";
    return template;
}

generate_btn.on("click", function(){
    var bookmarklet_result = generate_bookmarklet();
    bookmarklet.attr('href', bookmarklet_result);
});

$(document).ready(function(){
    bookmarklet.attr('href', generate_bookmarklet());
});