Teste Técnico Frontend
LoKtra
Loktra is a field workforce automation software for Banking and Financial Services Industry.
Sobre o Teste
Este desafio técnico para um Front End Engineer consiste em completar uma das duas tarefas propostas: implementar uma página de doação ou um carrinho de compras. Para a página de doação, é necessário criar uma funcionalidade que mova o controle de valor da doação ao clicar no botão "Give Now", compartilhar a mensagem "Yay, I donated!" nas redes sociais ao clicar em "Tell your friends" e exibir uma caixa de diálogo com a mensagem "Saved!" ao clicar em "Save for later". Já para o carrinho de compras, é necessário armazenar o carrinho no localStorage, notificar quando ele for atualizado e implementar as funcionalidades de adicionar/remover itens, incrementar/decrementar a quantidade de itens e atualizar o localStorage. O código deve ser de qualidade de produção, compatível com diferentes navegadores e dispositivos, seguir convenções consistentes e ter uma interface limpa. O armazenamento deve ser feito usando o localStorage e pode ser utilizado qualquer framework de preferência (ou até mesmo nenhum).
Instruções do Teste
Front End Engineer Task
You must complete one of the following task:
- Complete donation task.
- Implement a shopping cart.
Commit and push your code to your new repository. Use Github Pages or any other hosting service to run your solution.
To apply, please email [email protected] with your solution. Include link of your code on Github. Also please explain why you would be a good fit for this job.
Things to keep in mind:
- Write production quality code.
- The code should be cross browser compatible and responsive across different devices.
- Your app should be consistent across all tabs when user is making changes in any one of them.
- Ensure code follows a consistent convention.
Donate
Please develop a donation page similar to the one shown below:
It should have following functionality:
- On clicking "Give Now" Button, the donation amount slider should move. Keep the total amount to $1000.
- On clicking "Tell your friends", it should share "Yay, I donated!" on Facebook and Twitter.
- On clicking "Save for later", it should show a dialog with message "Saved!"
Shopping Cart
Your task is to implement a basic shopping cart for a website, following these basic rules:
- Store the cart on localStorage
- The cart should only know about item IDs and their quantity
- The cart should notify when it has been updated
- UI could be like flipkart cart, the functionality you should implement is add/remove items, increment/decrement item count and update localStorage on any change
- The UI should be clean
- Focus on the cart, other parts are just helpers
- Dummy data should be used for the cart items