jaeoh2/main.js

## main.js
const express = require('express');
const app = express();

const five = require('johnny-five');
const board = new five.Board();

app.get('', (req, res) => {
    res.sendFile(__dirname + '/timer.html');
});

app.listen(5500, () => {
});

var response = "none";
board.on('ready', () => {
    const push_button = new five.Button(3);
    push_button.on("up", () => {
        console.log("send : up");
        response = "up"
    });
    push_button.on("down", () => {
        console.log("send : down");
        response = "down"
    })
});

app.get('/read_data', (req, res) => {
    res.json({ text: response});
});

## style.css
.main {
	font-family: Arial, Helvetica, sans-serif;
	padding: 25px;
	margin-top: 40px;
	font-size: 4.0em;
  }

#output {
	font-size: 8.0em;
	width: 100%;
	height: auto;
	background-color: white;
	border: 3px solid black;
	margin-right: auto;
	margin-left: auto;
	margin-top: 45px;
}

.btn {
	margin-top: 40px;
	font-size: 1.8em;
}

## timer.html
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>CiLab Lap Timer</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/segment7" type="text/css" />
    <link rel="stylesheet" href="sytle.css" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script language="javascript" type="text/javascript">
        var time = 0;
        var running = 0;

        function startPause() {
            if (running == 0) {
                running = 1;
                // increment();
                timer.run()
                document.getElementById("startPause").innerHTML = "PAUSE";
            } else {
                running = 0;
                timer.stop()
                document.getElementById("startPause").innerHTML = "RESUME";
            }
        }

        function reset() {
            running = 0;
            time = 0;
            document.getElementById("startPause").innerHTML = "START";
            document.getElementById("output").innerHTML = "00.00.00";
        }

        function save() {

        }

        function printName() {
            const name = document.getElementById("inputName").value;
            document.getElementById("teamName").innerHTML = name;

        }

        function increment() {
            if (running == 1) {
                setTimeout(function () {
                    time++;
                    var mins = Math.floor(time / 100 / 60);
                    var secs = Math.floor(time / 100 % 60);
                    var tenths = time % 100;
                    var msecs = tenths.toString().length < 2 ? '0' + tenths : tenths;
                    var msecs = ('00' + tenths).slice(-2);
                    if (mins < 10) {
                        mins = "0" + mins;
                    }
                    if (secs < 10) {
                        secs = "0" + secs;
                    }

                    document.getElementById("output").innerHTML = mins + "." + secs + "." + msecs;
                    increment();
                }, 10);
            }
        }

        function interval(duration, fn) {
            var _this = this
            this.baseline = undefined

            this.run = function () {
                if (_this.baseline === undefined) {
                    _this.baseline = new Date().getTime()
                }
                fn()
                var end = new Date().getTime()
                _this.baseline += duration

                var nextTick = duration - (end - _this.baseline)
                if (nextTick < 0) {
                    nextTick = 0
                }

                _this.timer = setTimeout(function () {
                    _this.run(end)
                }, nextTick)
            }

            this.stop = function () {
                clearTimeout(_this.timer)
            }
        }

        var timer = new interval(10, function () {
            if (running == 1) {
                time++;
                var mins = Math.floor(time / 100 / 60);
                var secs = Math.floor(time / 100 % 60);
                var tenths = time % 100;
                var msecs = tenths.toString().length < 2 ? '0' + tenths : tenths;
                var msecs = ('00' + tenths).slice(-2);
                if (mins < 10) {
                    mins = "0" + mins;
                }
                if (secs < 10) {
                    secs = "0" + secs;
                }

                document.getElementById("output").innerHTML = mins + "." + secs + "." + msecs;

            };
        })

        var data_string;
        var pre_data_string;
        setInterval(function () {
            $.get("/read_data", function (data) {
                data_string = data.text;
                console.log(data_string);
                if (data_string == "up" && pre_data_string == "down") {
                    startPause();
                }
            });
            pre_data_string = data_string;

        }, 100);

    </script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* font-family: "Segment7Standard"; */
        }
    </style>
    <h1 class="main text-center b-3 mb-2 bg-primary text-white" style="font-size:5.0em">IR-LAB TIMER</h1>

</head>

<body onload="reset();" style="background-color:black;">
    <div id="teamName" class="text-center" style="font-size:10.0em; color:whitesmoke"></div>
    <div id="output" class="text-center" style="margin-left:0px;
            font-size: 20.0em;
            color: lime;
            background-color: black;
            font-family: Segment7Standard;"></div>

    <div id="controls" class="text-center">
        <button class="btn btn-default" id="startPause" onclick="startPause()">START</button>
        <button class="btn btn-default" onclick="reset()">RESET</button>
        <button class="btn btn-default" onclick="save()">SAVE</button>
        <input id="inputName" onchange="printName()" placeholder="Insert Team Name"/>
    </div>

</body>

