Giter Site home page Giter Site logo

desafio-front-jogoacerto's Introduction

DESAFIO FRONT-END

Introdução

✏ Um desafio de desenvolvimento front-end, onde o usuário deverá acertar o número aleatório recebido por uma API. Vale ressaltar que o desafio não permite o uso de biblotecas (React, Bootstrap...), e a interface deverá seguir um layout pré-estabelecido.

Desafio

Você deverá enviar uma requisição para receber um valor aleatório utilizando o endpoint abaixo, com parâmetros especificando o limite inferior e superior. Para o modo padrão de jogo, utilize o limite inferior como 1 e o limite superior como 300, conforme a URL abaixo:
https://us-central1-ss-devops.cloudfunctions.net/rand?min=1&max=300.

Você deverá informar em um texto acima do LED os resultados possíveis:
- "Erro": quando houver erro na requisição;
- "É menor": quando o palpite enviado é maior que o número obtido;
- "É maior": quando o palpite enviado é menor que o número obtido;
- "Você acertou!!!": quando o palpite enviado é igual ao número obtido.

Além disso, deverá existir na tela um botão NOVA PARTIDA, cujo clique deverá criar uma nova partida obtendo um novo número aleatório (o que implica em fazer uma nova requisição).

É importante mencionar que o número a ser adivinhado pelo usuário DEVE impreterivelmente ser obtido por meio da requisição descrita anteriormente. O objetivo do problema envolve testar a sua habilidade de lidar com requisições.

Especificações

Segmentos:

- O display pode conter números não-negativos de 1 a 3 algarismos.
- O valor numérico exibido nos segmentos deve representar o palpite realizado ou o status code obtido quando a requisição falhar.
- Só deve ser apresentada a quantidade de algarismos necessária (O número 29 precisar ser exibido sem zero à esquerda).
- Você deve implementar sua própria solução para exibir os segmentos. Não serão aceitas bibliotecas de terceiros para esta etapa. Em especial, NÃO utilize uma fonte pronta para exibir os segmentos.

Botão NOVA PARTIDA:

- O botão ficará visível apenas quando houve erro ao receber o número ou quando o jogador acertou o palpite.

Campo de entrada:

- Mostrar o texto "Digite o palpite" como placeholder.
- O valor deve aparecer nos segmentos assim que o botão ENVIAR for clicado e o input deve ser resetado para o estado inicial.
- O botão de enviar deverá ficar desabilitado quando houve erro ao receber o número ou quando o jogador acertou o palpite. O usuário deve clicar em "NOVA PARTIDA" neste caso.

📷 Layout proposto pelo desafio

desafio-front-jogoacerto's People

Contributors

ramon-victor avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.