washalbano

Boa tarde. Acredito que cada dev vai te indicar um caminho. ⟶ ou seja: há inúmeros caminhos que podes seguir. Veja se esse roadmap te orienta: https://roadmap.sh/frontend

Olá! Isso acontece por causa de um cache automático dos browsers. Pode variar entre minutos e meses. Uma forma de contornar é toda vez que atualizar seu css passar uma nova variável informando a versão onde ele é carregado. ex.: <link rel="stylesheet" href="seu-arquivo.css?v2"/> <link rel="stylesheet" href="seu-arquivo.css?v2.1"/> cada vez que essa variável mudar, um novo cache será criado Só lembrando que há outras formas de se customizar o tempo de cache para tipos específicos de arquivo. Mas exige conhecimento mais aprofundado. (q eu não tenho)

Olá! Tudo beleza? Foi durante o update? Aquela vírgula no fim da linha da data do nascimento está sobrando. Remova e tente novamente.

Tente assim: https://codepen.io/tutsplus/pen/MWedpoj

Muito boa a sua solução @DiF! Me instigou a também escrever uma sugestão que pode ser conferida em: https://codepen.io/washalbano/pen/poLoNxN <section class="organogram"> <div class="row p-12"><div class="block pin-b">Presidente</div></div> <div class="row p-12"> <div class="block pin-e">Financeiro</div> <hr /> <div class="block pin-s">RH</div> </div> <div class="row p-12"> <div class="block pin-e">TI</div> <hr /> <div class="block pin-s">Contábil</div> </div> <div class="row"><hr class="half-square" /></div> <div class="row align-items-start"> <div class="block pin-t">Produção</div> <div class="block pin-t">Comercial<br />Central</div> <div class="block pin-t">Logística</div> </div> </section> :root { --bgc: #ededed; --pointSize: 10px; --lineBorderWidth: 4px; --lineStyle: var(--lineBorderWidth) solid #ccc; --lineHeight: 20px; --blockWidth: 150px; --blockHeight: 50px; --blockMargin: 24px; --p12: 12px; } *, *:after, *:before { box-sizing: border-box; } body { background-color: var(--bgc); font-family: arial; } .p-12 { padding: var(--p12); } .align-items-start { align-items: start !important; } .organogram { padding: var(--p12); } .organogram .row, .organogram .block, .organogram hr.half-square { display: flex; justify-content: center; align-items: center; text-align: center; } .organogram .block { border: 2px solid #333; padding: var(--p12); border-radius: var(--p12); width: var(--blockWidth); min-height: var(--blockHeight); position: relative; } .organogram .block + .block { margin-left: var(--blockMargin); } .organogram hr { width: 90px; height: 0; border: none; border-bottom: var(--lineStyle); margin: 0; z-index: -1; } .organogram hr.half-square { border: var(--lineStyle); border-bottom: none; width: calc(2 * var(--blockWidth) + 2 * var(--blockMargin) + var(--lineBorderWidth)); height: var(--lineHeight); position: relative; overflow: visible; } .organogram hr.half-square:before { content: ''; position: absolute; border-right: var(--lineStyle); min-height: calc(2 * var(--blockHeight) + 5 * var(--p12) + var(--lineHeight)); bottom: 0; } .organogram .block:before, .organogram .block:after { background-color: var(--bgc); content: ''; position: absolute; border-radius: 50%; width: calc(var(--pointSize) + 2px); height: calc(var(--pointSize) + 2px); } .organogram .block:after { width: var(--pointSize); height: var(--pointSize); border: 2px solid orange; } .organogram .block.pin-s:before, .organogram .block.pin-s:after { top: 50%; left: 0; transform: translate(calc(-50% - 1px), calc(-50%)); } .organogram .block.pin-e:before, .organogram .block.pin-e:after { top: 50%; right: 0; transform: translate(calc(50% + 1px), calc(-50%)); } .organogram .block.pin-t:before, .organogram .block.pin-t:after { top: 0; left: 50%; transform: translate(-50%, calc(-50% - 1px)); } .organogram .block.pin-b:before, .organogram .block.pin-b:after { bottom: 0; left: 50%; transform: translate(calc(-50%), calc(50% + 1px)); } Acho bem difícil Não pensei nessa possibilidade, da forma que fiz, você pode aumentar o número de linhas infinitamente. Mas para as colunas, vai precisar fazer ajustes: Não pensei, por exemplo, na possibilidade de um desses blocos terem essa rodeirinha laranja em mais de um lado Da forma q pensei, somente a primeira e a última linha poderão ter blocos com texto de mais de 1 linha se um dos blocos centrais variar o número de linhas de texto, já vai complicar bastante.

Boa tarde! Mostre-nos como o sr. está fazendo que a gente vai te orientando

Sugestão: Coloque as duas imagens dentro duma única div, assim: <div id="conteudo"> <img src="img/FORZA.png" height="450px" width="650px" /> <img src="img/bordaconteudo.png" height="470px" width="670px" /> </div> Acrescente essas regras css à div#conteúdo position: relative; display: flex; align-items: center; justify-content: center; E acrescente essa div#conteudo img:last-child { position: absolute; } Resultado:

Boas @LucianoAzevedo! Com as linguagens supracitadas o sr. até consegue desenvolver a aplicação como deseja. Mas não vai conseguir persistir os dados. (salvar) Para isso, será necessário acrescentar mais uma tecnologia: Banco de dados aí tem vários pra se escolher: postgresql, mysql, mariadb, mongodb, etc.. Mas... para se comunicar com o database, tb vai ser necessário acrescentar mais uma linguagem, desta vez do tipo serverside(que é executada/interpretada no servidor) Essa linguagem é quem se comunica com o database, persiste e recupera os dados que serão devolvidos ao front (linguagens interpretadas no cliente/browser: html, js, css) As linguagens serverside mais conhecidas: nodejs, php, python, golang, java, asp, .net, c#, etc...

