Box countdown

box-countdown.markdown

Box countdown

A Pen by Moncho Varela on CodePen.

License.

index.html

<h3 class="info">Time to die: 60</h3>
<div class="boxes"></div>

script.js

let seconds = 60;
const info = document.querySelector('.info');
const boxes = document.querySelector('.boxes');
const arr = [];

info.textContent = `Time to die: ${seconds}`;

for (let i = 0; i < seconds; i++) {
	createBox();
}

counterClock();

function createBox() {
	const box = document.createElement("div");
	box.className = "box";
	boxes.appendChild(box);
	arr.push(box);
}

function removeRandoBox() {
	if (arr.length > 0) {
		const randomIndex = Math.floor(Math.random() * arr.length);
		const hideBox = arr.splice(randomIndex, 1)[0];
		hideBox.style.opacity = 0;
		info.textContent = `Time to die: ${seconds}`;
	}
}

function counterClock() {
	const interval = setInterval(() => {
		--seconds;
		if (seconds >= 0) {
			removeRandoBox(seconds);
		} else {
			clearInterval(interval);
			boxes.style.display = 'none';
			info.textContent = `It's a joke :)`;
		}
	}, 1000);
}

style.css

@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);

:root{
	--color-1: rgb(219 14 14 / 16%);
	--color-2: rgb(219 14 14 / 50%);
	--color-3: rgb(219 14 14 / 100%);
}
*{box-sizing:border-box;}

html,body{
	position:relative;
	height:100%;
}
body{
  font-family: 'Share Tech Mono', monospace;
  font-size: 26px;
  font-weight: 300;
  text-shadow: 0 0 5px rgba(219, 14, 21, .8);
  background: url(https://i.ibb.co/qJYd5n8/dots.png) #060606;
  position: relative;
  height: 100vh;
		
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.info{
	color:var(--color-3);
}
.boxes {
	display:block;
	width:500px;
	height:300px;
	display: flex;
  flex-wrap: wrap;
	box-shadow: 0 0 0 10px var(--color-1);
}

.box {
	display:block;
	width:50px;
	height:50px;
  background-color: var(--color-2);
  border: 1px solid var(--color-1);
	transition:all 500ms ease;
}