index.html

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
-->
<title> Functional Reactive Programming </title>
<style>
button:focus{
  outline:none !important;
}
</style>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script
src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.53/Bacon.min.js">
</script>


<hr size="3">

<div class="container" style="text-align:center">
  <h2> Functional Reactive Programming </h2>
  <h4> Some Fun Buttons by <a href="http://gallettilance.org">Lance Galletti</a> </h4>
</div>

<hr size="3">

<br>

<div class="container-fluid">

<div class="container" style="text-align:center">
  <h2> Simple counter </h2>
</div>

<br>
<br>

<div class="row">
<div class="col-md-12">
<center>
<p id="theCounts1" class="h1">00</p>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<div class="row">
<div class="col-md-4">
<center>
<button
 id="up"
 type="button"
 class="btn btn-default btn-lg"
>UP</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
id="down" 
type="button" class="btn btn-default btn-lg"
 >Down</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="reset"
 type="button"
 class="btn btn-default btn-lg"
>Reset</button>
</center>
</div>
</div><!--class-row-->

<hr size="3">


<br>
<br>
<br>

<div class="container" style="text-align:center">
  <h2> Square counter </h2>
</div>

<br>
<br>

<div class="row">
<div class="col-md-12">
<center>
<p id="theCounts6" class="h1">00</p>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<div class="row">
<div class="col-md-4">
<center>
<button
 id="sqNext"
 type="button"
 class="btn btn-default btn-lg"
>Next Square</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="sqPrev"
 type="button"
 class="btn btn-default btn-lg"
>Prev Square</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="resetSq"
 type="button"
 class="btn btn-default btn-lg"
>Reset</button>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<br>
<br>
<br>


<div class="container" style="text-align:center">
  <h2> Factorial counter </h2>
</div>

<br>
<br>

<div class="row">
<div class="col-md-12">
<center>
<p id="theCounts2" class="h1">00</p>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<div class="row">
<div class="col-md-4">
<center>
<button
 id="factNext"
 type="button"
 class="btn btn-default btn-lg"
>Next Fact</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="factPrev"
 type="button"
 class="btn btn-default btn-lg"
>Prev Fact</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="resetFact"
 type="button"
 class="btn btn-default btn-lg"
>Reset</button>
</center>
</div>
</div><!--class-row-->

<hr size="3">

<br>
<br>
<br>

<div class="container" style="text-align:center">
  <h2> Fibonnacci counter </h2>
</div>

<br>
<br>

<div class="row">
<div class="col-md-12">
<center>
<p id="theCounts3" class="h1">00</p>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<div class="row">
<div class="col-md-4">
<center>
<button
 id="fibNext"
 type="button"
 class="btn btn-default btn-lg"
>Next Fib</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="fibPrev"
 type="button"
 class="btn btn-default btn-lg"
>Prev Fib</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="resetFib"
 type="button"
 class="btn btn-default btn-lg"
>Reset</button>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<br>
<br>
<br>

<div class="container" style="text-align:center">
  <h2> Fold left counter on N </h2>
</div>

<br>
<br>

<div class="row">
<div class="col-md-3">
  <center>
    <p> sum </p>
    <p id="theCounts_sum" class="h1">00</p>
  </center>
</div>
<div class="col-md-3">
  <center>
    <p> product </p>
    <p id="theCounts_mult" class="h1">00</p>
  </center>
</div>
<div class="col-md-3">
  <center>
    <p> Quotient </p>
    <p id="theCounts_div" class="h1">00</p>
  </center>
</div>
<div class="col-md-3">
  <center>
    <p> Difference </p>
    <p id="theCounts_diff" class="h1">00</p>
  </center>
</div>
</div><!--class-row-->

<hr size="2">

<div class="row">
<div class="col-md-4">
<center>
<button
 id="foldNext"
 type="button"
 class="btn btn-default btn-lg"
>Next Fold</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="foldPrev"
 type="button"
 class="btn btn-default btn-lg"
>Prev Fold</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="resetFold"
 type="button"
 class="btn btn-default btn-lg"
>Reset</button>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<br>
<br>
<br>

<div class="container" style="text-align:center">
  <h2> Rolling average on N </h2>
</div>

<br>
<br>

<div class="row">
<div class="col-md-12">
<center>
<p id="theCounts5" class="h1">00</p>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<div class="row">
<div class="col-md-4">
<center>
<button
 id="rollNext_m"
 type="button"
 class="btn btn-default btn-lg"
>Next Mean</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="rollPrev_m"
 type="button"
 class="btn btn-default btn-lg"
>Prev Mean</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="resetRoll_m"
 type="button"
 class="btn btn-default btn-lg"
>Reset</button>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<br>
<br>
<br>

<div class="container" style="text-align:center">
  <h2> Fold left2 counter on (N, N) </h2>
</div>

<br>
<br>

<div class="row">
<div class="col-md-6">
  <center>
    <p> sum of Squares </p>
    <p id="theCounts_sumSq" class="h1">00</p>
  </center>