ci3 ou ci4? ci4: Vá em app/Config/App.php e certifique-se de que public $baseURL = a sua url local confira também no .env se CI_ENVIRONMENT = development app.baseURL = sua-url-local configure também os dados do seu database local no .env ou em app/Config/Database.php

Olá! Segue sugestão: https://replit.com/@washalbano/Select-Fill-Another#index.html (infelizmente não posso passar o projeto zipado pra facilitar já baixar a estrutura prontinha e testar) Pelo menos no replit(não dá pra testar) você vai poder ver a estrutura de pastas e arquivos, mas acredito que terá de copiar um a um.

Acho q estou começando a entender. Em outras palavras, o sr. quis dizer que esse listener, (que observava as mudanças no select#pdv e alimentava todos aqueles elementos com aquelas ids com o values dos option.data) não está mais funcionando. Bom, a primeira observação a ser feita é se os options possuem todos esses data-attributes devidamente alimentados e se esse var option = option:selected retorna o option selecionado log option abaixo da declaração dessa var, assim: console.log('option :>> ', option); E, depois de trocar de option no select#pdv, verifique se é logado o elemento html esperado

Olá! Não é possível rodar o script e não consegui entender o que não funciona. Consegue nos ajudar a entender? Tente descrever o que acontece.

Olá! Quando o script é executado pela primeira vez, o array global $_POST ainda não tem os índices numero1 e numero2. Se estiver usando php7+, defina um valor padrão assim: $numero1 = $_POST['numero1'] ?? 0; $numero2 = $_POST['numero2'] ?? 0; Dessa forma, se $_POST['numero1'] não existir, o valor de $numero1 será igual a zero. Você pode ler mais sobre a chegada do null coalescing operator ao php, aqui: https://www.php.net/manual/en/migration70.new-features.php Outra sugestão de solução: você pode colocar o trecho php dentro de uma condição: <?php if (isset($_POST['numero1'])) { $numero1 = $_POST["numero1"]; $numero2 = $_POST["numero2"]; echo $numero1 . " x " . $numero2 . "<br>"; if ($numero1 != "") { if ($numero1 == $numero2) { echo "Números iguais!"; } elseif ($numero1 > $numero2) { echo "Primeiro é maior"; } else { echo "Segundo maior"; } } } Dessa forma, o trecho em php só vai funcionar, depois q a variável numero1 for postada

Olá! Segue sugestão: navbar.zip

Olá! troque img.scr por img.src

Então jogue esse data no console.log só pra você ter certeza do conteúdo dele.

E aquele índice zero ali? Afinal, como esse objeto foi passado pro componente? Há um map percorrendo cada índice?

Testei aqui, mas não entendi o que deveria acontecer. Tem certeza q esse trecho de script é testável? Não identifiquei a parte em javascript Se dentro da cell tem outra tag html, logo, o innerText não pode ser da cell e talvez da tag que estiver dentro da cell

É que se a variável color, não tiver valor ou seu valor for inválido, vai dar erro. Como seu exemplo não é testável, nem verificável, escrevi um trecho testável e verificável pro sr. testar, verificar e comprovar que com valores válidos, funciona perfeitamente: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <main> <table border="1"> <tbody> <tr> <td>small</td> <td>Player 1 - row 1 - cell2</td> <td class="message-receiver"></td> </tr> <tr> <td>medium</td> <td>Player 2 - row 2 - cell2</td> <td class="message-receiver"></td> </tr> <tr> <td>large</td> <td>Player 3 - row 3 - cell2</td> <td class="message-receiver"></td> </tr> <tr> <td>valor inválido</td> <td>Player 4 - row 4 - cell2</td> <td class="message-receiver"></td> </tr> </tbody> </table> </main> </body> <script> const table = document.querySelector('table'); const colors = {small: "verde", medium: "castanho", large: "vermelho"}; for (const row of table.rows) { const color = row.cells[0].innerText; const player = row.cells[1].innerText; const messagesReceiver = row.cells[2]; messagesReceiver.innerText = `${colors[color]} ---> ** ${player} ** ---> **` } </script> </html>

Olá! Segue sugestão com separação da lógica e da apresentação, pro sr. entender melhor. o formulário é submetido via JS sem a necessidade de trocar de página. Para testar: submeta o formulário sem alterar campo algum. Depois vá alterando e submetendo de um em um. Como eu não sei se o sr. está usando jquery, escrevi em vanilla. Mas o sr. pode conseguir um resultado melhor usando jquery-validation formAjaxSubmit.zip

Certifique-se de que color tem valor E que o valor de color é igual a um índice de colors

https://pt-br.learnlayout.com/ http://jstherightway.org/pt-br/ Se alimente de toda fonte que conseguir. Absorva tudo o que perceber ser mais adequado. E quando se sentir capaz, ajude outros iniciantes nos fóruns/grupos (aprende-se muito ajudando) Guarde ou compartilhe seus estudos/trabalhos no git (vai servir como um currículo)

Olá! O pattern MVC ajuda muito nessas e outras tantas questões que você vai se deparar desenvolvendo assim. Se puder, separe a lógica da apresentação e use ajax para submeter o form.

Onde o sr. usa o objeto colors, passe o índice assim: colors[color] Só lembrando q só vai funcionar se o valor de color for exatamente igual a small, medium ou large sem espaços ou outros caracteres

const colors = { small: "verde", medium: "castanho", large: "vermelho" }; Defina as possíveis cores e use assim: colors[o-innerHTML-que-o-sr-mencionou] Não vi acima, o trecho de script que captura o innerHTML que o sr. mencionou