39 lines
6.2 KiB
Markdown
39 lines
6.2 KiB
Markdown
|
---
|
|||
|
|
id: bd7158d8c442eddfaeb5bd17
|
|||
|
|
title: Build a JavaScript Calculator
|
|||
|
|
challengeType: 3
|
|||
|
|
isRequired: true
|
|||
|
|
videoUrl: ''
|
|||
|
|
localeTitle: Construa uma calculadora JavaScript
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Description
|
|||
|
|
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank">https://codepen.io/freeCodeCamp/full/wgGVVX</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! <strong>User Story # 1:</strong> Minha calculadora deve conter um elemento clicável contendo um <code>=</code> (sinal de igual) com um <code>id="equals"</code> . <strong>User Story # 2:</strong> Minha calculadora deve conter 10 elementos clicáveis contendo um número cada de 0 a 9, com os seguintes IDs correspondentes: <code>id="zero"</code> , <code>id="one"</code> , <code>id="two"</code> , <code>id="three"</code> , <code>id="four"</code> , <code>id="five"</code> , <code>id="six"</code> , <code>id="seven"</code> , <code>id="eight"</code> e <code>id="nine"</code> . <strong>User Story # 3:</strong> Minha calculadora deve conter 4 elementos clicáveis, cada um contendo um dos 4 principais operadores matemáticos com as seguintes IDs correspondentes: <code>id="add"</code> , <code>id="subtract"</code> , <code>id="multiply"</code> , <code>id="divide"</code> . <strong>História do usuário nº 4:</strong> minha calculadora deve conter um elemento clicável contendo um <code>.</code> (ponto decimal) símbolo com um <code>id="decimal"</code> correspondente <code>id="decimal"</code> . <strong>História do usuário nº 5:</strong> minha calculadora deve conter um elemento clicável com um <code>id="clear"</code> . <strong>User Story # 6:</strong> Minha calculadora deve conter um elemento para exibir valores com um <code>id="display"</code> . <strong>User Story # 7:</strong> A qualquer momento, pressionar o botão Limpar apaga os valores de entrada e saída e retorna a calculadora ao estado inicializado; 0 deve ser mostrado no elemento com o id de <code>display</code> . <strong>User Story # 8:</strong> Como eu insiro números, eu deveria ser capaz de ver minha entrada no elemento com o id de <code>display</code> . <strong>User Story # 9:</strong> Em qualquer ordem, eu deveria ser capaz de adicionar, subtrair, multiplicar e dividir uma cadeia de números de qualquer tamanho, e quando eu pressionar <code>=</code> , o resultado correto deve ser mostrado no elemento com o ID de <code>display</code> . <strong>User Story # 10:</strong> Ao inserir números, minha calculadora não deve permitir que um número comece com vários zeros. <strong>User Story # 11:</strong> Quando o elemento decimal é clicado, a <code>.</code> deve anexar ao valor exibido atualmente; dois <code>.</code> em um número não deve ser aceito. <strong>User Story # 12:</strong> Eu deveria ser capaz de executar qualquer operação (+, -, *, /) em números que contenham pontos decimais. <strong>História do usuário nº 13:</strong> Se dois ou mais operadores forem inseridos consecutivamente, a operação realizada deve ser o último operador inserido. <strong>User Story # 14:</strong> Pressionando um operador imediatamente após <code>=</code> deve iniciar um novo cálculo que opera no re
|
|||
|
|
|
|||
|
|
## Instructions
|
|||
|
|
<section id="instructions">
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Tests
|
|||
|
|
<section id='tests'>
|
|||
|
|
|
|||
|
|
```yml
|
|||
|
|
tests: []
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Challenge Seed
|
|||
|
|
<section id='challengeSeed'>
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Solution
|
|||
|
|
<section id='solution'>
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// solution required
|
|||
|
|
```
|
|||
|
|
</section>
|