mrcreel/fcc-pomodoro.markdown

## fcc-pomodoro.markdown

      
    Raw
  

              fcc-pomodoro.markdown
            
          
    FCC-Pomodoro

A Pen by Michael R Creel on CodePen.
License.

  
## index.html
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/segment7" type="text/css" />
  <title>Pomodoro Clock</title>
</head>
<body>
  <div class="container grid-container clockDiv">
    <button class="grid-item btn" id="btnStart">Start</button>
    <button class="grid-item btn" id="btnMinutesUp">Minutes +</button>
    <button class="grid-item btn" id="btnMinutesDown">Minutes -</button>
    <button class="grid-item btn" id="btnSecondsDown">Seconds -</button>
    <button class="grid-item btn" id="btnSecondsUp">Seconds +</button>
    <div class="grid-item paper" id="minutes"><span></span></div>
    <div class="grid-item paper" id="seconds"><span></span></div>
    <button class="grid-item btn" id="btnStop">Stop</button>
  </div>
  <audio id="myAudio" src="https://www.soundjay.com/clock/sounds/alarm-clock-01.mp3"></audio>
</body>
</html>

## script.js
var endTime;
var startTime;
var countdown;
var defaultCountdown = 1500000;
var x = document.getElementById("myAudio");
function updateClock(time) {
  if (countdown < 1000 || countdown > 5999000) {
    countdown = defaultCountdown;
  }
  var countdownMinutes = Math.floor(countdown / 60000);
  time = time - countdownMinutes * 60000;
  var countdownSeconds = Math.floor(time / 1000);
  time = time - countdownSeconds * 1000;
  countdownMinutes = ("0" + countdownMinutes).slice(-2);
  countdownSeconds = ("0" + countdownSeconds).slice(-2);
  document.getElementById("minutes").innerHTML = countdownMinutes;
  document.getElementById("seconds").innerHTML = countdownSeconds;
}
function myTimer() {
  var timeRemaining = new Date(endTime - Date.parse(new Date()));
  var min = ("0" + timeRemaining.getMinutes()).slice(-2);
  var sec = ("0" + timeRemaining.getSeconds()).slice(-2);
  if (Date.parse(timeRemaining) <= 0) {
    clearInterval(myClock);
    x.play();
  }
  document.getElementById("minutes").innerHTML = min;
  document.getElementById("seconds").innerHTML = sec;
}
$(document).ready(function() {
  countdown = defaultCountdown;
  updateClock(countdown);
  $("#btnStart").click(function() {
    startTime = Date.parse(new Date());
    endTime = new Date(startTime + countdown);
    myClock = setInterval(myTimer, 500);
  });
  $("#btnMinutesUp").click(function() {
    countdown += 60000;
    updateClock(countdown);
  });
  $("#btnMinutesDown").click(function() {
    countdown -= 60000;
    updateClock(countdown);
  });
  $("#btnSecondsUp").click(function() {
    countdown += 1000;
    updateClock(countdown);
  });
  $("#btnSecondsDown").click(function() {
    countdown -= 1000;
    updateClock(countdown);
  });
  $("#btnStop").click(function() {
    x.pause();
    clearInterval(myClock);
    updateClock(countdown);
  });
});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

## style.css
.grid-container {
  display: inline-grid;
}

.clockDiv {
  grid-template-columns: auto auto auto auto;
  background-color: black;
}

.paper {
  height: 75px;
  line-height: 75px;
  font-family: "Segment7Standard";
  font-size: 80px;
  background-color: rgb(0, 0, 0);
  color: rgb(60, 255, 0);
  border-radius: 5px;
  padding: 20px;
  width: 30px;
}
.btn{
  background-color: black;
  color: rgb(60, 255, 0);
  font-size: 18px;
  font-weight:bold;
}

#btnStart {
  grid-column: 1/5;
  /* autoprefixer: off */
  grid-row: 1/2;
}

#btnMinutesUp {
  grid-column: 1/2;
  /* autoprefixer: off */
  grid-row: 2/3;
}

#btnMinutesDown {
  grid-column: 2/3;
  /* autoprefixer: off */
  grid-row: 2/3;
}

#btnSecondsUp {
  grid-column: 3/4;
  /* autoprefixer: off */
  grid-row: 2/3;
}

#btnSecondsDown {
  grid-column: 4/5;
  /* autoprefixer: off */
  grid-row: 2/3;
}

#minutes {
  grid-column: 1/3;
  /* autoprefixer: off */
  grid-row: 3/4;
  justify-self:center;
}

#seconds {
  grid-column: 3/5;
  /* autoprefixer: off */
  grid-row: 3/4;
  justify-self:left;
}

