Pomodoro Timer

index.html

<h1>Change Time</h1>
<input type='text' id='inputTime' name='time' />
<div><input type='submit' id='submit-button' value='Start'/>
<button id='reset'>
  Reset
</button>
<button id='reset'>
  Stop
  </button></div>
<div id='tomato'>
  <h1 id='displayTime'>
    25
  </h1>
</div>  

script.js

$('#submit-button').click(function(){
	var pomodoro;
	clearInterval(pomodoro);
	pomodoro = null;
	var pomoTimeStr = $('#inputTime').val();
	if (!pomoTimeStr) {
		pomoTimeStr = 25;
	}
	mainTimer(pomoTimeStr);

	function mainTimer(p) {
		var pomoTime = parseInt(p);
		$('#displayTime').html(p);
		pomoTime = pomoTime * 60 * 1000;
		var startTime = Date.now();
		endTime = startTime + pomoTime;

		pomodoro = setInterval(function() {
			if ((endTime - Date.now()) < 6000) {
				clearInterval(pomodoro);
				$('#displayTime').html('0');
			}
			$('#displayTime').html(Math.round((endTime - Date.now())/60000));
			}, 6000);
		}

	$('#reset').click(function() {
		clearInterval(pomodoro);
		mainTimer(pomoTimeStr);
	})

	$('#stop').click(function() {
		clearInterval(pomodoro);
		pomodoro = null;
	})
});
    

style.css

body, html {
  text-align: center;
  font-family: Arial;
}

#tomato {
  height: 300px;
  width: 300px;
  background: #FF4646;
  border-radius: 50%;
  margin: 0 auto;
}

#displayTime {
  padding: 30%;
  font-size: 100px;
}

input#inputTime {
  width: 100px;
  height: 30px;
  border-radius: 10px;
  border-width: 10px;
  border-color: #5EF320;
}

button, #submit-button {
  border-radius: 5px;
  background: #5EF320;
  height: 50px;
  width: 80px;
  margin: 20px;
  font-size: 20px;
}