{"id":18,"date":"2025-07-14T05:04:44","date_gmt":"2025-07-14T05:04:44","guid":{"rendered":"https:\/\/www.nayttely.fi\/laskin\/?page_id=18"},"modified":"2025-08-17T07:28:23","modified_gmt":"2025-08-17T07:28:23","slug":"teosvalilaskuri","status":"publish","type":"page","link":"https:\/\/www.nayttely.fi\/laskin\/teosvalilaskuri\/","title":{"rendered":"Teosv\u00e4lilaskuri"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"744\" height=\"467\" src=\"http:\/\/www.nayttely.fi\/laskin\/wp-content\/uploads\/2025\/08\/ripustuslaskin1.png\" alt=\"\" class=\"wp-image-81\" srcset=\"https:\/\/www.nayttely.fi\/laskin\/wp-content\/uploads\/2025\/08\/ripustuslaskin1.png 744w, https:\/\/www.nayttely.fi\/laskin\/wp-content\/uploads\/2025\/08\/ripustuslaskin1-300x188.png 300w\" sizes=\"auto, (max-width: 744px) 100vw, 744px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<head>\n  <meta charset=\"UTF-8\">\n  <style>\n    body {\n      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n      background-color: #f4f4f4;\n      margin: 0;\n      padding: 15px;\n    }\n    .container {\n      max-width: 612px;\n      margin: auto;\n      background: white;\n      padding: 30px;\n      border-radius: 8px;\n      box-shadow: 0 0 10px rgba(0,0,0,0.1);\n    }\n    h1 {\n      text-align: center;\n      color: #333;\n    }\n    label {\n      display: block;\n      margin-top: 15px;\n      font-weight: bold;\n    }\n    input[type=\"number\"] {\n      width: 100%;\n      padding: 10px;\n      margin-top: 5px;\n      box-sizing: border-box;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n    }\n    .frame-widths input {\n      margin-bottom: 10px;\n    }\n    .radio-group {\n      margin-top: 20px;\n    }\n    .radio-group label {\n      font-weight: normal;\n      margin-right: 15px;\n    }\n    button {\n      margin-top: 20px;\n      padding: 12px 20px;\n      background-color:#bbbbbb;\n      color: white;\n      border: 1px solid #9a9a9a;\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: 16px;\n    }\n    button:hover {\n      background-color: #005fa3;\n    }\n    #result {\n      margin-top: 20px;\n      font-weight: bold;\n      color: #333;\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"container\">\n    <label for=\"totalWidth\">Kokonaisleveys (cm):<\/label>\n    <input type=\"number\" id=\"totalWidth\" required>\n    <div class=\"radio-group\">\n      <label><input type=\"radio\" name=\"gapMode\" value=\"minus1\" checked> Ripustuskohdan leveyden mukaan<\/label>\n      <label><input type=\"radio\" name=\"gapMode\" value=\"plus1\"> Sein\u00e4n leveyden mukaan<\/label>\n    <\/div>\n\n    <label for=\"numFrames\">Teosten m\u00e4\u00e4r\u00e4:<\/label>\n    <input type=\"number\" id=\"numFrames\" required oninput=\"generateFrameInputs()\">\n\n    <div class=\"frame-widths\" id=\"frameInputs\"><\/div>\n\n\n    <button onclick=\"calculateSpacing()\">Laske v\u00e4li<\/button>\n\n    <div id=\"result\"><\/div>\n  <\/div>\n\n  <script>\n    function generateFrameInputs() {\n      const num = parseInt(document.getElementById('numFrames').value);\n      const container = document.getElementById('frameInputs');\n      container.innerHTML = '';\n      if (!isNaN(num) && num > 0) {\n        for (let i = 0; i < num; i++) {\n          const label = document.createElement('label');\n          label.textContent = `Taulu ${i + 1} leveys (cm):`;\n          const input = document.createElement('input');\n          input.type = 'number';\n          input.required = true;\n          input.className = 'frame-width';\n          container.appendChild(label);\n          container.appendChild(input);\n        }\n      }\n    }\n\n    function calculateSpacing() {\n      const totalWidth = parseFloat(document.getElementById('totalWidth').value);\n      const frameInputs = document.querySelectorAll('.frame-width');\n      const gapMode = document.querySelector('input[name=\"gapMode\"]:checked').value;\n\n      if (isNaN(totalWidth) || frameInputs.length === 0) {\n        document.getElementById('result').textContent = \"Sy\u00f6t\u00e4 kelvolliset arvot.\";\n        return;\n      }\n\n      let totalFramesWidth = 0;\n      for (let input of frameInputs) {\n        const val = parseFloat(input.value);\n        if (isNaN(val) || val <= 0) {\n          document.getElementById('result').textContent = \"Sy\u00f6t\u00e4 kelvolliset teosten leveydet.\";\n          return;\n        }\n        totalFramesWidth += val;\n      }\n\n      const numGaps = gapMode === 'plus1' ? frameInputs.length + 1 : frameInputs.length - 1;\n      const totalSpacing = totalWidth - totalFramesWidth;\n\n      if (totalSpacing < 0) {\n        document.getElementById('result').textContent = \"Teokset eiv\u00e4t mahdu annettuun leveyteen.\";\n        return;\n      }\n\n      const spacing = numGaps > 0 ? (totalSpacing \/ numGaps).toFixed(2) : 0;\n      document.getElementById('result').textContent = `Sopiva v\u00e4li taulujen v\u00e4liin on ${spacing} cm.`;\n    }\n  <\/script>\n<\/body>\n<\/div>\n\n\n\n<p>2025 A.A.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kokonaisleveys (cm): Ripustuskohdan leveyden mukaan Sein\u00e4n leveyden mukaan Teosten m\u00e4\u00e4r\u00e4: Laske v\u00e4li 2025 A.A.<\/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-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.nayttely.fi\/laskin\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nayttely.fi\/laskin\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.nayttely.fi\/laskin\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.nayttely.fi\/laskin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nayttely.fi\/laskin\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":30,"href":"https:\/\/www.nayttely.fi\/laskin\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/www.nayttely.fi\/laskin\/wp-json\/wp\/v2\/pages\/18\/revisions\/112"}],"wp:attachment":[{"href":"https:\/\/www.nayttely.fi\/laskin\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}