<div class="container py-5 d-flex justify-content-center">
  <div class="card bshttp-card">
    <div class="card-body p-4">
      <label class="form-label small fw-semibold">Enter a status code</label>
      <input type="text" class="form-control mb-3" id="bshttpInput" placeholder="e.g. 404" maxlength="3">

      <div class="d-flex align-items-center gap-2 mb-4" id="bshttpResult">
        <span class="text-muted small">Type a 3-digit code above.</span>
      </div>

      <p class="small fw-semibold text-muted mb-2">Common codes</p>
      <div class="d-flex flex-wrap gap-2" id="bshttpCommon"></div>
    </div>
  </div>
</div>

.bshttp-card { width: 380px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bshttp-common-chip { cursor: pointer; border: none; }

const FAMILIES = [
  { test: c => c >= 200 && c < 300, tone: 'success', label: 'Success' },
  { test: c => c >= 300 && c < 400, tone: 'info', label: 'Redirect' },
  { test: c => c >= 400 && c < 500, tone: 'warning', label: 'Client Error' },
  { test: c => c >= 500 && c < 600, tone: 'danger', label: 'Server Error' },
];

const COMMON = [
  [200, 'OK'], [201, 'Created'], [301, 'Moved'], [304, 'Not Modified'],
  [400, 'Bad Request'], [401, 'Unauthorized'], [403, 'Forbidden'],
  [404, 'Not Found'], [429, 'Too Many Requests'], [500, 'Server Error'], [503, 'Unavailable'],
];

const input = document.getElementById('bshttpInput');
const result = document.getElementById('bshttpResult');
const common = document.getElementById('bshttpCommon');

function familyFor(code) {
  return FAMILIES.find(f => f.test(code));
}

function render(code) {
  if (!code || code < 100 || code > 599) {
    result.innerHTML = '<span class="text-muted small">Type a 3-digit code above.</span>';
    return;
  }
  const family = familyFor(code);
  result.innerHTML = '<span class="badge text-bg-' + family.tone + ' fs-6">' + code + '</span>' +
    '<span class="small text-muted">' + family.label + '</span>';
}

input.addEventListener('input', () => {
  const digits = input.value.replace(/[^0-9]/g, '');
  input.value = digits;
  render(digits ? Number(digits) : null);
});

common.innerHTML = COMMON.map(([code, label]) => {
  const tone = familyFor(code).tone;
  return '<button type="button" class="btn btn-sm btn-outline-secondary bshttp-common-chip" data-code="' + code + '">' +
    '<span class="badge text-bg-' + tone + ' me-1">' + code + '</span>' + label + '</button>';
}).join('');

common.addEventListener('click', e => {
  const btn = e.target.closest('.bshttp-common-chip');
  if (!btn) return;
  input.value = btn.dataset.code;
  render(Number(btn.dataset.code));
});