{"id":551,"date":"2026-08-10T12:40:06","date_gmt":"2026-08-10T12:40:06","guid":{"rendered":"https:\/\/daywork.nl\/?page_id=551"},"modified":"2026-08-10T12:40:09","modified_gmt":"2026-08-10T12:40:09","slug":"berekenen-tijd","status":"publish","type":"page","link":"https:\/\/daywork.nl\/index.php\/berekenen-tijd\/","title":{"rendered":"Berekenen tijd"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Tijd berekeken| Rekentool<\/title>\n<style>\n  :root {\n    --ink: #1a2332;\n    --ink-soft: #4a5568;\n    --paper: #f7f5f0;\n    --panel: #ffffff;\n    --line: #dcd8cd;\n    --accent: #7a2842;\n    --accent-soft: #f3e6ea;\n    --accent-hover: #611f34;\n    --mono: 'IBM Plex Mono', 'Courier New', monospace;\n    --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;\n  }\n\n  * { box-sizing: border-box; }\n\n  body {\n    margin: 0;\n    background: var(--paper);\n    color: var(--ink);\n    font-family: var(--sans);\n    line-height: 1.5;\n    padding: 40px 20px 80px;\n  }\n\n  .wrap {\n    max-width: 760px;\n    margin: 0 auto;\n  }\n\n  header {\n    border-bottom: 2px solid var(--ink);\n    padding-bottom: 18px;\n    margin-bottom: 32px;\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  header .brand {\n    font-family: var(--mono);\n    font-size: 12px;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    color: var(--ink-soft);\n  }\n\n  h1 {\n    font-size: 26px;\n    font-weight: 700;\n    margin: 4px 0 0;\n    letter-spacing: -0.01em;\n  }\n\n  .setup {\n    background: var(--panel);\n    border: 1px solid var(--line);\n    border-radius: 4px;\n    padding: 20px 22px;\n    margin-bottom: 28px;\n    display: flex;\n    align-items: flex-end;\n    gap: 16px;\n    flex-wrap: wrap;\n  }\n\n  .field label {\n    display: block;\n    font-family: var(--mono);\n    font-size: 11px;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    color: var(--ink-soft);\n    margin-bottom: 6px;\n  }\n\n  input[type=\"number\"], input[type=\"time\"] {\n    font-family: var(--sans);\n    font-size: 15px;\n    padding: 9px 10px;\n    border: 1px solid var(--line);\n    border-radius: 3px;\n    background: var(--paper);\n    color: var(--ink);\n    width: 100%;\n  }\n\n  input[type=\"number\"] {\n    width: 90px;\n  }\n\n  input:focus {\n    outline: none;\n    border-color: var(--accent);\n    box-shadow: 0 0 0 3px var(--accent-soft);\n  }\n\n  button {\n    font-family: var(--sans);\n    font-weight: 600;\n    font-size: 14px;\n    background: var(--ink);\n    color: #fff;\n    border: none;\n    border-radius: 3px;\n    padding: 11px 20px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n  }\n\n  button:hover { background: var(--accent-hover); }\n\n  .list {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    margin-bottom: 24px;\n  }\n\n  .row {\n    background: var(--panel);\n    border: 1px solid var(--line);\n    border-left: 3px solid var(--accent);\n    border-radius: 4px;\n    padding: 14px 18px;\n    display: grid;\n    grid-template-columns: 32px 1fr 1fr 100px;\n    gap: 14px;\n    align-items: center;\n  }\n\n  .row .num {\n    font-family: var(--mono);\n    font-size: 13px;\n    color: var(--ink-soft);\n  }\n\n  .row .duration {\n    font-family: var(--mono);\n    font-size: 14px;\n    text-align: right;\n    color: var(--ink);\n    font-weight: 600;\n  }\n\n  .row .duration.pending {\n    color: var(--ink-soft);\n    font-weight: 400;\n  }\n\n  .row .duration.error {\n    color: var(--accent);\n  }\n\n  .summary {\n    background: var(--ink);\n    color: var(--paper);\n    border-radius: 4px;\n    padding: 22px 24px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .summary .label {\n    font-family: var(--mono);\n    font-size: 12px;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: #b8bfcc;\n  }\n\n  .summary .total {\n    font-family: var(--mono);\n    font-size: 30px;\n    font-weight: 700;\n    letter-spacing: -0.01em;\n  }\n\n  .summary .breakdown {\n    font-family: var(--mono);\n    font-size: 12px;\n    color: #b8bfcc;\n    margin-top: 4px;\n  }\n\n  .empty-note {\n    font-family: var(--mono);\n    font-size: 13px;\n    color: var(--ink-soft);\n    padding: 20px 0;\n    text-align: center;\n    border: 1px dashed var(--line);\n    border-radius: 4px;\n  }\n\n  @media (max-width: 560px) {\n    .row {\n      grid-template-columns: 24px 1fr 1fr;\n    }\n    .row .duration {\n      grid-column: 1 \/ -1;\n      text-align: left;\n      border-top: 1px solid var(--line);\n      padding-top: 8px;\n      margin-top: 2px;\n    }\n  }\n<\/style>\n\n\n<div class=\"wrap\">\n\n  <header>\n    <div>\n      <div class=\"brand\">Daywork \u00b7 Rekentool<\/div>\n      <h1>Tijd berekenen<\/h1>\n    <\/div>\n  <\/header>\n\n  <div class=\"setup\">\n    <div class=\"field\">\n      <label for=\"aantal\">Aantal<\/label>\n      <input type=\"number\" id=\"aantal\" min=\"1\" max=\"50\" value=\"3\">\n    <\/div>\n    <button id=\"genereer\">Lijst maken<\/button>\n  <\/div>\n\n  <div class=\"list\" id=\"lijst\"><\/div>\n\n  <div class=\"summary\">\n    <div>\n      <div class=\"label\">Totale duur<\/div>\n      <div class=\"breakdown\" id=\"breakdown\">0 van 0 zaken ingevuld<\/div>\n    <\/div>\n    <div class=\"total\" id=\"totaal\">00:00<\/div>\n  <\/div>\n\n<\/div>\n\n<script>\n  const aantalInput = document.getElementById('aantal');\n  const genereerBtn = document.getElementById('genereer');\n  const lijst = document.getElementById('lijst');\n  const totaalEl = document.getElementById('totaal');\n  const breakdownEl = document.getElementById('breakdown');\n\n  function minutesFromTime(str) {\n    if (!str) return null;\n    const [h, m] = str.split(':').map(Number);\n    return h * 60 + m;\n  }\n\n  function formatDuration(mins) {\n    const h = Math.floor(mins \/ 60);\n    const m = mins % 60;\n    return String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');\n  }\n\n  function bouwLijst() {\n    const aantal = Math.max(1, Math.min(50, parseInt(aantalInput.value, 10) || 1));\n    lijst.innerHTML = '';\n\n    for (let i = 1; i <= aantal; i++) {\n      const row = document.createElement('div');\n      row.className = 'row';\n      row.innerHTML = `\n        <div class=\"num\">${i}.<\/div>\n        <div class=\"field\">\n          <label>Starttijd<\/label>\n          <input type=\"time\" class=\"start\" data-index=\"${i}\">\n        <\/div>\n        <div class=\"field\">\n          <label>Eindtijd<\/label>\n          <input type=\"time\" class=\"eind\" data-index=\"${i}\">\n        <\/div>\n        <div class=\"duration pending\" data-index=\"${i}\">\u2014<\/div>\n      `;\n      lijst.appendChild(row);\n    }\n\n    lijst.querySelectorAll('input').forEach(inp => {\n      inp.addEventListener('input', bereken);\n    });\n\n    bereken();\n  }\n\n  function bereken() {\n    const rows = lijst.querySelectorAll('.row');\n    let totaalMinuten = 0;\n    let ingevuld = 0;\n\n    rows.forEach(row => {\n      const start = row.querySelector('.start').value;\n      const eind = row.querySelector('.eind').value;\n      const durationEl = row.querySelector('.duration');\n\n      if (!start || !eind) {\n        durationEl.textContent = '\u2014';\n        durationEl.className = 'duration pending';\n        return;\n      }\n\n      const startMin = minutesFromTime(start);\n      const eindMin = minutesFromTime(eind);\n      let diff = eindMin - startMin;\n\n      if (diff <= 0) {\n        durationEl.textContent = 'ongeldig';\n        durationEl.className = 'duration error';\n        return;\n      }\n\n      durationEl.textContent = formatDuration(diff);\n      durationEl.className = 'duration';\n      totaalMinuten += diff;\n      ingevuld++;\n    });\n\n    totaalEl.textContent = formatDuration(totaalMinuten);\n    breakdownEl.textContent = `${ingevuld} van ${rows.length} zaken ingevuld`;\n  }\n\n  genereerBtn.addEventListener('click', bouwLijst);\n  aantalInput.addEventListener('keypress', e => {\n    if (e.key === 'Enter') bouwLijst();\n  });\n\n  \/\/ Start met een lege lijst op basis van standaardwaarde\n  bouwLijst();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Tijd berekeken| Rekentool Daywork \u00b7 Rekentool Tijd berekenen Aantal Lijst maken Totale duur 0 van 0 zaken ingevuld 00:00<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-551","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/daywork.nl\/index.php\/wp-json\/wp\/v2\/pages\/551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/daywork.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/daywork.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/daywork.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/daywork.nl\/index.php\/wp-json\/wp\/v2\/comments?post=551"}],"version-history":[{"count":1,"href":"https:\/\/daywork.nl\/index.php\/wp-json\/wp\/v2\/pages\/551\/revisions"}],"predecessor-version":[{"id":553,"href":"https:\/\/daywork.nl\/index.php\/wp-json\/wp\/v2\/pages\/551\/revisions\/553"}],"wp:attachment":[{"href":"https:\/\/daywork.nl\/index.php\/wp-json\/wp\/v2\/media?parent=551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}