JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col border-bottom border-dark text-center">
      <span class="h1">Number Game</span>
    </div>
  </div>
  <div class="row justify-contents-between mt-2">
    <div class="col random-number h2">

    </div>
    <div class="col">
    <input type="numeric" id="number-guess" class="form-control bg-primary text-white">
    </div>
  </div>
  <div class="row">
  <div class="col">
  <input type="button" name="checkNumber" id="checkNumber" value="Check">
  </div>
  </div>
</div>

JavaScript

$(function() {
  let rand = Math.floor(Math.random() * 11);

  $(".random-number").text(rand);

  $("#checkNumber").click(function(e) {
    if ($("#number-guess").val() == rand) {
      alert('Correct!');
    } else {
      alert('Incorrect!');
    }
  });
});