Timebox

Developer
Matthias Dittgen
Size
4,202 Kb
Views
42,504
  1. Timebox Previews
  2. Timebox HTML Codes
  3. Timebox CSS Codes
  4. Timebox JS Codes

How do I make an timebox?

Some simple 2 minutes timebox visualization, just a start I might continue with more features in future ;). What is a timebox? How do you make a timebox? This script and codes were developed by Matthias Dittgen on 26 August 2022, Friday.

Timebox Previews
IQ Test

Timebox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>timebox</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section> <h2>Timebox</h2> <canvas width="400" height="400"></canvas><span class="time"><span class="hours">00</span>:<span class="minutes">00</span>:<span class="seconds">00</span></span><a>2 MINUTES</a>
</section> <script src="js/index.js"></script>
</body>
</html>

Timebox - Script Codes CSS Codes

html,
body { height: 100%;
}
body { background-color: #ccc;
}
section { position: relative; background-color: #333; color: #ccc; font-family: 'Trebuchet MS', sans-serif; width: 320px; max-height: 568px; height: 100%; margin: 10px auto; text-align: center; padding: 10px 0;
}
section h2 { font-size: 35px; font-weight: normal;
}
section .time { display: inline-block; padding-top: 130px; height: 240px; width: 320px; font-size: 50px; color: #666;
}
section .time .color { color: #99f;
}
section canvas { position: absolute; height: 320px; width: 320px;
}
section a { display: block; text-transform: uppercase; font-size: 30px;
}

Timebox - Script Codes JS Codes

'use strict';
var duration = 120000;
var hours = document.querySelectorAll('span.hours')[0];
var minutes = document.querySelectorAll('span.minutes')[0];
var seconds = document.querySelectorAll('span.seconds')[0];
var canvas = document.querySelectorAll('canvas')[0];
var ctx = canvas.getContext('2d');
var radius = 160;
var thickness = 20;
var PI = 3.14;
var start = -PI / 2;
var max = 2 * PI;
function update(percent) {	ctx.clearRect(0, 0, canvas.width, canvas.height);	ctx.lineWidth = thickness;	ctx.beginPath();	ctx.strokeStyle = '#666666';	ctx.arc(canvas.width / 2, canvas.height / 2, radius, start, start + max);	ctx.stroke();	ctx.beginPath();	ctx.strokeStyle = '#9999ff';	ctx.arc(canvas.width / 2, canvas.height / 2, radius, start, start + percent * max);	ctx.stroke();
}
function rep(len, chr) {	return new Array(len + 1).join(chr);
}
function zpad(n, l) {	return rep(l - n.toString().length, '0') + n.toString();
}
function addClass(el, cl) {	if (!el.classList.contains(cl)) {	el.classList.add(cl);	}
}
function removeClass(el, cl) {	if (el.classList.contains(cl)) {	el.classList.remove(cl);	}
}
var startTime = Date.now();
var stopLoop = false;
function step(timestamp) {	var currentTime = Date.now();	var past = currentTime - startTime;	var remainMillis = duration - past;	var remain = Math.floor(remainMillis / 1000);	var remainHours = Math.floor(remain / 3600);	var remainMinutes = Math.floor(remain % 3600 / 60);	var remainSeconds = Math.floor(remain % 60);	if (remainHours <= 0) {	remainHours = 0;	removeClass(hours, 'color');	} else {	addClass(hours, 'color');	}	if (remainHours <= 0 && remainMinutes <= 0) {	remainMinutes = 0;	removeClass(minutes, 'color');	} else {	addClass(minutes, 'color');	}	if (remainHours <= 0 && remainMinutes <= 0 && remainSeconds <= 0) {	remainSeconds = 0;	removeClass(seconds, 'color');	} else {	addClass(seconds, 'color');	}	seconds.innerHTML = zpad(remainSeconds, 2);	minutes.innerHTML = zpad(remainMinutes, 2);	hours.innerHTML = zpad(remainHours, 2);	update(remainMillis / duration);	stopLoop = remainHours == 0 && remainMinutes == 0 && remainSeconds == 0;	if (!stopLoop) {	window.requestAnimationFrame(step);	}
}
window.requestAnimationFrame(step);
Timebox - Script Codes
Timebox - Script Codes
Home Page Home
Developer Matthias Dittgen
Username matths
Uploaded August 26, 2022
Rating 3
Size 4,202 Kb
Views 42,504
Do you need developer help for Timebox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matthias Dittgen (matths) Script Codes
Name
Shapes in cricles
Moving lines illusion while scrolling
Text-shadow spiral
Text-shadow outline demo
Centering something
WIP
SVG Button
Animating non-CSS property
Additive color mix with triangles
D3 bar chart experiment
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!