Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

o item não esta ficando do lado do checkbox

Referente ao curso JavaScript: construindo páginas dinâmicas

por Cyro Hestefano Oliveira Gomes
| 17.8k xp | 3 posts

Ola pessoal , estou com um pequeno problema na lista, o item não esta ficando do lado do checkbox.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

HTML 

    <body>

        <main>
             <img src="img/bag.png" alt="sacola de compras">
            <form action=""> 
                <input class="input-item" id="input-item" type="text" placeholder="Digite o item que desej adicionar"/>
                <button class="button-item" id="adcionar-item">Salva item</button>
            </form>

            <div class="container-lista">
                <h2>Lista de compras</h2>
                <hr/>
           
             <ul class="container-lista" id="lista-de-compras">
                <li>
                   <div class="lista-item-container">
                      <div class="container-nome-compra">
                          <div class="container-checkbox">
                             <label for="checkbox-1">
                                <input type="checkbox"
                                class="input-checkbox" id="checkbox-1"/>
                                <div class="checkbox-customizado checked"></div>    
                             </label>   
                          </div>  
                          <p>Ração de gato</p>
                      </div>
                      <div>
                           <button class="item-lista-button">
                                <img src="img/delete.svg" alt="deletsr">
                           </button> 
                           <button class="item-lista-button">
                                <img src="img/edit.svg" alt="editar">
                           </button>
                      </div>
                   </div> 
                    <p class="texto-data">Segunda-feira (31/01/2022) às 08:30</p>
                </li>
             </ul>   
            </div>  
        </main>
    </body>
</head>
        <script src="scripts.js"></script>

    </html>
3 respostas
por Cyro Hestefano Oliveira Gomes
| 17.8k xp | 3 posts

CSS

  • { box-sizing: border-box; margin: 0; padding: 0; }

:root { --cor-primaria: #F55B64; --cor-secundaria: #C2373F; --neutro: #F9F9F9; --preto: #131730; --fonte-titulo: "Krona One", sans-serif; --fonte-texto: 'Numans', sans-serif; --degrade-azul: linear-gradient(180deg, #000000 0%, #26327F 100%); }

body{ background: var(--degrade-azul); background-repeat: no-repeat; height: 100vh;

display: flex;
flex-direction: column;
align-items: center;

}

main{ margin-top: 64px;

display: flex;
flex-direction: column;
gap: 24px;

width: 440px;
align-items: center;

background-color: var(--neutro);
padding: 56px;
border-radius: 16px;

}

h2{ font-family: var(--fonte-titulo); color: var(--cor-primaria); font-size: 20px; line-height: 33px; text-align:left; }

hr{ border: none; border-bottom: 3px dotted var(--cor-primaria) ; margin-bottom: 26px; width: 100%; }

p{ font-family: var(--fonte-texto); font-size: 18px; font-weight: 400; line-height: 24px; text-align: left; }

.input-item{ padding: 12px 16px; display: block; border-radius: 24px; border: 1px solid var(--preto); width: 310px; }

.input-item::placeholder { font-family:"Montserrat", sans-serif; font-size: 16px; line-height: 19px; }

.button-item{ text-align: center; padding: 12px 16px; border-radius: 24px; background-color: var(--cor-primaria); color: var(--neutro); font-family: var(--fonte-texto); font-size: 18px; line-height: 24px; border: none; }

form{ display: flex; flex-direction: column; align-items: center; gap: 10px; }

.lista-item-container{ display: flex; align-items: center; justify-content: space-between; }

.container-nome-compra{ display: flex; }

.container-lista{ list-style-type: none; width: 100%; }

.texto-data{ font-size: 12px; line-height: 20px; }

.input-checkbox{ display: none; }

.checkbox-customizado{ width: 20px; height: 20px; background-color: var(--neutro); border: 1px solid var(--preto); cursor: pointer; border-radius: 4px; margin-right: 8px;}

.checked{ background-color: var(--preto); position: relative; }

.checked::after{ content: ""; position: absolute; left: 30%; top: -10%; width: 5px; height: 14px;

border-top: 2px solid var(--neutro);
border-left: 2px solid var(--neutro);
transform: rotate(-140deg);

} .item-lista-button{ background-color: transparent; border: none; gap: 1px;

}

por Cyro Hestefano Oliveira Gomes
| 17.8k xp | 3 posts

SCRIPTS.JS

const item = document.getElementById("input-item"); const botaoSalvaItem = document.getElementById("adcionar-item"); const listaDeCompras = document.getElementById("lista-de-compras"); let contador = 0;

botaoSalvaItem.addEventListener("click", adicionarItem);

function adicionarItem(evento){ evento.preventDefault()

const itemDaLista = document.createElement("li");
const containerItemLista = document. createElement("div");
containerItemLista.classList.add("lista-item-container");

const containerNomeDoItem = document.createElement("div");

const containerCheckbox = document.createElement("div");
containerCheckbox.classList.add("container-checkbox");

const checkboxInput = document.createElement("input");
checkboxInput.type ="checkbox";
checkboxInput.classList.add("input-checkbox");
checkboxInput.id = "checkbox-" + contador++;

const checkboxLabel = document.createElement("label");
checkboxLabel.setAttribute("for",checkboxInput.id);

checkboxLabel.addEventListener("click", function (evento){
    const checkboxInput = evento.currentTarget.querySelector(".input-checkbox");
    const checkboxCustomizado = evento.currentTarget.querySelector(".checkbox-customizado");

    if(checkboxInput.checked){
        checkboxCustomizado.classList.add("checked");
    } else{
       checkboxCustomizado.classList.remove("checked");
    }
})

const checkboxCustomizado = document.createElement("div");
checkboxCustomizado.classList.add("checkbox-customizado");

checkboxLabel.appendChild(checkboxInput);
checkboxLabel.appendChild(checkboxCustomizado);

containerCheckbox.appendChild(checkboxLabel);
containerNomeDoItem.appendChild(containerCheckbox);

const nomeDoItem = document.createElement("p");
nomeDoItem.innerText = item.value;
containerNomeDoItem.appendChild(nomeDoItem);

const containerBotoes = document.createElement("div");
const botaoRemover = document.createElement("button");
botaoRemover.classList.add("item-lista-button");

const imagemRemover = document.createElement("img");
imagemRemover.src = "img/delete.svg";
imagemRemover.alt ="Remover";

botaoRemover.appendChild(imagemRemover);
containerBotoes.appendChild(botaoRemover);

const botaoEditar = document.createElement("button");
botaoEditar.classList.add("item-lista-button");

const imagemEditar = document.createElement("img");
imagemEditar.src = "img/edit.svg";
imagemEditar.alt ="Editar";

botaoEditar.appendChild(imagemEditar);
containerBotoes.appendChild(botaoEditar);

containerItemLista.appendChild(containerNomeDoItem);
containerItemLista.appendChild(containerBotoes);
itemDaLista.appendChild(containerItemLista);
listaDeCompras.appendChild(itemDaLista);

}

solução!
por Danilo Thiago Alves de Oliveira
| 43.6k xp | 62 posts
Desenvolvedor Fullstack Sr

Por responder ao mesmo problema de outro aluno, estou sentindo falta de uma classe em um elemento, creio que o seu elemento deveria ter essa classe e isso resolve o seu problema:

JS:
containerNomeDoItem.classList.add('container-item-name');

CSS:
.container-item-name{
    display: flex;
    align-items: center;
    gap: 8px;
}

Se essa resposta te ajudou, não esquece de marcar como a Solução