Consegui resolver o exercício, e pelo que olhei as soluções usadas são diferentes da minha, porém não vou dizer o que fiz, mas deixarei um dica, minha solução foi bem simples, Dentro do Listener do click do button, faça um console.log( el.parentElement ) Isso vai ser o suficiente para você entender e pensar em sua própria solução, tente quebrar a cabeça, e caso não consiga, então olhe as soluções que os outros postaram
Prof Bruno, como sempre deixei o meu like. Obrigado pela sua excelente didática. Num futuro curso php, explica como criar ficheiro word com php, a partir de um ficheiro word modelo com variáveis embutidas, utilizando uma classe para criação dinâmica. Depois se possível outra aula para criar ficheiro pdf a partir dum html. Obrigado.
não consegui de primeira. olhei o resultado. depois tentei fazer de novo. mesmo tendo visto a resolução, ainda foi um pouquinho complicado. mas consegui. o negocio é não desistir
Parabéns e muito obrigado pelo compartilhamento de conhecimento. Seu curso é bem completo, você ensina detalhe a detalhe e sua diática é muito boa. Fica aqui o meu pedido para um curso de PHP atualizado e aos mesmos moldes deste de JS.
Parabéns pela aula PRof. Amigos, não tem nenhuma extensão que eu aperte control+espaço e ele "puxe" os ids ou classes do html? esse negocio de digitar atrasa pra caramba
Engraçado q eu já conseguir criar uma todo-list de boa !! Consigo criar um app de tempo com API mas esse exercício mexeu legal com minha cabeça kkkkk coisa tão simples MN kkkk
Fiz dessa forma espero que esteja certo, fiz com algumas gambiarras, mas evitei ao máximo consulta. const elem = [...document.querySelectorAll(".curso")]; const btn = document.querySelector("input"); elem.map((e)=>{ e.addEventListener('click',(evt)=>{ console.log(evt.target); evt.target.classList.toggle("selecionado"); }) }) btn.addEventListener("click",(evt)=>{ console.log(evt); const t = [...document.querySelectorAll(".selecionado")]; const a = document.querySelector(".output"); const b = document.querySelector(".input"); t.map((el)=>{ a.appendChild(el); }) const c = [...a.childNodes]; c.map((e)=>{ console.log(e); if(e.classList.contains("selecionado") === false){ b.appendChild(e); } console.log(e.classList.contains("selecionado")); }) }) Obrigado pelo conteúdo!
Desafio resolvido. Perdi mais de hora porque tinha escrito id="caica1" ao invés de id="caixa1". Nem o gpt resolvia. O problema era no arquivo html o tempo todo e eu achando que era no js. 🙈
Professor, uma pergunta simples, porém pertinente: Por que o senhor criou as constantes const caixa1, const caixa 2 e const btn, sendo que em momento nenhum do código no javascript elas foram usadas? Eu acho que se dispensar essas 3 const o código vai funcionar também. ah e eu criei duas soluções para o exercício: uma, que foi criar o botão remover com a mesma configuração, porém terminando em cx1.appendchild(el) e a outra foi dar pro botão copiar um listener de evento adicional dblclick, com o mesmo código, ao invés de criar o botão remover. Eu agradeço pelas suas aulas. O senhor me instiga a pensar. Toma aí mais um like.
Eu não entendo nada de CSS, não consegui fazer o exercício pois não sei como "integrar" o JS com o CSS no código, nem tentei terminar a programação porque ficaria algo estranho ;-;
Fala moçada! minha lógica foi deslocar apenas os elementos que estiverem selecionados, seja pra direita ou esquerda, respeitando também a criação e remoção do segundo botão "voltar". Ficou bom? rsrs. Segue Js: const caixa1 = document.querySelector("#caixa1") const caixa2 = document.querySelector("#caixa2") const btn = document.querySelector("#btn_copiar") const todosCursos = [...document.querySelectorAll(".curso")] todosCursos.map((el)=>{ el.addEventListener("click", (evn)=>{ const elem = evn.target elem.classList.toggle("selecionado") }) }) btn.addEventListener("click", ()=>{ let selecionados = [...document.querySelectorAll(".selecionado")] if(caixa2.children.length == 0){ let miElem = document.createElement("button") miElem.id = "btn_voltar" miElem.innerHTML = "
Seu canal dá de 10 a zero em qualquer curso de programação hoje em dia, seus conteúdos são excelentes e têm me ajudado muuuuito!
Coisa lindaaaa, lindo demais, obrigado por repassar os seus conhecimentos desta forma conosco professor!
Caramba, que aula excelente professor! não tem como não entender! Que didática incrível!
Muito booooom
Parabéns pela sua didática e conhecimento, tem me ajudado muito. Aprendo mais aqui do que na faculdade. Desafio concluído!
uma ótima aula com uma incrível didática, professor!
Obrigado pelo elogio meu caro
Consegui resolver o exercício, e pelo que olhei as soluções usadas são diferentes da minha, porém não vou dizer o que fiz, mas deixarei um dica, minha solução foi bem simples,
Dentro do Listener do click do button, faça um console.log( el.parentElement )
Isso vai ser o suficiente para você entender e pensar em sua própria solução, tente quebrar a cabeça, e caso não consiga, então olhe as soluções que os outros postaram
Prof Bruno, como sempre deixei o meu like. Obrigado pela sua excelente didática.
Num futuro curso php, explica como criar ficheiro word com php, a partir de um ficheiro word modelo com variáveis embutidas, utilizando uma classe para criação dinâmica. Depois se possível outra aula para criar ficheiro pdf a partir dum html. Obrigado.
Excelente aula, sem querer ser chato mas, o senhor poderia disponibilizar esses códigos no git Hub ou git lab ?
Obrigado pela aula ,pelo vídeo,bem explicado!
não consegui de primeira. olhei o resultado. depois tentei fazer de novo. mesmo tendo visto a resolução, ainda foi um pouquinho complicado. mas consegui. o negocio é não desistir
Show.... ótima didática, sei que requer trabalho, mas poderia fazer um material complementar para revisão, parabéns pelo trabalho.
Aula top, vlw fessor!
Muito obrigado pela ótima didática, professor.
consegui fazer o exercicio de forma simples por causa da didatica do professor foi facil obrigado por essa aula incrivel
professor, espero que você seja muito bem recompensado por essas aulas. muito obrigada!!
Parabéns e muito obrigado pelo compartilhamento de conhecimento. Seu curso é bem completo, você ensina detalhe a detalhe e sua diática é muito boa. Fica aqui o meu pedido para um curso de PHP atualizado e aos mesmos moldes deste de JS.
Mão na massa!!
Desafio concluído!
Obrigado pela aula!
Difícil para caramba, mas feito!!!!!!!!!
✅
Parabéns pela aula PRof.
Amigos, não tem nenhuma extensão que eu aperte control+espaço e ele "puxe" os ids ou classes do html? esse negocio de digitar atrasa pra caramba
Consegui fazer o desafio, obrigado pela aula
Prof. Conseguir fazer o desafio ficou só um pouco diferente do seu.. Muito bom o conteúdo, parabéns.
Engraçado q eu já conseguir criar uma todo-list de boa !! Consigo criar um app de tempo com API mas esse exercício mexeu legal com minha cabeça kkkkk coisa tão simples MN kkkk
C pode me explicar o pq disso professor? Kkk
Aula muito boa
Consegui !!!
Tem aula sobre callback e assincronos aui no canal?
Fiz dessa forma espero que esteja certo, fiz com algumas gambiarras, mas evitei ao máximo consulta.
const elem = [...document.querySelectorAll(".curso")];
const btn = document.querySelector("input");
elem.map((e)=>{
e.addEventListener('click',(evt)=>{
console.log(evt.target);
evt.target.classList.toggle("selecionado");
})
})
btn.addEventListener("click",(evt)=>{
console.log(evt);
const t = [...document.querySelectorAll(".selecionado")];
const a = document.querySelector(".output");
const b = document.querySelector(".input");
t.map((el)=>{
a.appendChild(el);
})
const c = [...a.childNodes];
c.map((e)=>{
console.log(e);
if(e.classList.contains("selecionado") === false){
b.appendChild(e);
}
console.log(e.classList.contains("selecionado"));
})
})
Obrigado pelo conteúdo!
Desafio resolvido. Perdi mais de hora porque tinha escrito id="caica1" ao invés de id="caixa1". Nem o gpt resolvia. O problema era no arquivo html o tempo todo e eu achando que era no js. 🙈
ai sim, as atividades estavam fazendo falta, eu tava usando o chatgpt pra gerar exercicios pra mim kkkkkk
o meu da um erro => uncaught TypeError: Cannot read properties of null (reading 'addEventListener') já tentei tudo e nada de resolver...
O meu deu esse erro pq eu estava usando '#' no getElementById, só depois que fui me ligar
Desafio aceito Fessor
Professor, uma pergunta simples, porém pertinente:
Por que o senhor criou as constantes const caixa1, const caixa 2 e const btn, sendo que em momento nenhum do código no javascript elas foram usadas?
Eu acho que se dispensar essas 3 const o código vai funcionar também.
ah e eu criei duas soluções para o exercício:
uma, que foi criar o botão remover com a mesma configuração, porém terminando em cx1.appendchild(el) e a outra foi dar pro botão copiar um listener de evento adicional dblclick, com o mesmo código, ao invés de criar o botão remover.
Eu agradeço pelas suas aulas.
O senhor me instiga a pensar.
Toma aí mais um like.
É porque foi o mesmo arquivo usado nos exercícios anteriores...
Foram usadas nas linhas 13 e 16 e caixa1 será usada na solução do desafio.
Fiz esse projeto ,fiquei calvo
Eu não entendo nada de CSS, não consegui fazer o exercício pois não sei como "integrar" o JS com o CSS no código, nem tentei terminar a programação porque ficaria algo estranho ;-;
Galera como ficou meu codigo
const caixa1 = document.querySelector("#caixa1")
const caixa2 = document.querySelector("#caixa2")
const btn = document.querySelector("#btn_copiar")
const btn2 = document.querySelector("#btn_remover")
const todosCursos = [...document.querySelectorAll(".curso")]
todosCursos.map((el)=>{
el.addEventListener("click",(evt)=>{
const curso = evt.target
curso.classList.toggle("destaque")
})
})
btn.addEventListener('click',()=>{
const cursosSelecionados = [...document.querySelectorAll(".destaque")]
cursosSelecionados.map((el)=>{
caixa2.appendChild(el)
el.classList.remove("destaque")
})
})
btn2.addEventListener('click',()=>{
const cursosSelecionados = [...document.querySelectorAll(".destaque")]
cursosSelecionados.map((el)=>{
caixa1.appendChild(el)
})
})
O meu ficou assim, removendo no mesmo botão
const caixa1 = document.querySelector('#caixa1')
const caixa2 = document.querySelector("#caixa2")
const btn=document.querySelector("#btn_copiar")
const todosCursos=[...document.querySelectorAll(".curso")]
todosCursos.map((el)=>{
el.addEventListener('click',(event)=>{
const curso = event.target;
curso.classList.toggle('selecionado')
})
})
btn.addEventListener('click',()=>{
const cursos_selecionados = [...document.querySelectorAll('.selecionado')]
cursos_selecionados.map((e)=>{
caixa2.appendChild(e)
})
//removendo os não selecionados da caixa 2
const nao_selecionados = [...caixa2.children]
nao_selecionados.map((el)=>{
if(!el.classList.contains('selecionado'))
caixa1.appendChild(el)
})
})
Fala moçada! minha lógica foi deslocar apenas os elementos que estiverem selecionados, seja pra direita ou esquerda, respeitando também a criação e remoção do segundo botão "voltar". Ficou bom? rsrs.
Segue Js:
const caixa1 = document.querySelector("#caixa1")
const caixa2 = document.querySelector("#caixa2")
const btn = document.querySelector("#btn_copiar")
const todosCursos = [...document.querySelectorAll(".curso")]
todosCursos.map((el)=>{
el.addEventListener("click", (evn)=>{
const elem = evn.target
elem.classList.toggle("selecionado")
})
})
btn.addEventListener("click", ()=>{
let selecionados = [...document.querySelectorAll(".selecionado")]
if(caixa2.children.length == 0){
let miElem = document.createElement("button")
miElem.id = "btn_voltar"
miElem.innerHTML = "
bom dia. alguem ai encontrou o erro Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') na linha 13 ?? obrigado
EUUUUU
O meu deu esse erro pq eu tinha digitado classlist com o L minúsculo. Quando coloquei classList funcionou.
meu código ficou assim, ele pega os que não estão selecionados e passa para a caixa1:
const caixa1 = document.getElementById("caixa1")
const caixa2 = document.getElementById("caixa2")
const btn = document.getElementById("btn_copiar")
const todosCursos = [...document.querySelectorAll(".curso")]
todosCursos.map((el) => {
el.addEventListener("click", (evento) => {
const curso = evento.target
curso.classList.toggle("selecionado")
const resultado = curso.classList.contains("selecionado")
if (!resultado && !caixa1.contains(curso)) {
caixa1.appendChild(curso)
}
})
})
btn.addEventListener("click",()=>{
const cursosSelecionados=[...document.querySelectorAll(".selecionado")]
cursosSelecionados.map((el)=>{
caixa2.appendChild(el)//adiciona um filho.
})
})
Eu simplesmente criei outro botão de voltar, KKKKKKKKKKKKKKKKKKKK
Olha como ficou meu comando:
const caixa1 = document.querySelector("#caixa1");
const caixa2 = document.querySelector("#caixa2");
const btnCopiar = document.querySelector("#btn_copiar");
const btnVoltar = document.querySelector("#btn_voltar");
const todosCurso = [...document.querySelectorAll(".curso")];
todosCurso.map((el) => {
el.addEventListener("click", (evt) => {
const curso = evt.target;
curso.classList.toggle("selecionado");
});
});
btnCopiar.addEventListener("click", () => {
const cursoSelecionados = [...document.querySelectorAll(".selecionado")];
cursoSelecionados.map((el) => {
caixa2.appendChild(el);
});
});
btnVoltar.addEventListener("click", () => {
const cursoSelecionados = [...document.querySelectorAll(".selecionado")];
cursoSelecionados.map((el) => {
caixa1.appendChild(el);
});
});
tá errado amigo