Settlers Of Catan Timers [2-2019]

index.html

<h1>Settlers Of Catan Timers</h1>
<div class="timer-container">
<div class="add-timer">
  <div class="fa fa-plus-circle"></div>
</div>
</div>

script.js

function Timer(Element, Time, Name){
	var element =	Element;
  var time = Time;
  var originalTime = Time;
  var name = Name;

	var interval	=	setInterval(timeCallBack, 1000);
	var isPaused	=	false;
	element.addEventListener("click", onClick);
	setName(name);
	timeCallBack();

	function getTimeElement(){
		return element.getElementsByClassName("time")[0];
	}

	function getNameElement(){
		return element.getElementsByClassName("name")[0];
	}

	function setName(name){
		getNameElement().textContent	=	name;
	}

	function timeCallBack(){
		if(time === 0){
			onEnd();
		}

		var minutes 	=	Math.floor(time/60);
		var seconds 	=	time % 60;

		if(seconds < 10){
			seconds	=	"0" + seconds;
		}

		getTimeElement().textContent	=	minutes + ":" + seconds;
		time 	-=	1;
	}

	function onClick(event){
		if(isPaused){
			interval 	=	setInterval(timeCallBack, 1000);
		}else{
			clearInterval(interval);
		}

		isPaused	=	!isPaused;
	}

  //
  //
  //
	function onEnd() {
   //var alertAudio = new Audio("https://github.com/greenido/html5timetracker/blob/master/alert.mp3");
    //alertAudio.play();
    document.body.style.backgroundColor = "red";
		clearInterval(interval);
		isPaused	=	true;
		time = 0; //originalTime;
    alert("YOU ARE OUT!");
	}
}

//
//
//
function Timers(Element){
	var timers 	=	[], element 	=	Element;


	this.addTimer	=	function(){
		var name 	=	prompt("Enter the name of your timer");
		var time 	=	prompt("Enter the length of your timer (in seconds)");

		name 		=	name || "Timer " + (timers.length + 1);

		if(isNaN(parseFloat(time))){
			time 	=	10*60;
		}

		time 		=	Math.floor(time) || 10*60;

		var timerElement	=	document.createElement("div");
		timerElement.classList.add("timer");

		var nameElement 	=	document.createElement("div");
		nameElement.classList.add("name");
		timerElement.appendChild(nameElement);

		var timeElement 	=	document.createElement("div");
		timeElement.classList.add("time");
		timerElement.appendChild(timeElement);

		element.appendChild(timerElement);

		timers.push(new Timer(timerElement, time, name));
	}

	element.getElementsByClassName("add-timer")[0].addEventListener("click", this.addTimer);
}

var timers 	=	new Timers(document.getElementsByClassName("timer-container")[0]);

settlers-of-catan-timers-2-2019.markdown

Settlers Of Catan Timers [2-2019]

Click the big button to add a timer

A Pen by HARUN PEHLİVAN on CodePen.

License.

style.css

@import url(https://fonts.googleapis.com/css?family=Lora:700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700);
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');

html, body{
  width: 100%;
  height: 100%;
  margin: 1em;
  background: lightblue;
  border-radius: 25px;
}

.timer-container{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.timer, .add-timer{
  width: 12em;
  height: 13em;
  border: 2px solid rgb(236, 90, 48);
  margin: .5em;
}

.add-timer{
  order: 500;
  border-color: #F5F5F5;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(to bottom, rgb(236, 90, 48) 0%, rgb(234,71,25) 100%);
}


.add-timer>*:first-child{
  color: #F5F5F5;
  font-size: 6em;
  line-height: 2.125em;
  height: 100%;
  opacity: 0.9;
}

.add-timer>*:first-child:hover{
  opacity: 1.0;
}

.timer>.name{
  display: block;
  border-bottom: 2px solid rgb(234,71,25);
  width: 100%;
  height: 1.5em;
  text-align:center;
  color: #F5F5F5;
  font-size: 1.5em;
  line-height: 1.5em;
  font-family: 'Lora', serif;
  background: linear-gradient(to bottom, rgb(236, 90, 48) 0%, rgb(234,71,25) 100%);
}

.timer>.time{
  display: block;
  height: calc(3.5em + 2px);
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  line-height: 3.5em;
  font-size: 3em;
  color: #2B2B2B;
  background: linear-gradient(to bottom, rgb(245,245,245) 0%, rgb(242,242,242) 100%);
  cursor: pointer;
}

.timer>.time:hover{
  background-color: rgba(20, 20, 20, 0.7);
}

h1 {
  text-align: center;
  font-size: 280%;
}