ottograjeda/gist.5b = randomImage

## gist.5b = randomImage
<!DOCTYPE html>

<!--!

   Filename: gist.5b = randomImage.html

   Built for performance; is responsive & small in file size.
   Above means: all comments+whitespace removed. CS/JS minified.
   Toolbox = Gulp, Plain JavaScript & more. Hosted on Google Cloud.

   Copyright (c) 2018-2019 Otto Grajeda. All rights reserved.
   Contact info: ottograjeda@gmail.com. See additional disclaimers below.

   NOTE 1: Code is NOT Open Source or Production Ready. It is working sample code.
   NOTE 2: For support or code questions search keywords @ Google or Stack Overflow.

   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - -

   THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
   ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
   WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
   DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
   ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
   (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
   LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
   ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
   (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
   SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - -

-->

<html>
<head>
<base target="_top">

<style>
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.box {
  max-width: 100% !important;
  object-fit: cover !important;
  height: auto;
}

.centerBlock {
  margin-left: auto;
  margin-right: auto ;
}

.textSmall {
  font-size: 77%;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  display: block;
}
</style>
</head>

<body>
<center><div id="uxTop" class="textSmall">working...</div></center><!-- text will be removed -->
<div id="output" class="box"></div>
<center><div id="uxBottom" class="textSmall"></div></center><!-- text will be added -->

<script>
var data = google.script.run.withSuccessHandler(function (data) {
  var UX_TOP = 'uxTop';
  var UX_BOTTOM = 'uxBottom';
  var UX_WORKING = 'working...';
  var validDiv1 = document.getElementById(UX_TOP);
  if(validDiv1){
    var text = validDiv1.textContent;
    validDiv1.textContent = '';
  }
  var validDiv2 = document.getElementById('output');
  if(validDiv2){
    var img = document.createElement("img");
    img.className = 'center';
    var imgUrl = '<link_removed>='+data;
    img.src = imgUrl;
    img.onload = function () {
      validDiv2.appendChild(img);
    }
  }
  var validDiv3 = document.getElementById(UX_BOTTOM);
  if(validDiv3){
    var newLink = document.createElement('a');
    newLink.innerHTML = 'Fair Use notice';
    newLink.setAttribute('class', 'textSmall');
    newLink.setAttribute('target', '_blank');
    newLink.setAttribute('href', '<link_removed>');
    document.body.appendChild(newLink);
  }
}).psRandomSet_get();
</script>

</body>
</html>
	<!DOCTYPE html>

	<!--!

	Filename: gist.5b = randomImage.html

	Built for performance; is responsive & small in file size.
	Above means: all comments+whitespace removed. CS/JS minified.
	Toolbox = Gulp, Plain JavaScript & more. Hosted on Google Cloud.

	Copyright (c) 2018-2019 Otto Grajeda. All rights reserved.
	Contact info: ottograjeda@gmail.com. See additional disclaimers below.

	NOTE 1: Code is NOT Open Source or Production Ready. It is working sample code.
	NOTE 2: For support or code questions search keywords @ Google or Stack Overflow.

	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - -

	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
	ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
	WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
	DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
	ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
	(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
	LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
	ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
	(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
	SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - -

	-->

	<html>
	<head>
	<base target="_top">

	<style>
	.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	}

	.box {
	max-width: 100% !important;
	object-fit: cover !important;
	height: auto;
	}

	.centerBlock {
	margin-left: auto;
	margin-right: auto ;
	}

	.textSmall {
	font-size: 77%;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	display: block;
	}
	</style>
	</head>

	<body>
	<center><div id="uxTop" class="textSmall">working...</div></center><!-- text will be removed -->
	<div id="output" class="box"></div>
	<center><div id="uxBottom" class="textSmall"></div></center><!-- text will be added -->

	<script>
	var data = google.script.run.withSuccessHandler(function (data) {
	var UX_TOP = 'uxTop';
	var UX_BOTTOM = 'uxBottom';
	var UX_WORKING = 'working...';
	var validDiv1 = document.getElementById(UX_TOP);
	if(validDiv1){
	var text = validDiv1.textContent;
	validDiv1.textContent = '';
	}
	var validDiv2 = document.getElementById('output');
	if(validDiv2){
	var img = document.createElement("img");
	img.className = 'center';
	var imgUrl = '<link_removed>='+data;
	img.src = imgUrl;
	img.onload = function () {
	validDiv2.appendChild(img);
	}
	}
	var validDiv3 = document.getElementById(UX_BOTTOM);
	if(validDiv3){
	var newLink = document.createElement('a');
	newLink.innerHTML = 'Fair Use notice';
	newLink.setAttribute('class', 'textSmall');
	newLink.setAttribute('target', '_blank');
	newLink.setAttribute('href', '<link_removed>');
	document.body.appendChild(newLink);
	}
	}).psRandomSet_get();
	</script>

	</body>
	</html>