https://github.com/aureliodeboa/fap-lista-de-compras

Atividade Simples do Fap de implementar uma lista de compras de acordo com o figma disponibilizado.
https://github.com/aureliodeboa/fap-lista-de-compras

Last synced: 2 days ago
JSON representation

Atividade Simples do Fap de implementar uma lista de compras de acordo com o figma disponibilizado.

• Host: GitHub
• URL: https://github.com/aureliodeboa/fap-lista-de-compras
• Owner: aureliodeboa
• Created: 2024-08-03T18:27:18.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-08-10T13:56:33.000Z (3 months ago)
• Last Synced: 2024-08-10T15:04:59.417Z (3 months ago)
• Language: CSS
• Homepage:
• Size: 13.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# Atividade Fap - Lista de Compras

![image](https://github.com/user-attachments/assets/6ac6f161-1671-4e20-b7c1-5bcef79c1906)

## Descrição

O projeto **Atividade Fap - Lista de Compras** é uma aplicação web que permite aos usuários gerenciar uma lista de compras de maneira interativa e responsiva. Utilizando apenas HTML, CSS e JavaScript, o projeto adota uma abordagem de programação funcional para garantir uma estrutura simples e eficiente.

### Funcionalidades

- **Adicionar Item**: Inclua novos itens na lista de compras.

- **Excluir Item**: Remova itens da lista.

- **Notificação de Remoção**: Exibe uma notificação visual quando um item é removido.

### Arquitetura dos Diretórios

- **`index.html`**: A página principal da aplicação.

- **`style.css`**: Arquivo de estilo CSS.

- **`script.js`**: Arquivo JavaScript que implementa a lógica da aplicação.

- **`logo.png`**: Imagem de logo do projeto.

### Tecnologias Utilizadas

- **HTML**: Estrutura do conteúdo da página.

- **CSS**: Estilização e layout responsivo.

- **JavaScript**: Funcionalidades interativas utilizando o paradigma funcional.

### Estrutura de Código

O projeto utiliza o paradigma funcional para gerenciar a lista de compras, com funções que adicionam e removem itens diretamente no DOM. Abaixo está um exemplo de função utilizada:

```javascript

function addItem() {

    const itemInput = document.getElementById('itemInput');

    const itemText = itemInput.value.trim();

    if (itemText !== '') {

        const todoList = document.querySelector('.lista');

        const listItem = document.createElement('li');

        

        const divContainer = document.createElement('div');

        const checkboxLabel = document.createElement('label');

        checkboxLabel.className = 'container-checkbox';

        

        const checkboxInput = document.createElement('input');

        checkboxInput.type = 'checkbox';

        const checkmark = document.createElement('span');

        checkmark.className = 'checkmark';

        

        checkboxLabel.appendChild(checkboxInput);

        checkboxLabel.appendChild(checkmark);

        

        const spanContent = document.createElement('span');

        spanContent.className = 'lista-content';

        spanContent.textContent = itemText;

        

        divContainer.appendChild(checkboxLabel);

        divContainer.appendChild(spanContent);

        

        const deleteSpan = document.createElement('span');

        deleteSpan.className = 'material-symbols-outlined';

        deleteSpan.textContent = 'delete';

        deleteSpan.onclick = function() {

            showNotification();

            todoList.removeChild(listItem);

        };

        

        listItem.appendChild(divContainer);

        listItem.appendChild(deleteSpan);

        todoList.appendChild(listItem);

        itemInput.value = '';

    }

}

```

### Instruções de Uso

1. **Clonagem do Repositório**: Clone este repositório para sua máquina local usando `git clone https://github.com/aureliodeboa/Fap-lista-de-compras/`.

2. **Acessar o Projeto**: Navegue até o diretório do projeto e abra o arquivo `index.html` em um navegador da web.

3. **Interação**: Utilize a interface para adicionar e remover itens da lista de compras.

### Contribuições

Se você deseja contribuir para este projeto, por favor, envie um pull request ou entre em contato com o responsável pelo projeto.

### Licença

Este projeto é de código aberto e pode ser utilizado conforme os termos estabelecidos pelo repositório.