</div>
<div class="col-md-6">
  <center>
    <p> sum of 1/Squares </p>
    <p id="theCounts_sumInvSq" class="h1">00</p>
  </center>
</div>
</div><!--class-row-->

<hr size="2">

<div class="row">
<div class="col-md-4">
<center>
<button
 id="fold2Next"
 type="button"
 class="btn btn-default btn-lg"
>Next Fold2</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="fold2Prev"
 type="button"
 class="btn btn-default btn-lg"
>Prev Fold2</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="resetFold2"
 type="button"
 class="btn btn-default btn-lg"
>Reset</button>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<br>
<br>
<br>

<div class="container" style="text-align:center">
  <h2> Pairs of integers Counter </h2>
</div>

<br>
<br>

<div class="row">
<div class="col-md-12">
<center>
<p id="theCounts_pairs" class="h1">00</p>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<div class="row">
<div class="col-md-4">
<center>
<button
 id="pairsNext"
 type="button"
 class="btn btn-default btn-lg"
>Next Pairs</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="pairsPrev"
 type="button"
 class="btn btn-default btn-lg"
>Prev Pairs</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="resetPairs"
 type="button"
 class="btn btn-default btn-lg"
>Reset</button>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<br>
<br>
<br>

<div class="container" style="text-align:center">
  <h2> Triples of integers Counter </h2>
</div>

<br>
<br>

<div class="row">
<div class="col-md-12">
<center>
<p id="theCounts_triples" class="h1">00</p>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<div class="row">
<div class="col-md-4">
<center>
<button
 id="triplesNext"
 type="button"
 class="btn btn-default btn-lg"
>Next Triples</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="triplesPrev"
 type="button"
 class="btn btn-default btn-lg"
>Prev Triples</button>
</center>
</div>
<div class="col-md-4">
<center>
<button
 id="resetTriples"
 type="button"
 class="btn btn-default btn-lg"
>Reset</button>
</center>
</div>
</div><!--class-row-->

<hr size="2">


<br>
<br>
<br>

<div class="container" style="text-align:center">
  <h2> FRP Worm Game </h2>
</div>

<br>
<br>

<div class="row">
<div class="col-md-12">
<center>
  <canvas id="theCanvas" width="200" height="200"
	  style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
  </canvas>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<div class="row">
    <div class="col-md-3">
      <center>
	<button
	   id="upWorm"
	   type="button"
	   class="btn btn-default btn-lg"
	   >Up</button>
      </center>
    </div>
    <div class="col-md-2">
      <center>
	<button
	   id="leftWorm"
	   type="button"
	   class="btn btn-default btn-lg"
	   >left</button>
      </center>
    </div>
    <div class="col-md-2">
      <center>
	<button
	   id="resetWorm"
	   type="button"
	   class="btn btn-default btn-lg"
	   >Reset</button>
      </center>
    </div>
    <div class="col-md-2">
      <center>
	<button
	   id="rightWorm"
	   type="button"
	   class="btn btn-default btn-lg"
	   >right</button>
      </center>
    </div>
    <div class="col-md-3">
      <center>
	<button
	   id="downWorm"
	   type="button"
	   class="btn btn-default btn-lg"
	   >Down</button>
      </center>
    </div>
  </div>
</div><!--class-row-->

<hr size="2">

<br>
<br>
<br>

<div class="container" style="text-align:center">
  <h2> Prime counter </h2>
</div>

<br>
<br>

<div class="row">
<div class="col-md-12">
<center>
<p id="thePrimes" class="h1">00</p>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<div class="row">
<div class="col-md-12">
<center>
<button
 id="nextPrime"
 type="button"
 class="btn btn-default btn-lg"
>Next Prime</button>
</center>
</div>
</div><!--class-row-->

<hr size="2">


<br>
<br>
<br>

<div class="container" style="text-align:center">
  <h2> Permutation counter </h2>
</div>

<br>
<br>

<div class="row">
<div class="col-md-12">
<center>
<p id="thePerms" class="h1">00</p>
</center>
</div>
</div><!--class-row-->

<hr size="2">

<div class="row">
<div class="col-md-12">
  <center>
    <b>Size of the set: </b> 
<input
   id="intmax"
   type="text"
   value="5"
   size="1"
   maxlength="2"
>
</center>
</div>
</div>

<hr size="2">

<div class="row">
  <div class="col-md-6">
<center>
<button
 id="set"
 type="button"
   class="btn btn-default btn-lg"
   onclick="reset_action()"
>Reset</button>
</center>
</div>
<div class="col-md-6">
<center>
<button
 id="nextPerm"
 type="button"
 class="btn btn-default btn-lg"
>Next Permutation</button>
</center>
</div>
</div><!--class-row-->

<hr size="2">


</div>

<script
 src="./JS/theCounter_bacon.js">
</script>

</body>
</html>