JSFiddle - React, Tailwind, and code Playground

by totoromaum

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Find the buried treasure!</title>
  </head>

  <body>
    <h1 id="heading">Find the buried treasure!</h1>
    <img id="map" width=400 height=400 src="http://nostarch.com/images/treasuremap.png">
    <p id="distance"></p>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <script>
      // Get a random number from 0 to size
      var getRandomNumber = function(size) {
        return Math.floor(Math.random() * size);
      };
      // Calculate distance between click event and target
      var getDistance = function(event, target) {
        var diffX = event.offsetX - target.x;
        var diffY = event.offsetY - target.y;
        return Math.sqrt((diffX * diffX) + (diffY * diffY));
      };
      // Get a string representing the distance
      var getDistanceHint = function(distance) {
        if (distance < 10) {
          return "Boiling hot!";
        } else if (distance < 20) {
          return "Really hot";
        } else if (distance < 40) {
          return "Hot";
        } else if (distance < 80) {
          return "Warm";
        } else if (distance < 160) {
          return "Cold";
        } else if (distance < 320) {
          return "Really cold";
        } else {
          return "Freezing!";
        }
      };
      // Set up our variables
      var width = 400;
      var height = 400;
      var clicks = 0;
      // Create a random target location
      var target = {
        x: getRandomNumber(width),
        y: getRandomNumber(height)
      };
      // Add a click handler to the img element
      $("#map").click(function(event) {
            clicks++;
            // Get distance between click event and target
            var distance = getDistance(event, target);
            // Convert distance to a hint
            var distanceHint = getDistanceHint(distance);
            // Update the #distance element with the new hint
            $("#distance").text(distanceHint);
            //...