wanderval

você pode fazer um método que estende as funcionalidade do objeto JSON: var dict = {}; var path = 'a.b.c'; var valueToObject = 55; // Estendendo o objeto JSON para incluir o método toObject JSON.stringPathToObject = function(path, value, separator) { const separatorValue = separator || "."; return path.split(separatorValue).reduceRight((acc, key) => ({ [key]: acc }), value); }; // Usando o novo método JSON.toObject let result = JSON.stringPathToObject(path, valueToObject); // Print result console.log(JSON.stringify(result, null, 2)); JSBIN: https://jsbin.com/reyakiqiqi/edit?html,js,console,output

O que pode ser feito é impedir que o usuário consiga digitar no input, assim ele fica limitado apenas a seleção de data através do calender: JSBIN: https://jsbin.com/bituresofi/edit?html,output

você pode sim usar metodos javascript para comparar a data ou pode limitar a data, o melhor seria usar um input date. EX 1: com javascript JSbin: https://jsbin.com/valavizabo/edit?html,js,console,output function compararDataDigitada(dataDigitada) { console.log(dataDigitada); // Obter a data atual e zerar horas, minutos e segundos const dataAtual = new Date(); dataAtual.setHours(0, 0, 0, 0); // Zera a hora da data atual // Dividir a string da data fornecida pelo usuário e formatá-la corretamente const [dia, mes, ano] = dataDigitada.split('/').map(Number); // Criar um objeto Date com a data digitada pelo usuário const dataUsuario = new Date(ano, mes - 1, dia); // O mês começa do zero em JavaScript (Janeiro é 0) dataUsuario.setHours(0, 0, 0, 0); // Zera a hora da data digitada // Comparar a data do usuário com a data atual if (dataUsuario < dataAtual) { return "Informe uma data válida (não retroativa)."; } else if (dataUsuario.getTime() === dataAtual.getTime()) { return "A data digitada é igual à data atual. O sistema liberará os inputs."; } else { return "A data é válida."; } } function formatarData(dataISO) { // Recebe a data no formato YYYY-MM-DD e transforma em DD/MM/YYYY const [ano, mes, dia] = dataISO.split("-"); return `${dia}/${mes}/${ano}`; } function verificarData() { // Obter a data do input const dataDigitada = document.getElementById("dataInput").value; // Verificar se o campo de data foi preenchido if (!dataDigitada) { document.getElementById("resultado").textContent = "Por favor, insira uma data."; return; } const dataFormatada = formatarData(dataDigitada); // Chamar a função compararDataDigitada e exibir o resultado const resultado = compararDataDigitada(dataFormatada); document.getElementById("resultado").textContent = resultado; } // Exemplo de uso const resultado = compararDataDigitada("26/09/2024"); console.log(resultado); EX 2: limitando o input date JSBin: https://jsbin.com/gutihunowa/edit?html,output <h2>Digite uma data válida (não retroativa)</h2> <!-- Input de data, com a data mínima sendo a atual --> <label for="dataInput">Digite uma data:</label> <input type="date" id="dataInput"> <!-- Botão para verificar a data --> <button onclick="verificarData()">Verificar</button> <!-- Exibição do resultado --> <p id="resultado"></p> <script> // Função para definir a data mínima como a data atual function definirDataMinima() { const hoje = new Date(); const ano = hoje.getFullYear(); const mes = String(hoje.getMonth() + 1).padStart(2, '0'); // Janeiro é 0, então +1 const dia = String(hoje.getDate()).padStart(2, '0'); // Definir a data mínima no campo de input no formato YYYY-MM-DD const dataAtual = `${ano}-${mes}-${dia}`; document.getElementById("dataInput").setAttribute("min", dataAtual); } function verificarData() { const dataDigitada = document.getElementById("dataInput").value; if (!dataDigitada) { document.getElementById("resultado").textContent = "Por favor, insira uma data."; } else { document.getElementById("resultado").textContent = "A data digitada é válida!"; } } // Chamar a função para definir a data mínima assim que a página carrega window.onload = definirDataMinima; </script>

