LI Chat Link Generator

Use at your own risk :p

HTML

<link rel="stylesheet" href="http://inuitcss.com/inuit.min.css">
<h3>
Legendary Insight [<a class="header_lnk" href="https://wiki.guildwars2.com/wiki/Legendary_Insight" target="_blank">W</a>]
</h3> 

<form name="myForm" action="demo_form.asp"
onsubmit="return myFunction()" method="post">
    <fieldset>
        <legend>Set Quantity</legend>
        <ul class=form-fields>
            
            <li>
                <label for=first-name>Input</label>

                <input type=number class=text-input id=quantity min=1 max=255 required autofocus>
<input type="submit" value="Submit">

            </li>
            
            <li>
                <label for=last-name>Output (chat code)</label>
                <input type=text class=text-input id=result class="js-copytextarea">
                &ensp;<a id="copy_link" href="javascript:void(0);">Copy </a>
</li>
<li>
<p id="answer">
    <span id="success">Copied</span>
    <span id="failure">Oops, unable to copy</span>
<br>

</p>
            </li>
            

        </ul>
            
    </fieldset>
    
    </form>

CSS

/**
 * These demo styles sit on top of inuit.css
 * github.com/csswizardry/inuit.css/blob/master/inuit.css/base/_forms.scss
 */

html{
    font:1em/1.5 Georgia, serif;
    padding:5%;
    background-color:#fff;
    color:#333;
}
h3{
color:slategray;
}
h3 a{
color: lightgrey;
text-decoration: none;
}
label,
.label{
    font:bold 0.75em/2 sans-serif;
}
p#answer{
color: darkslategray;
}

p#answer span {display:none;}

JavaScript

var timeout = 0;
$('#copy_link').click(function(){



    clearTimeout(timeout);
$('p#answer span').hide();

document.getElementById("result").select();

 try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
if (successful) {
$('p#answer span#success').fadeIn(1500);
    timeout = setTimeout(function(){$('p#answer span#success').fadeOut(800)},2400);
}
else{
  $('p#answer span#failure').fadeIn(1500);
    timeout = setTimeout(function(){$('p#answer span#failure').fadeOut(800)},2400);
}

  } catch (err) {
    $('p#answer span#failure').fadeIn(1500);
    timeout = setTimeout(function(){$('p#answer span#failure').fadeOut(800)},2400);
  }

document.getElementById("result").blur();

    
    
});


function jsfunction(){

document.getElementById("result").select();

 try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    alert('Oops, unable to copy');
  }

document.getElementById("result").blur();
}

function myFunction() {
    var x, text;

    // Get the value of the input field with id="numb"
    x = document.getElementById("quantity").value;
    // If x is Not a Number or less than one or greater than 10

x = Number(x).toString(16);
x = x.length < 2? "0" + x : x;



document.getElementById("result").value = HexToChatCode("02" + x + "f62d0100");

return false;
}

  function HexToChatCode(pStr) {
        tempstr = '';
        for (b = 0; b < pStr.length; b = b + 2) {
            tempstr += String.fromCharCode(parseInt(pStr.substr(b, 2), 16));
        }
        return "[&"+ btoa(tempstr) + "]";
    }