SijmenHuizenga/clock.html

## clock.html
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <title>Clock Test</title>

    <script src="code.js"></script>
</head>
<body>
    <div class="container">

        <div class="starter-template">
            <Br>
            <div style="outline: 1px solid orange; width: 30px; float: left" id="hours">1</div>
            <div style="outline: 1px solid orange; width: 30px; float: left; margin-left: 10px" id="minutes">1</div>
        </div>

    </div>

</body>
</html>

## code.js
"use strict";
class NumberDisplay{

    constructor(value, limit){
        this.value = value;
        this.limit = limit;
    }

    increment(){
        if(this.value++ >= this.limit)
            this.value = 0;
    };
    getValue (){
        return this.value;
    };
    getDisplayValue(){
        return this.value + "";
    }
}

class ClockDisplay {

    constructor(){
        this.displayString = "";
        this.hours = new NumberDisplay(9, 23);
        this.miniutes = new NumberDisplay(50, 59);
    }

    timeTick() {
        this.miniutes.increment();
        if(this.miniutes.getValue() == 0)
            this.hours.increment();
    };
    updateDisplay(){
        $("#hours").html(this.hours.getDisplayValue());
        $("#minutes").html(this.miniutes.getDisplayValue());
    }
}

$(document).ready(function(){
    var clock = new ClockDisplay();

    window.setInterval(function(){
        clock.timeTick();
        clock.updateDisplay();
    }, 100);
});
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

	<title>Clock Test</title>

	<script src="code.js"></script>
	</head>
	<body>
	<div class="container">

	<div class="starter-template">
	<Br>
	<div style="outline: 1px solid orange; width: 30px; float: left" id="hours">1</div>
	<div style="outline: 1px solid orange; width: 30px; float: left; margin-left: 10px" id="minutes">1</div>
	</div>

	</div>

	</body>
	</html>
	"use strict";
	class NumberDisplay{

	constructor(value, limit){
	this.value = value;
	this.limit = limit;
	}

	increment(){
	if(this.value++ >= this.limit)
	this.value = 0;
	};
	getValue (){
	return this.value;
	};
	getDisplayValue(){
	return this.value + "";
	}
	}

	class ClockDisplay {

	constructor(){
	this.displayString = "";
	this.hours = new NumberDisplay(9, 23);
	this.miniutes = new NumberDisplay(50, 59);
	}

	timeTick() {
	this.miniutes.increment();
	if(this.miniutes.getValue() == 0)
	this.hours.increment();
	};
	updateDisplay(){
	$("#hours").html(this.hours.getDisplayValue());
	$("#minutes").html(this.miniutes.getDisplayValue());
	}
	}

	$(document).ready(function(){
	var clock = new ClockDisplay();

	window.setInterval(function(){
	clock.timeTick();
	clock.updateDisplay();
	}, 100);
	});