h4xnoodle/shittytimers.html

## shittytimers.html
<html>
  <head>
  <style rel='stylesheet'>
    body {
      text-align: center;
      padding: 130px 0 0 0;
    }
    div {
      text-align: center;
      font-family: 'Roboto', sans-serif;
      border:2px solid #ddd;
      display:inline-block;
      padding:20px;
      margin:0 30px;
      background:#fbfbfb;
    }
    .timer h2 {
      font-size: 40px;
      font-weight:400;
      margin:10px 0;
    }
    .timer span {
      font-size: 50px;
      display: block;
      padding: 10px 0;
    }
    .timer button {
      padding: 10px 20px;
      border-collapse: collapse;
      font-size: 40px;
      color: #444;
    }

    .water {
      color: #0B486B;
    }

    .exercises {
      color: #3B8686;
    }
  </style>

  </head>
  <body>
    <div class='timer water'>
      <h2>Water</h2>
      <span id='water'></span>
      <button id='water-reset'>Drank some</button>
    </div>
    <div class='timer exercises'>
      <h2>Exercises</h2>
      <span id='exercises'></span>
      <button id='exercises-reset'>Did them</button>
    </div>
    <script>
      function countdown(element, resetbtn, seconds) {
        var ogseconds = seconds;
        var left = seconds;
        display();

        var timer = setInterval(tick, 1000);

        resetbtn.addEventListener('click', function() {
          reset();
        });

        function reset() {
          left = ogseconds;
          display();
        }

        function tick() {
          left--;
          display();
        }

        function display() {
          if (left <= 0) {
            element.innerHTML = "Now!!!";
            return;
          }

          var d = "";
          var h = String(Math.floor(left/3600));
          var m = String(Math.floor((left-h*3600)/60));
          var s = String(left - h*3600 - m*60);
          d = h.padStart(2, "0") + ":" + m.padStart(2, "0") + ":" + s.padStart(2, "0");
          element.innerHTML = d;
        }
      }

      function exercises() {
        var time = document.getElementById('exercises');
        var btn = document.getElementById('exercises-reset');
        var every = 2*60*60;
        countdown(time, btn, every);
      }

      function water() {
        var time = document.getElementById('water');
        var btn = document.getElementById('water-reset');
        var every = 30*60;
        countdown(time, btn, every);
      }

      water();
      exercises();
    </script>
  </body>
</html>
	<html>
	<head>
	<style rel='stylesheet'>
	body {
	text-align: center;
	padding: 130px 0 0 0;
	}
	div {
	text-align: center;
	font-family: 'Roboto', sans-serif;
	border:2px solid #ddd;
	display:inline-block;
	padding:20px;
	margin:0 30px;
	background:#fbfbfb;
	}
	.timer h2 {
	font-size: 40px;
	font-weight:400;
	margin:10px 0;
	}
	.timer span {
	font-size: 50px;
	display: block;
	padding: 10px 0;
	}
	.timer button {
	padding: 10px 20px;
	border-collapse: collapse;
	font-size: 40px;
	color: #444;
	}

	.water {
	color: #0B486B;
	}

	.exercises {
	color: #3B8686;
	}
	</style>

	</head>
	<body>
	<div class='timer water'>
	<h2>Water</h2>
	<span id='water'></span>
	<button id='water-reset'>Drank some</button>
	</div>
	<div class='timer exercises'>
	<h2>Exercises</h2>
	<span id='exercises'></span>
	<button id='exercises-reset'>Did them</button>
	</div>
	<script>
	function countdown(element, resetbtn, seconds) {
	var ogseconds = seconds;
	var left = seconds;
	display();

	var timer = setInterval(tick, 1000);

	resetbtn.addEventListener('click', function() {
	reset();
	});

	function reset() {
	left = ogseconds;
	display();
	}

	function tick() {
	left--;
	display();
	}

	function display() {
	if (left <= 0) {
	element.innerHTML = "Now!!!";
	return;
	}

	var d = "";
	var h = String(Math.floor(left/3600));
	var m = String(Math.floor((left-h*3600)/60));
	var s = String(left - h3600 - m60);
	d = h.padStart(2, "0") + ":" + m.padStart(2, "0") + ":" + s.padStart(2, "0");
	element.innerHTML = d;
	}
	}

	function exercises() {
	var time = document.getElementById('exercises');
	var btn = document.getElementById('exercises-reset');
	var every = 26060;
	countdown(time, btn, every);
	}

	function water() {
	var time = document.getElementById('water');
	var btn = document.getElementById('water-reset');
	var every = 30*60;
	countdown(time, btn, every);
	}

	water();
	exercises();
	</script>
	</body>
	</html>