Visual Timer
body {
font-family: poppins, sans-serif;
text-align: center;
margin: 10px;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 60vh;
}
canvas {
display: block;
margin: 20px auto;
background: #f4f4f4;
border-radius: 50%;
}
.timer-container {
position: relative;
display: inline-block;
}
.timer-text {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
font-weight: bold;
color: gray;
}
input {
padding: 8px 12px;
font-size: 24px;
border-radius: 5px;
border: 1px solid #ccc;
margin-top: 20px;
width: 80px;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
margin: 5px;
}
button:nth-of-type(1) {
background-color: green;
}
button:nth-of-type(2) {
background-color: red;
}
.buttons-container {
display: flex;
justify-content: center;
margin-top: 10px;
}
let timer;
let totalTime;
let startTime;
function startTimer() {
let minutes = document.getElementById(‘minutes’).value;
if (minutes > 0) {
totalTime = minutes * 60;
startTime = Date.now();
clearInterval(timer);
timer = setInterval(updateTimer, 1000);
}
}
function stopTimer() {
clearInterval(timer);
}
function updateTimer() {
let elapsed = Math.floor((Date.now() – startTime) / 1000);
let remaining = totalTime – elapsed;
if (remaining <= 0) {
clearInterval(timer);
drawTimer(0);
updateText(0);
alert("Tiden är slut!");
} else {
drawTimer(1 – remaining / totalTime);
updateText(remaining);
}
}
function drawTimer(progress) {
let canvas = document.getElementById("timerCanvas");
let ctx = canvas.getContext("2d");
let radius = canvas.width / 2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Bakgrundscirkel
ctx.beginPath();
ctx.arc(radius, radius, radius – 5, 0, 2 * Math.PI, false);
ctx.lineWidth = 15; // Tjockare ring
ctx.strokeStyle = "#ccc"; // Ny färg
ctx.stroke();
// Progressionscirkel
ctx.beginPath();
ctx.arc(radius, radius, radius – 5, -Math.PI / 2, (progress * 2 * Math.PI) – Math.PI / 2, false);
ctx.lineWidth = 50; // Tjockare ring
ctx.strokeStyle = "#ff6600"; // Ny färg (orange)
ctx.stroke();
}
function updateText(remaining) {
let minutes = Math.floor(remaining / 60);
let seconds = remaining % 60;
document.getElementById("timerText").textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}