Ball Picker

by Ryan Allison

HTML

<body class="centered">
  <h1>
    Click the button to pull a random ball from the bag
  </h1>
  <h2>
    In this bag there are 5 <span style="color:#CB4335">red</span> balls and 5 <span style="color:#2E86C1">blue</span> balls
  </h2>
  <div>
    <div style="position:relative" id="btnDraw">
      <div class="vc">
        DRAW
      </div>
    </div>
    <div id="divResult" style="display:none">
      <span class="resultTxt">

      </span>
      <div class="circle">

      </div>
    </div>

  </div>
</body>

CSS

body {
  background-color: gray;
  font-family: arial
}

.centered {
  text-align: center
}

#btnDraw {
  display: inline-block;
  height: 60px;
  width: 100px;
  cursor: pointer;
  background-color: darkgrey;
  font-size: large;
  font-weight: bold;
  border-radius: 8px;
  border: 2px solid black;
}

#btnDraw:hover {
  background-color: #787878;
}

#btnDraw:active {
  background-color: #444444;
}

.resultTxt {
  font-size: 30px;
  font-weight: bold;
  display: inline-block;
  width: 100%;
}


.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
}

.vc {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

span {
  text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;
}

JavaScript

var r = {
name: "Red",
color: "#CB4335"
};

var b = {
name: "Blue",
color: "#2E86C1"
};

var g = {
name: "Green",
color: "#229954"
};

var p = {
name: "Purple",
color: "#884EA0"
};

var o = {
name: "Orange",
color: "#D68910"
};

//Create our draw bag
//This is currently coded to accept Red Blue Green Purple Orange
var bag = [
  r,
  r,
  r,
  r,
  r,
  b,
  b,
  b,
  b,
  b,
  p,
  p,
  p,
  p,
  p,
  o,
  o,
  o,
  g
];

//Run this function when the button is clicked
$("#btnDraw").click(function() {
  //Hide button
  //$("#btnDraw").hide();
  
  //Hide Result
  $("#divResult").hide();

  //Generate a random number between 0 and the bag size
  var index = getRandomInt(0, bag.length);

  //Get the item at that position in the bag
  var selection = bag[index];

  //Update Result text
  $(".resultTxt").html(selection.name);

  //Color ball and text
  $(".resultTxt").css("color", selection.color);
  $(".circle").css("background-color", selection.color);

  //Fade in graphic over 1000 milliseconds
  $("#divResult").fadeIn(1000);

});

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
}