JSFiddle - React, Tailwind, and code Playground
HTML
<p id="msg" style="color:red;display:block">Loading...
<br/>
</p>
<div class="container">
<p>Display list of
<select id="option">
<option value="moderators">moderators</option>
<option value="contributors">contributors</option>
<option value="banned">banned</option>
<option value="wikimoderators">wikimoderators</option>
<option value="wikicontributors">wikicontributors</option>
<option value="wikibanned">wikibanned</option>
</select>
</p>
<input id="subreddit-name" type="text" placeholder="subreddit name...">
<button id="getdata-button" disabled type="button">Get list</button>
<br>
<textarea id="mods" rows="1" cols="20" style='font-family:Courier New, Courier, monospace'></textarea>
</div>
JavaScript
$(document).ready(function () {
$('#subreddit-name')
.keyup(function (event) {
if (event.keyCode == 13) $('#getdata-button').click();
})
.click(function () {
$(this).select();
});
$('#mods')
.focus(function () {
$(this).select();
})
.mouseup(function () {
$(this).mouseup = null;
return false;
});
$('#getdata-button')
.click(function () {
if (!$('#subreddit-name').val()) {
$('#subreddit-name').focus();
return;
};
url = '//api.reddit.com/r/';
url += $('#subreddit-name').val().trim();
url += '/about/' + $('#option').val();
$('#mods').html("");
$('#msg').html("Loading... (If this takes too long, it probably failed)").show();
$.getJSON(url, function (data) {
$('#msg').html("").hide();
var values = data.data.children.sort(function (a, b) {
ax = a.name.toLowerCase();
bx = b.name.toLowerCase();
return ((ax > bx) ? 1 : (ax < bx) ? -1 : 0);
});
largest = 0;
$.each(data.data.children, function (index, child) {
$('#mods').append(child.name).append("\n");
largest = Math.max(largest, child.name.length);
});
$('#mods')
.attr('cols', largest + 1)
.attr('rows', data.data.children.length + 1);
$('#mods').focus();
});
})
.removeAttr("disabled");
$('#msg')
.html("")
.hide();
});