Metro Time SaaS
body {
font-family: Arial, sans-serif;
background-color: #2c3e50;
color: white;
text-align: center;
margin: 0;
padding: 0;
}
.app-container {
background-color: #3498db;
border-radius: 10px;
padding: 20px;
margin: 20px;
}
.header {
font-size: 24px;
margin-bottom: 20px;
}
.time-display {
font-size: 36px;
margin-bottom: 20px;
}
.controls button {
background-color: #e74c3c;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
font-size: 18px;
cursor: pointer;
}
.controls button:hover {
background-color: #c0392b;
}
let timer;
let isRunning = false;
let seconds = 0;
let minutes = 0;
let hours = 0;
const currentTimeDisplay = document.getElementById('current-time');
const startButton = document.getElementById('start-btn');
const stopButton = document.getElementById('stop-btn');
const resetButton = document.getElementById('reset-btn');
function updateTimeDisplay() {
currentTimeDisplay.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
function startTimer() {
if (!isRunning) {
timer = setInterval(function () {
seconds++;
if (seconds === 60) {
seconds = 0;
minutes++;
if (minutes === 60) {
minutes = 0;
hours++;
}
}
updateTimeDisplay();
}, 1000);
isRunning = true;
}
}
function stopTimer() {
clearInterval(timer);
isRunning = false;
}
function resetTimer() {
clearInterval(timer);
isRunning = false;
seconds = 0;
minutes = 0;
hours = 0;
updateTimeDisplay();
}
startButton.addEventListener('click', startTimer);
stopButton.addEventListener('click', stopTimer);
resetButton.addEventListener('click', resetTimer);
0 Comments