Part A of the Unit 2 Project:

Place an X in an automatically-chosen random location within a box

by Angela Baruth

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>
      <div id="putAnXButton" class="hwbutton">Place the X!</div>
      &nbsp;

<div id="myDiv"></div>

CSS

#myDiv {
    height: 400px;
    
}

}#studentname{
	border:1px solid darkgray;
	padding:.7em;
	background-color: gray;
	width:20%;
}

.namedata{
	color: maroon;
	font-weight:bold;
}

.degoutput{
	width:4em;
	border: 1px solid gray;
	padding: 1px;
}

#putAnX{
	width:600px;
	height:400px;
	border:1px solid black;
}
#theX{
	position:relative;
}
body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

.hwbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #fed897;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fed897;
	box-shadow:inset 0px 1px 0px 0px #fed897;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
	background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
	background-color:#f6b33d;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0;
	border:1px solid...

JavaScript

/* CSCI E-3 Introduction to Web Programming Using Javascript
 * Fall 2016
 *
 * Homework Unit #2
 *Angela Baruth
 *
 */


 /********************************************************************
  *
  * Second problem: Put An X
  *
  ********************************************************************/

var putAnXBtn = document.getElementById("putAnXButton");
putAnXBtn.onclick = function(){

 	// 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 width = theBox.clientWidth;
        var height = theBox.clientHeight;

        /*
         *   Now, here's where you do your magic. The xPosition and yPosition should not be set to zero.
         *
         *   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.
         *   */

        var yPosition = Math.floor(Math.random() * height); // should generate a value between 0 and the height
        var xPosition = Math.floor(Math.random() * width);  //should generate a value between 0 and the width

 	//now we'll get the HTML element where the X goes, fill in the X and set the position of the element.
 	var theXElement = document.getElementById("theX");
        theXElement.innerHTML="X";
        theXElement.style.top = parseInt(yPosition)+'px';
        theXElement.style.left = parseInt(xPosition)+'px';

 }

//var divHeight = document.getElementById("myDiv").style.height;
//console.log(divHeight);