pomodoro

by K Jensen

HTML

<script src="https://use.fontawesome.com/323bf7484b.js"></script>
<blockquote><i class="fa fa-quote-left" aria-hidden="true"></i> The concept of waiting bewilders me. There are always deadlines. There are always ticking clocks. That's why you must manage your time.<br><cite> - White Rose ~ Mr. Robot</cite></blockquote>
<h3>A pomodoro project</h3>
<p>By, Kyle Jensen</p>
<div id="pomodoro-circle">
	<h2 id="counter"></h2>
	<canvas id="myCanvas" width="250px" height="250px"></canvas>
</div>
<div id="input-container">
	<p>Click circle below and enter timer length</p>
	<input type="text" id="input" placeholder="">
</div>
<div id="button-container">
	<a id="submit" href="#">Submit</a>
</div>

CSS

body {
	margin: 0;
	padding: 0;
	color: #f4f1d6;
	background-color: black;
}

blockquote {
	margin: 50px auto 30px;
	padding: inherit;
	font-size: 1.25em;
	width: 555px;
}

cite {
	margin-left: 320px;
}

h3,
p {
	text-align: center;
}

h3 {
	margin: 0 auto;
	padding: inherit;
}

p {
	margin: 0 auto;
	padding: inherit;
}

#pomodoro-circle {
	position: relative;
	margin: 40px auto;
	width: 255px;
	height: 255px;
	border: 2px solid #f4f1d6;
	border-radius: 50%;
	text-align: center;
}

#counter {
	opacity: 0;
	position: absolute;
	top: 41%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	color: #21ddc7;
	transition: all .1s .2s ease-in-out;
}

#pomodoro-circle:hover #counter {
	opacity: 1;
}

canvas {
	margin-top: 2px;
}

#button-container {
	margin: 30px auto;
	text-align: center;
}

#input-container {
	width: 100%;
	text-align: center;
	height: 60px;
}

input[type=text] {
	margin: 20px;
	outline: none;
	background-color: transparent;
	border: 1px solid #21ddc7;
	border-radius: 50%;
	height: 10px;
	width: 10px;
	color: #f4f1d6;
	font-size: 20px;
	transition: all .1s .2s ease-in-out;
	text-align: center;
}

input[type=text]:focus {
	border: 1px solid #21ddc7;
	height: 35px;
	width: 40px;
	border-radius: 5px;
	margin: 10px;
}

#button-container a {
	padding: 10px 50px;
	border: 1px solid #21ddc7;
	color: #f4f1d6;
	text-decoration: none;
	border-radius: 5px;
}

#button-container a:active {
	padding: 8px 35px;
}

JavaScript

let dom = {
	canv: document.getElementById('myCanvas').getContext('2d'),
	counter: document.getElementById('counter'),
	submit: document.getElementById('submit'),
	inputField: document.getElementById('input')
};

dom.canv.strokeStyle = '#21ddc7';
dom.canv.lineWidth = 7;

function Pomodoro(userInput) {
	this.minutes = userInput;
	this.toSeconds = 60 * this.minutes;//seconds - actual
	this.cout = this.toSeconds; //for timer
	this.seconds = 0; //display
	this.count = 0; //for status ring 
	this.circleStart = Math.PI * 1.5;
	this.drawArc = (2 / this.toSeconds) * this.count;
}

Pomodoro.prototype.statusRing = function () {
	if(this.count <= this.toSeconds) {
		dom.canv.beginPath(); 
		dom.canv.arc(125, 125, 121, this.circleStart, Math.PI * (1.5 + this.drawArc), false);
		dom.canv.stroke();
		this.count++;
		console.log(this.count, this.drawArc);
		const timeout = setTimeout(() => this.statusRing(), 1000 );
		
	}
};

Pomodoro.prototype.clock = function () {
		if(this.cout > 0 ) {
			let timeout = setTimeout(() => this.clock(), 1000 );
			
			if(this.seconds === 0) {
				dom.counter.textContent = '0' + this.minutes.toString() + ':' + '0' + this.seconds.toString();
				this.seconds = 60;
				this.minutes--;
			}

			else if(this.minutes >= 10 && this.seconds < 10) {
				dom.counter.textContent = this.minutes.toString() + ':' + '0' + this.seconds.toString();
			}

			else if(this.minutes < 10 && this.seconds >= 10) {
				dom.counter.textContent = '0' + this.minutes.toString() + ':' + this.seconds.toString();
			}

			else if(this.minutes >= 10 && this.seconds >= 10 ) {
				dom.counter.textContent = this.minutes + ':' + this.seconds;
			}

			else {
				dom.counter.textContent = '0' + this.minutes.toString() + ':' + '0' + this.seconds.toString();
			} //end inner chain
      
		this.seconds--;
		this.cout--;
		} //end outer if()
		else if(this.cout === 0) {
			dom.counter.textContent = '00:00';
		}
	};

dom.submit.addEventListener('click', () => {
	let pomodoroProj = new...