JSFiddle - React, Tailwind, and code Playground

by agapetos

HTML

<textarea id="text" rows="3" autofocus>8028 - [project] Some mundane task</textarea>
<div>
  <div id="radio-box">
    <input type="radio" name="type" value="bug" checked="checked" /> bug <br>
    <input type="radio" name="type" value="task" /> task <br>
    <input type="radio" name="type" value="feature" /> feature <br>
  </div>
  <button id="btn">Parse</button>
</div>
<section>
  <div>Create | file-name:</div>
  <textarea id="ta-create-name" rows="3"></textarea>
  <div>Create | commit-message:</div>
  <textarea id="ta-create-commit" rows="3"></textarea>
  <div>Merge | commit-message:</div>
  <textarea id="ta-merge-commit" rows="3"></textarea>
</section>
<div id="debug"></div>

CSS

html {
  font-family: arial, sans-serif;
}
textarea {
  width: 100%;
}
button {
  width: 100px;
  padding: 20px 30px;
  float: left;
}
input {
  margin-left: 30px;
}
section {
  width: 100%;
  overflow: hidden;
}

#radio-box {
  float: left;
  width: 150px;
  height: 80px;
}

JavaScript

$(document).on('click', '#btn', function () {
	var type = $("input[name='type']:checked").val();
  if(!type) return;
  var input = $('#text').val();
  
  var create_name, create_commit, merge_commit;
//  create_name = type + '_' + issue + '-' + text1;
  create_commit = 'Created branch for ' + type + ' #' + input

	$('#ta-create-commit').val(create_commit);
});