no seu CSS você vai ter que adicionar uma regra para a classe container, o motivo é que bootstrap aplica regras de @media query para essa classe e você precisa subscreve-la para que os media queries não hajam: linha a ser adicionada .container.page {min-width: 100%} style com linha adicionada: <style> body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #FAFAFA; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 210mm; min-height: 297mm; padding: 4mm; margin: 1mm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } /*.subpage { padding: 0.5cm; border: 0px red solid; height: 257mm; outline: 2cm #FFEAEA solid; }*/ .cliente { margin-top: 30px; font-size: 20px; } th {font-size: 14px; } td {font-size: 12px; } .logo {height: 64px; margin: 20px 0px 0px 20px;} .font-cabecalho {font-size: 12px; margin-left: 20px; text-align: center; margin: 20px 0px 0px 20px;} @page { width: 100%; height: 100%; margin: 0; padding: 0; } @media print { html, body { width: 210mm; height: 297mm; } .container.page {min-width: 100%} .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } } </style> codigo refatorado removendo PHP usado no test: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ficha</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" defer></script> <link href="https://fonts.googleapis.com/css2?family=Poppins" rel="stylesheet"> <link href="css/ficha.css" rel="stylesheet"> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script> <style> body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #FAFAFA; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 210mm; min-height: 297mm; padding: 4mm; margin: 1mm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } /*.subpage { padding: 0.5cm; border: 0px red solid; height: 257mm; outline: 2cm #FFEAEA solid; }*/ .cliente { margin-top: 30px; font-size: 20px; } th {font-size: 14px; } td {font-size: 12px; } .logo {height: 64px; margin: 20px 0px 0px 20px;} .font-cabecalho {font-size: 12px; margin-left: 20px; text-align: center; margin: 20px 0px 0px 20px;} @page { width: 100%; height: 100%; margin: 0; padding: 0; } @media print { html, body { width: 210mm; height: 297mm; } .container.page {min-width: 100%} .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } } </style> </head> <body> <div class="container page"> <div class="row"> <div class=""> <table> <tr> <td><img src="../image/logo.png" class="logo" alt="logo"></td> <td style="width:100%"> <span class="font-cabecalho"> <p><b>DCG-Info</b><br> 00.000.000/0001-00<br> Rua João da Silva, 123 - Jardim Bonito - Santos - SP<br> E-mail: email@hotmail.com - Fone: (19)99876-5432</p> </span> </td> </tr> </table> <hr> <div style="text-align: center;"> <p class="cliente">Fevereiro/2024</p> </div> <hr> <table class="table"> <thead> <tr> <th scope="col">Data</th> <th scope="col">Tipo Atendimento</th> <th scope="col">Hora inicial</th> <th scope="col">Hora fim</th> <th scope="col">Total</th> <th scope="col">AM</th> <th scope="col">Observação</th> </tr> </thead> <tbody> <tr> <td>21/02/2024</td> <td>Presencial</td> <td>10:00</td> <td>11:00</td> <td>00:30</td> <td>Não</td> <td>Observação</td> </tr> <!-- Segunda linha de dados --> <tr> <td>21/02/2024</td> <td>Presencial</td> <td>10:00</td> <td>11:00</td> <td>00:30</td> <td>Não</td> <td>Observação</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>

