Dynamic Checklist with State in URL<\/title>\n<style>\n\/* Styles for the table *\/\n#tableContainer table {\n border-collapse: collapse;\n margin-left: auto !important;\n margin-right: auto !important;\n display: block !important;\n width: 100%;\n}\n\n\/* Styles for table cells *\/\n#tableContainer td {\n border: 1px solid #000;\n text-align: center;\n padding: 0; \/* Remove padding *\/\n position: relative; \/* Required for absolute positioning of checkbox *\/\n cursor: pointer;\n}\n\n\/* Make the checkbox fill the entire cell *\/\ninput[type=\"checkbox\"] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0; \/* Remove margins *\/\n z-index: 1; \/* Place above other elements *\/\n cursor: pointer;\n opacity: 0.5; \/* Adjust for a more checkbox-like appearance *\/\n}\n\n\/* Add some basic styling for headers for better visuals *\/\n#tableContainer th {\n padding: 10px;\n background-color: #f0f0f0;\n border: 1px solid #000;\n}\n#infoContainer td {\n padding: 10px;\n background-color: #f0f0f0;\n border: 1px solid #000;\n}\n\n#infoContainer input[type=\"text\"] {\n width: 100%;\n box-sizing: border-box; \/* This ensures padding and border are included in width *\/\n padding: 10px; \/* Give some padding for better appearance *\/\n border: 1px solid #ccc; \/* Style the border *\/\n margin-right: 10px; \/* Add a little spacing between input fields *\/\n}\n\n<\/style>\n\n<\/head>\n<body>\n\n<div id=\"infoContainer\">\n<form id=\"myForm\">\n <table>\n <tr>\n <td><input type=\"text\" id=\"Product\" placeholder=\"Product Name\"><\/td>\n <td><input type=\"text\" id=\"ASIN\" placeholder=\"ASIN\"><\/td>\n<td><button id=\"resetButton\" type=\"button\">Reset<\/button><\/td>\n <\/tr>\n <\/table>\n<\/form>\n<\/div>\n<div id=\"tableContainer\"><\/div>\n\n<script>\n\n const colHeaders = [\"Title\", \"BPs\", \"Backend\", \"EBC\", \"Price Check\", \"Category\", \"Images\", \"Vine\", \"Videos\",\"PPC\", \"FBA Fees\", \"Referral fees\", \"Variation?\"];\n const rowHeaders = [\"DE\",\"ES\",\"FR\",\"IT\",\"US\",\"UK\",\"CA\",\"AU\",\"IN\"];\n\n function generateTable() {\n const table = document.createElement('table');\n const thead = document.createElement('thead');\n const tbody = document.createElement('tbody');\n\n \/\/ Generate headers\n const headerRow = document.createElement('tr');\n const emptyHeader = document.createElement('th');\n headerRow.appendChild(emptyHeader);\n colHeaders.forEach(colHeader => {\n const th = document.createElement('th');\n th.innerText = colHeader;\n headerRow.appendChild(th);\n });\n thead.appendChild(headerRow);\n table.appendChild(thead);\n\n \/\/ Generate rows with checkboxes\n rowHeaders.forEach((rowHeader, rowIndex) => {\n const tr = document.createElement('tr');\n const th = document.createElement('th');\n th.innerText = rowHeader;\n tr.appendChild(th);\n colHeaders.forEach((colHeader, colIndex) => {\n const td = document.createElement('td');\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.id = `checkbox-${rowIndex}-${colIndex}`;\n checkbox.addEventListener('change', updateUrl);\n td.appendChild(checkbox);\n tr.appendChild(td);\n });\n tbody.appendChild(tr);\n });\n table.appendChild(tbody);\n\n document.getElementById('tableContainer').appendChild(table);\n }\n\n function updateUrl() {\n const hashParts = [];\n \/\/ Get values from the text fields and encode them.\n const productValue = encodeURIComponent(document.getElementById('Product').value);\n const asinValue = encodeURIComponent(document.getElementById('ASIN').value);\n hashParts.push(`Product=${productValue}`);\n document.title = `${productValue}`\n hashParts.push(`ASIN=${asinValue}`);\n rowHeaders.forEach((rowHeader, rowIndex) => {\n colHeaders.forEach((colHeader, colIndex) => {\n const checkbox = document.getElementById(`checkbox-${rowIndex}-${colIndex}`);\n const checkboxState = checkbox.checked ? \"1\" : \"0\";\n hashParts.push(`checkbox-${rowIndex}-${colIndex}=${checkboxState}`);\n });\n });\n window.location.hash = hashParts.join('&');\n }\n\n function loadFromUrl() {\n const hash = new URLSearchParams(window.location.hash.substring(1));\n \/\/ Set values for text fields\n if (hash.has('Product')) {\n document.getElementById('Product').value = decodeURIComponent(hash.get('Product'));\n }\n if (hash.has('ASIN')) {\n document.getElementById('ASIN').value = decodeURIComponent(hash.get('ASIN'));\n }\n rowHeaders.forEach((rowHeader, rowIndex) => {\n colHeaders.forEach((colHeader, colIndex) => {\n if (hash.has(`checkbox-${rowIndex}-${colIndex}`)) {\n const checkbox = document.getElementById(`checkbox-${rowIndex}-${colIndex}`);\n checkbox.checked = hash.get(`checkbox-${rowIndex}-${colIndex}`) === '1';\n }\n });\n });\n }\n\n \/\/ Generate the table and attach event listeners\n window.addEventListener('load', () => {\n generateTable();\n loadFromUrl();\nfunction resetTable() {\n \/\/ Reset the checkboxes\n const checkboxes = document.querySelectorAll('#tableContainer input[type=\"checkbox\"]');\n checkboxes.forEach(checkbox => {\n checkbox.checked = false;\n });\n\n \/\/ Reset the text input fields\n const inputs = document.querySelectorAll('input[type=\"text\"]');\n inputs.forEach(input => {\n input.value = '';\n });\n\n \/\/ Update the URL to reflect the reset state\n updateUrl();\n}\n\n\/\/ Attach the reset event to the button\ndocument.getElementById('resetButton').addEventListener('click', function(event) {\n event.preventDefault(); \/\/ Prevent form submission\n resetTable();\n});\n\n document.getElementById('Product').addEventListener('input', updateUrl);\n document.getElementById('ASIN').addEventListener('input', updateUrl);\n });\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dynamic Checklist with State in URL Reset<\/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-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":18,"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":10,"date":"2023-09-26T16:33:09","date_gmt":"2023-09-26T16:33:09","guid":{"rendered":"https:\/\/samuelealbano.it\/?page_id=10"},"modified":"2023-09-27T21:18:42","modified_gmt":"2023-09-27T21:18:42","slug":"checkbox-thing","status":"publish","type":"page","link":"https:\/\/samuelealbano.it\/index.php\/checkbox-thing\/","title":{"rendered":"Checkbox thing"},"content":{"rendered":"\n\n\n \n \n Dynamic Checklist with State in URL<\/title>\n<style>\n\/* Styles for the table *\/\n#tableContainer table {\n border-collapse: collapse;\n margin-left: auto !important;\n margin-right: auto !important;\n display: block !important;\n width: 100%;\n}\n\n\/* Styles for table cells *\/\n#tableContainer td {\n border: 1px solid #000;\n text-align: center;\n padding: 0; \/* Remove padding *\/\n position: relative; \/* Required for absolute positioning of checkbox *\/\n cursor: pointer;\n}\n\n\/* Make the checkbox fill the entire cell *\/\ninput[type=\"checkbox\"] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0; \/* Remove margins *\/\n z-index: 1; \/* Place above other elements *\/\n cursor: pointer;\n opacity: 0.5; \/* Adjust for a more checkbox-like appearance *\/\n}\n\n\/* Add some basic styling for headers for better visuals *\/\n#tableContainer th {\n padding: 10px;\n background-color: #f0f0f0;\n border: 1px solid #000;\n}\n#infoContainer td {\n padding: 10px;\n background-color: #f0f0f0;\n border: 1px solid #000;\n}\n\n#infoContainer input[type=\"text\"] {\n width: 100%;\n box-sizing: border-box; \/* This ensures padding and border are included in width *\/\n padding: 10px; \/* Give some padding for better appearance *\/\n border: 1px solid #ccc; \/* Style the border *\/\n margin-right: 10px; \/* Add a little spacing between input fields *\/\n}\n\n<\/style>\n\n<\/head>\n<body>\n\n<div id=\"infoContainer\">\n<form id=\"myForm\">\n <table>\n <tr>\n <td><input type=\"text\" id=\"Product\" placeholder=\"Product Name\"><\/td>\n <td><input type=\"text\" id=\"ASIN\" placeholder=\"ASIN\"><\/td>\n<td><button id=\"resetButton\" type=\"button\">Reset<\/button><\/td>\n <\/tr>\n <\/table>\n<\/form>\n<\/div>\n<div id=\"tableContainer\"><\/div>\n\n<script>\n\n const colHeaders = [\"Title\", \"BPs\", \"Backend\", \"EBC\", \"Price Check\", \"Category\", \"Images\", \"Vine\", \"Videos\",\"PPC\", \"FBA Fees\", \"Referral fees\", \"Variation?\"];\n const rowHeaders = [\"DE\",\"ES\",\"FR\",\"IT\",\"US\",\"UK\",\"CA\",\"AU\",\"IN\"];\n\n function generateTable() {\n const table = document.createElement('table');\n const thead = document.createElement('thead');\n const tbody = document.createElement('tbody');\n\n \/\/ Generate headers\n const headerRow = document.createElement('tr');\n const emptyHeader = document.createElement('th');\n headerRow.appendChild(emptyHeader);\n colHeaders.forEach(colHeader => {\n const th = document.createElement('th');\n th.innerText = colHeader;\n headerRow.appendChild(th);\n });\n thead.appendChild(headerRow);\n table.appendChild(thead);\n\n \/\/ Generate rows with checkboxes\n rowHeaders.forEach((rowHeader, rowIndex) => {\n const tr = document.createElement('tr');\n const th = document.createElement('th');\n th.innerText = rowHeader;\n tr.appendChild(th);\n colHeaders.forEach((colHeader, colIndex) => {\n const td = document.createElement('td');\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.id = `checkbox-${rowIndex}-${colIndex}`;\n checkbox.addEventListener('change', updateUrl);\n td.appendChild(checkbox);\n tr.appendChild(td);\n });\n tbody.appendChild(tr);\n });\n table.appendChild(tbody);\n\n document.getElementById('tableContainer').appendChild(table);\n }\n\n function updateUrl() {\n const hashParts = [];\n \/\/ Get values from the text fields and encode them.\n const productValue = encodeURIComponent(document.getElementById('Product').value);\n const asinValue = encodeURIComponent(document.getElementById('ASIN').value);\n hashParts.push(`Product=${productValue}`);\n document.title = `${productValue}`\n hashParts.push(`ASIN=${asinValue}`);\n rowHeaders.forEach((rowHeader, rowIndex) => {\n colHeaders.forEach((colHeader, colIndex) => {\n const checkbox = document.getElementById(`checkbox-${rowIndex}-${colIndex}`);\n const checkboxState = checkbox.checked ? \"1\" : \"0\";\n hashParts.push(`checkbox-${rowIndex}-${colIndex}=${checkboxState}`);\n });\n });\n window.location.hash = hashParts.join('&');\n }\n\n function loadFromUrl() {\n const hash = new URLSearchParams(window.location.hash.substring(1));\n \/\/ Set values for text fields\n if (hash.has('Product')) {\n document.getElementById('Product').value = decodeURIComponent(hash.get('Product'));\n }\n if (hash.has('ASIN')) {\n document.getElementById('ASIN').value = decodeURIComponent(hash.get('ASIN'));\n }\n rowHeaders.forEach((rowHeader, rowIndex) => {\n colHeaders.forEach((colHeader, colIndex) => {\n if (hash.has(`checkbox-${rowIndex}-${colIndex}`)) {\n const checkbox = document.getElementById(`checkbox-${rowIndex}-${colIndex}`);\n checkbox.checked = hash.get(`checkbox-${rowIndex}-${colIndex}`) === '1';\n }\n });\n });\n }\n\n \/\/ Generate the table and attach event listeners\n window.addEventListener('load', () => {\n generateTable();\n loadFromUrl();\nfunction resetTable() {\n \/\/ Reset the checkboxes\n const checkboxes = document.querySelectorAll('#tableContainer input[type=\"checkbox\"]');\n checkboxes.forEach(checkbox => {\n checkbox.checked = false;\n });\n\n \/\/ Reset the text input fields\n const inputs = document.querySelectorAll('input[type=\"text\"]');\n inputs.forEach(input => {\n input.value = '';\n });\n\n \/\/ Update the URL to reflect the reset state\n updateUrl();\n}\n\n\/\/ Attach the reset event to the button\ndocument.getElementById('resetButton').addEventListener('click', function(event) {\n event.preventDefault(); \/\/ Prevent form submission\n resetTable();\n});\n\n document.getElementById('Product').addEventListener('input', updateUrl);\n document.getElementById('ASIN').addEventListener('input', updateUrl);\n });\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dynamic Checklist with State in URL Reset<\/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-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":18,"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/samuelealbano.it\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}