RH2/Clock.html

## Clock.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Minute Hour Overlap</title>
    <style media="screen">
      body{
        font-family: sans-serif;
      }
      .total{
        padding:5%;
        text-align: center;
        vertical-align: middle;
        width: auto;
        margin-top: 10px;
        background-color: hsla(200, 20%, 80%, 1);
      }
      #overlapCount{
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <form id="formA" action="index.html" method="post">
      <div>initial hour: <input type="number" name="hourA" placeholder="initial hour"></div>
      <div>initial minute: <input type="number" name="minuteA" placeholder="initial minute">
      <div>duration: <input type="number" name="hourDuration" placeholder="can be a fraction eg: 5.24">
      <button type="button" name="button" id="btnCalculate">calculate</button>
    </form>
    <div class="total">
      <div id="overlapCount">Results will be displayed here</div>
      <div id="instances"></div>
    </div>
    <script type="text/javascript">
        var formA = document.getElementById("formA")
        var button = formA.elements["button"]
        button.addEventListener("click", logic)
        function logic(){ /////////////////////////////////////////
          var hourA = parseInt(formA.elements["hourA"].value)
          var minuteA = formA.elements["minuteA"].value
          var hourDuration = parseFloat(formA.elements["hourDuration"].value)
            // 60/12 = 5
            // overlap will occur once every hour. Formula is: 5*mod(hour,12)+ (5*(mod(hour,12)/12))
            // paraphrased:     (time already covered by minute hand) + 5minute increment*(normalized hour versus half day )
            var lastMinute = (hourDuration*60)%60
            var results = []
            for (var i = 0; i < hourDuration ; i++) {
              var resultHour = hourA + i
              var resultHour = resultHour%13
              var resultMinute = 5*(resultHour)  +  5*((resultHour)/12)
              var willpush = true
              console.log("i:"+ i +" hourDuration-1:"+ (hourDuration-1) +"  && lastMinute:"+lastMinute+" resultMinute:"+resultMinute)
              if((i==hourDuration-1) && (lastMinute<resultMinute)){
                willpush=false
                if(lastMinute==0||lastMinute==60){willpush=true}
              }
              if(i==0&&minuteA>resultMinute){willpush=false}
              console.log(willpush)
              if(willpush == true){
                results.push("<b>"+resultHour+"h:</b>"+ resultMinute+"m")
              }
            }
            display(results.length,results)
        }
        function display(Overlap,results){
          document.getElementById("overlapCount").innerHTML = "<h1>Overlaps: "+Overlap+"</h1>"
          var String
          var instances = document.getElementById("instances")
          instances.innerHTML = ""
          for (var i = 0; i < results.length; i++) {
            instances.innerHTML+=results[i]+"<br/>"
          }
        }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Minute Hour Overlap</title>
	<style media="screen">
	body{
	font-family: sans-serif;
	}
	.total{
	padding:5%;
	text-align: center;
	vertical-align: middle;
	width: auto;
	margin-top: 10px;
	background-color: hsla(200, 20%, 80%, 1);
	}
	#overlapCount{
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<form id="formA" action="index.html" method="post">
	<div>initial hour: <input type="number" name="hourA" placeholder="initial hour"></div>
	<div>initial minute: <input type="number" name="minuteA" placeholder="initial minute">
	<div>duration: <input type="number" name="hourDuration" placeholder="can be a fraction eg: 5.24">
	<button type="button" name="button" id="btnCalculate">calculate</button>
	</form>
	<div class="total">
	<div id="overlapCount">Results will be displayed here</div>
	<div id="instances"></div>
	</div>
	<script type="text/javascript">
	var formA = document.getElementById("formA")
	var button = formA.elements["button"]
	button.addEventListener("click", logic)
	function logic(){ /////////////////////////////////////////
	var hourA = parseInt(formA.elements["hourA"].value)
	var minuteA = formA.elements["minuteA"].value
	var hourDuration = parseFloat(formA.elements["hourDuration"].value)
	// 60/12 = 5
	// overlap will occur once every hour. Formula is: 5mod(hour,12)+ (5(mod(hour,12)/12))
	// paraphrased: (time already covered by minute hand) + 5minute increment*(normalized hour versus half day )
	var lastMinute = (hourDuration*60)%60
	var results = []
	for (var i = 0; i < hourDuration ; i++) {
	var resultHour = hourA + i
	var resultHour = resultHour%13
	var resultMinute = 5(resultHour) + 5((resultHour)/12)
	var willpush = true
	console.log("i:"+ i +" hourDuration-1:"+ (hourDuration-1) +" && lastMinute:"+lastMinute+" resultMinute:"+resultMinute)
	if((i==hourDuration-1) && (lastMinute<resultMinute)){
	willpush=false
	if(lastMinute==0\|\|lastMinute==60){willpush=true}
	}
	if(i==0&&minuteA>resultMinute){willpush=false}
	console.log(willpush)
	if(willpush == true){
	results.push("<b>"+resultHour+"h:</b>"+ resultMinute+"m")
	}
	}
	display(results.length,results)
	}
	function display(Overlap,results){
	document.getElementById("overlapCount").innerHTML = "<h1>Overlaps: "+Overlap+"</h1>"
	var String
	var instances = document.getElementById("instances")
	instances.innerHTML = ""
	for (var i = 0; i < results.length; i++) {
	instances.innerHTML+=results[i]+"<br/>"
	}
	}
	</script>
	</body>
	</html>