Create frontend challenge

Author: nico-creditas

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    "transform-class-properties",
+    "transform-react-constant-elements",
+    "transform-react-inline-elements"
+  ]
+}

.editorconfig

@@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.{hbs,html}]
+insert_final_newline = false
+
+[*.{diff,md}]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "standard"
+}

.gitignore

@@ -0,0 +1,83 @@
+
+# Created by https://www.gitignore.io/api/node
+# Edit at https://www.gitignore.io/?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# FuseBox cache
+.fusebox/
+
+# End of https://www.gitignore.io/api/node

README.md

@@ -0,0 +1,106 @@
+<img src="https://www.creditas.com.br/static/images/logo-creditas-color-8367919c2a.svg" width="400">
+
+# Challenge Frontend - Creditas
+Esse é um teste de nivelamento. Queremos deixar claro que não é esperado que todos consigam realizá-lo por completo, já que é destinado a todos os níveis de carreira. Esperamos que todas as pessoas que queiram trabalhar conosco tentem realizá-lo.
+
+Focamos aqui em design de código e design patterns em JavaScript. O objetivo é avaliar sua experiência em escrever **código de fácil manutenção, baixo acoplamento e alta coesão**.
+
+A Creditas trabalha sempre com feedbacks construtivos e, portanto, daremos sempre uma atenção especial para todos que submeterem o teste, passando para o candidato quais são os pontos positivos do seu teste e os pontos a melhorar. Vale a pena tentar! :)
+
+## Apresentação do problema
+
+Você deverá melhorar a calculadora de simulação de crédito implementada neste projeto.
+
+A interface está previamente definida, assim como os estilos.
+Os desafios incluem refatorar o código e implementar funcionalidades (detalhados mais abaixo).
+
+Sinta-se à vontade para componentizar o que achar que deve ser componentizado.
+Só gostariamos que o teste fosse realizado com Javascript puro, nosso querido vanilla. O que acha de encarar o desafio?
+
+O estado atual da calculadora:
+<img style="display: block; margin: 0 auto;" src="./layout.png">
+
+
+
+### Funcionalidade esperada
+
+A aplicação deverá permitir ao usuário escolher o tipo de garantia que quer utilizar no pedido de empréstimo: ***"Veículo"*** ou ***"Imóvel"*** (o preenchimento padrão é *"Veículo"*) e seguir as regras de cálculo abaixo.
+
+**Regras em comum**
+- Taxa de IOF: 6.38%;
+- Taxa de Juros: 2.34%;
+- Valor máximo para empréstimo: 80% do valor da garantia;
+
+*Fórmula do valor total a pagar*
+
+```javascript
+const valorTotalAPagar = ((iof / 100) + (taxaDeJuros / 100) + (prazo / 1000) + 1) * valorDoEmprestimo
+```
+
+*Fórmula do valor da parcela*
+
+```javascript
+const valorDaParcela = valorTotalAPagar / prazo
+```
+
+## Desafios a cumprir
+
+### CSS
+* **Refatorar para facilitar manutenção**
+
+Atualmente o arquivo CSS possui muitos estilos, o que dificulta a legibilidade. Esperamos que você faça uma boa organização dos estilos, isolando-os para torná-los mais legíveis e, assim, facilitar a manutenção.
+
+### HTML / JS
+* **Adicionar a opção de garantia _"Imóvel"_** (com as respectivas regras de cálculo)
+* **Refatorar código antigo (e organizar código novo) para facilitar manutenção**
+
+Hoje, a Creditas possui dois produtos: empréstimo com garantia de veículo e de imóvel. O projeto atual tem implementada apenas a opção de garantia *"Veículo"*, você deve implementar a opção *"Imóvel"*.
+Ao mudar o tipo de garantia no elemento `select`, o usuário deve ver as opções de valores e prazos referentes ao tipo selecionado. Ou seja, ao selecionar veículo ou imóvel, você deve mostrar na tela opções diferentes nos campos do formulário e no slider. Veja abaixo os valores correspondentes:
+
+**Veículo**
+- Valor mínimo para empréstimo: R$ 3.000,00;
+- Valor máximo para empréstimo: R$ 100.000,00;
+- Prazos para veículo : 24 / 36 / 48 meses;
+- Valor mínimo da garantia: R$ 5.000,00;
+- Valor máximo da garantia: R$ 3.000.000,00; 
+
+**Imóvel**
+- Valor mínimo para empréstimo: R$ 30.000,00;
+- Valor máximo para empréstimo: R$ 4.500.000,00;
+- Prazos para imóvel : 120 / 180 / 240 meses;
+- Valor mínimo da garantia: R$ 50.000,00;
+- Valor máximo da garantia: R$ 100.000.000,00;
+
+Por fim, você deve exibir o valor da parcela no campo correspondente a cada mudança nos inputs do formulário.
+
+## Desenvolvimento
+
+### Pré-requisitos
+Você precisa minimamente do [NodeJs](https://nodejs.org/en/) instalado para rodar a apliação e o [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) para baixar o repositório e submeter um pull-request
+
+### Configurações para rodar o ambiente
+
+Você precisa conhecer um pouco sobre o Git, que é uma ferramenta que nos ajuda a fazer o controle de versão dos nossos arquivos.
+
+```shell
+git clone https://github.com/Creditas/challenge.git
+cd frontend/
+npm install
+npm start
+```
+
+Se tudo estiver ok, acesse a url [http://localhost:4000/](http://localhost:4000/)
+
+### Construído com
+Este projeto possui algumas bibliotecas para nos auxiliar nos testes e rodar a aplicação, são eles: *Webpack*, *Babel*, *Jest* e *Eslint*.
+
+## Tests
+
+Para rodar os testes é necessário executar o comando abaixo:
+
+```shell
+npm test
+```
+
+## Feedback (opcional)
+Aqui na Creditas o feedback faz parte da nossa cultura, seria muito gratificante se, tendo concluído ou não o teste, você pudesse contribuir com nosso processo de contração respondendo [este pequeno questionário.](https://docs.google.com/forms/d/e/1FAIpQLSdTNMc2JqnvNxy4J3gAN-vQqsfG6PscH5hVQRC9dyMK1PlnRw/viewform?usp=sf_link)

README_English.md

@@ -0,0 +1,123 @@
+<img src="https://www.creditas.com.br/static/images/logo-creditas-color-8367919c2a.svg" width="400">
+
+# Frontend Challenge - Creditas
+
+This is a challenge designed to measure the candidate's expertise.
+We would like to clarify that we don't expect everyone to be able to finish the whole challenge, since it has been designed to cover the several degrees of expertise, from junior to senior.
+Nevertheless, we expect anyone interested in becoming a tripulante in Creditas to give it a try.
+
+In this challenge, we focus both on code design and design patterns in JavaScript. The goal is to assess your experience in writing **code that is easy to maintain, loosely coupled and highly cohesive**.
+
+At Creditas we always work giving constructive feedback, therefore we will always dedicate the outmost attention to every solution submitted; contacting you back with the positive aspects of your submission and what could be improved. Just for that it is worth trying! :)
+
+## The challenge
+
+You have to improve the loan simulation calculator implemented in this project.
+
+Both the interface as well as the styles are provided. The challenges include refactoring the code and implemetning new functionalities (listed below).
+
+Feel free to componentize whatever you think should be componentized. Our only request is that you use only pure JavaScript, our beloved Vanilla. Do you accept the challenge?
+
+The calculator's current state:
+<img style="display: block; margin: 0 auto;" src="./layout.png">
+
+
+### Expected functionalities
+
+The application must allow the user to choose the collateral type they want to use in their equity loan simulation:
+***"Auto"*** or ***"Home"*** (the default option is ***"Auto"*** ).
+
+It should also follow the calculation rules bellow:
+
+**Common Rules**
+- Financial Transaction Tax (FTT): 6.38%;
+- Interest Rate: 2.34%;
+- Maximum loan-to-value (amount the user can borrow): 80% of the collateral's value;
+
+*Total Loan Amount Formula*
+
+```javascript
+const totalLoanAmount = ((FTT / 100) + (interestRate / 100) + (termInMonths / 1000) + 1) * loanAmount
+```
+
+*Monthly payment formula*
+
+```javascript
+const monthlyPayment = totalLoanAmount / termInMonths
+```
+
+## Challenges to achieve
+
+### CSS
+* **Refactor to make maintainance easier** 
+
+Currently, the project's CSS file has too many styles, making readability difficult. We expect you to organize styles, isolating them in order to make them more readable and easier to maintain.
+
+### HTML / JS
+* **Add new collateral type _"Home"_** (with its calculation rules) 
+* **Refactor the old code (and arrange the new one) to make maintainance easier** 
+
+Currently, Creditas offers two products: home equity loan and auto equity loan. This project implements the *"auto equity"* option only, **you must implement the *"home equity"* option**.
+By changing the collateral type in the `select` element, the user must see the amount and term options corresponding to the product chosen. That is, when selecting either _"Home"_ or _"Auto"_, you must show the correspondent values for each option on the form fields and on the slider.
+Please find the corresponding values below:
+
+**Auto**
+- Minimum loan amount: R$ 3.000,00;
+- Maximum loan amount: R$ 100.000,00;
+- Terms: 24 / 36 / 48 months
+- Minimum guarantee amount: R$ 5.000,00;
+- Maximum guarantee amount: R$ 3.000.000,00;
+
+**Home**
+- Minimum loan amount: R$ 30.000,00;
+- Maximum loan amount: R$ 4.500.000,00;
+- Terms: 120 / 180 / 240 months
+- Minimum guarantee amount: R$ 50.000,00;
+- Maximum guarantee amount: R$ 100.000.000,00;
+
+Finally, you must update the monthly payment value whenever changes in the form's inputs are done.
+
+## Development
+
+### Prerequisites
+
+You will need to install on your machine:
+- [NodeJs](https://nodejs.org/en/) in order to run the application.
+- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) in order to clone the repository containing this challenge and submit the pull request with your solution.
+
+### Configuration to run the environment
+
+By executing the following lines of code in your terminal you will be able to:
+- Clone the repository containing this challenge.
+- Install the necessary dependencies to run the application.
+- Run the application.
+
+```shell
+git clone https://github.com/Creditas/challenge.git
+cd frontend/
+npm install
+npm start
+```
+
+If everything is correct, you should be able to access the following URL: [http://localhost:4000/](http://localhost:4000/).
+
+### Dependencies
+
+This project uses some libraries to assist us with tests and running the application. Those are: 
+- [https://webpack.js.org/](Webpack)
+- [https://babeljs.io/](Babel)
+- [https://jestjs.io/](Jest)
+- [https://eslint.org/](Eslint)
+
+## Tests
+
+To run the tests you must execute the following command:
+
+```shell
+npm test
+```
+
+## Feedback (optional)
+
+As we said earlier, here at Creditas constructive feedbacks are part of our culture, so it would be very rewarding if you could contribute with our hiring process by giving us your [https://docs.google.com/forms/d/e/1FAIpQLSdwjudz38JMtMYf3rFBrMHX3XMy2J5oBLPnjBGD1QKvOM2SGg/viewform](opinion) on the challenge.
+We would like you to send it even if you didn't finish the challenge.

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}