SEM RESPONSIVIDADE | NO RESPONSIBILITY
PT-BR: Simulando uma tabela de clientes em um sistema de uma empresa, este projeto foi desenvolvido com o intuito de treinar estruturação de tabelas com HTML, manipulação do DOM com Javascript adicionando/editando/removendo linhas da tabela e armazenamento/manipulação de dados no localStorage.
A tabela foi dividida em 4 colunas: Nome, Nome de Usuário, Email e Ação. Na coluna de ações foram incluidos botões de confirmação(aparece somente se a linha estiver sendo editada), de edição(adicionando inputs que permitem a escrita em cada coluna de informação) e de remoção(removendo toda a linha e apagando os dados do localStorage). Nela, todos os dados são armazenados, editados e removidos em tempo real no localStorage.
EN-US: Simulating a customer table within a company’s system, this project was developed to practice table structuring with HTML, DOM manipulation with JavaScript by adding/editing/removing table rows, and data storage/manipulation using localStorage.
The table is divided into 4 columns: Name, Username, Email, and Action. The Action column includes confirmation buttons (visible only when the row is being edited), edit buttons (adding inputs to allow editing in each information column), and delete buttons (removing the row and deleting data from localStorage). All data is stored, edited, and removed in real-time within localStorage.
Criação do Layout | Layout Creation:
-
Cabeçalho com logo(nome), menu de navegação(Página Inicial/Sobre/ADMIN) e usuário | Header with logo (name), navigation menu (Home/About/ADMIN), and user;
-
Corpo do site com a tabela do CRUD, e uma área de pesquisa de usuário | Body of the site with the CRUD table and a user search area.;
-
Estilização do cabeçalho | Header styling;
-
Estilização do corpo do site | Site body styling;
Criando Funcionalidades | Creating functionalities:
-
Adicionar nova linha ao cliclar no botão adicionar | Add a new row when clicking the add button;
-
Adicionar linha pronta para ser preenchida | Add a row ready to be filled;
-
Editar linha ao clicar no botão de editar | Edit a row when clicking the edit button;
-
Remover linha ao clicar no botão de remover | Remove a row when clicking the remove button;
-
Remover novas linhas criadas | Remove newly created rows;
-
Manter alteração dos dados | Maintain data changes;
-
Filtragem de dados | Data filtering;
Banco de Dados | Database:
-
Armazenando todos os dados no localStorage | Storing all data in localStorage;
-
Impedir que os dados seja triplicados | Prevent data duplication;
-
Verificação de lista vazia | Check for an empty list;
-
Exibir dados do localStorage | Display data from localStorage;
-
Remover dado do localStorage ao remover linha da tabela | Remove data from localStorage when removing a row from the table;
-
Alterar dados na lista e no localStorage | Change data in the list and in localStorage;
Extra:
- Armazenar no banco de dados Firebase | Store in Firebase database;
Hospedagem | Accommodation:
PT-BR: 17 dias desenvolvendo esse projeto, muito erros e acertos até aqui(30/12/2022). Além disso, último projeto do ano entregue no penúltimo dia do mesmo. Normalmente eu me dedicaria apenas 10 dias e partiria para o próximo, mas devido a um mês turbulento e com viagem programada durante o desenvolvimento do projeto, tive que adiar essa entrega, não conseguiria prosseguir para o próximo projeto diante de um tão promissor. Aprendi MUITO com este projeto, fiquei dias batalhando contra o banco de dados Firebase até pedir uma trégua e usar o localStorage para armazenas os dados(Ainda não desisti, em breve estarei substituindo o banco de dados). Nos últimos dois dias praticamente refiz o javascript para deixar do jeito que eu pretendia. Estou muito satisfeito com este e espero que gostem também!
EN-US: 17 days developing this project, with many errors and successes so far (30/12/2022). Additionally, it's the last project of the year delivered on the penultimate day of it. Normally, I would dedicate only 10 days and move on to the next one, but due to a turbulent month and a planned trip during the project's development, I had to postpone this delivery. I couldn't proceed to the next project given such a promising one. I learned a lot from this project, spending days battling against the Firebase database until I decided to take a break and use localStorage to store the data (I haven't given up yet; I'll be replacing the database soon). In the last two days, I practically rewrote the JavaScript to get it the way I intended. I'm very satisfied with this project and hope you like it too!
 Felipe Pereira de Lima |
|---|