<div class="container">
<h1>Time Formatter</h1>
<p class="subtitle">Convert seconds to HH:MM:SS format</p>
<div class="input-section">
<label for="secondsInput">Enter Seconds</label>
<input type="number" id="secondsInput" placeholder="e.g., 3665" value="3665" min="0">
</div>
<div class="result-card">
<div class="result-label">Formatted Time</div>
<div class="result-value" id="resultTime">01:01:05</div>
</div>
<div class="breakdown">
<div class="breakdown-item">
<div class="breakdown-value" id="hoursValue">1</div>
<div class="breakdown-label">Hours</div>
</div>
<div class="breakdown-item">
<div class="breakdown-value" id="minutesValue">1</div>
<div class="breakdown-label">Minutes</div>
</div>
<div class="breakdown-item">
<div class="breakdown-value" id="secondsValue">5</div>
<div class="breakdown-label">Seconds</div>
</div>
</div>
<div class="examples">
<h3>Quick Examples (Click to Try)</h3>
<div class="example-item" data-seconds="45">
<span class="example-seconds">45 seconds</span>
<span class="example-time">00:00:45</span>
</div>
<div class="example-item" data-seconds="150">
<span class="example-seconds">150 seconds</span>
<span class="example-time">00:02:30</span>
</div>
<div class="example-item" data-seconds="3661">
<span class="example-seconds">3661 seconds</span>
<span class="example-time">01:01:01</span>
</div>
<div class="example-item" data-seconds="86400">
<span class="example-seconds">86400 seconds</span>
<span class="example-time">24:00:00</span>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: white;
border-radius: 12px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 500px;
width: 100%;
}
h1 {
font-size: 28px;
color: #2d3748;
margin-bottom: 8px;
text-align: center;
}
.subtitle {
color: #718096;
font-size: 14px;
margin-bottom: 32px;
text-align: center;
}
.input-section {
margin-bottom: 24px;
}
label {
display: block;
font-size: 14px;
color: #4a5568;
margin-bottom: 8px;
font-weight: 600;
}
input[type="number"] {
width: 100%;
padding: 16px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 18px;
color: #2d3748;
transition: all 0.2s;
font-weight: 600;
}
input[type="number"]:focus {
outline: none;
border-color: #fa709a;
box-shadow: 0 0 0 3px rgba(250, 112, 154, 0.1);
}
.result-card {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
border-radius: 12px;
padding: 32px;
text-align: center;
margin-bottom: 24px;
box-shadow: 0 8px 24px rgba(250, 112, 154, 0.3);
}
.result-label {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
margin-bottom: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.result-value {
font-size: 48px;
color: white;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 2px;
}
.examples {
background: #f7fafc;
border-radius: 8px;
padding: 20px;
}
.examples h3 {
font-size: 14px;
color: #4a5568;
margin-bottom: 12px;
font-weight: 600;
}
.example-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
background: white;
border-radius: 6px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s;
}
.example-item:last-child {
margin-bottom: 0;
}
.example-item:hover {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
color: white;
transform: translateX(4px);
}
.example-seconds {
font-weight: 600;
font-size: 14px;
}
.example-time {
font-family: 'Courier New', monospace;
font-size: 14px;
color: #718096;
}
.example-item:hover .example-time {
color: white;
}
.breakdown {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 20px;
}
.breakdown-item {
background: #f7fafc;
padding: 16px;
border-radius: 8px;
text-align: center;
}
.breakdown-value {
font-size: 28px;
color: #2d3748;
font-weight: 700;
margin-bottom: 4px;
}
.breakdown-label {
font-size: 12px;
color: #718096;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
const secondsInput = document.getElementById('secondsInput');
const resultTime = document.getElementById('resultTime');
const hoursValue = document.getElementById('hoursValue');
const minutesValue = document.getElementById('minutesValue');
const secondsValue = document.getElementById('secondsValue');
function formatSecondsToTime(totalSeconds) {
// Ensure positive number
totalSeconds = Math.max(0, Math.floor(totalSeconds));
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
// Pad with leading zeros
const hh = String(hours).padStart(2, '0');
const mm = String(minutes).padStart(2, '0');
const ss = String(seconds).padStart(2, '0');
return {
formatted: `${hh}:${mm}:${ss}`,
hours: hours,
minutes: minutes,
seconds: seconds
};
}
function updateDisplay() {
const inputValue = parseInt(secondsInput.value) || 0;
const result = formatSecondsToTime(inputValue);
resultTime.textContent = result.formatted;
hoursValue.textContent = result.hours;
minutesValue.textContent = result.minutes;
secondsValue.textContent = result.seconds;
}
secondsInput.addEventListener('input', updateDisplay);
// Example clicks
document.querySelectorAll('.example-item').forEach(item => {
item.addEventListener('click', () => {
const seconds = item.getAttribute('data-seconds');
secondsInput.value = seconds;
updateDisplay();
});
});
// Initial display
updateDisplay();
No comments yet. Be the first!