</html>
	const express = require('express');
	const app = express();

	const five = require('johnny-five');
	const board = new five.Board();

	app.get('', (req, res) => {
	res.sendFile(__dirname + '/timer.html');
	});

	app.listen(5500, () => {
	});

	var response = "none";
	board.on('ready', () => {
	const push_button = new five.Button(3);
	push_button.on("up", () => {
	console.log("send : up");
	response = "up"
	});
	push_button.on("down", () => {
	console.log("send : down");
	response = "down"
	})
	});

	app.get('/read_data', (req, res) => {
	res.json({ text: response});
	});
	.main {
	font-family: Arial, Helvetica, sans-serif;
	padding: 25px;
	margin-top: 40px;
	font-size: 4.0em;
	}

	#output {
	font-size: 8.0em;
	width: 100%;
	height: auto;
	background-color: white;
	border: 3px solid black;
	margin-right: auto;
	margin-left: auto;
	margin-top: 45px;
	}

	.btn {
	margin-top: 40px;
	font-size: 1.8em;
	}
	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>CiLab Lap Timer</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
	<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/segment7" type="text/css" />
	<link rel="stylesheet" href="sytle.css" />
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	<script language="javascript" type="text/javascript">
	var time = 0;
	var running = 0;

	function startPause() {
	if (running == 0) {
	running = 1;
	// increment();
	timer.run()
	document.getElementById("startPause").innerHTML = "PAUSE";
	} else {
	running = 0;
	timer.stop()
	document.getElementById("startPause").innerHTML = "RESUME";
	}
	}

	function reset() {
	running = 0;
	time = 0;
	document.getElementById("startPause").innerHTML = "START";
	document.getElementById("output").innerHTML = "00.00.00";
	}

	function save() {

	}

	function printName() {
	const name = document.getElementById("inputName").value;
	document.getElementById("teamName").innerHTML = name;

	}

	function increment() {
	if (running == 1) {
	setTimeout(function () {
	time++;
	var mins = Math.floor(time / 100 / 60);
	var secs = Math.floor(time / 100 % 60);
	var tenths = time % 100;
	var msecs = tenths.toString().length < 2 ? '0' + tenths : tenths;
	var msecs = ('00' + tenths).slice(-2);
	if (mins < 10) {
	mins = "0" + mins;
	}
	if (secs < 10) {
	secs = "0" + secs;
	}

	document.getElementById("output").innerHTML = mins + "." + secs + "." + msecs;
	increment();
	}, 10);
	}
	}

	function interval(duration, fn) {
	var _this = this
	this.baseline = undefined

	this.run = function () {
	if (_this.baseline === undefined) {
	_this.baseline = new Date().getTime()
	}
	fn()
	var end = new Date().getTime()
	_this.baseline += duration

	var nextTick = duration - (end - _this.baseline)
	if (nextTick < 0) {
	nextTick = 0
	}

	_this.timer = setTimeout(function () {
	_this.run(end)
	}, nextTick)
	}

	this.stop = function () {
	clearTimeout(_this.timer)
	}
	}

	var timer = new interval(10, function () {
	if (running == 1) {
	time++;
	var mins = Math.floor(time / 100 / 60);
	var secs = Math.floor(time / 100 % 60);
	var tenths = time % 100;
	var msecs = tenths.toString().length < 2 ? '0' + tenths : tenths;
	var msecs = ('00' + tenths).slice(-2);
	if (mins < 10) {
	mins = "0" + mins;
	}
	if (secs < 10) {
	secs = "0" + secs;
	}

	document.getElementById("output").innerHTML = mins + "." + secs + "." + msecs;

	};
	})

	var data_string;
	var pre_data_string;
	setInterval(function () {
	$.get("/read_data", function (data) {
	data_string = data.text;
	console.log(data_string);
	if (data_string == "up" && pre_data_string == "down") {
	startPause();
	}
	});
	pre_data_string = data_string;

	}, 100);

	</script>
	<style>
	body {
	margin: 0;
	overflow: hidden;
	/* font-family: "Segment7Standard"; */
	}
	</style>
	<h1 class="main text-center b-3 mb-2 bg-primary text-white" style="font-size:5.0em">IR-LAB TIMER</h1>

	</head>

	<body onload="reset();" style="background-color:black;">
	<div id="teamName" class="text-center" style="font-size:10.0em; color:whitesmoke"></div>
	<div id="output" class="text-center" style="margin-left:0px;
	font-size: 20.0em;
	color: lime;
	background-color: black;
	font-family: Segment7Standard;"></div>

	<div id="controls" class="text-center">
	<button class="btn btn-default" id="startPause" onclick="startPause()">START</button>
	<button class="btn btn-default" onclick="reset()">RESET</button>
	<button class="btn btn-default" onclick="save()">SAVE</button>
	<input id="inputName" onchange="printName()" placeholder="Insert Team Name"/>
	</div>

	</body>

	</html>