Untitled

<!DOCTYPE html>
<html>
	<head>
		<title>Interval Timer</title>

		<style>
			@font-face {
				font-family: sevenSegment;
				src: url(SevenSegment.ttf);
			}

			h1{
				font-family: sevenSegment;
				font-size: 7em;
				color: #969696;
				line-height: 0%;
			}
			h2{
				font-family: sevenSegment;
				font-size: 5em;
				color: #969696;
				line-height: 0%;
			}

			.container{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50% );
			}

			.button1{
				font-family: sevenSegment;
				font-size: 1em;
				color: #969696;

  				border: none;
			}
		</style>

	</head>
	<body>
		<div class="container">


			<table>
			  <tr>
			  	<td><h2 id="des">WORK</h2></td>
			  </tr>
			  <tr>
			    <td><h1 id="count">00:00:45</h1></th>
			  </tr>
			  <tr>
			  	<td><h2 id="des">REST</h2></td>
			   </tr>
			  <tr>
			    <td><h1 id="count2">00:00:15</h1></td>
			  </tr>
			   <tr>
			   	 <td><h2 id="des">Pause</h2></td>
			   </tr>
			   <tr>
			     <td><h1 id="count3">00:00:25</h1></td>
			   </tr>
			</table>
			<button class="button1" type="button" id="set">set</button>
			<button class="button1" type="button" id="work">Work</button>
			<button class="button1" type="button" id="rest">Rest</button>
			<button class="button1" type="button" id="pause">Pause</button>
			<button class="button1" type="button" id="resetall">reset</button>
			<button class="button1" type="button" id="start">Start</button>
		</div>
		<h3 id="num"> HELLLLOOOOO 0</h3>
		<script type="text/javascript">

			function set(){
				var statusakk = 0;
				id = document.getElementById("num")
				id.innerHTML = statusakk
				ende()
			}
			//work = 0;
			document.querySelector('#set').addEventListener('click', set);
			document.querySelector('#work').addEventListener('click', work);
			document.querySelector('#rest').addEventListener('click', rest);
			document.querySelector('#pause').addEventListener('click', pause);
			document.querySelector('#resetall').addEventListener('click', reset2);
			document.querySelector('#start').addEventListener('click', start);

			var counterwork = 45;
			function work(argument) {
				counterwork = 45;
				var status = 0;
				clearInterval(work);
				work = setInterval( function(){
					counterwork--;

					if (counterwork >= 10) {
						id = document.getElementById("count");
						id.innerHTML = "00:00:" + counterwork + "";
						if (counterwork <= 0) {
						}
					}
					if (counterwork < 10){
						id = document.getElementById("count");
						id.innerHTML = "00:00:0" + counterwork + "";
						if (counterwork <= 0) {
							ende(id, "work", "count");
							counterwork = 45;
							clearInterval(work);
						}
					}

				}, 1000);
			}
			var counterrest = 15;
			function rest(argument) {
				counterrest = 15;
				clearInterval(rest);
				rest = setInterval( function(){
					counterrest--;

					if (counterrest >= 10) {
						id = document.getElementById("count2");
						id.innerHTML = "00:00:" + counterrest + "";
						if (counterrest <= 0) {
						}
					}
					if (counterrest < 10){
						id = document.getElementById("count2");
						id.innerHTML = "00:00:0" + counterrest + "";
						if (counterrest <= 0) {
							ende(id, "rest", "count2");
							counterrest = 15;
							clearInterval(rest);
						}
					}

				}, 1000);
			}

			var counterpause = 25;
			function pause(argument) {
				counterpause = 25;
				clearInterval(pause);
				pause = setInterval( function(){
					counterpause--;

					if (counterpause >= 10) {
						id = document.getElementById("count3");
						id.innerHTML = "00:00:" + counterpause + "";
						if (counterpause <= 0) {
						}
					}
					if (counterpause < 10){
						id = document.getElementById("count3");
						id.innerHTML = "00:00:0" + counterpause + "";
						if (counterpause <= 0) {
							ende(id, "pause", "count3");
							counterpause = 25;
							clearInterval(pause);
						}
					}

				}, 1000);
			}

			var statusakk = 0;
			function ende(id, wer, count){
				//statusakk = statusakk
				id.innerHTML = "00:00:00"
				++statusakk;
				id = document.getElementById("num")
				id.innerHTML = statusakk

				switch(statusakk){
					case 0:
						work();
						break;
					case 1:
						rest();
						break;
					case 2:
						work();
						break;
					case 3:
						rest();
						break;
					case 4:
						work();
						break;
					case 5:
						pause();
						break;
					case 6:
						work();
						break;
					case 7:
						rest();
						break;
					case 8:
						work();
						break;
					case 9:
						rest();
						break;
					case 10:
						work();
						break;
					case 11:
						pause();
						break;
					case 12:
						work();
						break;
					case 13:
						rest();
						break;
					case 14:
						work();
						break;
					case 15:
						rest();
						break;
					case 16:
						work();
						break;
					case 17:
						pause();
						break;
					case 18:
						work();
						break;
					case 19:
						rest();
						break;
					case 20:
						work();
						break;
					case 21:
						rest();
						break;
					case 22:
						work();
						break;
					case 23:
						pause();
						break;
					case 24:
						work();
						break;
					case 25:
						rest();
						break;
					case 26:
						work();
						break;
					case 27:
						rest();
						break;
					case 28:
						work();
						break;
					case 29:
						pause();
						break;
					case 30:
						work();
						break;
					case 31:
						rest();
						break;
					case 32:
						work();
						break;
					case 33:
						rest();
						break;
					case 34:
						work();
						break;
					case 35:
						pause();
						break;
					case 36:
						work();
						break;
					case 37:
						rest();
						break;
					case 38:
						work();
						break;
					case 39:
						rest();
						break;
					case 40:
						work();
						break;
					case 42:
						finito();
						break;
					default:
						break;
				}
				reset(count)
			}

			function reset(count){
				id = document.getElementById(count)
				if (count == "count"){
					clearInterval(work);
					id.innerHTML = "00:00:45"
				}
				else if (count == "count2"){
					clearInterval(rest);
					id.innerHTML = "00:00:15"
				}
				else if (count == "count3"){
					clearInterval(pause);
					id.innerHTML = "00:00:25"
				}
			}
			function reset2(){

				id = document.getElementById("count")
				id.innerHTML = "00:00:45"
				clearInterval(work);
				id = document.getElementById("count2")
				id.innerHTML = "00:00:15"
				clearInterval(rest);
				id = document.getElementById("count3")
				id.innerHTML = "00:00:25"
				clearInterval(pause);
			}
			function finito(){
				id = document.getElementById("count")
				id.innerHTML = "finito"
				clearInterval(work);
				id = document.getElementById("count2")
				id.innerHTML = "finito"
				clearInterval(rest);
				id = document.getElementById("count3")
				id.innerHTML = "finito"
				clearInterval(pause);
			}
		</script>
	</body>
</html>