<div class="container">
<h1>Human Readable Time</h1>
<p class="subtitle">Convert seconds to natural language</p>
<div class="input-section">
<label for="secondsInput">Enter Seconds</label>
<div class="input-group">
<input type="number" id="secondsInput" placeholder="e.g., 3665" value="3665" min="0">
<span class="unit-label">seconds</span>
</div>
</div>
<div class="result-cards">
<div class="result-card">
<div class="result-label">Human Readable</div>
<div class="result-value" id="humanReadable">1 hour, 1 minute, and 5 seconds</div>
</div>
<div class="result-card secondary">
<div class="result-label">Short Form</div>
<div class="result-value" id="shortForm">1h 1m 5s</div>
</div>
</div>
<div class="time-breakdown">
<div class="breakdown-item">
<div class="breakdown-value" id="daysValue">0</div>
<div class="breakdown-label">Days</div>
</div>
<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-result">45 seconds</span>
</div>
<div class="example-item" data-seconds="150">
<span class="example-seconds">150 seconds</span>
<span class="example-result">2 minutes and 30 seconds</span>
</div>
<div class="example-item" data-seconds="3661">
<span class="example-seconds">3,661 seconds</span>
<span class="example-result">1 hour, 1 minute, and 1 second</span>
</div>
<div class="example-item" data-seconds="90061">
<span class="example-seconds">90,061 seconds</span>
<span class="example-result">1 day, 1 hour, 1 minute, and 1 second</span>
</div>
<div class="example-item" data-seconds="604800">
<span class="example-seconds">604,800 seconds</span>
<span class="example-result">1 week</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, #8e2de2 0%, #4a00e0 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: white;
border-radius: 16px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
max-width: 550px;
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: 28px;
}
label {
display: block;
font-size: 14px;
color: #4a5568;
margin-bottom: 8px;
font-weight: 600;
}
.input-group {
position: relative;
}
input[type="number"] {
width: 100%;
padding: 16px 60px 16px 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: #8e2de2;
box-shadow: 0 0 0 3px rgba(142, 45, 226, 0.1);
}
.unit-label {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #a0aec0;
font-size: 14px;
font-weight: 600;
}
.result-cards {
display: grid;
gap: 16px;
margin-bottom: 24px;
}
.result-card {
background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);
border-radius: 12px;
padding: 24px;
color: white;
box-shadow: 0 8px 24px rgba(142, 45, 226, 0.3);
}
.result-card.secondary {
background: #f7fafc;
color: #2d3748;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.result-label {
font-size: 12px;
opacity: 0.9;
margin-bottom: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.result-card.secondary .result-label {
color: #718096;
}
.result-value {
font-size: 24px;
font-weight: 700;
line-height: 1.3;
}
.time-breakdown {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 12px;
margin-bottom: 24px;
}
.breakdown-item {
background: #f7fafc;
padding: 16px 12px;
border-radius: 8px;
text-align: center;
}
.breakdown-value {
font-size: 24px;
color: #2d3748;
font-weight: 700;
margin-bottom: 4px;
}
.breakdown-label {
font-size: 11px;
color: #718096;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.examples {
background: #f7fafc;
border-radius: 12px;
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: 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, #8e2de2 0%, #4a00e0 100%);
color: white;
transform: translateX(4px);
}
.example-seconds {
font-weight: 600;
font-size: 14px;
}
.example-result {
font-size: 13px;
color: #718096;
}
.example-item:hover .example-result {
color: rgba(255, 255, 255, 0.9);
}
const secondsInput = document.getElementById('secondsInput');
const humanReadable = document.getElementById('humanReadable');
const shortForm = document.getElementById('shortForm');
const daysValue = document.getElementById('daysValue');
const hoursValue = document.getElementById('hoursValue');
const minutesValue = document.getElementById('minutesValue');
const secondsValue = document.getElementById('secondsValue');
function convertToHumanReadable(totalSeconds) {
totalSeconds = Math.max(0, Math.floor(totalSeconds));
const weeks = Math.floor(totalSeconds / 604800);
const days = Math.floor((totalSeconds % 604800) / 86400);
const hours = Math.floor((totalSeconds % 86400) / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
const parts = [];
const shortParts = [];
if (weeks > 0) {
parts.push(`${weeks} week${weeks !== 1 ? 's' : ''}`);
shortParts.push(`${weeks}w`);
}
if (days > 0) {
parts.push(`${days} day${days !== 1 ? 's' : ''}`);
shortParts.push(`${days}d`);
}
if (hours > 0) {
parts.push(`${hours} hour${hours !== 1 ? 's' : ''}`);
shortParts.push(`${hours}h`);
}
if (minutes > 0) {
parts.push(`${minutes} minute${minutes !== 1 ? 's' : ''}`);
shortParts.push(`${minutes}m`);
}
if (seconds > 0 || parts.length === 0) {
parts.push(`${seconds} second${seconds !== 1 ? 's' : ''}`);
shortParts.push(`${seconds}s`);
}
let readable = '';
if (parts.length === 1) {
readable = parts[0];
} else if (parts.length === 2) {
readable = parts.join(' and ');
} else {
readable = parts.slice(0, -1).join(', ') + ', and ' + parts[parts.length - 1];
}
return {
readable: readable,
short: shortParts.join(' '),
breakdown: {
days: Math.floor(totalSeconds / 86400),
hours: hours,
minutes: minutes,
seconds: seconds
}
};
}
function updateDisplay() {
const inputValue = parseInt(secondsInput.value) || 0;
const result = convertToHumanReadable(inputValue);
humanReadable.textContent = result.readable;
shortForm.textContent = result.short;
daysValue.textContent = result.breakdown.days;
hoursValue.textContent = result.breakdown.hours;
minutesValue.textContent = result.breakdown.minutes;
secondsValue.textContent = result.breakdown.seconds;
}
secondsInput.addEventListener('input', updateDisplay);
document.querySelectorAll('.example-item').forEach(item => {
item.addEventListener('click', () => {
const seconds = item.getAttribute('data-seconds');
secondsInput.value = seconds;
updateDisplay();
});
});
updateDisplay();
No comments yet. Be the first!