eu postei inicialmente os metodo que deveria ser adicionado e o que deveria ser modificado mas o restante dos metodos permanecem, vi que você removeu alguns metodos. 1-so fiz alterações não substitui todo o script 2-tem que rodar o projeto em um servidor local senão terá problema de cors function allowDrop(event) { event.preventDefault(); } function drag(event, type) { event.dataTransfer.setData("text", type); } async function loadHtmlFile(pathFile) { try { const response = await fetch(pathFile); const html = await response.text(); return html; } catch (error) { console.error('Error on load file:', error); return null; } } async function drop(event) { event.preventDefault(); var type = event.dataTransfer.getData("text"); var content = ""; template = { "menu": './template/menu.html', "header": './template/header.html', "content": './template/content.html', "footer": './template/footer.html' } content = await loadHtmlFile(template[type]); var dropzone = event.target.closest('.content'); if (dropzone) { var block = document.createElement("div"); block.className = "alert alert-primary position-relative"; block.innerHTML = content; var deleteButton = document.createElement("i"); deleteButton.className = "fa fa-trash delete-button"; deleteButton.onclick = function() { if (confirm("Tem certeza que deseja deletar este bloco?")) { block.remove(); } }; var redButton = document.createElement("button"); redButton.className = "red-button"; redButton.innerHTML = "Deletar"; redButton.onclick = function() { if (confirm("Tem certeza que deseja deletar este bloco?")) { block.remove(); } }; var duplicateButton = document.createElement("button"); duplicateButton.className = "duplicate-button"; duplicateButton.innerHTML = "Duplicar"; duplicateButton.onclick = function() { duplicateBlock(block); }; block.appendChild(deleteButton); block.appendChild(redButton); block.appendChild(duplicateButton); dropzone.appendChild(block); tinymce.init({ selector: '.editable', height: 200, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help' }); } } function duplicateBlock(originalBlock) { var newBlock = originalBlock.cloneNode(true); var deleteButton = newBlock.querySelector('.delete-button'); deleteButton.onclick = function() { if (confirm("Tem certeza que deseja deletar este bloco?")) { newBlock.remove(); } }; var redButton = newBlock.querySelector('.red-button'); redButton.onclick = function() { if (confirm("Tem certeza que deseja deletar este bloco?")) { newBlock.remove(); } }; document.querySelector('.content').appendChild(newBlock); }

Bom amigo, eu citei a borda pq com o css que forneceu, não fica igual ao que seria a estrutura da pagina contendo bordas, como na sua pergunta você não especificou se esta usando um css separa para mediaquery de print, eu pressuponho que esse css está sendo usado em comum tanto pela pagina quando com o que é esperado da impressão. Então ajudaria que colocasse uma estrutura básica com a estrutura inicial antes do que é esperado da impressão. Obs: Ao usar o seu css com uma estrutura de html feita por mim sua tabela fica conforme está sendo imprimido https://jsbin.com/hafecayiwi/edit?html,css,output

Fica difícil compreender seu problema apenas com o CSS, não tendo nem mesmo a estrutura básica do html, pq com esse css as tables ficam sem bordas mesmo, então se você está colocando a bordar com as properties da table acredito que seja melhor fazer essa mudança para o css.

criando um método que implement o fetch e alterando pra async/await você consegue o que quer, mas manipulando arquivo você só conseguira executar o html dentro de um servidor não vai conseguir abrindo o html direto no browser. async function loadHtmlFile(pathFile) { try { const response = await fetch(pathFile); const html = await response.text(); return html; } catch (error) { console.error('Error on load file:', error); return null; } } ai você chamaria dessa forma e adicionando o async para que consiga lidar com a promise com await, nesse exemplo criei uma pasta "template" on de vai conter todos os arquivos html abstraidos desse metodo: async function drop(event) { event.preventDefault(); var type = event.dataTransfer.getData("text"); var content = ""; if (type === "menu") { content = await loadHtmlFile('./template/menu.html'); } else if (type === "header") { content = await loadHtmlFile('./template/header.html'); } else if (type === "content") { content = await loadHtmlFile('./template/content.html'); } else if (type === "footer") { content = await loadHtmlFile('./template/footer.html'); } Uma sugestão de melhoria de codigo, em casos masi simples: async function drop(event) { event.preventDefault(); var type = event.dataTransfer.getData("text"); var content = ""; /*if (type === "menu") { content = await loadHtmlFile('./template/menu.html'); } else if (type === "header") { content = await loadHtmlFile('./template/header.html'); } else if (type === "content") { content = await loadHtmlFile('./template/content.html'); } else if (type === "footer") { content = await loadHtmlFile('./template/footer.html'); }*/ template = { "menu": './template/menu.html', "header": './template/header.html', "content": './template/content.html', "footer": './template/footer.html' } content = await loadHtmlFile(template[type]);

você não vai conseguir alterar no documento por se tratar de um avento dinâmico, tudo acontece em memoria, a unica forma de alterar uma definição de arquivo é reescrevendo o arquivo! Mas dependendo do que quer implementar existe alternativas para armazenar o valor em um cachestore ou indexDB que são forma de armazenamento de dados no browser, mas como disse é algo dinâmico e só funciona localmente

Seria algo dessa maneira no html tente deixar um nome comum apenas o id precisa ser um valor unico class deve ser usado para definir padrões visuais pensando em um grupo HTML: <div id="divPai"> <div id="bannerA" class="banner"> <a href="link1"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/225865593/rmu3bewcv3pqkzx32hjk-qe5uzhcwvt.jpg" alt="Imagem 1"></a> <a href="link2"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/217352435/rfl14_off_pk_1-v2ofz4r0h3.jpg" alt="Imagem 2"></a> <a href="link3"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/77172972/45c63850c8.jpg" alt="Imagem 3"></a> </div> <hr> <div id="bannerB" class="banner"> <a href="link4"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/225865593/rmu3bewcv3pqkzx32hjk-qe5uzhcwvt.jpg" alt="Imagem 4"></a> <a href="link5"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/217352435/rfl14_off_pk_1-v2ofz4r0h3.jpg" alt="Imagem 5"></a> <a href="link6"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/77172972/45c63850c8.jpg" alt="Imagem 6"></a> </div> <hr> <div id="bannerC" class="banner"> <a href="link7"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/225865593/rmu3bewcv3pqkzx32hjk-qe5uzhcwvt.jpg" alt="Imagem 7"></a> <a href="link8"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/217352435/rfl14_off_pk_1-v2ofz4r0h3.jpg" alt="Imagem 8"></a> <a href="link9"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/77172972/45c63850c8.jpg" alt="Imagem 9"></a> </div> </div> CSS: /* Estilos opcionais para o banner */ #divPai { margin: auto; border: 2px solid red; } .banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner img { width: 100%; height: auto; } /*#bannerA { width: 240px; height: 480px; overflow: hidden; position: relative; }*/ .banner img { position: absolute; top: 0; left: 0; animation-name: smooth-effect; animation-duration: 4s; } /*#bannerA img.active { opacity: 1; }*/ /* The animation code */ @keyframes smooth-effect { from {opacity: 0;} to {opacity: 1;} } JS: foi criado a function makeSliderKind e alterado o metodo showrandomImage para uma arrow function function makeSliderKind(containerClass, intervalTime){ var images = document.querySelectorAll(containerClass+" img"); // Função para exibir uma imagem aleatória const showRandomImage = () => { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; }; // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, intervalTime); } makeSliderKind('#bannerA', 2000); makeSliderKind('#bannerB', 10000); makeSliderKind('#bannerC', 3000); Jsbin: https://jsbin.com/qimajoyuna/edit?html,css,js,output

Coloca o html amigo ai ajudo alguém a simular o problema!

Tem alguns novos padrões de tipografia fluida no css, pode consultar esse artigo aqui https://moderncss.dev/container-query-units-and-fluid-typography/ CSS container queries - CSS: Cascading Style Sheets | MDN (mozilla.org) ex: https://jsbin.com/qesenuzese/edit?html,css,output

Seu problema está no javascript quando está adicionando style.display='block', "block" irá tornar os elementos em coluna neste caso poderia ser "inline-block" ou "inline-flex" JS: // Problema if(itemSelecionado.value == "Sim"){ document.getElementById("divPai").style.display='block'; } // Solução if(itemSelecionado.value == "Sim"){ document.getElementById("divPai").style.display='inline-flex'; } Alteração de código HTML - alterado nome da classe para reaproveitamento <!--Removido methodo de invocação onchange passado para o script--> <select id="itemSelecionado" required> <option value=""></option> <option value="Sim" style="font-size:18px;">Sim</option> <option value="Não" style="font-size:18px;">não</option> </select> <!--Alterado nome das classes para reaproveitamento--> <div id="divPai"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> <div class="item">item4</div> <div class="item">item5</div> <div class="item">item6</div> </div> CSS: #divPai { display: inline-flex; flex-wrap: wrap; gap: 12px; border: 1px solid red; padding: 6px; align-items: center; } #divPai .item { max-width: 90px; border: 1px solid green; } JS: document.getElementById("divPai").style.display='none'; // Substituido if/else por condicional ternário function funcAprendiz(){ var itemSelecionado = document.getElementById("itemSelecionado"); var elementStyle = document.getElementById("divPai").style; elementStyle.display = itemSelecionado.value == "Sim" ? 'inline-flex' : 'none'; } // Listener document.getElementById('itemSelecionado').addEventListener('change', funcAprendiz); JsBin: https://jsbin.com/geyeqahuqi/edit?html,css,js,output

Tá ai uma versão refatorada minha desse código, tava de bobeira achei interessante esses ifs ai, então decidi partir pra ignorancia e começar a destruir esse código kk,a constant é pq to mexendo com java ai surgiu a ideia rs. HTML modificado <div id="container"> <textarea maxlength="100"></textarea> <p id="idToto"></p> </div> JS modificado function constant() { return { COUNTER_PLURAL_MESSAGE: " caracteres digitados - máximo ", COUNTER_SINGLE_MESSAGE: " caracter digitado - máximo ", LIMIT_MESSAGE: "Limite de caracteres atingido!" }; } function characterCounter() { const max = 100; const container = document.getElementById('container'); const [textArea, inputMessage] = container.children; const amountCharacterTyped = textArea.value.length; const selectMessage = () => amountCharacterTyped === 1 ? constant().COUNTER_SINGLE_MESSAGE : constant().COUNTER_PLURAL_MESSAGE; if (amountCharacterTyped === 0){ inputMessage.innerHTML = ''; } else if (amountCharacterTyped > 0 && amountCharacterTyped < max) { inputMessage.innerHTML = amountCharacterTyped + selectMessage() + max; } else { inputMessage.innerHTML = constant().LIMIT_MESSAGE; } } function clear() { document.querySelector('#container p').inputMessage.innerHTML = ""; } document.querySelector('textarea').addEventListener("keyup", characterCounter); document.querySelector('textarea').addEventListener("focusout", clear); JSbin: https://jsbin.com/yaduyigomo/edit?html,js,output

A funcionalidade esperada não tá muito clara! A respeito do loop está sendo feito sim um "forEach" na qual sempre quando você clica no checkbox com o id "reason_all_velongings" é executado o forEach que adiciona no mesmo select os item contidos do array "optionReason" optionsReason = ['Conferencia', 'Desobstrução', 'Entrega ao Cliente/Propr',' Inspeção', 'Manobra', 'Venda' ]; optionsReason.forEach((reason) => { option = new Option(reason, reason.toLowerCase()); movementsSelect.options[movementsSelect.options.length] = option; }); Possível problema: 1- Está usando o mesmo ID "check-belongings" em diferentes checkbox