tvercaut/fortunegenerator.html

## fortunegenerator.html
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>

<!-- Get jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Lato%3A300%2C300italic%2C400%2C400italic%2C700%2C700italic" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Source+Code+Pro:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://www.gstatic.com/_/atari/_/ss/k=atari.vw.-2q1obhhypir7.L.W.O/d=1/rs=AGEqA5mToJSdsBqoIabxpABkzJkjFu3hJg"/>

<!-- specify default font -->
<style>
  html, body, h1, h2, h3, h4, h5, h6 {
    font-family:  Lato, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6667;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin: 4px 8px 4px 4px;
    color: rgba(33,33,33,1);
  }
  .hidden{ display:none;}
</style>

<!-- Style for GitHub Gist to make it smaller -->
<style type="text/css">
  .gist {width:80% !important; margin: auto;}
  .gist-data {max-height: 200px; overflow:auto;}
</style>

</head>
<body>

<script>
// ID of the Google Spreadsheet
var spreadsheetID = "10H24BtpYit27CgnLZpKY_2C6xNn-1kaFuntllu_WGwQ";

// Make sure the spreadsheet is public
var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json";

// check if we are on iOS
var isiOS = navigator.userAgent.match(/iPhone|iPad|iPod/i);

// hide an unnecessary scroll bar when embedded in google site
document.documentElement.style.overflow ="hidden";

// Function to call on click
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
      url:url,
      dataType:"jsonp",
      success:function(data) {
        // console.log(data);
        // read the content of the spreadsheet as a JSON file
        var entry = data.feed.entry;

        // Get the number of rows
        var maxrow = entry.length;

        // Generate random indices for each part
        var index1 = Math.floor(Math.random() * maxrow);
        var index2 = Math.floor(Math.random() * maxrow);
        var index3 = Math.floor(Math.random() * maxrow);

        // Assemble and show the fortune text
        document.getElementById("wishes").innerHTML =
          entry[index1]['gsx$part1']['$t'] + " "
          + entry[index2]['gsx$part2']['$t'] + " "
          + entry[index3]['gsx$part3']['$t'];

        // trying to work around buggy behavior in iOS
        var usedWidth;
        if( isiOS ) {
          deviceWidth = Math.abs(window.orientation) == 90 ? screen.availHeight : screen.availWidth;
          usedWidth = Math.min(deviceWidth-20, window.innerWidth);
          document.getElementById("wishes").style.overflowX = "scroll";
          document.getElementById("wishes").style.maxWidth = usedWidth;
          document.getElementById("wishes").style.width = usedWidth;
          document.documentElement.style.maxWidth = usedWidth;
        };

        // Show the footer
        document.getElementById("notes").style.display = "block";

        // trying to work around buggy behavior in iOS
        if( isiOS ) {
          document.getElementById("notes").style.maxWidth = usedWidth;
        };
      },
    });
  });
});
</script>

<!-- The generator button -->
<button>Get your personal 2019 &quot;fortune&quot;!</button>

<!-- Default text to be replaced -->
<p><div id="wishes">Nothing here yet...</div></p>

<!-- Some notes that are initially hidden -->
<div id="notes" class='hidden'>
  <p align="right" style="margin-right: 10px;">Inspired by Raymond Queneau's <cite><a
  href="https://x42.com/active/queneau.html?l=en"> Hundred Thousand
  Billion Poems</a></cite> but realised with the poetry of a budget
  restaurant's fortune cookie.
  </p>

  <p>And for the geekier of you, the fortune generating code:</p>
  <p><script src="https://gist.github.com/tvercaut/baeab855a03aec6b648483640131530e.js"></script>
  </p>
</div>

</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
	<html>
	<head>

	<!-- Get jquery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<link href="https://fonts.googleapis.com/css?family=Lato%3A300%2C300italic%2C400%2C400italic%2C700%2C700italic" rel="stylesheet" type="text/css"/>
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Source+Code+Pro:400,700" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="https://www.gstatic.com/_/atari/_/ss/k=atari.vw.-2q1obhhypir7.L.W.O/d=1/rs=AGEqA5mToJSdsBqoIabxpABkzJkjFu3hJg"/>

	<!-- specify default font -->
	<style>
	html, body, h1, h2, h3, h4, h5, h6 {
	font-family: Lato, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6667;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	margin: 4px 8px 4px 4px;
	color: rgba(33,33,33,1);
	}
	.hidden{ display:none;}
	</style>

	<!-- Style for GitHub Gist to make it smaller -->
	<style type="text/css">
	.gist {width:80% !important; margin: auto;}
	.gist-data {max-height: 200px; overflow:auto;}
	</style>

	</head>
	<body>

	<script>
	// ID of the Google Spreadsheet
	var spreadsheetID = "10H24BtpYit27CgnLZpKY_2C6xNn-1kaFuntllu_WGwQ";

	// Make sure the spreadsheet is public
	var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json";

	// check if we are on iOS
	var isiOS = navigator.userAgent.match(/iPhone\|iPad\|iPod/i);

	// hide an unnecessary scroll bar when embedded in google site
	document.documentElement.style.overflow ="hidden";

	// Function to call on click
	$(document).ready(function(){
	$("button").click(function(){
	$.ajax({
	url:url,
	dataType:"jsonp",
	success:function(data) {
	// console.log(data);
	// read the content of the spreadsheet as a JSON file
	var entry = data.feed.entry;

	// Get the number of rows
	var maxrow = entry.length;

	// Generate random indices for each part
	var index1 = Math.floor(Math.random() * maxrow);
	var index2 = Math.floor(Math.random() * maxrow);
	var index3 = Math.floor(Math.random() * maxrow);

	// Assemble and show the fortune text
	document.getElementById("wishes").innerHTML =
	entry[index1]['gsx$part1']['$t'] + " "
	+ entry[index2]['gsx$part2']['$t'] + " "
	+ entry[index3]['gsx$part3']['$t'];

	// trying to work around buggy behavior in iOS
	var usedWidth;
	if( isiOS ) {
	deviceWidth = Math.abs(window.orientation) == 90 ? screen.availHeight : screen.availWidth;
	usedWidth = Math.min(deviceWidth-20, window.innerWidth);
	document.getElementById("wishes").style.overflowX = "scroll";
	document.getElementById("wishes").style.maxWidth = usedWidth;
	document.getElementById("wishes").style.width = usedWidth;
	document.documentElement.style.maxWidth = usedWidth;
	};

	// Show the footer
	document.getElementById("notes").style.display = "block";

	// trying to work around buggy behavior in iOS
	if( isiOS ) {
	document.getElementById("notes").style.maxWidth = usedWidth;
	};
	},
	});
	});
	});
	</script>

	<!-- The generator button -->
	<button>Get your personal 2019 "fortune"!</button>

	<!-- Default text to be replaced -->
	<p><div id="wishes">Nothing here yet...</div></p>

	<!-- Some notes that are initially hidden -->
	<div id="notes" class='hidden'>
	<p align="right" style="margin-right: 10px;">Inspired by Raymond Queneau's <cite><a
	href="https://x42.com/active/queneau.html?l=en"> Hundred Thousand
	Billion Poems</a></cite> but realised with the poetry of a budget
	restaurant's fortune cookie.
	</p>

	<p>And for the geekier of you, the fortune generating code:</p>
	<p><script src="https://gist.github.com/tvercaut/baeab855a03aec6b648483640131530e.js"></script>
	</p>
	</div>

	</body>
	</html>