#btnStop {
  grid-column: 1/5;
  /* autoprefixer: off */
  grid-row: 4/5;
}
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/segment7" type="text/css" />
	<title>Pomodoro Clock</title>
	</head>
	<body>
	<div class="container grid-container clockDiv">
	<button class="grid-item btn" id="btnStart">Start</button>
	<button class="grid-item btn" id="btnMinutesUp">Minutes +</button>
	<button class="grid-item btn" id="btnMinutesDown">Minutes -</button>
	<button class="grid-item btn" id="btnSecondsDown">Seconds -</button>
	<button class="grid-item btn" id="btnSecondsUp">Seconds +</button>
	<div class="grid-item paper" id="minutes"><span></span></div>
	<div class="grid-item paper" id="seconds"><span></span></div>
	<button class="grid-item btn" id="btnStop">Stop</button>
	</div>
	<audio id="myAudio" src="https://www.soundjay.com/clock/sounds/alarm-clock-01.mp3"></audio>
	</body>
	</html>
	var endTime;
	var startTime;
	var countdown;
	var defaultCountdown = 1500000;
	var x = document.getElementById("myAudio");
	function updateClock(time) {
	if (countdown < 1000 \|\| countdown > 5999000) {
	countdown = defaultCountdown;
	}
	var countdownMinutes = Math.floor(countdown / 60000);
	time = time - countdownMinutes * 60000;
	var countdownSeconds = Math.floor(time / 1000);
	time = time - countdownSeconds * 1000;
	countdownMinutes = ("0" + countdownMinutes).slice(-2);
	countdownSeconds = ("0" + countdownSeconds).slice(-2);
	document.getElementById("minutes").innerHTML = countdownMinutes;
	document.getElementById("seconds").innerHTML = countdownSeconds;
	}
	function myTimer() {
	var timeRemaining = new Date(endTime - Date.parse(new Date()));
	var min = ("0" + timeRemaining.getMinutes()).slice(-2);
	var sec = ("0" + timeRemaining.getSeconds()).slice(-2);
	if (Date.parse(timeRemaining) <= 0) {
	clearInterval(myClock);
	x.play();
	}
	document.getElementById("minutes").innerHTML = min;
	document.getElementById("seconds").innerHTML = sec;
	}
	$(document).ready(function() {
	countdown = defaultCountdown;
	updateClock(countdown);
	$("#btnStart").click(function() {
	startTime = Date.parse(new Date());
	endTime = new Date(startTime + countdown);
	myClock = setInterval(myTimer, 500);
	});
	$("#btnMinutesUp").click(function() {
	countdown += 60000;
	updateClock(countdown);
	});
	$("#btnMinutesDown").click(function() {
	countdown -= 60000;
	updateClock(countdown);
	});
	$("#btnSecondsUp").click(function() {
	countdown += 1000;
	updateClock(countdown);
	});
	$("#btnSecondsDown").click(function() {
	countdown -= 1000;
	updateClock(countdown);
	});
	$("#btnStop").click(function() {
	x.pause();
	clearInterval(myClock);
	updateClock(countdown);
	});
	});
	.grid-container {
	display: inline-grid;
	}

	.clockDiv {
	grid-template-columns: auto auto auto auto;
	background-color: black;
	}

	.paper {
	height: 75px;
	line-height: 75px;
	font-family: "Segment7Standard";
	font-size: 80px;
	background-color: rgb(0, 0, 0);
	color: rgb(60, 255, 0);
	border-radius: 5px;
	padding: 20px;
	width: 30px;
	}
	.btn{
	background-color: black;
	color: rgb(60, 255, 0);
	font-size: 18px;
	font-weight:bold;
	}

	#btnStart {
	grid-column: 1/5;
	/* autoprefixer: off */
	grid-row: 1/2;
	}

	#btnMinutesUp {
	grid-column: 1/2;
	/* autoprefixer: off */
	grid-row: 2/3;
	}

	#btnMinutesDown {
	grid-column: 2/3;
	/* autoprefixer: off */
	grid-row: 2/3;
	}

	#btnSecondsUp {
	grid-column: 3/4;
	/* autoprefixer: off */
	grid-row: 2/3;
	}

	#btnSecondsDown {
	grid-column: 4/5;
	/* autoprefixer: off */
	grid-row: 2/3;
	}

	#minutes {
	grid-column: 1/3;
	/* autoprefixer: off */
	grid-row: 3/4;
	justify-self:center;
	}

	#seconds {
	grid-column: 3/5;
	/* autoprefixer: off */
	grid-row: 3/4;
	justify-self:left;
	}

	#btnStop {
	grid-column: 1/5;
	/* autoprefixer: off */
	grid-row: 4/5;
	}