Files
freeCodeCamp/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
Shaun Hamilton c2a11ad00d feat: add 'back/front end' in curriculum (#42596)
* chore: rename APIs and Microservices to include "Backend" (#42515)

* fix typo

* fix typo

* undo change

* Corrected grammar mistake

Corrected a grammar mistake by removing a comma.

* change APIs and Microservices cert title

* update title

* Change APIs and Microservices certi title

* Update translations.json

* update title

* feat(curriculum): rename apis and microservices cert

* rename folder structure

* rename certificate

* rename learn Markdown

* apis-and-microservices -> back-end-development-and-apis

* update backend meta

* update i18n langs and cypress test

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: add development to front-end libraries (#42512)

* fix: added-the-word-Development-to-front-end-libraries

* fix/added-the-word-Development-to-front-end-libraries

* fix/added-word-development-to-front-end-libraries-in-other-related-files

* fix/added-the-word-Development-to-front-end-and-all-related-files

* fix/removed-typos-from-last-commit-in-index.md

* fix/reverted-changes-that-i-made-to-dependecies

* fix/removed xvfg

* fix/reverted changes that i made to package.json

* remove unwanted changes

* front-end-development-libraries changes

* rename backend certSlug and README

* update i18n folder names and keys

* test: add legacy path redirect tests

This uses serve.json from the client-config repo, since we currently use
that in production

* fix: create public dir before moving serve.json

* fix: add missing script

* refactor: collect redirect tests

* test: convert to cy.location for stricter tests

* rename certificate folder to 00-certificates

* change crowdin config to recognise new certificates location

* allow translations to be used

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* add forwards slashes to path redirects

* fix cypress path tests again

* plese cypress

* fix: test different challenge

Okay so I literally have no idea why this one particular challenge
fails in Cypress Firefox ONLY. Tom and I paired and spun a full build
instance and confirmed in Firefox the page loads and redirects as
expected. Changing to another bootstrap challenge passes Cypress firefox
locally. Absolutely boggled by this.

AAAAAAAAAAAAAAA

* fix: separate the test

Okay apparently the test does not work unless we separate it into
a different `it` statement.

>:( >:( >:( >:(

Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com>
Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
2021-08-13 21:57:13 -05:00

5.3 KiB

id, title, challengeType, forumTopicId, dashedName
id title challengeType forumTopicId dashedName
bd7158d8c442eddfaeb5bd17 Crea una calculadora con JavaScript 3 301371 build-a-javascript-calculator

--description--

Objetivo: Construye una aplicación en CodePen.io que funcionalmente sea similar a esta: https://codepen.io/freeCodeCamp/full/wgGVVX.

Completa las siguientes historias de usuario y consigue que se aprueben todas las pruebas. Dale tu propio estilo personal.

Puede utilizar cualquier mezcla de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debe usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales a las indicadas anteriormente, su uso corre bajo tu propio riesgo. Estamos buscando dar soporte a otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de incidencias que utilicen la pila de tecnología sugerida para este proyecto. ¡Feliz codificación!

Historia de usuario #1: Mi calculadora debe contener un elemento cliqueable que contenga un = (signo igual) con un correspondiente id="equals".

Historia de usuario #2: Mi calculadora debe contener 10 elementos que contienen un número cada uno de 0-9 con los siguientes IDs correspondientes: id="zero", id="one", id="two", id="three", id="four", id="five", id="six", id="seven", id="eight", and id="nine".

Historia de usuario #3: Mi calculadora debe contener 4 elementos que contengan uno de los 4 operadores matemáticos primarios con los siguientes identificadores correspondientes: id="add" id="subtract", id="multiply", id="divide".

Historia de usuario #4: Mi calculadora debe contener un elemento cliqueable que contenga un . (punto decimal) símbolo con el correspondiente id="decimal".

Historia de usuario #5: Mi calculadora debe contener un elemento cliqueable con un id="clear".

Historia de usuario #6: Mi calculadora debe contener un elemento para mostrar valores con un correspondiente id="display".

Historia de usuario #7: En cualquier momento, pulsando el botón clear elimina los valores de entrada y salida. Luego devuelve la calculadora a su estado inicial; debe mostrar 0 en el elemento con el id de display.

Historia de usuario #8: Al introducir números, Debe ser capaz de ver mi entrada en el elemento con el id de display.

Historia de usuario #9: En cualquier orden, debe poder añadir, restar, multiplicar y dividir una cadena de números de cualquier longitud. Además cuando presione =, el resultado correcto debe mostrarse en el elemento con el id de display.

Historia de usuario #10: Al introducir números, mi calculadora no debe permitir que un número comience con varios ceros.

Historia de usuario #11: Cuando se hace clic en el elemento decimal, un . debe añadirse al valor mostrado actualmente; dos . en un número no debe ser aceptado.

Historia de usuario #12: Debe ser capaz de realizar cualquier operación (+, -, *, /) en números que contienen puntos decimales.

Historia de usuario #13: Si se introducen 2 o más operadores consecutivamente, la operación realizada debe ser el último operador introducido (excluyendo el signo negativo (-). Por ejemplo, si 5 + * 7 = es introducido, el resultado debe ser 35 (p.e. 5 * 7); si 5 * - 5 = es introducido, el resultado debe ser -25 (p.e 5 * (-5)).

Historia de usuario #14: Presionando un operador inmediatamente después de = debe comenzar un nuevo cálculo que opere sobre el resultado de la evaluación anterior.

Historia de usuario #15: Mi calculadora debe tener varios decimales de precisión a la hora de redondear (tenga en cuenta que no hay un estándar exacto, pero debe ser capaz de manejar cálculos como 2 / 7 con una precisión razonable de al menos 4 decimales.

Nota sobre la lógica de la calculadora: Debe tener en cuenta que hay dos escuelas principales de pensamiento sobre la lógica de entrada de las calculadoras: lógica de ejecución inmediata y lógica de la fórmula. Nuestro ejemplo utiliza lógica de la fórmula. Observa el orden de precedencia de la operación, la ejecución inmediata no lo hace. Ambas son aceptables, pero ten en cuenta que dependiendo de cuál elijas, tu calculadora puede producir resultados diferentes a los nuestros para ciertas ecuaciones (ver ejemplo a continuación). Mientras sus matemáticas puedan ser verificadas por otra calculadora de producción, por favor no considere esto un error.

EXAMPLE: 3 + 5 x 6 - 2 / 4 =

  • Lógica de ejecución inmediata: 11.5
  • Fórmula/Expresión lógica: 32.5

Puedes construir tu proyecto con usando esta plantilla de CodePen y haciendo clic en Save para crear tu propio borrador. O puedes utilizar este enlace CDN(Red de distribución de contenidos) para ejecutar las pruebas en cualquier entorno que desees: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

Una vez que hayas terminado, envía la URL de tu proyecto funcional con todos los tests aprobados.

--solutions--

// solution required