j0nimost/index.html

## index.html
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="app.js"></script>
    <script src="sampler.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>
    <div id="content"></div>
    <div id="trials"><br />
    </div>
    <button id="pause" click="pause()">Pause</button>
    <button id="resume" hidden="hidden">Resume</button>
    <button id="stop" click="stop()">Stop</button>
</body>
</html>

## main.ts
class Main {
    element: HTMLElement;
    span: HTMLElement;
    count_down: HTMLElement
    timerToken: number;
    timeGap: number = 1000;


    single_words: string[];
    half_sentences: string[];
    d_time: number = 15;

    setter: number;
    running: boolean = true;

    myEl: HTMLElement = document.getElementById('trials');


    //initialize arrays
    constructor(element: HTMLElement) {
        this.element = element;
        this.element.innerHTML += "The time is:   ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();

        this.count_down = document.createElement('span');
        this.myEl.appendChild(this.count_down);

        this.single_words = ["House", "Girl", "Boy", "Apostrophe", "Demacation", "Intrude", "Kamikaze", "Damselfly", "Lustrous", "Lutetium",
            "Lurid", "Perspire", "Persnickety", "Personality", "Perspective", "Random", "Co-exist", "Coconut", "Comatose",
            "Coltish", "Avatar", "Agape", "Armada", "Armistice", "Chevron", "Chauvinism", "Zealous", "Perseverance", "Perpetrate", "Pernicious", "Homo-Sapien", "Praxis"];

        this.half_sentences = ["Cats can climb trees.", "What is a quoit?", "A range is a series of mountanious hills.", "How are you?", "Courage is a cowadly dog!", "Linzy has a new phone.",
            "Apple pie is really good", "Are this slow in typing?", "I grew up in New Hampshire.", "Note the details please", "Eagle Owl is the biggest in the Owl species", "Dogs can't eat chocolate.",
            "Mark is a witty student.", "It's quite cold outside.", "Lava is a molten rock, which is very hot", "You can do better"];
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerHTML = new Date().toLocaleTimeString(), 100);

        if (this.running == true) {

            this.setter = setInterval(() => this.downtime_Count(), 1000);
            //this.downtime_Count();
        }
    }

    stop() {
        var stop = document.getElementById("stop");
        stop.addEventListener("click", () => {

            clearTimeout(this.timerToken);
            clearInterval(this.setter);
        }, true);
    }

    downtime_Count() {
        if (this.d_time === 0) {
            clearInterval(this.setter);
            this.running = false;
        }
        else {
            this.d_time--;
            this.myEl.innerHTML = "Number:  " + this.d_time;
        }
    }


    pause() {
        if (this.running === true) {
            var pause = document.getElementById("pause");
            pause.addEventListener("click", () => {
                pause.hidden;
                var resume = document.getElementById("resume");
                resume.style.display = 'block';
                this.running = false;
            }, true);
        }
    }

    resume() {
        if (this.running === false) {
            var resume = document.getElementById("resume");
            resume.addEventListener("click", () => {
                resume.hidden;
                var pause = document.getElementById("pause");
                pause.style.display = 'block';
                this.running = true;
            }, true);
        }
    }

}

window.onload = () => {
    var el = document.getElementById('content');
    var div_el = document.getElementById('trials');
    var time = document.getElementById('time');
    var greeter = new Main(el);

    greeter.start();

};
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>TypeScript HTML App</title>
	<link rel="stylesheet" href="app.css" type="text/css" />
	<script src="app.js"></script>
	<script src="sampler.js"></script>
	</head>
	<body>
	<h1>TypeScript HTML App</h1>
	<div id="content"></div>
	<div id="trials"><br />
	</div>
	<button id="pause" click="pause()">Pause</button>
	<button id="resume" hidden="hidden">Resume</button>
	<button id="stop" click="stop()">Stop</button>
	</body>
	</html>
	class Main {
	element: HTMLElement;
	span: HTMLElement;
	count_down: HTMLElement
	timerToken: number;
	timeGap: number = 1000;


	single_words: string[];
	half_sentences: string[];
	d_time: number = 15;

	setter: number;
	running: boolean = true;

	myEl: HTMLElement = document.getElementById('trials');


	//initialize arrays
	constructor(element: HTMLElement) {
	this.element = element;
	this.element.innerHTML += "The time is: ";
	this.span = document.createElement('span');
	this.element.appendChild(this.span);
	this.span.innerText = new Date().toUTCString();

	this.count_down = document.createElement('span');
	this.myEl.appendChild(this.count_down);

	this.single_words = ["House", "Girl", "Boy", "Apostrophe", "Demacation", "Intrude", "Kamikaze", "Damselfly", "Lustrous", "Lutetium",
	"Lurid", "Perspire", "Persnickety", "Personality", "Perspective", "Random", "Co-exist", "Coconut", "Comatose",
	"Coltish", "Avatar", "Agape", "Armada", "Armistice", "Chevron", "Chauvinism", "Zealous", "Perseverance", "Perpetrate", "Pernicious", "Homo-Sapien", "Praxis"];

	this.half_sentences = ["Cats can climb trees.", "What is a quoit?", "A range is a series of mountanious hills.", "How are you?", "Courage is a cowadly dog!", "Linzy has a new phone.",
	"Apple pie is really good", "Are this slow in typing?", "I grew up in New Hampshire.", "Note the details please", "Eagle Owl is the biggest in the Owl species", "Dogs can't eat chocolate.",
	"Mark is a witty student.", "It's quite cold outside.", "Lava is a molten rock, which is very hot", "You can do better"];
	}

	start() {
	this.timerToken = setInterval(() => this.span.innerHTML = new Date().toLocaleTimeString(), 100);

	if (this.running == true) {

	this.setter = setInterval(() => this.downtime_Count(), 1000);
	//this.downtime_Count();
	}
	}

	stop() {
	var stop = document.getElementById("stop");
	stop.addEventListener("click", () => {

	clearTimeout(this.timerToken);
	clearInterval(this.setter);
	}, true);
	}

	downtime_Count() {
	if (this.d_time === 0) {
	clearInterval(this.setter);
	this.running = false;
	}
	else {
	this.d_time--;
	this.myEl.innerHTML = "Number: " + this.d_time;
	}
	}


	pause() {
	if (this.running === true) {
	var pause = document.getElementById("pause");
	pause.addEventListener("click", () => {
	pause.hidden;
	var resume = document.getElementById("resume");
	resume.style.display = 'block';
	this.running = false;
	}, true);
	}
	}

	resume() {
	if (this.running === false) {
	var resume = document.getElementById("resume");
	resume.addEventListener("click", () => {
	resume.hidden;
	var pause = document.getElementById("pause");
	pause.style.display = 'block';
	this.running = true;
	}, true);
	}
	}

	}

	window.onload = () => {
	var el = document.getElementById('content');
	var div_el = document.getElementById('trials');
	var time = document.getElementById('time');
	var greeter = new Main(el);

	greeter.start();

	};