https://github.com/edijunior88/newtab_academy_projeto_individual_javascript

Seu objetivo é criar uma SPA (Single Page Application), você vai continuar desenvolvendo o projeto que começou no módulo anterior, mas agora é hora de aplicar os conhecimentos de JavaScript! Reveja o escopo para lembrar o que é preciso ser feito.
https://github.com/edijunior88/newtab_academy_projeto_individual_javascript

css css3 html html-css-javascript html5 javascript javascript-es6

Last synced: 3 months ago
JSON representation

Seu objetivo é criar uma SPA (Single Page Application), você vai continuar desenvolvendo o projeto que começou no módulo anterior, mas agora é hora de aplicar os conhecimentos de JavaScript! Reveja o escopo para lembrar o que é preciso ser feito.

• Host: GitHub
• URL: https://github.com/edijunior88/newtab_academy_projeto_individual_javascript
• Owner: EdiJunior88
• License: mit
• Created: 2022-02-05T16:11:27.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-02T16:54:46.000Z (about 1 year ago)
• Last Synced: 2025-01-22T19:24:02.973Z (5 months ago)
• Topics: css, css3, html, html-css-javascript, html5, javascript, javascript-es6
• Language: CSS
• Homepage: https://edijunior88.github.io/NewTab_Academy_Projeto_Individual_JavaScript/
• Size: 52.7 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
NewTab Academy

Projeto HTML, CSS e JAVASCRIPT (individual)


Você vai continuar desenvolvendo o projeto que começou no módulo anterior, mas agora é hora de aplicar os conhecimentos de JavaScript! Reveja o escopo para lembrar o que é preciso ser feito.


Lembrando que nos inspiramos no teste técnico de front-end para a empresa Via Varejo (responsável pelas Casas Bahia, Pontofrio e outras marcas). O link do teste técnico original: https://github.com/viavarejo/frontend-test




Tecnologias Utilizadas


-  [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) – Languages

Para ver todas as tecnologias [clique aqui](/techstack.md)



Vamos lá?


Introdução


Seu objetivo é criar uma SPA (Single Page Application) seguindo o layout que está nesta url https://goo.gl/yMrCaf.


No layout original, vocês vão ver que existem itens no menu sem utilidade. Vamos alterar e criar funcionalidades pra eles? 


Durante o desenvolvimento portanto, vocês devem:




  
Alterar o link “Resumo” para “Cadastro de transações”.

  
Alterar o link “Dashboard” para “Limpar dados”.

  
Excluir o link “Configurações”.





O que sua aplicação deverá fazer




  
Incluir transações de compra ou venda de mercadoria.

  
Criar um extrato das transações incluídas. As transações deverão ser mostradas na ordem em que foram incluídas.

  
Mostrar o saldo final e destacar se houve lucro ou prejuízo.

  
A aplicação deverá ser responsiva e estar de acordo com o layout fornecido.

  
Persistir as transações no Local Storage.





Outros requisitos


HTML:




  
As opções do campo “Tipo de transação” são: Compra e Venda.

  
Caso não exista nenhuma transação cadastrada, adicione a mensagem “Nenhuma transação cadastrada.” na lista do Extrato.



CSS:




  Testar em smartphones, tablets (modos portrait e landscape) e monitores a partir de 1024px até 1900px. (Através do inspecionar elemento no navegador)

  A fonte utilizada é a Lato.

  A largura máxima do conteúdo é 1100px.



JavaScript:




  
Validar o formulário para que todos os campos sejam preenchidos.

  
Adicionar uma máscara no campo “Valor” para que apenas números sejam preenchidos e com a formatação correta. (Padrão: 10,90)

  
Ao adicionar uma nova transação, persistir no Local Storage e já atualizar a lista com o extrato. Atualizar também o cálculo apresentado.

  
Ao clicar no link “Limpar dados”, apresentar uma mensagem de confirmação e em seguida apagar as informações, atualizando a lista.





Divisão de atividades


HTML e CSS (atividades já desenvolvidas no módulo anterior).


Javascript:




  
ATIVIDADE 1 – JAVASCRIPT:

  


    
Validação e máscara do formulário

  





  
ATIVIDADE 2 – JAVASCRIPT:

  


    
Registro em local storage e listagem das transações

    
Funcionalidade de limpar dados