JSFiddle - React, Tailwind, and code Playground

by Jordan Marechal

HTML

<h4>2) Place an X in an automatically-chosen random location within a box</h4>
      <p>This is an exercise in using Javascript's random number generator,
        along with some simple arithmetic, to place an X in a box in a randomly
        chosen location. Applications of this would include placing a game
        character on the game board, or setting stars or snowflakes in a
        graphic.</p>
      <p>Ultimately, your task is to calculate a random x and y coordinate for
        the location of the 'X'.&nbsp; You'll have to do some math to get the
        random number, generated by a function which returns a floating-point
        number between 0 and 1, to map to the width and height of the containing DIV.
        js/hw2PutAnX.js contains an empty function where you will add your code.</p>
      <p> </p>
      <div id="putAnX">
        <div id="theX">&nbsp;</div>
      </div>
      <button id="putAnXButton" >Place the X!</button>
      &nbsp;

JavaScript

var putAnXBtn; {
document.getElementById("putAnXButton");
     
 	// get a reference to the box
        var theBox = document.getElementById("putAnX");
        
        // now get the width and height of the box - see the clientWidth and clientHeight documentation at http://docs.webplatform.org/wiki/dom/HTMLElement
       // var resultY = element.clientHeight;
           
    var height = theBox.clientHeight;
     element.clientHeight = value;

var clientWidth =0; 

document.getElementById("clientWidth").onload = function() {

     
     function (clientWidth) = theBox.clientWidth; 
        //var resultX = element.clientWidth;
            element.clientWidth = value;
}
	

  
        //function onclick(e);{
           // var resultY= document.getElementById("putAnX").innerHTML = Math.random();
            //xPosition.innerHTML = Math.floor((Math.random() * 100) + 0);
       // }
        // *   Now, here's where you do your magic. The xPosition and yPosition should not be set to zero.
       //  function onclick(e); {
           // var resultX = document.getElementById("putAnX").innerHTML = Math.random();
           // yPosition.innerHTML = Math.floor((Math.random() * 100) + 0);
      //  }
        // *   Use the Math.random() function to get a number between
       //  *   0 and 1, then use some math to convert that to a number between 0 and the width. This is your x position.
        // *
        // *   Do the same thing to generate a number between 0 and the height: this is your y position.
       //  *   */
 //function onclick(e) {
        var yPosition = document.getElementById("putAnX").innerHTML = Math.random();
            yPosition.innerHTML = Math.floor((Math.random() * 100) + 0);// should generate a value between 0 and the height
     
        var xPosition = document.getElementById("putAnX").innerHTML = Math.random();
            xPosition.innerHTML = Math.floor((Math.random() * 100) + 0);  //should generate a value between 0 and the width
 
 	//now...