https://github.com/memeddev/desafio-autocomplete
Repositório com as instruções do desafio do autocomplete
https://github.com/memeddev/desafio-autocomplete
Last synced: 4 months ago
JSON representation
Repositório com as instruções do desafio do autocomplete
- Host: GitHub
- URL: https://github.com/memeddev/desafio-autocomplete
- Owner: MemedDev
- Created: 2017-07-21T19:03:27.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-09T20:15:19.000Z (almost 9 years ago)
- Last Synced: 2025-07-28T08:52:59.600Z (11 months ago)
- Size: 1.95 KB
- Stars: 1
- Watchers: 2
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Desafio do Autocomplete
## Problema:
A forma como um médico interage com a tecnologia ao escrever uma prescrição é um dos pontos mais importantes para a Memed. Por dia, um médico realiza em média 40 prescrições, e ter uma ferramenta de prescrição com ótima interface, usabilidade e conteúdo resulta em melhor qualidade de trabalho e mais atenção para o paciente.
Uma das formas da Memed auxiliar ferramentas de parceiros no momento da prescrição é extendendo a usabilidade de campos de texto, os quais muitas vezes são utilizados por prontuários web.
Extender a usabilidade de um campo de texto significa:
- Ajudar o médico a encontrar medicamentos no momento da prescrição
- Possibilitar a inserção de textos pré-definidos
- Compreender o contexto e reagir a gatilhos de uso
## Solução:
Criar uma página com um campos de texto (textarea), e quando o usuário digitar algo, posicionar um autocomplete logo abaixo do cursor (caret), sugerindo medicamentos. Quando um medicamento for clicado, inserir no campo de texto o nome e fabricante do medicamento.
## Proposta:
A solução pode ser feita com ou sem frameworks front-end.
Fique a vontade para usar algum framework CSS (ex: Bootstrap, Material, Semantic UI).
Para enviar seu código, faça um fork deste repositório e nos avise quando concluir o desafio (:white_check_mark: as mensagens dos seus commits também serão analisadas).
Lembre-se de alterar o README.md com as instruções para rodar o projeto.
Não é necessário realizar uma busca verdadeira, será avaliada a interface (UI) e usabilidade (UX). Abaixo, segue uma lista de medicamentos para serem mostrados no autocomplete, independente do que for escrito pelo usuário:
```javascript
[
{
fabricante: 'Roche',
nome: 'Roacutan 20mg, Cápsula (30un)',
precoMax: 22.10,
precoMin: 20.99,
principioAtivo: 'Isotretinoína 20mg',
titularidade: 'Referência'
},
{
fabricante: 'Sundown Vitaminas',
nome: 'Vitamina C, comprimido (100un)',
precoMax: 45.15,
precoMin: 31.99,
principioAtivo: 'Ácido Ascórbico',
titularidade: 'Referência'
},
{
fabricante: 'Sundown Vitaminas',
nome: 'Vitamina C, comprimido (180un)',
precoMax: 10.00,
precoMin: 10.00,
principioAtivo: 'Ácido Ascórbico',
titularidade: 'Genérico'
},
{
fabricante: 'EMS Sigma Pharma',
nome: 'Itraspor 100mg, Cápsula (15un)',
precoMax: 209.00,
precoMin: 100.00,
principioAtivo: 'Itraconazol 100mg',
titularidade: 'Genérico'
},
{
fabricante: 'EMS Sigma Pharma',
nome: 'Itraspor 100mg, Cápsula (28un)',
precoMax: 15.00,
precoMin: 9.99,
principioAtivo: 'Itraconazol 100mg',
titularidade: 'Referência'
},
{
fabricante: 'Abbott',
nome: 'Cloridrato de sibutramina 15mg, Cápsula (30un)',
precoMax: 40.00,
precoMin: 40.00,
principioAtivo: 'Cloridrato de sibutramina 15mg',
titularidade: 'Genérico'
},
{
fabricante: 'Abbott',
nome: 'Cloridrato de sibutramina 15mg, Cápsula (100un)',
precoMax: 200.00,
precoMin: 100.00,
principioAtivo: 'Cloridrato de sibutramina 15mg',
titularidade: 'Referência'
}
]
```
Para o visual do autocomplete, você deve seguir a imagem abaixo. ATENÇÃO NOS DETALHES VISUAIS (interface/layout), isso será o ponto principal analisado.
A fonte utilizada é a [Open Sans](https://fonts.google.com/specimen/Open+Sans).
## Etapas:
1 - O usuário deverá visualizar o autocomplete assim que começar a digitar no campo de texto:
2 - Ao clicar em um medicamento, deverá ser adicionado ao campo de texto o nome e o fabricante:
3 - O autocomplete deverá seguir o cursor (apenas verticalmente):
Boa sorte _and let’s code_!
:m: Equipe Memed