Colorful Stopwatch
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #282c34;
color: #61dafb;
font-family: 'Arial', sans-serif;
margin: 0;
}
.stopwatch-container {
text-align: center;
background: linear-gradient(135deg, #6e7cfc, #f2a100);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
#display {
font-size: 48px;
margin-bottom: 20px;
padding: 20px;
border: 3px solid #61dafb;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.1);
}
.buttons {
display: flex;
justify-content: center;
gap: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #61dafb;
color: #282c34;
}
.laps {
margin-top: 20px;
background-color: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 5px;
}
let timerInterval;
let running = false;
let seconds = 0;
const display = document.getElementById("display");
const startStopButton = document.getElementById("startStop");
const resetButton = document.getElementById("reset");
const lapButton = document.getElementById("lap");
const lapsContainer = document.getElementById("laps");
startStopButton.addEventListener("click", () => {
if (running) {
clearInterval(timerInterval);
startStopButton.textContent = "Start";
} else {
timerInterval = setInterval(updateTime, 1000);
startStopButton.textContent = "Stop";
}
running = !running;
});
resetButton.addEventListener("click", () => {
clearInterval(timerInterval);
running = false;
seconds = 0;
display.textContent = "00:00:00";
startStopButton.textContent = "Start";
lapsContainer.innerHTML = "";
});
lapButton.addEventListener("click", () => {
if (running) {
const lapTime = formatTime(seconds);
const lapElement = document.createElement("div");
lapElement.textContent = `Lap: ${lapTime}`;
lapsContainer.appendChild(lapElement);
}
});
function updateTime() {
seconds++;
display.textContent = formatTime(seconds);
}
function formatTime(seconds) {
const hrs = String(Math.floor(seconds / 3600)).padStart(2, '0');
const mins = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
const secs = String(seconds % 60).padStart(2, '0');
return `${hrs}:${mins}:${secs}`;
}
Manhunt Underway for Suspect in Active Shooter Situation That Shuts Down I-75 in Kentucky In a shocking turn of events, authorities in K...
No comments:
Post a Comment