Distribution Selection

This supports a software dev. class for businesspeople that you can find here: https://www.alexandercowan.com/making-html-manageable And a case you can find here: https://www.alexandercowan.com/making-html-manageable

by Alex Cowan

HTML

<div class="title">
  <h3>Choose Your Assumption Variable Distribution</h3>
</div>


<div id="distribution-list">

  <div class="distribution" id="triangle">
    <input type="image" src="http://drive.google.com/uc?export=view&id=1ylaNsKR9Sz37ZBHBAEPnFOMFM3Ah9KyJ" alt="Triangle Distribution">
    <div class="overlay">
      <p><strong>Triangle Distribution</strong><br><em>Inputs Needed:</em><br>Mode<br>Min<br>Max</p>
    </div>
  </div>

  <div class="distribution"  id="normal">
    <input type=image src="http://drive.google.com/uc?export=view&id=1iixE1CfTm_ZcqGAYitv5KdzhJyP8NDo9" alt="Normal Distribution">
    <div class="overlay">
      <p><span class="bold">Normal Distribution</span><br><em>Inputs Needed:</em><br>Mean<br>Standard Deviation</p>
    </div>
  </div>

  <div class="distribution" id="uniform">
    <input type=image src="http://drive.google.com/uc?export=view&id=1CTJ4DtnCn0vpp5_06XVW2COCdnp0f-q0" alt="Uniform Distribution" >
    <div class="overlay">
      <p><strong>Uniform Distribution</strong><br><em>Inputs Needed:</em><br>Min<br>Max</p>
    </div>
  </div>

  <div class="distribution" id="poisson">
    <input type=image src="http://drive.google.com/uc?export=view&id=16155VYQ3AUJYnEhVXbc_YpEsdvHsWAFO" alt="Poisson Distribution" >
    <div class="overlay">
      <p><strong>Poisson Distribution</strong><br><em>Inputs Needed:</em><br>Mean<br>Standard Deviation</p>
    </div>
  </div>

</div>


<div class="boxes">

  <div id="uniform-box">
    <label for="umin">Min:</label>
    <input type = "number" id="umin" name="umin">
    
    <label for="umax">Max:</label>
    <input type = "number" id="umax" name="umax">
  </div>
  
  <div id="triangle-box">
    <label for="tmin">Min:</label>
    <input type = "number" id="tmin" name="tmin">
    
    <label for="tmax">Max:</label>
    <input type = "number" id="tmax" name="tmax">

    <label for="tmode">Mode:</label>
    <input type = "number" id="tmode" name="tmode">
  </div>
  
  <div id="normal-box">
   ...

CSS

.title {
	background-color: #ff9900;
	font-family: Proxima Nova,helvetica neue,helvetica,sans-serif;
	font-weight: bold;
	color: #000000;
	height: 30px;
	margin: 0px;
	padding: 5px;
  align-items: center;
  display: flex;
}

.distribution {
  margin: 2px;
  padding: 20px 20px;
  float: left;
  border-style: solid;
  border-color: #808285;
  border-width: 2px;
  width: 150px;
  height: 200px;
  line-height: 200px;
	display: table-cell;
  position: relative;
}

.distribution img {
  height: 150px;
	vertical-align: middle;
  width: 150px;
}
.distribution input {
  height: 150px;
	vertical-align: middle;
  width: 150px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: #f4f4f4;
	display: inline-table;
}

.distribution:hover .overlay {
  opacity: 0.75;
}

#distribution-list:hover > .distribution:not(:hover) {
  opacity:.3
}




p {
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  line-height: 1;

}

.bold {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  line-height: 1;
	overflow: scroll;
  font-weight: bold;
  
}


.distribution p {
	vertical-align: middle;
	text-align: center;
  color: black;
	display: table-cell;
	font-size: 80%;
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

#uniform-box {
  margin: 2px;
  padding: 20px 20px;
  float: left;
  border-style: solid;
  border-color: #808285;
  border-width: 2px;
  width: 150px;
  height: 200px;
  line-height: 200px;
  position: relative;
  display: none;
}
 
 #triangle-box {
  margin: 2px;
  padding: 20px 20px;
  float: left;
  border-style: solid;
  border-color: #808285;
  border-width: 2px;
  width: 150px;
  height: 200px;
  /*line-height: 200px;*/
  position: relative;
  display: none;
}
  #normal-box {
  margin: 2px;
  padding: 20px 20px;
  float: left;
  border-style: solid;
  border-color: #808285;
  border-width: 2px;
  width:...

JavaScript

$("#normal").on("click", function() {
  $("#uniform-box").hide();
  $("#poisson-box").hide();
  $("#triangle-box").hide();
  $("#normal-box").show();
  console.log("success you clicked normal distribution");
});


$("#uniform").on("click", function() {
  $("#poisson-box").hide();
  $("#triangle-box").hide();
  $("#normal-box").hide();
  $("#uniform-box").show();
  console.log("success you clicked uniform distribution");
});


$("#poisson").on("click", function() {
  $("#triangle-box").hide();
  $("#normal-box").hide();
  $("#uniform-box").hide();
  $("#poisson-box").show();
  console.log("success you clicked poisson distribution");
});


$("#triangle").on("click", function() {
  $("#normal-box").hide();
  $("#uniform-box").hide();
  $("#poisson-box").hide();
  $("#triangle-box").show();
  console.log("success you clicked triangle distribution");
});