🛒Lista de Compras

Crie uma tabela de compras com colunas de ID, nome, valor e quantidade. Adicione botões "Voltar" à esquerda e "Comprar" à direita. O desafio é focado no layout visual com HTML e CSS.

Descrição: Neste desafio, devem criar uma página de lista de compras usando HTML e CSS. A página deve conter uma tabela onde serão listados os itens disponíveis para compra, com colunas de ID, nome do item, valor, e um campo de entrada para quantidade. Além disso, a página deve ter dois botões posicionados: um botão "Voltar" no canto esquerdo e um botão "Comprar" no canto direito. O foco deste desafio é puramente visual, então os botões não precisam ter funcionalidade.

Elementos Obrigatórios

1. Tabela de Compras:

   • Coluna de ID: A primeira coluna da tabela deve exibir um identificador único para cada item (um número, por exemplo).

   • Coluna de Nome: A segunda coluna deve exibir o nome do item (ex: "Maçã", "Banana", etc.).

   • Coluna de Valor: A terceira coluna deve mostrar o valor unitário de cada item (ex: "R$ 2,50").

   • Coluna de Quantidade: A quarta coluna deve conter um campo de entrada (input) onde o usuário pode digitar a quantidade de itens que deseja comprar.

2. Botões de Navegação:

   • Botão "Voltar": Posicionado no canto esquerdo abaixo da tabela. Deve ser estilizado de maneira que fique claro que é um botão de navegação.

   • Botão "Comprar": Posicionado no canto direito abaixo da tabela. Estilizado para chamar a atenção, indicando a ação de finalizar a compra.

Estilo e Layout

1. Organização Visual da Tabela: A tabela deve ser organizada de forma que as colunas estejam bem alinhadas e os dados sejam fáceis de ler. Use bordas, espaçamentos e alinhamentos para tornar a tabela visualmente clara e organizada.

2. Posicionamento dos Botões: O botão "Voltar" deve estar alinhado à esquerda e o botão "Comprar" à direita, criando uma sensação de navegação na página.

3. Uso de Cores e Fontes: Encoraje o uso de cores que diferenciem os botões, tornando o "Comprar" mais chamativo. A tabela também pode usar tons suaves para as linhas, facilitando a leitura.

Objetivos do Desafio

• Praticar a criação de tabelas em HTML.

• Explorar a estilização de botões e campos de entrada, além de alinhamentos dentro de uma estrutura de tabela.

Resultado Esperado: Uma página de lista de compras funcional no visual, com uma tabela bem organizada contendo ID, nome, valor, e campos de quantidade, além de dois botões de navegação posicionados corretamente. O desafio foca na organização e no layout, sem necessidade de funcionalidade de backend.

Exemplo

Código de Exemplo

Estilo CSS:

.lista-compras {
    width: 80%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

th {
    background-color: #f4f4f4;
}

input[type="number"] {
    width: 60px;
}

.botoes {
    display: flex;
    justify-content: space-between;
}

button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.voltar {
    background-color: #ccc;
}

.comprar {
    background-color: #4CAF50;
    color: white;
}

Trecho HTML:

<div class="lista-compras">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Nome</th>
                <th>Valor</th>
                <th>Quantidade</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Maçã</td>
                <td>R$ 2,50</td>
                <td><input type="number" min="0"></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Banana</td>
                <td>R$ 1,80</td>
                <td><input type="number" min="0"></td>
            </tr>
            <!-- Adicione mais itens conforme necessário -->
        </tbody>
    </table>

    <div class="botoes">
        <button class="voltar">Voltar</button>
        <button class="comprar">Comprar</button>
    </div>
</div>