diff --git a/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md b/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md index 443b82542f..f9997d429f 100644 --- a/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md +++ b/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md @@ -36,7 +36,7 @@ El elemento `div` con clase `cyan` debe tener un `background-color` cian. assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)'); ``` -El elemento `div` con clase `raspberry` debe tener un `background-color` naranja. +El elemento `div` con clase `raspberry` debe tener un `background-color` frambuesa. ```js assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)'); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/connect-redux-to-react.md b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/connect-redux-to-react.md index 731a208182..b016ed7ef1 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/connect-redux-to-react.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/connect-redux-to-react.md @@ -12,7 +12,9 @@ Now that you've written both the `mapStateToProps()` and the `mapDispatchToProps To use this method, pass in the functions as arguments, and immediately call the result with your component. This syntax is a little unusual and looks like: -`connect(mapStateToProps, mapDispatchToProps)(MyComponent)` +```js +connect(mapStateToProps, mapDispatchToProps)(MyComponent) +``` **Note:** If you want to omit one of the arguments to the `connect` method, you pass `null` in its place. diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.md b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.md index 15ba65940a..6718ed802e 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.md @@ -12,7 +12,7 @@ Now that you finished the React component, you need to move the logic it's perfo # --instructions-- -First, define an action type 'ADD' and set it to a const `ADD`. Next, define an action creator `addMessage()` which creates the action to add a message. You'll need to pass a `message` to this action creator and include the message in the returned `action`. +First, define an action type `ADD` and set it to a const `ADD`. Next, define an action creator `addMessage()` which creates the action to add a message. You'll need to pass a `message` to this action creator and include the message in the returned `action`. Then create a reducer called `messageReducer()` that handles the state for the messages. The initial state should equal an empty array. This reducer should add a message to the array of messages held in state, or return the current state. Finally, create your Redux store and pass it the reducer. diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/moving-forward-from-here.md b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/moving-forward-from-here.md index 77ef3860f5..b7921af1cc 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/moving-forward-from-here.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/moving-forward-from-here.md @@ -10,9 +10,7 @@ dashedName: moving-forward-from-here Congratulations! You finished the lessons on React and Redux. There's one last item worth pointing out before you move on. Typically, you won't write React apps in a code editor like this. This challenge gives you a glimpse of what the syntax looks like if you're working with npm and a file system on your own machine. The code should look similar, except for the use of `import` statements (these pull in all of the dependencies that have been provided for you in the challenges). The "Managing Packages with npm" section covers npm in more detail. -Finally, writing React and Redux code generally requires some configuration. This can get complicated quickly. If you are interested in experimenting on your own machine, the - -[Create React App](https://github.com/facebookincubator/create-react-app) comes configured and ready to go. +Finally, writing React and Redux code generally requires some configuration. This can get complicated quickly. If you are interested in experimenting on your own machine, the Create React App comes configured and ready to go. Alternatively, you can enable Babel as a JavaScript Preprocessor in CodePen, add React and ReactDOM as external JavaScript resources, and work there as well. diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md index f286f16b2e..dfef55cdd2 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md @@ -64,7 +64,7 @@ assert( ); ``` -The `DisplayMessages` component should render an h2, input, button, and `ul` element. +The `DisplayMessages` component should render an `h2`, `input`, `button`, and `ul` element. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.md b/curriculum/challenges/espanol/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.md index e1dd33ed04..21f59401e8 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036172 -title: Render State in the User Interface Another Way +title: Otra manera de renderizar el estado en la interfaz de usuario challengeType: 6 forumTopicId: 301408 dashedName: render-state-in-the-user-interface-another-way @@ -8,17 +8,17 @@ dashedName: render-state-in-the-user-interface-another-way # --description-- -There is another way to access `state` in a component. In the `render()` method, before the `return` statement, you can write JavaScript directly. For example, you could declare functions, access data from `state` or `props`, perform computations on this data, and so on. Then, you can assign any data to variables, which you have access to in the `return` statement. +Hay otra manera de acceder al `state` de un componente. En el método `render()`, antes de la sentencia `return`, se puede escribir JavaScript directamente. Por ejemplo, puedes declarar funciones, acceder a datos de `state` o `props`, realizar cálculos sobre estos datos, etc. Luego, puedes asignar cualquier dato a las variables, a las que tienes acceso en la sentencia `return`. # --instructions-- -In the `MyComponent` render method, define a `const` called `name` and set it equal to the name value in the component's `state`. Because you can write JavaScript directly in this part of the code, you don't have to enclose this reference in curly braces. +En el método de renderización de `MyComponent`, define una `const` llamada `name` y ponlo igual al valor del nombre en el `state` del componente. Debido a que puedes escribir JavaScript directamente en esta parte del código, no tienes que incluir esta referencia entre llaves. -Next, in the return statement, render this value in an `h1` tag using the variable `name`. Remember, you need to use the JSX syntax (curly braces for JavaScript) in the return statement. +A continuación, en la sentencia return, renderiza este valor en una etiqueta `h1` usando la variable `name`. Recuerda, necesitas usar la sintaxis JSX (llaves para JavaScript) en la sentencia return. # --hints-- -`MyComponent` should have a key `name` with value `freeCodeCamp` stored in its state. +`MyComponent` debe tener una clave `name` con valor `freeCodeCamp` almacenado en su estado. ```js assert( @@ -27,7 +27,7 @@ assert( ); ``` -`MyComponent` should render an `h1` header enclosed in a single `div`. +`MyComponent` debe renderizar un encabezado `h1` incluido en un solo `div`. ```js assert( @@ -37,14 +37,14 @@ assert( ); ``` -The rendered `h1` tag should include a reference to `{name}`. +La etiqueta `h1` renderizada debe incluir una referencia a `{name}`. ```js (getUserInput) => assert(/

\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput('index'))); ``` -The rendered `h1` header should contain text rendered from the component's state. +El encabezado `h1` renderizado debe contener texto renderizado desde el state del componente. ```js async () => { diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/render-state-in-the-user-interface.md b/curriculum/challenges/espanol/03-front-end-libraries/react/render-state-in-the-user-interface.md index e9a117d656..ccdfe0afd8 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/render-state-in-the-user-interface.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/render-state-in-the-user-interface.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036171 -title: Render State in the User Interface +title: Renderizar estado en la interfaz de usuario challengeType: 6 forumTopicId: 301409 dashedName: render-state-in-the-user-interface @@ -8,23 +8,23 @@ dashedName: render-state-in-the-user-interface # --description-- -Once you define a component's initial state, you can display any part of it in the UI that is rendered. If a component is stateful, it will always have access to the data in `state` in its `render()` method. You can access the data with `this.state`. +Una vez que se define el estado inicial de un componente, se puede mostrar cualquier parte del mismo en la interfaz de usuario que se renderiza. Si un componente tiene estado, siempre tendrá acceso a los datos en `state` en su método `render()`. Puedes acceder a los datos con `this.state`. -If you want to access a state value within the `return` of the render method, you have to enclose the value in curly braces. +Si quieres acceder a un valor de estado dentro del `return` del método de renderización, tienes que encerrar el valor entre llaves. -`State` is one of the most powerful features of components in React. It allows you to track important data in your app and render a UI in response to changes in this data. If your data changes, your UI will change. React uses what is called a virtual DOM, to keep track of changes behind the scenes. When state data updates, it triggers a re-render of the components using that data - including child components that received the data as a prop. React updates the actual DOM, but only where necessary. This means you don't have to worry about changing the DOM. You simply declare what the UI should look like. +`state` es una de las características más poderosas de los componentes de React. Esto te permite realizar un seguimiento de los datos importantes en tu aplicación y generar una interfaz de usuario en respuesta a los cambios en estos datos. Si tus datos cambian, tu interfaz de usuario cambiará. React usa lo que se llama un DOM virtual, para realizar un seguimiento de los cambios detrás de escena. Cuando se actualizan los datos de estado, activa un re-renderizado de los componentes usando esos datos - incluyendo componentes hijos que recibieron los datos como un prop. React actualiza el DOM actual, pero solo cuando sea necesario. Esto significa que no tienes que preocuparte por cambiar el DOM. Tú simplemente declara cómo debe verse la UI. -Note that if you make a component stateful, no other components are aware of its `state`. Its `state` is completely encapsulated, or local to that component, unless you pass state data to a child component as `props`. This notion of encapsulated `state` is very important because it allows you to write certain logic, then have that logic contained and isolated in one place in your code. +Ten en cuenta que si creas un componente con estado, ningún otro componente es consciente de su `state`. Su `state` está completamente encapsulado, o local a ese componente, a menos que pases datos de estado a un componente hijo como `props`. Esta noción de `state` encapsulado, es muy importante porque te permite escribir cierta lógica, luego tener esa lógica contenida y aislada en un lugar de tu código. # --instructions-- -In the code editor, `MyComponent` is already stateful. Define an `h1` tag in the component's render method which renders the value of `name` from the component's state. +En el editor de código, `MyComponent` ya tiene estado. Define una etiqueta `h1` en el método de renderizado del componente que renderiza el valor del `name` desde el estado del componente. -**Note:** The `h1` should only render the value from `state` and nothing else. In JSX, any code you write with curly braces `{ }` will be treated as JavaScript. So to access the value from `state` just enclose the reference in curly braces. +**Note:** El `h1` solo debe renderizar el valor de `state` y nada más. En JSX, cualquier código que escribas con llaves `{ }` será tratado como JavaScript. Así que para acceder al valor desde él `state` solo hay que encerrar la referencia entre llaves. # --hints-- -`MyComponent` should have a key `name` with value `freeCodeCamp` stored in its state. +`MyComponent` debe tener un `name` clave con valor `freeCodeCamp` almacenado en su estado. ```js assert( @@ -33,7 +33,7 @@ assert( ); ``` -`MyComponent` should render an `h1` header enclosed in a single `div`. +`MyComponent` debe renderizar un encabezado `h1` incluido en un solo `div`. ```js assert( @@ -43,7 +43,7 @@ assert( ); ``` -The rendered `h1` header should contain text rendered from the component's state. +El encabezado renderizado `h1` sólo debe contener texto renderizado del estado del componente. ```js async () => { diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/render-with-an-if-else-condition.md b/curriculum/challenges/espanol/03-front-end-libraries/react/render-with-an-if-else-condition.md index b56c814074..9f140b27d5 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/render-with-an-if-else-condition.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/render-with-an-if-else-condition.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036184 -title: Render with an If-Else Condition +title: Renderizar con una condición If-Else challengeType: 6 forumTopicId: 301410 dashedName: render-with-an-if-else-condition @@ -8,17 +8,17 @@ dashedName: render-with-an-if-else-condition # --description-- -Another application of using JavaScript to control your rendered view is to tie the elements that are rendered to a condition. When the condition is true, one view renders. When it's false, it's a different view. You can do this with a standard `if/else` statement in the `render()` method of a React component. +Otra aplicación de uso de JavaScript para controlar su vista renderizada es vincular los elementos que son renderizados a una condición. Cuando la condición es verdadera (true), se renderiza una vista. Cuando es falso (false), es una vista diferente. Puedes hacer esto con una sentencia estándar `if/else` en el método `render()` de un componente React. # --instructions-- -MyComponent contains a `boolean` in its state which tracks whether you want to display some element in the UI or not. The `button` toggles the state of this value. Currently, it renders the same UI every time. Rewrite the `render()` method with an `if/else` statement so that if `display` is `true`, you return the current markup. Otherwise, return the markup without the `h1` element. +MyComponent contiene un `boolean` en su estado que rastrea si deseas mostrar algún elemento en la interfaz de usuario o no. Él `button` alterna el estado de este valor. Actualmente, renderiza la misma UI cada vez. Reescribir el método `render()` con una sentencia `if/else` de modo que si `display` es `true`, devuelvas el marcado actual. De lo contrario, devuelve el marcado sin el elemento `h1`. -**Note:** You must write an `if/else` to pass the tests. Use of the ternary operator will not pass here. +**Note:** Debes escribir un `if/else` para pasar las pruebas. El uso del operador ternario no pasará aquí. # --hints-- -`MyComponent` should exist and render. +`MyComponent` debe existir y renderizar. ```js assert( @@ -29,7 +29,7 @@ assert( ); ``` -When `display` is set to `true`, a `div`, `button`, and `h1` should render. +Cuando `display` se establece en `true`, un `div`, `button`, y `h1` deben renderizarse. ```js async () => { @@ -50,7 +50,7 @@ async () => { }; ``` -When `display` is set to `false`, only a `div` and `button` should render. +Cuando `display` se establece en `false`, solo un `div` y un `button` deben renderizarse. ```js async () => { @@ -71,7 +71,7 @@ async () => { }; ``` -The render method should use an `if/else` statement to check the condition of `this.state.display`. +El método renderizado debe usar una sentencia `if/else` para comprobar la condición de `this.state.display`. ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.md b/curriculum/challenges/espanol/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.md index c9d751ce8d..74f45529a8 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403616f -title: Review Using Props with Stateless Functional Components +title: Revisa el uso de props con componentes funcionales sin estado challengeType: 6 forumTopicId: 301411 dashedName: review-using-props-with-stateless-functional-components @@ -8,19 +8,19 @@ dashedName: review-using-props-with-stateless-functional-components # --description-- -Except for the last challenge, you've been passing props to stateless functional components. These components act like pure functions. They accept props as input and return the same view every time they are passed the same props. You may be wondering what state is, and the next challenge will cover it in more detail. Before that, here's a review of the terminology for components. +Excepto por el último desafío, has estado pasando props a componentes funcionales sin estado. Estos componentes actúan como funciones puras. Aceptan props como entrada y devuelven la misma vista cada vez que se les pasa el mismo props. Tal vez te estes preguntando que es estado, y el próximo desafío lo cubrirá con más detalle. Antes de eso, aquí hay una revisión de la terminología de los componentes. -A *stateless functional component* is any function you write which accepts props and returns JSX. A *stateless component*, on the other hand, is a class that extends `React.Component`, but does not use internal state (covered in the next challenge). Finally, a *stateful component* is a class component that does maintain its own internal state. You may see stateful components referred to simply as components or React components. +Un *componente funcional sin estado*, es cualquier función que escribas que acepte props y devuelva JSX. Un *componente sin estado*, por otra parte, es una clase que extiende `React.Component`, pero no usa el estado interno (que será cubierto en el siguiente desafío). Finalmente, un *componente con estado* es un componente de clase que mantiene su propio estado interno. Puedes ver componentes con estado referidos simplemente como componentes de React. -A common pattern is to try to minimize statefulness and to create stateless functional components wherever possible. This helps contain your state management to a specific area of your application. In turn, this improves development and maintenance of your app by making it easier to follow how changes to state affect its behavior. +Un patrón común es intentar minimizar el estado y crear componentes funcionales sin estado siempre que sea posible. Esto ayuda a contener tu administración de estado a un área específica de tu aplicación. A su vez, esto mejora el desarrollo y el mantenimiento de tu aplicación, haciendo más fácil seguir cómo los cambios en el estado afectan su comportamiento. # --instructions-- -The code editor has a `CampSite` component that renders a `Camper` component as a child. Define the `Camper` component and assign it default props of `{ name: 'CamperBot' }`. Inside the `Camper` component, render any code that you want, but make sure to have one `p` element that includes only the `name` value that is passed in as a `prop`. Finally, define `propTypes` on the `Camper` component to require `name` to be provided as a prop and verify that it is of type `string`. +El editor de código tiene un componente `CampSite` que renderiza un componente `Camper` como un componente hijo. Define el componente `Camper` y asigna los props predeterminados de `{ name: 'CamperBot' }`. Dentro del componente `Camper`, renderiza el código que quieras, pero asegúrate de tener un elemento `p` que incluya sólo el valor `name` que se pasa como un `prop`. Por último, define `propTypes` en el componente `Camper` para requerir que `name` sea proporcionado como un prop y verifique que sea de tipo `string`. # --hints-- -The `CampSite` component should render. +El `CampSite` debe renderizarse. ```js assert( @@ -31,7 +31,7 @@ assert( ); ``` -The `Camper` component should render. +El componente `Camper` debe renderizarse. ```js assert( @@ -42,7 +42,7 @@ assert( ); ``` -The `Camper` component should include default props which assign the string `CamperBot` to the key `name`. +El componente `Camper` debe incluir props predeterminados que asignen la cadena `CamperBot` a la clave `name`. ```js assert( @@ -52,7 +52,7 @@ assert( ); ``` -The `Camper` component should include prop types which require the `name` prop to be of type `string`. +El componente `Camper` debe incluir tipos de prop que requieran que el prop `name` sea del tipo `string`. ```js assert( @@ -62,7 +62,7 @@ assert( ); ``` -The `Camper` component should contain a `p` element with only the text from the `name` prop. +El componente `Camper` debe contener un elemento `p` que contenga únicamente el texto del prop `name`. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/set-state-with-this.setstate.md b/curriculum/challenges/espanol/03-front-end-libraries/react/set-state-with-this.setstate.md index 93b387efc9..97bd2660e2 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/set-state-with-this.setstate.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/set-state-with-this.setstate.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036173 -title: Set State with this.setState +title: Define el estado con this.setState challengeType: 6 forumTopicId: 301412 dashedName: set-state-with-this-setstate @@ -8,7 +8,7 @@ dashedName: set-state-with-this-setstate # --description-- -The previous challenges covered component `state` and how to initialize state in the `constructor`. There is also a way to change the component's `state`. React provides a method for updating component `state` called `setState`. You call the `setState` method within your component class like so: `this.setState()`, passing in an object with key-value pairs. The keys are your state properties and the values are the updated state data. For instance, if we were storing a `username` in state and wanted to update it, it would look like this: +Los desafíos anteriores cubrieron el componente `state` y cómo inicializar el state en el `constructor`. También hay una forma de cambiar el `state` del componente. React proporciona un método para actualizar el componente `state` llamado `setState`. El método `setState` dentro de tu clase de componente se llama así: `this.setState()`, pasando un objeto con pares clave-valor. Las claves son tus propiedades de estado y los valores son datos de estado actualizados. Por ejemplo, si estuviéramos almacenando un `username` en estado y quisiéramos actualizarlo, se vería así: ```jsx this.setState({ @@ -16,17 +16,17 @@ this.setState({ }); ``` -React expects you to never modify `state` directly, instead always use `this.setState()` when state changes occur. Also, you should note that React may batch multiple state updates in order to improve performance. What this means is that state updates through the `setState` method can be asynchronous. There is an alternative syntax for the `setState` method which provides a way around this problem. This is rarely needed but it's good to keep it in mind! Please consult the [React documentation](https://facebook.github.io/react/docs/state-and-lifecycle.html) for further details. +React espera que nunca modifiques `state` directamente. En su lugar, siempre usa `this.setState()` cuando ocurran cambios de estado. Además, ten en cuenta que React puede agrupar múltiples actualizaciones de estado con el fin de mejorar el rendimiento. Esto significa que las actualizaciones de estado a través del método `setState` pueden ser asíncronas. Existe una sintaxis alternativa para el método `setState` que proporciona una forma de evitar ese problema. Esto es raramente necesario, ¡pero es bueno tenerlo en cuenta! Por favor, consulte la [documentación de React](https://facebook.github.io/react/docs/state-and-lifecycle.html) para más información. # --instructions-- -There is a `button` element in the code editor which has an `onClick()` handler. This handler is triggered when the `button` receives a click event in the browser, and runs the `handleClick` method defined on `MyComponent`. Within the `handleClick` method, update the component `state` using `this.setState()`. Set the `name` property in `state` to equal the string `React Rocks!`. +Hay un elemento `button` en el editor de código que tiene un controlador `onClick()`. Este controlador es activado cuando el `button` recibe un evento clic en el navegador, y ejecuta el método `handleClick` definido en `MyComponent`. Dentro del método `handleClick`, actualiza el componente `state` usando `this.setState()`. Establece la propiedad `name` en el `state` para igualar la cadena `React Rocks!`. -Click the button and watch the rendered state update. Don't worry if you don't fully understand how the click handler code works at this point. It's covered in upcoming challenges. +Haz clic en el botón y observa la actualización de estado renderizada. No te preocupes si no entiendes completamente cómo funciona el código del controlador de clics hasta ahora. Será cubierto en los siguientes desafíos. # --hints-- -The state of `MyComponent` should initialize with the key value pair `{ name: Initial State }`. +El estado de `MyComponent` debe inicializarse con el par de valores clave `{ name: Initial State }`. ```js assert( @@ -35,13 +35,13 @@ assert( ); ``` -`MyComponent` should render an `h1` header. +`MyComponent` debe renderizar un encabezado `h1`. ```js assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1); ``` -The rendered `h1` header should contain text rendered from the component's state. +El encabezado `h1` renderizado debe contener texto renderizado desde el estado del componente. ```js async () => { @@ -57,7 +57,7 @@ async () => { }; ``` -Calling the `handleClick` method on `MyComponent` should set the name property in state to equal `React Rocks!`. +Llamar al método `handleClick` en `MyComponent` debe establecer la propiedad de nombre en estado igual a `React Rocks!`. ```js async () => { diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/use--for-a-more-concise-conditional.md b/curriculum/challenges/espanol/03-front-end-libraries/react/use--for-a-more-concise-conditional.md index a103a21625..0f13747bc3 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/use--for-a-more-concise-conditional.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/use--for-a-more-concise-conditional.md @@ -8,9 +8,11 @@ dashedName: use--for-a-more-concise-conditional # --description-- -The if/else statements worked in the last challenge, but there's a more concise way to achieve the same result. Imagine that you are tracking several conditions in a component and you want different elements to render depending on each of these conditions. If you write a lot of `else if` statements to return slightly different UIs, you may repeat code which leaves room for error. Instead, you can use the `&&` logical operator to perform conditional logic in a more concise way. This is possible because you want to check if a condition is `true`, and if it is, return some markup. Here's an example: +The `if/else` statements worked in the last challenge, but there's a more concise way to achieve the same result. Imagine that you are tracking several conditions in a component and you want different elements to render depending on each of these conditions. If you write a lot of `else if` statements to return slightly different UIs, you may repeat code which leaves room for error. Instead, you can use the `&&` logical operator to perform conditional logic in a more concise way. This is possible because you want to check if a condition is `true`, and if it is, return some markup. Here's an example: -`{condition &&

markup

}` +```jsx +{condition &&

markup

} +``` If the `condition` is `true`, the markup will be returned. If the condition is `false`, the operation will immediately return `false` after evaluating the `condition` and return nothing. You can include these statements directly in your JSX and string multiple conditions together by writing `&&` after each one. This allows you to handle more complex conditional logic in your `render()` method without repeating a lot of code. @@ -73,7 +75,7 @@ async () => { }; ``` -The render method should use the && logical operator to check the condition of this.state.display. +The render method should use the `&&` logical operator to check the condition of `this.state.display`. ```js (getUserInput) => assert(getUserInput('index').includes('&&')); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.md b/curriculum/challenges/espanol/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.md index 6efebc2ddb..d9bccebbf2 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.md @@ -14,7 +14,7 @@ You can also write JavaScript directly in your `render` methods, before the `ret # --instructions-- -In the code provided, the `render` method has an array that contains 20 phrases to represent the answers found in the classic 1980's Magic Eight Ball toy. The button click event is bound to the `ask` method, so each time the button is clicked a random number will be generated and stored as the `randomIndex` in state. On line 52, delete the string `"change me!"` and reassign the `answer` const so your code randomly accesses a different index of the `possibleAnswers` array each time the component updates. Finally, insert the `answer` const inside the `p` tags. +In the code provided, the `render` method has an array that contains 20 phrases to represent the answers found in the classic 1980's Magic Eight Ball toy. The button click event is bound to the `ask` method, so each time the button is clicked a random number will be generated and stored as the `randomIndex` in state. On line 52, delete the string `change me!` and reassign the `answer` const so your code randomly accesses a different index of the `possibleAnswers` array each time the component updates. Finally, insert the `answer` const inside the `p` tags. # --hints-- diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.md b/curriculum/challenges/espanol/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.md index 2d8c9a7a2c..9aa54c9672 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.md @@ -10,7 +10,9 @@ dashedName: use-array-filter-to-dynamically-filter-an-array The `map` array method is a powerful tool that you will use often when working with React. Another method related to `map` is `filter`, which filters the contents of an array based on a condition, then returns a new array. For example, if you have an array of users that all have a property `online` which can be set to `true` or `false`, you can filter only those users that are online by writing: -`let onlineUsers = users.filter(user => user.online);` +```js +let onlineUsers = users.filter(user => user.online); +``` # --instructions-- @@ -27,7 +29,7 @@ assert.strictEqual( ); ``` -`MyComponent`'s state should be initialized to an array of six users.") +`MyComponent`'s state should be initialized to an array of six users. ```js assert( @@ -81,7 +83,7 @@ assert( })(); ``` -`MyComponent` should render `li` elements that contain the username of each online user. +`MyComponent` should render `li` elements that contain the `username` of each online user. ```js (() => { diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md b/curriculum/challenges/espanol/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md index 49abf8b2c9..2c6a725994 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md @@ -12,7 +12,9 @@ React provides useful type-checking features to verify that components receive p It's considered a best practice to set `propTypes` when you know the type of a prop ahead of time. You can define a `propTypes` property for a component in the same way you defined `defaultProps`. Doing this will check that props of a given key are present with a given type. Here's an example to require the type `function` for a prop called `handleClick`: -`MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }` +```js +MyComponent.propTypes = { handleClick: PropTypes.func.isRequired } +``` In the example above, the `PropTypes.func` part checks that `handleClick` is a function. Adding `isRequired` tells React that `handleClick` is a required property for that component. You will see a warning if that prop isn't provided. Also notice that `func` represents `function`. Among the seven JavaScript primitive types, `function` and `boolean` (written as `bool`) are the only two that use unusual spelling. In addition to the primitive types, there are other types available. For example, you can check that a prop is a React element. Please refer to the [documentation](https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type) for all of the options. diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/use-state-to-toggle-an-element.md b/curriculum/challenges/espanol/03-front-end-libraries/react/use-state-to-toggle-an-element.md index 534aa278e4..d4b7578928 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/use-state-to-toggle-an-element.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/use-state-to-toggle-an-element.md @@ -42,7 +42,7 @@ Currently, there is no way of updating the `visibility` property in the componen Finally, click the button to see the conditional rendering of the component based on its `state`. -**Hint:** Don't forget to bind the `this` keyword to the method in the constructor! +**Hint:** Don't forget to bind the `this` keyword to the method in the `constructor`! # --hints-- diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/write-a-simple-counter.md b/curriculum/challenges/espanol/03-front-end-libraries/react/write-a-simple-counter.md index cfc063e0ef..9522c78e54 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/write-a-simple-counter.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/write-a-simple-counter.md @@ -14,7 +14,7 @@ You can design a more complex stateful component by combining the concepts cover The `Counter` component keeps track of a `count` value in `state`. There are two buttons which call methods `increment()` and `decrement()`. Write these methods so the counter value is incremented or decremented by 1 when the appropriate button is clicked. Also, create a `reset()` method so when the reset button is clicked, the count is set to 0. -**Note:** Make sure you don't modify the `classNames` of the buttons. Also, remember to add the necessary bindings for the newly-created methods in the constructor. +**Note:** Make sure you don't modify the `className`s of the buttons. Also, remember to add the necessary bindings for the newly-created methods in the constructor. # --hints-- diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/copy-an-object-with-object.assign.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/copy-an-object-with-object.assign.md index 95f447d908..9c004ef012 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/copy-an-object-with-object.assign.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/copy-an-object-with-object.assign.md @@ -10,7 +10,9 @@ dashedName: copy-an-object-with-object-assign The last several challenges worked with arrays, but there are ways to help enforce state immutability when state is an `object`, too. A useful tool for handling objects is the `Object.assign()` utility. `Object.assign()` takes a target object and source objects and maps properties from the source objects to the target object. Any matching properties are overwritten by properties in the source objects. This behavior is commonly used to make shallow copies of objects by passing an empty object as the first argument followed by the object(s) you want to copy. Here's an example: -`const newObject = Object.assign({}, obj1, obj2);` +```js +const newObject = Object.assign({}, obj1, obj2); +``` This creates `newObject` as a new `object`, which contains the properties that currently exist in `obj1` and `obj2`. diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/create-a-redux-store.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/create-a-redux-store.md index 7881ad686d..4eb9227a82 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/create-a-redux-store.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/create-a-redux-store.md @@ -24,13 +24,13 @@ Declare a `store` variable and assign it to the `createStore()` method, passing # --hints-- -The redux store should exist. +The Redux store should exist. ```js assert(typeof store.getState === 'function'); ``` -The redux store should have a value of 5 for the state. +The Redux store should have a value of 5 for the state. ```js assert(store.getState() === 5); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/define-a-redux-action.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/define-a-redux-action.md index 0c33ade1a0..31f49e2e33 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/define-a-redux-action.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/define-a-redux-action.md @@ -18,7 +18,7 @@ Writing a Redux action is as simple as declaring an object with a type property. # --hints-- -An action object should exist. +An `action` object should exist. ```js assert( @@ -28,7 +28,7 @@ assert( ); ``` -The action should have a key property type with value `LOGIN`. +The `action` object should have a key property `type` with value `LOGIN`. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/define-an-action-creator.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/define-an-action-creator.md index 13f0f279ec..656723c9e1 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/define-an-action-creator.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/define-an-action-creator.md @@ -22,13 +22,13 @@ The function `actionCreator` should exist. assert(typeof actionCreator === 'function'); ``` -Running the `actionCreator` function should return the action object. +Running the `actionCreator` function should return the `action` object. ```js assert(typeof action === 'object'); ``` -The returned action should have a key property type with value `LOGIN`. +The returned `action` should have a key property `type` with value `LOGIN`. ```js assert(action.type === 'LOGIN'); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/get-state-from-the-redux-store.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/get-state-from-the-redux-store.md index c7a02905de..7c348ad330 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/get-state-from-the-redux-store.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/get-state-from-the-redux-store.md @@ -16,7 +16,7 @@ The code from the previous challenge is re-written more concisely in the code ed # --hints-- -The redux store should have a value of 5 for the initial state. +The Redux store should have a value of 5 for the initial state. ```js assert(store.getState() === 5); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/register-a-store-listener.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/register-a-store-listener.md index 56d06178d0..d3d43ced41 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/register-a-store-listener.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/register-a-store-listener.md @@ -32,7 +32,13 @@ assert( There should be a listener function subscribed to the store using `store.subscribe`. ```js -(getUserInput) => assert(getUserInput('index').includes('store.subscribe(')); +(getUserInput) => assert(getUserInput('index').match(/store\s*\.\s*subscribe\(/gm)); +``` + +The `store.subscribe` should receive a function. + +```js +(getUserInput) => assert(getUserInput('index').match(/(\s*function\s*)|(\s*\(\s*\)\s*=>)/gm)) ``` The callback to `store.subscribe` should also increment the global `count` variable as the store is updated. diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-const-for-action-types.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-const-for-action-types.md index 5df85e5c20..e34d2505f4 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-const-for-action-types.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-const-for-action-types.md @@ -88,8 +88,9 @@ The `authReducer` function should handle multiple action types with a switch sta ```js const noWhiteSpace = __helpers.removeWhiteSpace(code); assert( - /constLOGIN=(['"`])LOGIN\1/.test(noWhiteSpace) && - /constLOGOUT=(['"`])LOGOUT\1/.test(noWhiteSpace) + (/constLOGIN=(['"`])LOGIN\1/.test(noWhiteSpace) && + /constLOGOUT=(['"`])LOGOUT\1/.test(noWhiteSpace)) || + /const(LOGIN|LOGOUT)=(['"`])\1\2,(?!\1)(LOGIN|LOGOUT)=(['"`])\3\4/.test(noWhiteSpace) ); ``` @@ -117,9 +118,7 @@ The action creators and the reducer should reference the `LOGIN` and `LOGOUT` co ## --seed-contents-- ```js -// Change code below this line -// Change code above this line const defaultState = { authenticated: false @@ -128,11 +127,11 @@ const defaultState = { const authReducer = (state = defaultState, action) => { switch (action.type) { - case 'LOGIN': // Change this line + case 'LOGIN': return { authenticated: true } - case 'LOGOUT': // Change this line + case 'LOGOUT': return { authenticated: false } diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.md index 12c66b6acb..9839855204 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.md @@ -40,7 +40,7 @@ assert(receivedData('data').type === RECEIVED_DATA); assert(typeof asyncDataReducer === 'function'); ``` -Dispatching the requestingData action creator should update the store `state` property of fetching to `true`. +Dispatching the `requestingData` action creator should update the store `state` property of fetching to `true`. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.md index a03547ccb6..68e6f320ac 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.md @@ -10,9 +10,11 @@ dashedName: use-the-spread-operator-on-arrays One solution from ES6 to help enforce state immutability in Redux is the spread operator: `...`. The spread operator has a variety of applications, one of which is well-suited to the previous challenge of producing a new array from an existing array. This is relatively new, but commonly used syntax. For example, if you have an array `myArray` and write: -`let newArray = [...myArray];` +```js +let newArray = [...myArray]; +``` -`newArray` is now a clone of `myArray`. Both arrays still exist separately in memory. If you perform a mutation like `newArray.push(5)`, `myArray` doesn't change. The `...` effectively *spreads* out the values in `myArray` into a new array. To clone an array but add additional values in the new array, you could write `[...myArray, 'new value']`. This would return a new array composed of the values in `myArray` and the string `'new value'` as the last value. The spread syntax can be used multiple times in array composition like this, but it's important to note that it only makes a shallow copy of the array. That is to say, it only provides immutable array operations for one-dimensional arrays. +`newArray` is now a clone of `myArray`. Both arrays still exist separately in memory. If you perform a mutation like `newArray.push(5)`, `myArray` doesn't change. The `...` effectively *spreads* out the values in `myArray` into a new array. To clone an array but add additional values in the new array, you could write `[...myArray, 'new value']`. This would return a new array composed of the values in `myArray` and the string `new value` as the last value. The spread syntax can be used multiple times in array composition like this, but it's important to note that it only makes a shallow copy of the array. That is to say, it only provides immutable array operations for one-dimensional arrays. # --instructions-- @@ -20,7 +22,7 @@ Use the spread operator to return a new copy of state when a to-do is added. # --hints-- -The Redux store should exist and initialize with a state equal to `[Do not mutate state!]`. +The Redux store should exist and initialize with a state equal to `["Do not mutate state!"]`. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.md index 88f02b1441..0e6f582247 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.md @@ -48,31 +48,31 @@ Your code should increment the counter variable. assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi)); ``` -Your `.text-1` class should have a `font-size` of 15px. +Your `.text-1` class should have a `font-size` of `15px`. ```js assert($('.text-1').css('font-size') == '15px'); ``` -Your `.text-2` class should have a `font-size` of 30px. +Your `.text-2` class should have a `font-size` of `30px`. ```js assert($('.text-2').css('font-size') == '30px'); ``` -Your `.text-3` class should have a `font-size` of 45px. +Your `.text-3` class should have a `font-size` of `45px`. ```js assert($('.text-3').css('font-size') == '45px'); ``` -Your `.text-4` class should have a `font-size` of 60px. +Your `.text-4` class should have a `font-size` of `60px`. ```js assert($('.text-4').css('font-size') == '60px'); ``` -Your `.text-5` class should have a `font-size` of 75px. +Your `.text-5` class should have a `font-size` of `75px`. ```js assert($('.text-5').css('font-size') == '75px'); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/create-reusable-css-with-mixins.md index d84a69bbc6..0d9d13c6f0 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/create-reusable-css-with-mixins.md @@ -10,7 +10,7 @@ dashedName: create-reusable-css-with-mixins In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. -Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider "box-shadow": +Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider `box-shadow`: ```scss div { @@ -42,7 +42,7 @@ div { # --instructions-- -Write a mixin for `border-radius` and give it a `$radius` parameter. It should use all the vendor prefixes from the example. Then use the `border-radius` mixin to give the `#awesome` element a border radius of 15px. +Write a mixin for `border-radius` and give it a `$radius` parameter. It should use all the vendor prefixes from the example. Then use the `border-radius` mixin to give the `#awesome` element a border radius of `15px`. # --hints-- @@ -83,7 +83,7 @@ assert( ); ``` -Your code should call the `border-radius mixin` using the `@include` keyword, setting it to 15px. +Your code should call the `border-radius mixin` using the `@include` keyword, setting it to `15px`. ```js assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md index fa421a0cb0..9262041c3a 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md @@ -15,8 +15,6 @@ Names for partials start with the underscore (`_`) character, which tells Sass i For example, if all your mixins are saved in a partial named "\_mixins.scss", and they are needed in the "main.scss" file, this is how to use them in the main file: ```scss -// In the main.scss file - @import 'mixins' ``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/store-data-with-sass-variables.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/store-data-with-sass-variables.md index 6829bc9477..b106a6fb84 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/store-data-with-sass-variables.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/store-data-with-sass-variables.md @@ -17,8 +17,11 @@ Here are a couple examples: ```scss $main-fonts: Arial, sans-serif; $headings-color: green; +``` -//To use variables: +And to use the variables: + +```scss h1 { font-family: $main-fonts; color: $headings-color; @@ -29,20 +32,20 @@ One example where variables are useful is when a number of elements need to be t # --instructions-- -Create a variable `$text-color` and set it to red. Then change the value of the `color` property for the `.blog-post` and `h2` to the `$text-color` variable. +Create a variable `$text-color` and set it to `red`. Then change the value of the `color` property for the `.blog-post` and `h2` to the `$text-color` variable. # --hints-- -Your code should have a Sass variable declared for `$text-color` with a value of red. +Your code should have a Sass variable declared for `$text-color` with a value of `red`. ```js -assert(code.match(/\$text-color:\s*?red;/g)); +assert(code.match(/\$text-color\s*:\s*?red\s*;/g)); ``` Your code should use the `$text-color` variable to change the `color` for the `.blog-post` and `h2` items. ```js -assert(code.match(/color:\s*?\$text-color;/g)); +assert(code.match(/color\s*:\s*\$text-color\s*;?/g)); ``` Your `.blog-post` element should have a `color` of red. diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.md index 963960aa09..bfdc68db55 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.md @@ -44,7 +44,7 @@ Note that the `$key` variable is needed to reference the keys in the map. Otherw # --instructions-- -Write an `@each` directive that goes through a list: `blue, black, red` and assigns each variable to a `.color-bg` class, where the "color" part changes for each item. Each class should set the `background-color` the respective color. +Write an `@each` directive that goes through a list: `blue, black, red` and assigns each variable to a `.color-bg` class, where the `color` part changes for each item. Each class should set the `background-color` the respective color. # --hints-- diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md index 5192bbacba..e13d113b23 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md @@ -57,7 +57,7 @@ Your code should declare a mixin named `border-stroke` which has a parameter nam assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi)); ``` -Your mixin should have an `@if` statement to check if `$val` is light, and to set the `border` to 1px solid black. +Your mixin should have an `@if` statement to check if `$val` is `light`, and to set the `border` to `1px solid black`. ```js assert( @@ -67,7 +67,7 @@ assert( ); ``` -Your mixin should have an `@else if` statement to check if `$val` is medium, and to set the `border` to 3px solid black. +Your mixin should have an `@else if` statement to check if `$val` is `medium`, and to set the `border` to `3px solid black`. ```js assert( @@ -77,7 +77,7 @@ assert( ); ``` -Your mixin should have an `@else if` statement to check if `$val` is heavy, and to set the `border` to 6px solid black. +Your mixin should have an `@else if` statement to check if `$val` is `heavy`, and to set the `border` to `6px solid black`. ```js assert( @@ -87,7 +87,7 @@ assert( ); ``` -Your mixin should have an `@else` statement to set the `border` to none. +Your mixin should have an `@else` statement to set the `border` to `none`. ```js assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi)); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md index 4add1bf6b4..33794d33d4 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md @@ -20,17 +20,17 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. T **User Story #3:** My chart should have a `g` element y-axis with a corresponding `id="y-axis"`. -**User Story #4:** Both axes should contain multiple tick labels, each with the corresponding `class="tick"`. +**User Story #4:** Both axes should contain multiple tick labels, each with a corresponding `class="tick"`. **User Story #5:** My chart should have a `rect` element for each data point with a corresponding `class="bar"` displaying the data. -**User Story #6:** Each bar should have the properties `data-date` and `data-gdp` containing date and GDP values. +**User Story #6:** Each bar should have the properties `data-date` and `data-gdp` containing `date` and `GDP` values. **User Story #7:** The bar elements' `data-date` properties should match the order of the provided data. **User Story #8:** The bar elements' `data-gdp` properties should match the order of the provided data. -**User Story #9:** Each bar element's height should accurately represent the data's corresponding GDP. +**User Story #9:** Each bar element's height should accurately represent the data's corresponding `GDP`. **User Story #10:** The `data-date` attribute and its corresponding bar element should align with the corresponding value on the x-axis. @@ -42,7 +42,7 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. T Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json` -You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`. +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`. Once you're done, submit the URL to your working project with all its tests passing. diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md index 5d4c6cf771..8367df6732 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md @@ -22,11 +22,11 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. R **User Story #4:** There should be at least 4 different fill colors used for the counties. -**User Story #5:** My counties should each have `data-fips` and `data-education` properties containing their corresponding fips and education values. +**User Story #5:** My counties should each have `data-fips` and `data-education` properties containing their corresponding `fips` and `education` values. **User Story #6:** My choropleth should have a county for each provided data point. -**User Story #7:** The counties should have data-fips and data-education values that match the sample data. +**User Story #7:** The counties should have `data-fips` and `data-education` values that match the sample data. **User Story #8:** My choropleth should have a legend with a corresponding `id="legend"`. @@ -41,7 +41,7 @@ Here are the datasets you will need to complete this project: - **US Education Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json` - **US County Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json` -You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` Once you're done, submit the URL to your working project with all its tests passing. diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md index 4ca060d07f..6a8ea226fb 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md @@ -26,7 +26,7 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. R **User Story #6:** There should be at least 4 different fill colors used for the cells. -**User Story #7:** Each cell will have the properties `data-month`, `data-year`, `data-temp` containing their corresponding month, year, and temperature values. +**User Story #7:** Each cell will have the properties `data-month`, `data-year`, `data-temp` containing their corresponding `month`, `year`, and `temperature` values. **User Story #8:** The `data-month`, `data-year` of each cell should be within the range of the data. @@ -50,7 +50,7 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. R Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json` -You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` Once you're done, submit the URL to your working project with all its tests passing. diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md index 2c07a9b5aa..03d20ab5d2 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md @@ -22,9 +22,9 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. T **User Story #4:** I can see dots, that each have a class of `dot`, which represent the data being plotted. -**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding x and y values. +**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding `x` and `y` values. -**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or Date objects are acceptable for test evaluation. For `data-yvalue` (minutes), use Date objects. +**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or `Date` objects are acceptable for test evaluation. For `data-yvalue` (minutes), use `Date` objects. **User Story #7:** The `data-xvalue` and its corresponding dot should align with the corresponding point/value on the x-axis. @@ -46,7 +46,7 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. T Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json` -You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` Once you're done, submit the URL to your working project with all its tests passing. diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md index 85a5139f97..3f5196b244 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md @@ -22,9 +22,9 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. T **User Story #4:** There should be at least 2 different fill colors used for the tiles. -**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding name, category, and value. +**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding `name`, `category`, and `value`. -**User Story #6:** The area of each tile should correspond to the data-value amount: tiles with a larger data-value should have a bigger area. +**User Story #6:** The area of each tile should correspond to the `data-value` amount: tiles with a larger `data-value` should have a bigger area. **User Story #7:** My tree map should have a legend with corresponding `id="legend"`. @@ -42,7 +42,7 @@ For this project you can use any of the following datasets: - **Movie Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json` - **Video Game Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json` -You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` Once you're done, submit the URL to your working project with all its tests passing. diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md index 85a34c34a1..beb4f34992 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md @@ -21,7 +21,7 @@ Use the `attr()` method to add a class of `bar` to all the `rect` elements. This Your `rect` elements should have a class of `bar`. ```js -assert($('rect').attr('class') == 'bar'); +assert($('rect').attr('class').trim().split(/\s+/g).includes('bar')); ``` # --seed-- diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md index 5cbd990ad5..869ca675f9 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md @@ -24,55 +24,55 @@ Your code should have 9 `title` elements. assert($('title').length == 9); ``` -The first `title` element should have tooltip text of 12. +The first `title` element should have tooltip text of `12`. ```js assert($('title').eq(0).text() == '12'); ``` -The second `title` element should have tooltip text of 31. +The second `title` element should have tooltip text of `31`. ```js assert($('title').eq(1).text() == '31'); ``` -The third `title` element should have tooltip text of 22. +The third `title` element should have tooltip text of `22`. ```js assert($('title').eq(2).text() == '22'); ``` -The fourth `title` element should have tooltip text of 17. +The fourth `title` element should have tooltip text of `17`. ```js assert($('title').eq(3).text() == '17'); ``` -The fifth `title` element should have tooltip text of 25. +The fifth `title` element should have tooltip text of `25`. ```js assert($('title').eq(4).text() == '25'); ``` -The sixth `title` element should have tooltip text of 18. +The sixth `title` element should have tooltip text of `18`. ```js assert($('title').eq(5).text() == '18'); ``` -The seventh `title` element should have tooltip text of 29. +The seventh `title` element should have tooltip text of `29`. ```js assert($('title').eq(6).text() == '29'); ``` -The eighth `title` element should have tooltip text of 14. +The eighth `title` element should have tooltip text of `14`. ```js assert($('title').eq(7).text() == '14'); ``` -The ninth `title` element should have tooltip text of 9. +The ninth `title` element should have tooltip text of `9`. ```js assert($('title').eq(8).text() == '9'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md index 7ad073a32a..f8ad572913 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md @@ -18,7 +18,7 @@ All three attributes can use a callback function to set their values dynamically # --instructions-- -Add `cx`, `cy`, and `r` attributes to the `circle` elements. The `cx` value should be the first number in the array for each item in `dataset`. The `cy` value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The `r` value should be 5 for all circles. +Add `cx`, `cy`, and `r` attributes to the `circle` elements. The `cx` value should be the first number in the array for each item in `dataset`. The `cy` value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The `r` value should be `5` for all circles. # --hints-- @@ -28,7 +28,7 @@ Your code should have 10 `circle` elements. assert($('circle').length == 10); ``` -The first `circle` element should have a `cx` value of 34, a `cy` value of 422, and an `r` value of 5. +The first `circle` element should have a `cx` value of `34`, a `cy` value of `422`, and an `r` value of `5`. ```js assert( @@ -38,7 +38,7 @@ assert( ); ``` -The second `circle` element should have a `cx` value of 109, a `cy` value of 220, and an `r` value of 5. +The second `circle` element should have a `cx` value of `109`, a `cy` value of `220`, and an `r` value of `5`. ```js assert( @@ -48,7 +48,7 @@ assert( ); ``` -The third `circle` element should have a `cx` value of 310, a `cy` value of 380, and an `r` value of 5. +The third `circle` element should have a `cx` value of `310`, a `cy` value of `380`, and an `r` value of `5`. ```js assert( @@ -58,7 +58,7 @@ assert( ); ``` -The fourth `circle` element should have a `cx` value of 79, a `cy` value of 89, and an `r` value of 5. +The fourth `circle` element should have a `cx` value of `79`, a `cy` value of `89`, and an `r` value of `5`. ```js assert( @@ -68,7 +68,7 @@ assert( ); ``` -The fifth `circle` element should have a `cx` value of 420, a `cy` value of 280, and an `r` value of 5. +The fifth `circle` element should have a `cx` value of `420`, a `cy` value of `280`, and an `r` value of `5`. ```js assert( @@ -78,7 +78,7 @@ assert( ); ``` -The sixth `circle` element should have a `cx` value of 233, a `cy` value of 355, and an `r` value of 5. +The sixth `circle` element should have a `cx` value of `233`, a `cy` value of `355`, and an `r` value of `5`. ```js assert( @@ -88,7 +88,7 @@ assert( ); ``` -The seventh `circle` element should have a `cx` value of 333, a `cy` value of 404, and an `r` value of 5. +The seventh `circle` element should have a `cx` value of `333`, a `cy` value of `404`, and an `r` value of `5`. ```js assert( @@ -98,7 +98,7 @@ assert( ); ``` -The eighth `circle` element should have a `cx` value of 222, a `cy` value of 167, and an `r` value of 5. +The eighth `circle` element should have a `cx` value of `222`, a `cy` value of `167`, and an `r` value of `5`. ```js assert( @@ -108,7 +108,7 @@ assert( ); ``` -The ninth `circle` element should have a `cx` value of 78, a `cy` value of 180, and an `r` value of 5. +The ninth `circle` element should have a `cx` value of `78`, a `cy` value of `180`, and an `r` value of `5`. ```js assert( @@ -118,7 +118,7 @@ assert( ); ``` -The tenth `circle` element should have a `cx` value of 21, a `cy` value of 377, and an `r` value of 5. +The tenth `circle` element should have a `cx` value of `21`, a `cy` value of `377`, and an `r` value of `5`. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md index f4d9f3fc4b..a1f0bd70dd 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md @@ -26,11 +26,11 @@ svg.append("g") .call(xAxis); ``` -The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the `call()` method. The y-axis works in the same way, except the `translate` argument is in the form (x, 0). Because `translate` is a string in the `attr()` method above, you can use concatenation to include variable values for its arguments. +The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the `call()` method. The y-axis works in the same way, except the `translate` argument is in the form `(x, 0)`. Because `translate` is a string in the `attr()` method above, you can use concatenation to include variable values for its arguments. # --instructions-- -The scatter plot now has an x-axis. Create a y-axis in a variable named `yAxis` using the `axisLeft()` method. Then render the axis using a `g` element. Make sure to use a `transform` attribute to translate the axis by the amount of padding units right, and 0 units down. Remember to `call()` the axis. +The scatter plot now has an x-axis. Create a y-axis in a variable named `yAxis` using the `axisLeft()` method. Then render the axis using a `g` element. Make sure to use a `transform` attribute to translate the axis by the amount of padding units right, and `0` units down. Remember to `call()` the axis. # --hints-- @@ -40,7 +40,7 @@ Your code should use the `axisLeft()` method with `yScale` passed as the argumen assert(code.match(/\.axisLeft\(yScale\)/g)); ``` -The y-axis `g` element should have a `transform` attribute to translate the axis by (60, 0). +The y-axis `g` element should have a `transform` attribute to translate the axis by `(60, 0)`. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md index a097263ca4..a2911cf178 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md @@ -10,11 +10,13 @@ dashedName: add-classes-with-d3 Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the `attr()` method to add any HTML attribute to an element, including a class name. -The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of "container" to a selection: +The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of `container` to a selection: -`selection.attr("class", "container");` +```js +selection.attr("class", "container"); +``` -Note that the "class" parameter will remain the same whenever you need to add a class and only the "container" parameter will change. +Note that the `class` parameter will remain the same whenever you need to add a class and only the `container` parameter will change. # --instructions-- @@ -25,7 +27,7 @@ Add the `attr()` method to the code in the editor and put a class of `bar` on th Your `div` elements should have a class of `bar`. ```js -assert($('div').attr('class') == 'bar'); +assert($('div').attr('class').trim().split(/\s+/g).includes('bar')); ``` Your code should use the `attr()` method. diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md index a1107dbf11..ea44782e9c 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md @@ -12,9 +12,11 @@ D3 has several methods that let you add and change elements in your document. The `select()` method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example: -`const anchor = d3.select("a");` +```js +const anchor = d3.select("a"); +``` -The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The "d3" part of the example is a reference to the D3 object, which is how you access D3 methods. +The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The `d3` part of the example is a reference to the D3 object, which is how you access D3 methods. Two other useful methods are `append()` and `text()`. @@ -34,7 +36,7 @@ D3 allows you to chain several methods together with periods to perform a number # --instructions-- -Use the `select` method to select the `body` tag in the document. Then `append` an `h1` tag to it, and add the text "Learning D3" into the `h1` element. +Use the `select` method to select the `body` tag in the document. Then `append` an `h1` tag to it, and add the text `Learning D3` into the `h1` element. # --hints-- @@ -44,7 +46,7 @@ The `body` should have one `h1` element. assert($('body').children('h1').length == 1); ``` -The `h1` element should have the text "Learning D3" in it. +The `h1` element should have the text `Learning D3` in it. ```js assert($('h1').text() == 'Learning D3'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md index 88c1b74f17..9c538755d7 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md @@ -12,7 +12,9 @@ D3 lets you add inline CSS styles on dynamic elements with the `style()` method. The `style()` method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue: -`selection.style("color","blue");` +```js +selection.style("color","blue"); +``` # --instructions-- @@ -20,7 +22,7 @@ Add the `style()` method to the code in the editor to make all the displayed tex # --hints-- -Your `h2` elements should have a `font-family` of verdana. +Your `h2` elements should have a `font-family` of `verdana`. ```js assert($('h2').css('font-family') == 'verdana'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md index 060f4e59c1..d0da292c76 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md @@ -18,60 +18,59 @@ D3 gives you a high level of control over how you label your bars. The code in the editor already binds the data to each new `text` element. First, append `text` nodes to the `svg`. Next, add attributes for the `x` and `y` coordinates. They should be calculated the same way as the `rect` ones, except the `y` value for the `text` should make the label sit 3 units higher than the bar. Finally, use the D3 `text()` method to set the label equal to the data point value. -**Note** -For the label to sit higher than the bar, decide if the `y` value for the `text` should be 3 greater or 3 less than the `y` value for the bar. +**Note:** For the label to sit higher than the bar, decide if the `y` value for the `text` should be 3 greater or 3 less than the `y` value for the bar. # --hints-- -The first `text` element should have a label of 12 and a `y` value of 61. +The first `text` element should have a label of `12` and a `y` value of `61`. ```js assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61'); ``` -The second `text` element should have a label of 31 and a `y` value of 4. +The second `text` element should have a label of `31` and a `y` value of `4`. ```js assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4'); ``` -The third `text` element should have a label of 22 and a `y` value of 31. +The third `text` element should have a label of `22` and a `y` value of `31`. ```js assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31'); ``` -The fourth `text` element should have a label of 17 and a `y` value of 46. +The fourth `text` element should have a label of `17` and a `y` value of `46`. ```js assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46'); ``` -The fifth `text` element should have a label of 25 and a `y` value of 22. +The fifth `text` element should have a label of `25` and a `y` value of `22`. ```js assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22'); ``` -The sixth `text` element should have a label of 18 and a `y` value of 43. +The sixth `text` element should have a label of `18` and a `y` value of `43`. ```js assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43'); ``` -The seventh `text` element should have a label of 29 and a `y` value of 10. +The seventh `text` element should have a label of `29` and a `y` value of `10`. ```js assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10'); ``` -The eighth `text` element should have a label of 14 and a `y` value of 55. +The eighth `text` element should have a label of `14` and a `y` value of `55`. ```js assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55'); ``` -The ninth `text` element should have a label of 9 and a `y` value of 70. +The ninth `text` element should have a label of `9` and a `y` value of `70`. ```js assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md index 8697e5117e..a2cd64c0a4 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md @@ -16,7 +16,7 @@ The `text` nodes need `x` and `y` attributes to position it on the SVG canvas. I # --instructions-- -Label each point on the scatter plot using the `text` elements. The text of the label should be the two values separated by a comma and a space. For example, the label for the first point is "34, 78". Set the `x` attribute so it's 5 units more than the value you used for the `cx` attribute on the `circle`. Set the `y` attribute the same way that's used for the `cy` value on the `circle`. +Label each point on the scatter plot using the `text` elements. The text of the label should be the two values separated by a comma and a space. For example, the label for the first point is `34, 78`. Set the `x` attribute so it's `5` units more than the value you used for the `cx` attribute on the `circle`. Set the `y` attribute the same way that's used for the `cy` value on the `circle`. # --hints-- @@ -26,7 +26,7 @@ Your code should have 10 `text` elements. assert($('text').length == 10); ``` -The first label should have text of "34, 78", an `x` value of 39, and a `y` value of 422. +The first label should have text of `34, 78`, an `x` value of `39`, and a `y` value of `422`. ```js assert( @@ -36,7 +36,7 @@ assert( ); ``` -The second label should have text of "109, 280", an `x` value of 114, and a `y` value of 220. +The second label should have text of `109, 280`, an `x` value of `114`, and a `y` value of `220`. ```js assert( @@ -46,7 +46,7 @@ assert( ); ``` -The third label should have text of "310, 120", an `x` value of 315, and a `y` value of 380. +The third label should have text of `310, 120`, an `x` value of `315`, and a `y` value of `380`. ```js assert( @@ -56,7 +56,7 @@ assert( ); ``` -The fourth label should have text of "79, 411", an `x` value of 84, and a `y` value of 89. +The fourth label should have text of `79, 411`, an `x` value of `84`, and a `y` value of `89`. ```js assert( @@ -66,7 +66,7 @@ assert( ); ``` -The fifth label should have text of "420, 220", an `x` value of 425, and a `y` value of 280. +The fifth label should have text of `420, 220`, an `x` value of `425`, and a `y` value of `280`. ```js assert( @@ -76,7 +76,7 @@ assert( ); ``` -The sixth label should have text of "233, 145", an `x` value of 238, and a `y` value of 355. +The sixth label should have text of `233, 145`, an `x` value of `238`, and a `y` value of `355`. ```js assert( @@ -86,7 +86,7 @@ assert( ); ``` -The seventh label should have text of "333, 96", an `x` value of 338, and a `y` value of 404. +The seventh label should have text of `333, 96`, an `x` value of `338`, and a `y` value of `404`. ```js assert( @@ -96,7 +96,7 @@ assert( ); ``` -The eighth label should have text of "222, 333", an `x` value of 227, and a `y` value of 167. +The eighth label should have text of `222, 333`, an `x` value of `227`, and a `y` value of `167`. ```js assert( @@ -106,7 +106,7 @@ assert( ); ``` -The ninth label should have text of "78, 320", an `x` value of 83, and a `y` value of 180. +The ninth label should have text of `78, 320`, an `x` value of `83`, and a `y` value of `180`. ```js assert( @@ -116,7 +116,7 @@ assert( ); ``` -The tenth label should have text of "21, 123", an `x` value of 26, and a `y` value of 377. +The tenth label should have text of `21, 123`, an `x` value of `26`, and a `y` value of `377`. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md index 348828f163..1ed6ae7d5e 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md @@ -14,7 +14,7 @@ For example, you may want to color a data point blue if it has a value less than ```js selection.style("color", (d) => { - /* Logic that returns the color based on a condition */ + }); ``` @@ -22,10 +22,9 @@ The `style()` method is not limited to setting the `color` - it can be used with # --instructions-- -Add the `style()` method to the code in the editor to set the `color` of the `h2` elements conditionally. Write the callback function so if the data value is less than 20, it returns "red", otherwise it returns "green". +Add the `style()` method to the code in the editor to set the `color` of the `h2` elements conditionally. Write the callback function so if the data value is less than 20, it returns red, otherwise it returns green. -**Note** -You can use if-else logic, or the ternary operator. +**Note:** You can use if-else logic, or the ternary operator. # --hints-- diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md index d49e0a571f..4e0d47f93c 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md @@ -14,7 +14,7 @@ In SVG, a `rect` shape is colored with the `fill` attribute. It supports hex cod # --instructions-- -Add an `attr()` method to set the "fill" of all the bars to the color "navy". +Add an `attr()` method to set the `fill` of all the bars to the color navy. # --hints-- diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md index 00ce9fa19f..46b6e2613d 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md @@ -16,14 +16,13 @@ The last challenge created a bar chart, but there are a couple of formatting cha # --instructions-- -First, add a `margin` of 2px to the `bar` class in the `style` tag. Next, change the callback function in the `style()` method so it returns a value 10 times the original data value (plus the "px"). +First, add a `margin` of `2px` to the `bar` class in the `style` tag. Next, change the callback function in the `style()` method so it returns a value `10` times the original data value (plus the `px`). -**Note** -Multiplying each data point by the *same* constant only alters the scale. It's like zooming in, and it doesn't change the meaning of the underlying data. +**Note:** Multiplying each data point by the *same* constant only alters the scale. It's like zooming in, and it doesn't change the meaning of the underlying data. # --hints-- -The first `div` should have a `height` of 120 pixels and a `margin` of 2 pixels. +The first `div` should have a `height` of `120` pixels and a `margin` of `2` pixels. ```js assert( @@ -32,7 +31,7 @@ assert( ); ``` -The second `div` should have a `height` of 310 pixels and a `margin` of 2 pixels. +The second `div` should have a `height` of `310` pixels and a `margin` of `2` pixels. ```js assert( @@ -41,7 +40,7 @@ assert( ); ``` -The third `div` should have a `height` of 220 pixels and a `margin` of 2 pixels. +The third `div` should have a `height` of `220` pixels and a `margin` of `2` pixels. ```js assert( @@ -50,7 +49,7 @@ assert( ); ``` -The fourth `div` should have a `height` of 170 pixels and a `margin` of 2 pixels. +The fourth `div` should have a `height` of `170` pixels and a `margin` of `2` pixels. ```js assert( @@ -59,7 +58,7 @@ assert( ); ``` -The fifth `div` should have a `height` of 250 pixels and a `margin` of 2 pixels. +The fifth `div` should have a `height` of `250` pixels and a `margin` of `2` pixels. ```js assert( @@ -68,7 +67,7 @@ assert( ); ``` -The sixth `div` should have a `height` of 180 pixels and a `margin` of 2 pixels. +The sixth `div` should have a `height` of `180` pixels and a `margin` of `2` pixels. ```js assert( @@ -77,7 +76,7 @@ assert( ); ``` -The seventh `div` should have a `height` of 290 pixels and a `margin` of 2 pixels. +The seventh `div` should have a `height` of `290` pixels and a `margin` of `2` pixels. ```js assert( @@ -86,7 +85,7 @@ assert( ); ``` -The eighth `div` should have a `height` of 140 pixels and a `margin` of 2 pixels. +The eighth `div` should have a `height` of `140` pixels and a `margin` of `2` pixels. ```js assert( @@ -95,7 +94,7 @@ assert( ); ``` -The ninth `div` should have a `height` of 90 pixels and a `margin` of 2 pixels. +The ninth `div` should have a `height` of `90` pixels and a `margin` of `2` pixels. ```js assert( @@ -113,10 +112,10 @@ assert( .bar { width: 25px; height: 100px; - /* Only change code below this line */ + /* Add your code below this line */ - /* Only change code above this line */ + /* Add your code above this line */ display: inline-block; background-color: blue; } @@ -130,7 +129,7 @@ assert( .enter() .append("div") .attr("class", "bar") - .style("height", (d) => (d + "px")) + .style("height", (d) => (d + "px")) // Change this line ``` diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md index 3712daf3f6..e988030673 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md @@ -19,7 +19,7 @@ d3.select("body").selectAll("div") .append("div") ``` -There are a few differences working with `rect` elements instead of `divs`. The `rects` must be appended to an `svg` element, not directly to the `body`. Also, you need to tell D3 where to place each `rect` within the `svg` area. The bar placement will be covered in the next challenge. +There are a few differences working with `rect` elements instead of `div` elements. The `rect` elements must be appended to an `svg` element, not directly to the `body`. Also, you need to tell D3 where to place each `rect` within the `svg` area. The bar placement will be covered in the next challenge. # --instructions-- diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md index 3f75bf3e28..d118740df6 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md @@ -10,7 +10,7 @@ dashedName: create-a-linear-scale-with-d3 The bar and scatter plot charts both plotted data directly onto the SVG canvas. However, if the height of a bar or one of the data points were larger than the SVG height or width values, it would go outside the SVG area. -In D3, there are scales to help plot data. `Scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas. +In D3, there are scales to help plot data. `scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas. For example, say you have a 100x500-sized SVG canvas and you want to plot Gross Domestic Product (GDP) for a number of countries. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area. @@ -18,17 +18,19 @@ It's unlikely you would plot raw data as-is. Before plotting it, you set the sca D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method `scaleLinear()`: -`const scale = d3.scaleLinear()` +```js +const scale = d3.scaleLinear() +``` By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this. # --instructions-- -Change the `scale` variable to create a linear scale. Then set the `output` variable to the scale called with an input argument of 50. +Change the `scale` variable to create a linear scale. Then set the `output` variable to the scale called with an input argument of `50`. # --hints-- -The text in the `h2` should be 50. +The text in the `h2` should be `50`. ```js assert($('h2').text() == '50'); @@ -40,7 +42,7 @@ Your code should use the `scaleLinear()` method. assert(code.match(/\.scaleLinear/g)); ``` -The `output` variable should call `scale` with an argument of 50. +The `output` variable should call `scale` with an argument of `50`. ```js assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g)); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md index dea96419de..5f4bd1e056 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md @@ -16,8 +16,7 @@ SVG has a `circle` tag to create the circle shape. It works a lot like the `rect Use the `data()`, `enter()`, and `append()` methods to bind `dataset` to new `circle` elements that are appended to the SVG canvas. -**Note** -The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge. +**Note:** The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge. # --hints-- diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md index 5e24ba8263..71a39ddaf1 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md @@ -20,7 +20,7 @@ An SVG `rect` has four attributes. There are the `x` and `y` coordinates for whe # --instructions-- -Add a `rect` shape to the `svg` using `append()`, and give it a `width` attribute of 25 and `height` attribute of 100. Also, give the `rect` `x` and `y` attributes each set to 0. +Add a `rect` shape to the `svg` using `append()`, and give it a `width` attribute of `25` and `height` attribute of `100`. Also, give the `rect` `x` and `y` attributes each set to `0`. # --hints-- @@ -30,25 +30,25 @@ Your document should have 1 `rect` element. assert($('rect').length == 1); ``` -The `rect` element should have a `width` attribute set to 25. +The `rect` element should have a `width` attribute set to `25`. ```js assert($('rect').attr('width') == '25'); ``` -The `rect` element should have a `height` attribute set to 100. +The `rect` element should have a `height` attribute set to `100`. ```js assert($('rect').attr('height') == '100'); ``` -The `rect` element should have an `x` attribute set to 0. +The `rect` element should have an `x` attribute set to `0`. ```js assert($('rect').attr('x') == '0'); ``` -The `rect` element should have a `y` attribute set to 0. +The `rect` element should have a `y` attribute set to `0`. ```js assert($('rect').attr('y') == '0'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md index dcf94bee44..33463161a2 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md @@ -12,71 +12,69 @@ The height of each bar can be set to the value of the data point in the array, s ```js selection.attr("property", (d, i) => { - /* - * d is the data point value - * i is the index of the data point in the array - */ + }) ``` +Here `d` would be the data point value, and `i` would be the index of the data point in the array. + # --instructions-- Change the callback function for the `height` attribute to return the data value times 3. -**Note** -Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example. +**Note:** Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example. # --hints-- -The first `rect` should have a `height` of 36. +The first `rect` should have a `height` of `36`. ```js assert($('rect').eq(0).attr('height') == '36'); ``` -The second `rect` should have a `height` of 93. +The second `rect` should have a `height` of `93`. ```js assert($('rect').eq(1).attr('height') == '93'); ``` -The third `rect` should have a `height` of 66. +The third `rect` should have a `height` of `66`. ```js assert($('rect').eq(2).attr('height') == '66'); ``` -The fourth `rect` should have a `height` of 51. +The fourth `rect` should have a `height` of `51`. ```js assert($('rect').eq(3).attr('height') == '51'); ``` -The fifth `rect` should have a `height` of 75. +The fifth `rect` should have a `height` of `75`. ```js assert($('rect').eq(4).attr('height') == '75'); ``` -The sixth `rect` should have a `height` of 54. +The sixth `rect` should have a `height` of `54`. ```js assert($('rect').eq(5).attr('height') == '54'); ``` -The seventh `rect` should have a `height` of 87. +The seventh `rect` should have a `height` of `87`. ```js assert($('rect').eq(6).attr('height') == '87'); ``` -The eighth `rect` should have a `height` of 42. +The eighth `rect` should have a `height` of `42`. ```js assert($('rect').eq(7).attr('height') == '42'); ``` -The ninth `rect` should have a `height` of 27. +The ninth `rect` should have a `height` of `27`. ```js assert($('rect').eq(8).attr('height') == '27'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md index eb0cff2051..ad10065163 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md @@ -12,16 +12,13 @@ The last challenge created and appended a rectangle to the `svg` element for eac The placement of a rectangle is handled by the `x` and `y` attributes. They tell D3 where to start drawing the shape in the `svg` area. The last challenge set them each to 0, so every bar was placed in the upper-left corner. -For a bar chart, all of the bars should sit on the same vertical level, which means the `y` value stays the same (at 0) for all bars. The `x` value, however, needs to change as you add new bars. Remember that larger `x` values push items farther to the right. As you go through the array elements in `dataset`, the x value should increase. +For a bar chart, all of the bars should sit on the same vertical level, which means the `y` value stays the same (at 0) for all bars. The `x` value, however, needs to change as you add new bars. Remember that larger `x` values push items farther to the right. As you go through the array elements in `dataset`, the `x` value should increase. The `attr()` method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually `d`) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format: ```js selection.attr("property", (d, i) => { - /* - * d is the data point value - * i is the index of the data point in the array - */ + }) ``` @@ -31,60 +28,59 @@ It's important to note that you do NOT need to write a `for` loop or use `forEac Change the `x` attribute callback function so it returns the index times 30. -**Note** -Each bar has a width of 25, so increasing each `x` value by 30 adds some space between the bars. Any value greater than 25 would work in this example. +**Note:** Each bar has a width of 25, so increasing each `x` value by 30 adds some space between the bars. Any value greater than 25 would work in this example. # --hints-- -The first `rect` should have an `x` value of 0. +The first `rect` should have an `x` value of `0`. ```js assert($('rect').eq(0).attr('x') == '0'); ``` -The second `rect` should have an `x` value of 30. +The second `rect` should have an `x` value of `30`. ```js assert($('rect').eq(1).attr('x') == '30'); ``` -The third `rect` should have an `x` value of 60. +The third `rect` should have an `x` value of `60`. ```js assert($('rect').eq(2).attr('x') == '60'); ``` -The fourth `rect` should have an `x` value of 90. +The fourth `rect` should have an `x` value of `90`. ```js assert($('rect').eq(3).attr('x') == '90'); ``` -The fifth `rect` should have an `x` value of 120. +The fifth `rect` should have an `x` value of `120`. ```js assert($('rect').eq(4).attr('x') == '120'); ``` -The sixth `rect` should have an `x` value of 150. +The sixth `rect` should have an `x` value of `150`. ```js assert($('rect').eq(5).attr('x') == '150'); ``` -The seventh `rect` should have an `x` value of 180. +The seventh `rect` should have an `x` value of `180`. ```js assert($('rect').eq(6).attr('x') == '180'); ``` -The eighth `rect` should have an `x` value of 210. +The eighth `rect` should have an `x` value of `210`. ```js assert($('rect').eq(7).attr('x') == '210'); ``` -The ninth `rect` should have an `x` value of 240. +The ninth `rect` should have an `x` value of `240`. ```js assert($('rect').eq(8).attr('x') == '240'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md index 794e45b868..66156ef887 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md @@ -22,60 +22,59 @@ The `y` coordinate that is `y = heightOfSVG - heightOfBar` would place the bars Change the callback function for the `y` attribute to set the bars right-side-up. Remember that the `height` of the bar is 3 times the data value `d`. -**Note** -In general, the relationship is `y = h - m * d`, where `m` is the constant that scales the data points. +**Note:** In general, the relationship is `y = h - m * d`, where `m` is the constant that scales the data points. # --hints-- -The first `rect` should have a `y` value of 64. +The first `rect` should have a `y` value of `64`. ```js assert($('rect').eq(0).attr('y') == h - dataset[0] * 3); ``` -The second `rect` should have a `y` value of 7. +The second `rect` should have a `y` value of `7`. ```js assert($('rect').eq(1).attr('y') == h - dataset[1] * 3); ``` -The third `rect` should have a `y` value of 34. +The third `rect` should have a `y` value of `34`. ```js assert($('rect').eq(2).attr('y') == h - dataset[2] * 3); ``` -The fourth `rect` should have a `y` value of 49. +The fourth `rect` should have a `y` value of `49`. ```js assert($('rect').eq(3).attr('y') == h - dataset[3] * 3); ``` -The fifth `rect` should have a `y` value of 25. +The fifth `rect` should have a `y` value of `25`. ```js assert($('rect').eq(4).attr('y') == h - dataset[4] * 3); ``` -The sixth `rect` should have a `y` value of 46. +The sixth `rect` should have a `y` value of `46`. ```js assert($('rect').eq(5).attr('y') == h - dataset[5] * 3); ``` -The seventh `rect` should have a `y` value of 13. +The seventh `rect` should have a `y` value of `13`. ```js assert($('rect').eq(6).attr('y') == h - dataset[6] * 3); ``` -The eighth `rect` should have a `y` value of 58. +The eighth `rect` should have a `y` value of `58`. ```js assert($('rect').eq(7).attr('y') == h - dataset[7] * 3); ``` -The ninth `rect` should have a `y` value of 73. +The ninth `rect` should have a `y` value of `73`. ```js assert($('rect').eq(8).attr('y') == h - dataset[8] * 3); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md index a989479069..f5fba672e9 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md @@ -20,8 +20,7 @@ CSS can be scalable when styles use relative units (such as `vh`, `vw`, or perce Add an `svg` node to the `body` using `append()`. Give it a `width` attribute set to the provided `w` constant and a `height` attribute set to the provided `h` constant using the `attr()` or `style()` methods for each. You'll see it in the output because there's a `background-color` of pink applied to it in the `style` tag. -**Note** -When using `attr()` width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is. +**Note:** When using `attr()` width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is. # --hints-- @@ -31,13 +30,13 @@ Your document should have 1 `svg` element. assert($('svg').length == 1); ``` -The `svg` element should have a `width` attribute set to 500 or styled to have a width of 500px. +The `svg` element should have a `width` attribute set to `500` or styled to have a width of `500px`. ```js assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px'); ``` -The `svg` element should have a `height` attribute set to 100 or styled to have a height of 100px. +The `svg` element should have a `height` attribute set to `100` or styled to have a height of `100px`. ```js assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md index d6c9240e9d..bf0acc7b43 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md @@ -10,17 +10,19 @@ dashedName: select-a-group-of-elements-with-d3 D3 also has the `selectAll()` method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document: -`const anchors = d3.selectAll("a");` +```js +const anchors = d3.selectAll("a"); +``` Like the `select()` method, `selectAll()` supports method chaining, and you can use it with other methods. # --instructions-- -Select all of the `li` tags in the document, and change their text to "list item" by chaining the `.text()` method. +Select all of the `li` tags in the document, and change their text to the string `list item` by chaining the `.text()` method. # --hints-- -There should be 3 `li` elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly. +There should be 3 `li` elements on the page, and the text in each one should say `list item`. Capitalization and spacing should match exactly. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md index 27b93e18b0..5a678c5dd0 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md @@ -17,27 +17,24 @@ You want to map those points along the `x` axis on the SVG canvas, between 10 un The `domain()` and `range()` methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example: ```js -// Set a domain -// The domain covers the set of input values scale.domain([50, 480]); -// Set a range -// The range covers the set of output values scale.range([10, 500]); -scale(50) // Returns 10 -scale(480) // Returns 500 -scale(325) // Returns 323.37 -scale(750) // Returns 807.67 +scale(50) +scale(480) +scale(325) +scale(750) d3.scaleLinear() ``` +In order, the following values would be displayed in the console: `10`, `500`, `323.37`, and `807.67`. + Notice that the scale uses the linear relationship between the domain and range values to figure out what the output should be for a given number. The minimum value in the domain (50) maps to the minimum value (10) in the range. # --instructions-- Create a scale and set its domain to `[250, 500]` and range to `[10, 150]`. -**Note** -You can chain the `domain()` and `range()` methods onto the `scale` variable. +**Note:** You can chain the `domain()` and `range()` methods onto the `scale` variable. # --hints-- @@ -47,7 +44,7 @@ Your code should use the `domain()` method. assert(code.match(/\.domain/g)); ``` -The `domain()` of the scale should be set to `[250, 500]`. +The `domain()` of the `scale` should be set to `[250, 500]`. ```js assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500])); @@ -59,13 +56,13 @@ Your code should use the `range()` method. assert(code.match(/\.range/g)); ``` -The `range()` of the scale should be set to `[10, 150]`. +The `range()` of the `scale` should be set to `[10, 150]`. ```js assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150])); ``` -The text in the `h2` should be -102. +The text in the `h2` should be `-102`. ```js assert($('h2').text() == '-102'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/style-d3-labels.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/style-d3-labels.md index 31dc5162fd..934932f51f 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/style-d3-labels.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/style-d3-labels.md @@ -8,11 +8,11 @@ dashedName: style-d3-labels # --description-- -D3 methods can add styles to the bar labels. The `fill` attribute sets the color of the text for a `text` node. The `style()` method sets CSS rules for other styles, such as "font-family" or "font-size". +D3 methods can add styles to the bar labels. The `fill` attribute sets the color of the text for a `text` node. The `style()` method sets CSS rules for other styles, such as `font-family` or `font-size`. # --instructions-- -Set the `font-size` of the `text` elements to 25px, and the color of the text to red. +Set the `font-size` of the `text` elements to `25px`, and the color of the text to red. # --hints-- @@ -22,7 +22,7 @@ The labels should all have a `fill` color of red. assert($('text').css('fill') == 'rgb(255, 0, 0)'); ``` -The labels should all have a `font-size` of 25 pixels. +The labels should all have a `font-size` of `25` pixels. ```js assert($('text').css('font-size') == '25px'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md index 5e7f8c3ff9..27dd13a1b9 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md @@ -16,63 +16,65 @@ The previous challenges covered how to display data from an array and how to add Recall the format to set a style using a callback function: -`selection.style("cssProperty", (d) => d)` +```js +selection.style("cssProperty", (d) => d) +``` # --instructions-- -Add the `style()` method to the code in the editor to set the `height` property for each element. Use a callback function to return the value of the data point with the string "px" added to it. +Add the `style()` method to the code in the editor to set the `height` property for each element. Use a callback function to return the value of the data point with the string `px` added to it. # --hints-- -The first `div` should have a `height` of 12 pixels. +The first `div` should have a `height` of `12` pixels. ```js assert($('div').eq(0)[0].style.height === '12px'); ``` -The second `div` should have a `height` of 31 pixels. +The second `div` should have a `height` of `31` pixels. ```js assert($('div').eq(1)[0].style.height === '31px'); ``` -The third `div` should have a `height` of 22 pixels. +The third `div` should have a `height` of `22` pixels. ```js assert($('div').eq(2)[0].style.height === '22px'); ``` -The fourth `div` should have a `height` of 17 pixels. +The fourth `div` should have a `height` of `17` pixels. ```js assert($('div').eq(3)[0].style.height === '17px'); ``` -The fifth `div` should have a `height` of 25 pixels. +The fifth `div` should have a `height` of `25` pixels. ```js assert($('div').eq(4)[0].style.height === '25px'); ``` -The sixth `div` should have a `height` of 18 pixels. +The sixth `div` should have a `height` of `18` pixels. ```js assert($('div').eq(5)[0].style.height === '18px'); ``` -The seventh `div` should have a `height` of 29 pixels. +The seventh `div` should have a `height` of `29` pixels. ```js assert($('div').eq(6)[0].style.height === '29px'); ``` -The eighth `div` should have a `height` of 14 pixels. +The eighth `div` should have a `height` of `14` pixels. ```js assert($('div').eq(7)[0].style.height === '14px'); ``` -The ninth `div` should have a `height` of 9 pixels. +The ninth `div` should have a `height` of `9` pixels. ```js assert($('div').eq(8)[0].style.height === '9px'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md index 61ffe6a29e..e02248743c 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md @@ -8,7 +8,7 @@ dashedName: use-a-pre-defined-scale-to-place-elements # --description-- -With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the x and y raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area. +With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the `x` and `y` raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area. You set the coordinate attribute values for an SVG shape with the scaling function. This includes `x` and `y` attributes for `rect` or `text` elements, or `cx` and `cy` for `circles`. Here's an example: @@ -21,9 +21,9 @@ Scales set shape coordinate attributes to place the data points onto the SVG can # --instructions-- -Use `xScale` and `yScale` to position both the `circle` and `text` shapes onto the SVG canvas. For the `circles`, apply the scales to set the `cx` and `cy` attributes. Give them a radius of 5 units, too. +Use `xScale` and `yScale` to position both the `circle` and `text` shapes onto the SVG canvas. For the `circles`, apply the scales to set the `cx` and `cy` attributes. Give them a radius of `5` units, too. -For the `text` elements, apply the scales to set the `x` and `y` attributes. The labels should be offset to the right of the dots. To do this, add 10 units to the x data value before passing it to the `xScale`. +For the `text` elements, apply the scales to set the `x` and `y` attributes. The labels should be offset to the right of the dots. To do this, add `10` units to the `x` data value before passing it to the `xScale`. # --hints-- @@ -33,7 +33,7 @@ Your code should have 10 `circle` elements. assert($('circle').length == 10); ``` -The first `circle` element should have a `cx` value of approximately 91 and a `cy` value of approximately 368 after applying the scales. It should also have an `r` value of 5. +The first `circle` element should have a `cx` value of approximately `91` and a `cy` value of approximately `368` after applying the scales. It should also have an `r` value of `5`. ```js assert( @@ -43,7 +43,7 @@ assert( ); ``` -The second `circle` element should have a `cx` value of approximately 159 and a `cy` value of approximately 181 after applying the scales. It should also have an `r` value of 5. +The second `circle` element should have a `cx` value of approximately `159` and a `cy` value of approximately `181` after applying the scales. It should also have an `r` value of `5`. ```js assert( @@ -53,7 +53,7 @@ assert( ); ``` -The third `circle` element should have a `cx` value of approximately 340 and a `cy` value of approximately 329 after applying the scales. It should also have an `r` value of 5. +The third `circle` element should have a `cx` value of approximately `340` and a `cy` value of approximately `329` after applying the scales. It should also have an `r` value of `5`. ```js assert( @@ -63,7 +63,7 @@ assert( ); ``` -The fourth `circle` element should have a `cx` value of approximately 131 and a `cy` value of approximately 60 after applying the scales. It should also have an `r` value of 5. +The fourth `circle` element should have a `cx` value of approximately `131` and a `cy` value of approximately `60` after applying the scales. It should also have an `r` value of `5`. ```js assert( @@ -73,7 +73,7 @@ assert( ); ``` -The fifth `circle` element should have a `cx` value of approximately 440 and a `cy` value of approximately 237 after applying the scales. It should also have an `r` value of 5. +The fifth `circle` element should have a `cx` value of approximately `440` and a `cy` value of approximately `237` after applying the scales. It should also have an `r` value of `5`. ```js assert( @@ -83,7 +83,7 @@ assert( ); ``` -The sixth `circle` element should have a `cx` value of approximately 271 and a `cy` value of approximately 306 after applying the scales. It should also have an `r` value of 5. +The sixth `circle` element should have a `cx` value of approximately `271` and a `cy` value of approximately `306` after applying the scales. It should also have an `r` value of `5`. ```js assert( @@ -93,7 +93,7 @@ assert( ); ``` -The seventh `circle` element should have a `cx` value of approximately 361 and a `cy` value of approximately 351 after applying the scales. It should also have an `r` value of 5. +The seventh `circle` element should have a `cx` value of approximately `361` and a `cy` value of approximately `351` after applying the scales. It should also have an `r` value of `5`. ```js assert( @@ -103,7 +103,7 @@ assert( ); ``` -The eighth `circle` element should have a `cx` value of approximately 261 and a `cy` value of approximately 132 after applying the scales. It should also have an `r` value of 5. +The eighth `circle` element should have a `cx` value of approximately `261` and a `cy` value of approximately `132` after applying the scales. It should also have an `r` value of `5`. ```js assert( @@ -113,7 +113,7 @@ assert( ); ``` -The ninth `circle` element should have a `cx` value of approximately 131 and a `cy` value of approximately 144 after applying the scales. It should also have an `r` value of 5. +The ninth `circle` element should have a `cx` value of approximately `131` and a `cy` value of approximately `144` after applying the scales. It should also have an `r` value of `5`. ```js assert( @@ -123,7 +123,7 @@ assert( ); ``` -The tenth `circle` element should have a `cx` value of approximately 79 and a `cy` value of approximately 326 after applying the scales. It should also have an `r` value of 5. +The tenth `circle` element should have a `cx` value of approximately `79` and a `cy` value of approximately `326` after applying the scales. It should also have an `r` value of `5`. ```js assert( @@ -139,7 +139,7 @@ Your code should have 10 `text` elements. assert($('text').length == 10); ``` -The first label should have an `x` value of approximately 100 and a `y` value of approximately 368 after applying the scales. +The first label should have an `x` value of approximately `100` and a `y` value of approximately `368` after applying the scales. ```js assert( @@ -148,7 +148,7 @@ assert( ); ``` -The second label should have an `x` value of approximately 168 and a `y` value of approximately 181 after applying the scales. +The second label should have an `x` value of approximately `168` and a `y` value of approximately `181` after applying the scales. ```js assert( @@ -157,7 +157,7 @@ assert( ); ``` -The third label should have an `x` value of approximately 350 and a `y` value of approximately 329 after applying the scales. +The third label should have an `x` value of approximately `350` and a `y` value of approximately `329` after applying the scales. ```js assert( @@ -166,7 +166,7 @@ assert( ); ``` -The fourth label should have an `x` value of approximately 141 and a `y` value of approximately 60 after applying the scales. +The fourth label should have an `x` value of approximately `141` and a `y` value of approximately `60` after applying the scales. ```js assert( @@ -175,7 +175,7 @@ assert( ); ``` -The fifth label should have an `x` value of approximately 449 and a `y` value of approximately 237 after applying the scales. +The fifth label should have an `x` value of approximately `449` and a `y` value of approximately `237` after applying the scales. ```js assert( @@ -184,7 +184,7 @@ assert( ); ``` -The sixth label should have an `x` value of approximately 280 and a `y` value of approximately 306 after applying the scales. +The sixth label should have an `x` value of approximately `280` and a `y` value of approximately `306` after applying the scales. ```js assert( @@ -193,7 +193,7 @@ assert( ); ``` -The seventh label should have an `x` value of approximately 370 and a `y` value of approximately 351 after applying the scales. +The seventh label should have an `x` value of approximately `370` and a `y` value of approximately `351` after applying the scales. ```js assert( @@ -202,7 +202,7 @@ assert( ); ``` -The eighth label should have an `x` value of approximately 270 and a `y` value of approximately 132 after applying the scales. +The eighth label should have an `x` value of approximately `270` and a `y` value of approximately `132` after applying the scales. ```js assert( @@ -211,7 +211,7 @@ assert( ); ``` -The ninth label should have an `x` value of approximately 140 and a `y` value of approximately 144 after applying the scales. +The ninth label should have an `x` value of approximately `140` and a `y` value of approximately `144` after applying the scales. ```js assert( @@ -220,7 +220,7 @@ assert( ); ``` -The tenth label should have an `x` value of approximately 88 and a `y` value of approximately 326 after applying the scales. +The tenth label should have an `x` value of approximately `88` and a `y` value of approximately `326` after applying the scales. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md index 3ec73e8a6d..92889986bd 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md @@ -32,7 +32,6 @@ const dataset = [ const w = 500; const h = 500; -// Padding between the SVG canvas boundary and the plot const padding = 30; const xScale = d3.scaleLinear() .domain([0, d3.max(dataset, (d) => d[0])]) @@ -43,14 +42,13 @@ The padding may be confusing at first. Picture the x-axis as a horizontal line f # --instructions-- -Use the `yScale` variable to create a linear y-axis scale. The domain should start at zero and go to the maximum y value in the set. The range should use the SVG height (`h`) and include padding. +Use the `yScale` variable to create a linear y-axis scale. The domain should start at zero and go to the maximum `y` value in the set. The range should use the SVG height (`h`) and include padding. -**Note** -Remember to keep the plot right-side-up. When you set the range for the y coordinates, the higher value (height minus padding) is the first argument, and the lower value is the second argument. +**Note:** Remember to keep the plot right-side-up. When you set the range for the y coordinates, the higher value (height minus padding) is the first argument, and the lower value is the second argument. # --hints-- -The text in the `h2` should be 30. +The text in the `h2` should be `30`. ```js assert(output == 30 && $('h2').text() == '30'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.md index f30962512e..7736dd35ef 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.md @@ -18,26 +18,26 @@ D3 has two methods - `min()` and `max()` to return this information. Here's an e ```js const exampleData = [34, 234, 73, 90, 6, 52]; -d3.min(exampleData) // Returns 6 -d3.max(exampleData) // Returns 234 +d3.min(exampleData) +d3.max(exampleData) ``` -A dataset may have nested arrays, like the \[x, y] coordinate pairs that were in the scatter plot example. In that case, you need to tell D3 how to calculate the maximum and minimum. Fortunately, both the `min()` and `max()` methods take a callback function. In this example, the callback function's argument `d` is for the current inner array. The callback needs to return the element from the inner array (the x or y value) over which you want to compute the maximum or minimum. Here's an example for how to find the min and max values with an array of arrays: +A dataset may have nested arrays, like the `[x, y]` coordinate pairs that were in the scatter plot example. In that case, you need to tell D3 how to calculate the maximum and minimum. Fortunately, both the `min()` and `max()` methods take a callback function. In this example, the callback function's argument `d` is for the current inner array. The callback needs to return the element from the inner array (the `x` or `y` value) over which you want to compute the maximum or minimum. Here's an example for how to find the min and max values with an array of arrays: ```js const locationData = [[1, 7],[6, 3],[8, 3]]; -// Returns the smallest number out of the first elements const minX = d3.min(locationData, (d) => d[0]); -// minX compared 1, 6, and 8 and is set to 1 ``` +`minX` would have the value `1`. + # --instructions-- The `positionData` array holds sub arrays of x, y, and z coordinates. Use a D3 method to find the maximum value of the z coordinate (the third value) from the arrays and save it in the `output` variable. # --hints-- -The text in the `h2` should be 8. +The text in the `h2` should be `8`. ```js assert(output == 8 && $('h2').text() == '8'); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md index de8a225c84..bcf31464ca 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md @@ -32,11 +32,11 @@ Here is an example that selects a `ul` element and creates a new list item based ``` -It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the `ul` on the page. Next, select all list items, which returns an empty selection. Then the `data()` method reviews the dataset and runs the following code three times, once for each item in the array. The `enter()` method sees there are no `li` elements on the page, but it needs 3 (one for each piece of data in `dataset`). New `li` elements are appended to the `ul` and have the text "New item". +It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the `ul` on the page. Next, select all list items, which returns an empty selection. Then the `data()` method reviews the dataset and runs the following code three times, once for each item in the array. The `enter()` method sees there are no `li` elements on the page, but it needs 3 (one for each piece of data in `dataset`). New `li` elements are appended to the `ul` and have the text `New item`. # --instructions-- -Select the `body` node, then select all `h2` elements. Have D3 create and append an `h2` tag for each item in the `dataset` array. The text in the `h2` should say "New Title". Your code should use the `data()` and `enter()` methods. +Select the `body` node, then select all `h2` elements. Have D3 create and append an `h2` tag for each item in the `dataset` array. The text in the `h2` should say `New Title`. Your code should use the `data()` and `enter()` methods. # --hints-- @@ -46,7 +46,7 @@ Your document should have 9 `h2` elements. assert($('h2').length == 9); ``` -The text in the `h2` elements should say "New Title". The capitalization and spacing should match exactly. +The text in the `h2` elements should say `New Title`. The capitalization and spacing should match exactly. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md index e8c80ac438..3b4a59ff1f 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md @@ -10,11 +10,13 @@ dashedName: work-with-dynamic-data-in-d3 The last two challenges cover the basics of displaying data dynamically with D3 using the `data()` and `enter()` methods. These methods take a data set and, together with the `append()` method, create a new DOM element for each entry in the data set. -In the previous challenge, you created a new `h2` element for each item in the `dataset` array, but they all contained the same text, "New Title". This is because you have not made use of the data that is bound to each of the `h2` elements. +In the previous challenge, you created a new `h2` element for each item in the `dataset` array, but they all contained the same text, `New Title`. This is because you have not made use of the data that is bound to each of the `h2` elements. The D3 `text()` method can take a string or a callback function as an argument: -`selection.text((d) => d)` +```js +selection.text((d) => d) +``` In the example above, the parameter `d` refers to a single entry in the dataset that a selection is bound to. @@ -22,59 +24,59 @@ Using the current example as context, the first `h2` element is bound to 12, the # --instructions-- -Change the `text()` method so that each `h2` element displays the corresponding value from the `dataset` array with a single space and "USD". For example, the first heading should be "12 USD". +Change the `text()` method so that each `h2` element displays the corresponding value from the `dataset` array with a single space and the string `USD`. For example, the first heading should be `12 USD`. # --hints-- -The first `h2` should have the text "12 USD". +The first `h2` should have the text `12 USD`. ```js assert($('h2').eq(0).text() == '12 USD'); ``` -The second `h2` should have the text "31 USD". +The second `h2` should have the text `31 USD`. ```js assert($('h2').eq(1).text() == '31 USD'); ``` -The third `h2` should have the text "22 USD". +The third `h2` should have the text `22 USD`. ```js assert($('h2').eq(2).text() == '22 USD'); ``` -The fourth `h2` should have the text "17 USD". +The fourth `h2` should have the text `17 USD`. ```js assert($('h2').eq(3).text() == '17 USD'); ``` -The fifth `h2` should have the text "25 USD". +The fifth `h2` should have the text `25 USD`. ```js assert($('h2').eq(4).text() == '25 USD'); ``` -The sixth `h2` should have the text "18 USD". +The sixth `h2` should have the text `18 USD`. ```js assert($('h2').eq(5).text() == '18 USD'); ``` -The seventh `h2` should have the text "29 USD". +The seventh `h2` should have the text `29 USD`. ```js assert($('h2').eq(6).text() == '29 USD'); ``` -The eighth `h2` should have the text "14 USD". +The eighth `h2` should have the text `14 USD`. ```js assert($('h2').eq(7).text() == '14 USD'); ``` -The ninth `h2` should have the text "9 USD". +The ninth `h2` should have the text `9 USD`. ```js assert($('h2').eq(8).text() == '9 USD'); diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md index 99a331e3ff..50b0ee7a2f 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md @@ -16,28 +16,29 @@ Now you'll take a closer look at the returned data to better understand the JSON Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need. -On the right, click the "Get Message" button to load the freeCodeCamp Cat Photo API JSON into the HTML. +On the right, click the `Get Message` button to load the freeCodeCamp Cat Photo API JSON into the HTML. The first and last character you see in the JSON data are square brackets `[ ]`. This means that the returned data is an array. The second character in the JSON data is a curly `{` bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo. -You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has `"id":0` where "id" is a key and 0 is its corresponding value. Similarly, there are keys for "imageLink", "altText", and "codeNames". Each cat photo object has these same keys, but with different values. +You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has `"id":0` where `id` is a key and `0` is its corresponding value. Similarly, there are keys for `imageLink`, `altText`, and `codeNames`. Each cat photo object has these same keys, but with different values. -Another interesting "key-value pair" in the first object is `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Here "codeNames" is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value. +Another interesting "key-value pair" in the first object is `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Here `codeNames` is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value. -Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the "altText" of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called `json`: +Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the `altText` property of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called `json`: ```js console.log(json[0].altText); -// Prints "A white cat wearing a green helmet shaped melon on its head." ``` +The console would display the string `A white cat wearing a green helmet shaped melon on its head.`. + # --instructions-- -For the cat with the "id" of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value. +For the cat with the `id` of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value. # --hints-- -Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console. +Your code should use bracket and dot notation to access the proper code name, and print `Loki` to the console. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md index 3ae5a6fe52..4550322262 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md @@ -10,15 +10,17 @@ dashedName: change-text-with-click-events When the click event happens, you can use JavaScript to update an HTML element. -For example, when a user clicks the "Get Message" button, it changes the text of the element with the class `message` to say "Here is the message". +For example, when a user clicks the `Get Message` button, it changes the text of the element with the class `message` to say `Here is the message`. This works by adding the following code within the click event: -`document.getElementsByClassName('message')[0].textContent="Here is the message";` +```js +document.getElementsByClassName('message')[0].textContent="Here is the message"; +``` # --instructions-- -Add code inside the `onclick` event handler to change the text inside the `message` element to say "Here is the message". +Add code inside the `onclick` event handler to change the text inside the `message` element to say `Here is the message`. # --hints-- diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md index ac56debfac..8678469f29 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md @@ -30,13 +30,13 @@ json.forEach(function(val) { }); ``` -**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to Cross-site scripting attacks. +**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to cross-site scripting attacks. # --instructions-- Add a `forEach` method to loop over the JSON data and create the HTML elements to display it. -Here is some example JSON +Here is some example JSON: ```json [ @@ -55,7 +55,7 @@ Here is some example JSON Your code should store the data in the `html` variable ```js -assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g)); +assert(__helpers.removeWhiteSpace(code).match(/html(\+=|=html\+)/g)) ``` Your code should use a `forEach` method to loop over the JSON data from the API. diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md index 45b0abe428..bed1c43e98 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md @@ -52,7 +52,7 @@ Your code should use `position.coords.longitude` to display the user's longitudi assert(code.match(/position\.coords\.longitude/g)); ``` -You should display the user's position within the `data` div element. +You should display the user's position within the `div` element with `id="data"`. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md index 776f077ac8..36b522ce91 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md @@ -8,7 +8,7 @@ dashedName: get-json-with-the-javascript-fetch-method # --description-- -Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to XMLHttpRequest, but the syntax is considered easier to understand. +Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to `XMLHttpRequest`, but the syntax is considered easier to understand. Here is the code for making a GET request to `/json/cats.json` @@ -24,7 +24,7 @@ fetch('/json/cats.json') Take a look at each piece of this code. -The first line is the one that makes the request. So, `fetch(URL)` makes a GET request to the URL specified. The method returns a Promise. +The first line is the one that makes the request. So, `fetch(URL)` makes a `GET` request to the URL specified. The method returns a Promise. After a Promise is returned, if the request was successful, the `then` method is executed, which takes the response and converts it to JSON format. @@ -34,11 +34,11 @@ Now, it selects the element that will receive the data by using `document.getEle # --instructions-- -Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`. +Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`. # --hints-- -Your code should make a GET request with `fetch`. +Your code should make a `GET` request with `fetch`. ```js assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g)); @@ -57,15 +57,15 @@ assert( Your code should use `then` to handle the data converted to JSON by the other `then`. ```js -assert(code.match(/\.then\s*\(\s*(data|\(\s*data\s*\))\s*=>\s*{[^}]*}\s*\)/g)); +assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g)); ``` Your code should get the element with id `message` and change its inner HTML to the string of JSON data. ```js assert( - code.match( - /document\s*\.getElementById\s*\(\s*('|")message\1\s*\)\s*\.innerHTML\s*=\s*JSON\s*\.\s*stringify\s*\(\s*data\s*\)/g + __helpers.removeWhiteSpace(code).match( + /document\.getElementById\(('|")message\1\)\.innerHTML=JSON\.stringify\(?\w+\)/g ) ); ``` diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md index 634902febc..0136675396 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md @@ -32,11 +32,11 @@ req.onload = function(){ }; ``` -Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a "GET" request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text. +Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a `GET` request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text. # --instructions-- -Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. Then click the "Get Message" button. Your AJAX function will replace the "The message will go here" text with the raw JSON output from the API. +Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. Then click the `Get Message` button. Your AJAX function will replace the `The message will go here` text with the raw JSON output from the API. # --hints-- @@ -46,7 +46,7 @@ Your code should create a new `XMLHttpRequest`. assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g)); ``` -Your code should use the `open` method to initialize a "GET" request to the freeCodeCamp Cat Photo API. +Your code should use the `open` method to initialize a `GET` request to the freeCodeCamp Cat Photo API. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md index ef071a15ab..b1a807c2be 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md @@ -26,11 +26,11 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' }); xhr.send(body); ``` -You've seen several of these methods before. Here the `open` method initializes the request as a "POST" to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of 4 means the operation is complete, and a `status` of 201 means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field. +You've seen several of these methods before. Here the `open` method initializes the request as a `POST` to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of `4` means the operation is complete, and a `status` of `201` means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field. # --instructions-- -Update the code so it makes a "POST" request to the API endpoint. Then type your name in the input field and click "Send Message". Your AJAX function should replace "Reply from Server will be here." with data from the server. Format the response to display your name appended with " loves cats". +Update the code so it makes a `POST` request to the API endpoint. Then type your name in the input field and click `Send Message`. Your AJAX function should replace `Reply from Server will be here.` with data from the server. Format the response to display your name appended with the text `loves cats`. # --hints-- @@ -40,7 +40,7 @@ Your code should create a new `XMLHttpRequest`. assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g)); ``` -Your code should use the `open` method to initialize a "POST" request to the server. +Your code should use the `open` method to initialize a `POST` request to the server. ```js assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g)); @@ -62,7 +62,7 @@ Your code should have an `onreadystatechange` event handler set to a function. assert(code.match(/\.onreadystatechange\s*?=/g)); ``` -Your code should get the element with class `message` and change its `textContent` to "`userName` loves cats" +Your code should get the element with class `message` and change its `textContent` to `userName loves cats` ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md index c8a31451f2..749e3e3589 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md @@ -10,7 +10,7 @@ dashedName: pre-filter-json-to-get-the-data-you-need If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it. -Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose "id" key has a value of 1. +Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose `id` key has a value of `1`. Here's the code to do this: @@ -22,7 +22,7 @@ json = json.filter(function(val) { # --instructions-- -Add code to `filter` the json data to remove the cat with the "id" value of 1. +Add code to `filter` the json data to remove the cat with the `id` value of `1`. # --hints-- diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md index e4a9372d58..2091e71567 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md @@ -14,7 +14,9 @@ When you're looping through these objects, you can use this `imageLink` property Here's the code that does this: -`html += "";` +```js +html += ""; +``` # --instructions-- @@ -28,7 +30,7 @@ You should use the `imageLink` property to display the images. assert(code.match(/val\.imageLink/g)); ``` -You should use the `altText` for the alt attribute values of the images. +You should use the `altText` for the `alt` attribute values of the images. ```js assert(code.match(/val\.altText/g)); diff --git a/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/exercise-tracker.md b/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/exercise-tracker.md index 32398aa57f..433855e9c8 100644 --- a/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/exercise-tracker.md +++ b/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/exercise-tracker.md @@ -11,7 +11,7 @@ dashedName: exercise-tracker Build a full stack JavaScript app that is functionally similar to this: . Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/) and complete your project locally. -- Use [our repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-exercisetracker) to complete your project. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker) to complete your project. - Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. @@ -29,12 +29,12 @@ You should provide your own project, not the example URL. }; ``` -You can `POST` to `/api/exercise/new-user` with form data `username` to create a new user. The returned response will be an object with `username` and `_id` properties. +You can `POST` to `/api/users` with form data `username` to create a new user. The returned response will be an object with `username` and `_id` properties. ```js async (getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/exercise/new-user', { + const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) @@ -49,12 +49,12 @@ async (getUserInput) => { }; ``` -You can make a `GET` request to `api/exercise/users` to get an array of all users. Each element in the array is an object containing a user's `username` and `_id`. +You can make a `GET` request to `/api/users` to get an array of all users. Each element in the array is an object containing a user's `username` and `_id`. ```js async (getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/exercise/users'); + const res = await fetch(url + '/api/users'); if (res.ok) { const data = await res.json(); assert.isArray(data); @@ -66,12 +66,12 @@ async (getUserInput) => { }; ``` -You can `POST` to `/api/exercise/add` with form data `userId=_id`, `description`, `duration`, and optionally `date`. If no date is supplied, the current date will be used. The response returned will be the user object with the exercise fields added. +You can `POST` to `/api/users/:_id/exercises` with form data `description`, `duration`, and optionally `date`. If no date is supplied, the current date will be used. The response returned will be the user object with the exercise fields added. ```js async (getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/exercise/new-user', { + const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) @@ -85,10 +85,10 @@ async (getUserInput) => { _id, date: 'Mon Jan 01 1990' }; - const addRes = await fetch(url + '/api/exercise/add', { + const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `userId=${_id}&description=${expected.description}&duration=${expected.duration}&date=1990-01-01` + body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01` }); if (addRes.ok) { const actual = await addRes.json(); @@ -102,12 +102,12 @@ async (getUserInput) => { }; ``` -You can make a `GET` request to `/api/exercise/log` with a parameter of `userId=_id` to retrieve a full exercise log of any user. The returned response will be the user object with a `log` array of all the exercises added. Each log item has the `description`, `duration`, and `date` properties. +You can make a `GET` request to `/api/users/:_id/logs` to retrieve a full exercise log of any user. The returned response will be the user object with a `log` array of all the exercises added. Each log item has the `description`, `duration`, and `date` properties. ```js async (getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/exercise/new-user', { + const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) @@ -121,13 +121,13 @@ async (getUserInput) => { _id, date: new Date().toDateString() }; - const addRes = await fetch(url + '/api/exercise/add', { + const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `userId=${_id}&description=${expected.description}&duration=${expected.duration}` + body: `description=${expected.description}&duration=${expected.duration}` }); if (addRes.ok) { - const logRes = await fetch(url + `/api/exercise/log?userId=${_id}`); + const logRes = await fetch(url + `/api/users/${_id}/logs`); if (logRes.ok) { const { log } = await logRes.json(); assert.isArray(log); @@ -144,12 +144,12 @@ async (getUserInput) => { }; ``` -A request to a user's log (`/api/exercise/log`) returns an object with a `count` property representing the number of exercises returned. +A request to a user's log (`/api/users/:_id/logs`) returns an object with a `count` property representing the number of exercises returned. ```js async (getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/exercise/new-user', { + const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) @@ -163,13 +163,13 @@ async (getUserInput) => { _id, date: new Date().toDateString() }; - const addRes = await fetch(url + '/api/exercise/add', { + const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `userId=${_id}&description=${expected.description}&duration=${expected.duration}` + body: `description=${expected.description}&duration=${expected.duration}` }); if (addRes.ok) { - const logRes = await fetch(url + `/api/exercise/log?userId=${_id}`); + const logRes = await fetch(url + `/api/users/${_id}/logs`); if (logRes.ok) { const { count } = await logRes.json(); assert(count); @@ -185,12 +185,12 @@ async (getUserInput) => { }; ``` -You can add `from`, `to` and `limit` parameters to a `/api/exercise/log` request to retrieve part of the log of any user. `from` and `to` are dates in `yyyy-mm-dd` format. `limit` is an integer of how many logs to send back. +You can add `from`, `to` and `limit` parameters to a `/api/users/:_id/logs` request to retrieve part of the log of any user. `from` and `to` are dates in `yyyy-mm-dd` format. `limit` is an integer of how many logs to send back. ```js async (getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/exercise/new-user', { + const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) @@ -204,19 +204,19 @@ async (getUserInput) => { _id, date: new Date().toDateString() }; - const addExerciseRes = await fetch(url + '/api/exercise/add', { + const addExerciseRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `userId=${_id}&description=${expected.description}&duration=${expected.duration}&date=1990-01-01` + body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01` }); - const addExerciseTwoRes = await fetch(url + '/api/exercise/add', { + const addExerciseTwoRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `userId=${_id}&description=${expected.description}&duration=${expected.duration}&date=1990-01-02` + body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-02` }); if (addExerciseRes.ok && addExerciseTwoRes.ok) { const logRes = await fetch( - url + `/api/exercise/log?userId=${_id}&from=1989-12-31&to=1990-01-03` + url + `/api/users/${_id}/logs?from=1989-12-31&to=1990-01-03` ); if (logRes.ok) { const { log } = await logRes.json(); @@ -226,7 +226,7 @@ async (getUserInput) => { throw new Error(`${logRes.status} ${logRes.statusText}`); } const limitRes = await fetch( - url + `/api/exercise/log?userId=${_id}&limit=1` + url + `/api/users/${_id}/logs?limit=1` ); if (limitRes.ok) { const { log } = await limitRes.json(); diff --git a/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/file-metadata-microservice.md b/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/file-metadata-microservice.md index 3c4c93f13f..da459a9f3f 100644 --- a/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/file-metadata-microservice.md +++ b/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/file-metadata-microservice.md @@ -11,7 +11,7 @@ dashedName: file-metadata-microservice Build a full stack JavaScript app that is functionally similar to this: . Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-filemetadata/) and complete your project locally. -- Use [our repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-filemetadata) to complete your project. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-filemetadata) to complete your project. - Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your projects source code in the `GitHub Link` field. diff --git a/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/request-header-parser-microservice.md b/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/request-header-parser-microservice.md index 530d028300..de86d19ddb 100644 --- a/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/request-header-parser-microservice.md +++ b/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/request-header-parser-microservice.md @@ -11,7 +11,7 @@ dashedName: request-header-parser-microservice Build a full stack JavaScript app that is functionally similar to this: . Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-headerparser/) and complete your project locally. -- Use [our repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-headerparser) to complete your project. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-headerparser) to complete your project. - Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. diff --git a/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/timestamp-microservice.md b/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/timestamp-microservice.md index df5332d7c6..00cee8bcd6 100644 --- a/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/timestamp-microservice.md +++ b/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/timestamp-microservice.md @@ -11,7 +11,7 @@ dashedName: timestamp-microservice Build a full stack JavaScript app that is functionally similar to this: . Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-timestamp/) and complete your project locally. -- Use [our repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-timestamp) to complete your project. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-timestamp) to complete your project. - Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your projects source code in the `GitHub Link` field. @@ -28,11 +28,11 @@ You should provide your own project, not the example URL. }; ``` -A request to `/api/timestamp/:date?` with a valid date should return a JSON object with a `unix` key that is a Unix timestamp of the input date in milliseconds +A request to `/api/:date?` with a valid date should return a JSON object with a `unix` key that is a Unix timestamp of the input date in milliseconds ```js (getUserInput) => - $.get(getUserInput('url') + '/api/timestamp/2016-12-25').then( + $.get(getUserInput('url') + '/api/2016-12-25').then( (data) => { assert.equal( data.unix, @@ -46,11 +46,11 @@ A request to `/api/timestamp/:date?` with a valid date should return a JSON obje ); ``` -A request to `/api/timestamp/:date?` with a valid date should return a JSON object with a `utc` key that is a string of the input date in the format: `Thu, 01 Jan 1970 00:00:00 GMT` +A request to `/api/:date?` with a valid date should return a JSON object with a `utc` key that is a string of the input date in the format: `Thu, 01 Jan 1970 00:00:00 GMT` ```js (getUserInput) => - $.get(getUserInput('url') + '/api/timestamp/2016-12-25').then( + $.get(getUserInput('url') + '/api/2016-12-25').then( (data) => { assert.equal( data.utc, @@ -64,11 +64,11 @@ A request to `/api/timestamp/:date?` with a valid date should return a JSON obje ); ``` -A request to `/api/timestamp/1451001600000` should return `{ unix: 1451001600000, utc: "Fri, 25 Dec 2015 00:00:00 GMT" }` +A request to `/api/1451001600000` should return `{ unix: 1451001600000, utc: "Fri, 25 Dec 2015 00:00:00 GMT" }` ```js (getUserInput) => - $.get(getUserInput('url') + '/api/timestamp/1451001600000').then( + $.get(getUserInput('url') + '/api/1451001600000').then( (data) => { assert( data.unix === 1451001600000 && @@ -85,7 +85,7 @@ Your project can handle dates that can be successfully parsed by `new Date(date_ ```js (getUserInput) => - $.get(getUserInput('url') + '/api/timestamp/05 October 2011').then( + $.get(getUserInput('url') + '/api/05 October 2011').then( (data) => { assert( data.unix === 1317772800000 && @@ -102,12 +102,12 @@ If the input date string is invalid, the api returns an object having the struct ```js (getUserInput) => - $.get(getUserInput('url') + '/api/timestamp/this-is-not-a-date').then( + $.get(getUserInput('url') + '/api/this-is-not-a-date').then( (data) => { assert.equal(data.error.toLowerCase(), 'invalid date'); }, (xhr) => { - throw new Error(xhr.responseText); + assert(xhr.responseJSON.error.toLowerCase() === 'invalid date'); } ); ``` @@ -116,7 +116,7 @@ An empty date parameter should return the current time in a JSON object with a ` ```js (getUserInput) => - $.get(getUserInput('url') + '/api/timestamp').then( + $.get(getUserInput('url') + '/api').then( (data) => { var now = Date.now(); assert.approximately(data.unix, now, 20000); @@ -131,7 +131,7 @@ An empty date parameter should return the current time in a JSON object with a ` ```js (getUserInput) => - $.get(getUserInput('url') + '/api/timestamp').then( + $.get(getUserInput('url') + '/api').then( (data) => { var now = Date.now(); var serverTime = new Date(data.utc).getTime(); diff --git a/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/url-shortener-microservice.md b/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/url-shortener-microservice.md index c5786a7a8c..34bf3e3fa6 100644 --- a/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/url-shortener-microservice.md +++ b/curriculum/challenges/espanol/05-apis-and-microservices/apis-and-microservices-projects/url-shortener-microservice.md @@ -11,7 +11,7 @@ dashedName: url-shortener-microservice Build a full stack JavaScript app that is functionally similar to this: . Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-urlshortener/) and complete your project locally. -- Use [our repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-urlshortener) to complete your project. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-urlshortener) to complete your project. - Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your projects source code in the `GitHub Link` field. @@ -34,26 +34,22 @@ You should provide your own project, not the example URL. }; ``` -You can POST a URL to `/api/shorturl/new` and get a JSON response with `original_url` and `short_url` properties. Here's an example: `{ original_url : 'https://freeCodeCamp.org', short_url : 1}` +You can POST a URL to `/api/shorturl` and get a JSON response with `original_url` and `short_url` properties. Here's an example: `{ original_url : 'https://freeCodeCamp.org', short_url : 1}` ```js async (getUserInput) => { const url = getUserInput('url'); const urlVariable = Date.now(); - const res = await fetch(url + '/api/shorturl/new/', { + const fullUrl = `${url}/?v=${urlVariable}` + const res = await fetch(url + '/api/shorturl', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `url=https://timestamp-microservice.freecodecamp.rocks/api/timestamp/${urlVariable}` + body: `url=${fullUrl}` }); if (res.ok) { const { short_url, original_url } = await res.json(); assert.isNotNull(short_url); - assert.match( - original_url, - new RegExp( - `https://timestamp-microservice.freecodecamp.rocks/api/timestamp/${urlVariable}` - ) - ); + assert.strictEqual(original_url, `${url}/?v=${urlVariable}`); } else { throw new Error(`${res.status} ${res.statusText}`); } @@ -66,11 +62,12 @@ When you visit `/api/shorturl/`, you will be redirected to the origin async (getUserInput) => { const url = getUserInput('url'); const urlVariable = Date.now(); + const fullUrl = `${url}/?v=${urlVariable}` let shortenedUrlVariable; - const postResponse = await fetch(url + '/api/shorturl/new/', { + const postResponse = await fetch(url + '/api/shorturl', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `url=https://timestamp-microservice.freecodecamp.rocks/api/timestamp/${urlVariable}` + body: `url=${fullUrl}` }); if (postResponse.ok) { const { short_url } = await postResponse.json(); @@ -84,10 +81,7 @@ async (getUserInput) => { if (getResponse) { const { redirected, url } = getResponse; assert.isTrue(redirected); - assert.strictEqual( - url, - `https://timestamp-microservice.freecodecamp.rocks/api/timestamp/${urlVariable}` - ); + assert.strictEqual(url,fullUrl); } else { throw new Error(`${getResponse.status} ${getResponse.statusText}`); } @@ -99,7 +93,7 @@ If you pass an invalid URL that doesn't follow the valid `http://www.example.com ```js async (getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/shorturl/new/', { + const res = await fetch(url + '/api/shorturl', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `url=ftp:/john-doe.org` diff --git a/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/meet-the-node-console.md b/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/meet-the-node-console.md index e85e90bda7..5876dde8e5 100644 --- a/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/meet-the-node-console.md +++ b/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/meet-the-node-console.md @@ -8,16 +8,22 @@ dashedName: meet-the-node-console # --description-- +Working on these challenges will involve you writing your code using one of the following methods: + +- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-express/) and complete these challenges locally. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-express) to complete these challenges. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. + During the development process, it is important to be able to check what’s going on in your code. -Node is just a JavaScript environment. Like client side JavaScript, you can use the console to display useful debug information. On your local machine, you would see console output in a terminal. On Repl.it, a terminal is open in the right pane by default. +Node is just a JavaScript environment. Like client side JavaScript, you can use the console to display useful debug information. On your local machine, you would see console output in a terminal. On Replit, a terminal is open in the right pane by default. We recommend to keep the terminal open while working at these challenges. By reading the output in the terminal, you can see any errors that may occur. # --instructions-- -If you have not already done so, please read the instructions in [the introduction](/learn/apis-and-microservices/basic-node-and-express/) and start a new project on Repl.it using [this link](https://repl.it/github/freeCodeCamp/boilerplate-express). - Modify the `myApp.js` file to log "Hello World" to the console. # --hints-- diff --git a/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/serve-static-assets.md b/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/serve-static-assets.md index 44bf643496..f3e2796c54 100644 --- a/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/serve-static-assets.md +++ b/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/serve-static-assets.md @@ -8,21 +8,25 @@ dashedName: serve-static-assets # --description-- -An HTML server usually has one or more directories that are accessible by the user. You can place there the static assets needed by your application (stylesheets, scripts, images). In Express, you can put in place this functionality using the middleware `express.static(path)`, where the `path` parameter is the absolute path of the folder containing the assets. If you don’t know what middleware is... don’t worry, we will discuss in detail later. Basically, middleware are functions that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method `app.use(path, middlewareFunction)`. The first `path` argument is optional. If you don’t pass it, the middleware will be executed for all requests. +An HTML server usually has one or more directories that are accessible by the user. You can place there the static assets needed by your application (stylesheets, scripts, images). + +In Express, you can put in place this functionality using the middleware `express.static(path)`, where the `path` parameter is the absolute path of the folder containing the assets. + +If you don’t know what middleware is... don’t worry, we will discuss in detail later. Basically, middleware are functions that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method `app.use(path, middlewareFunction)`. The first `path` argument is optional. If you don’t pass it, the middleware will be executed for all requests. # --instructions-- -Mount the `express.static()` middleware for all requests with `app.use()`. The absolute path to the assets folder is `__dirname + /public`. +Mount the `express.static()` middleware to the path `/public` with `app.use()`. The absolute path to the assets folder is `__dirname + /public`. -Now your app should be able to serve a CSS stylesheet. From outside, the public folder will appear mounted to the root directory. Your front-page should look a little better now! +Now your app should be able to serve a CSS stylesheet. Note that the `/public/style.css` file is referenced in the `/views/index.html` in the project boilerplate. Your front-page should look a little better now! # --hints-- -Your app should serve asset files from the `/public` directory +Your app should serve asset files from the `/public` directory to the `/public` path ```js (getUserInput) => - $.get(getUserInput('url') + '/style.css').then( + $.get(getUserInput('url') + '/public/style.css').then( (data) => { assert.match( data, diff --git a/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/start-a-working-express-server.md b/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/start-a-working-express-server.md index 9a587bfb40..e8e3e82fc5 100644 --- a/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/start-a-working-express-server.md +++ b/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/start-a-working-express-server.md @@ -22,7 +22,7 @@ will serve the string 'Response String'. # --instructions-- -Use the `app.get()` method to serve the string "Hello Express" to GET requests matching the `/` (root) path. Be sure that your code works by looking at the logs, then see the results in the preview if you are using Repl.it. +Use the `app.get()` method to serve the string "Hello Express" to GET requests matching the `/` (root) path. Be sure that your code works by looking at the logs, then see the results in the preview if you are using Replit. **Note:** All the code for these lessons should be added in between the few lines of code we have started you off with. diff --git a/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/use-the-.env-file.md b/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/use-the-.env-file.md index ad83674c7a..e953553f4b 100644 --- a/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/use-the-.env-file.md +++ b/curriculum/challenges/espanol/05-apis-and-microservices/basic-node-and-express/use-the-.env-file.md @@ -16,7 +16,11 @@ The environment variables are accessible from the app as `process.env.VAR_NAME`. Let's add an environment variable as a configuration option. -Store the variable `MESSAGE_STYLE=uppercase` in the `.env` file. Then tell the GET `/json` route handler that you created in the last challenge to transform the response object’s message to uppercase if `process.env.MESSAGE_STYLE` equals `uppercase`. The response object should become `{"message": "HELLO JSON"}`. +Create a `.env` file in the root of your project directory, and store the variable `MESSAGE_STYLE=uppercase` in it. + +Then, in the `/json` GET route handler you created in the last challenge, transform the response object's message to uppercase if `process.env.MESSAGE_STYLE` equals `uppercase`. The response object should either be `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`, depending on the `MESSAGE_STYLE` value. + +**Note:** If you are using Replit, you cannot create a `.env` file. Instead, use the built-in SECRETS tab to add the variable. # --hints-- diff --git a/curriculum/challenges/espanol/05-apis-and-microservices/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md b/curriculum/challenges/espanol/05-apis-and-microservices/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md index 6222d50f0f..7c3ce74460 100644 --- a/curriculum/challenges/espanol/05-apis-and-microservices/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md +++ b/curriculum/challenges/espanol/05-apis-and-microservices/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md @@ -8,6 +8,14 @@ dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-packa # --description-- +Working on these challenges will involve you writing your code using one of the following methods: + +- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-npm/) and complete these challenges locally. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-npm) to complete these challenges. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. + The `package.json` file is the center of any Node.js project or npm package. It stores information about your project, similar to how the <head> section of an HTML document describes the content of a webpage. It consists of a single JSON object where information is stored in key-value pairs. There are only two required fields; "name" and "version", but it’s good practice to provide additional information about your project that could be useful to future users or maintainers. If you look at the file tree of your project, you will find the package.json file on the top level of the tree. This is the file that you will be improving in the next couple of challenges. diff --git a/curriculum/challenges/espanol/05-apis-and-microservices/mongodb-and-mongoose/create-a-model.md b/curriculum/challenges/espanol/05-apis-and-microservices/mongodb-and-mongoose/create-a-model.md index 1015843369..1e7e686d23 100644 --- a/curriculum/challenges/espanol/05-apis-and-microservices/mongodb-and-mongoose/create-a-model.md +++ b/curriculum/challenges/espanol/05-apis-and-microservices/mongodb-and-mongoose/create-a-model.md @@ -12,7 +12,7 @@ dashedName: create-a-model First of all we need a Schema. Each schema maps to a MongoDB collection. It defines the shape of the documents within that collection. Schemas are building block for Models. They can be nested to create complex models, but in this case we'll keep things simple. A model allows you to create instances of your objects, called documents. -Repl.it is a real server, and in real servers the interactions with the database happen in handler functions. These functions are executed when some event happens (e.g. someone hits an endpoint on your API). We’ll follow the same approach in these exercises. The `done()` function is a callback that tells us that we can proceed after completing an asynchronous operation such as inserting, searching, updating, or deleting. It's following the Node convention, and should be called as `done(null, data)` on success, or `done(err)` on error. +Replit is a real server, and in real servers the interactions with the database happen in handler functions. These functions are executed when some event happens (e.g. someone hits an endpoint on your API). We’ll follow the same approach in these exercises. The `done()` function is a callback that tells us that we can proceed after completing an asynchronous operation such as inserting, searching, updating, or deleting. It's following the Node convention, and should be called as `done(null, data)` on success, or `done(err)` on error. Warning - When interacting with remote services, errors may occur! diff --git a/curriculum/challenges/espanol/05-apis-and-microservices/mongodb-and-mongoose/install-and-set-up-mongoose.md b/curriculum/challenges/espanol/05-apis-and-microservices/mongodb-and-mongoose/install-and-set-up-mongoose.md index 2067e13d90..88c275d62d 100644 --- a/curriculum/challenges/espanol/05-apis-and-microservices/mongodb-and-mongoose/install-and-set-up-mongoose.md +++ b/curriculum/challenges/espanol/05-apis-and-microservices/mongodb-and-mongoose/install-and-set-up-mongoose.md @@ -8,11 +8,21 @@ dashedName: install-and-set-up-mongoose # --description-- -In this challenge, you will import the required projects, and connect to your Atlas database. +Working on these challenges will involve you writing your code using one of the following methods: + +- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-mongomongoose/) and complete these challenges locally. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-mongomongoose) to complete these challenges. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. + +In this challenge, you will set up a MongoDB Atlas database and import the required packages to connect to it. + +Follow this tutorial to set up a hosted database on MongoDB Atlas. # --instructions-- -Add `mongodb` and `mongoose` to the project’s `package.json`. Then, require mongoose as `mongoose` in `myApp.js`. Store your MongoDB Atlas database URI in a private `.env` file as `MONGO_URI`. Surround the the URI with single or double quotes, and make sure no space exists between both the variable and the `=`, and the value and `=`. Connect to the database using the following syntax: +Add `mongodb` and `mongoose` to the project’s `package.json`. Then, require mongoose as `mongoose` in `myApp.js`. Create a `.env` file and add a `MONGO_URI` variable to it. Its value should be your MongoDB Atlas database URI. Be sure to surround the URI with single or double quotes, and remember that you can't use spaces around the `=` in environment variables. For example, `MONGO_URI='VALUE'`. When you are done, connect to the database using the following syntax: ```js mongoose.connect(, { useNewUrlParser: true, useUnifiedTopology: true }); diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/authentication-strategies.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/authentication-strategies.md index 08f791012b..0d29b5c99a 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/authentication-strategies.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/authentication-strategies.md @@ -10,7 +10,7 @@ dashedName: authentication-strategies A strategy is a way of authenticating a user. You can use a strategy for allowing users to authenticate based on locally saved information (if you have them register first) or from a variety of providers such as Google or GitHub. For this project, we will set up a local strategy. To see a list of the hundreds of strategies, visit Passport's site [here](http://passportjs.org/). -Add `passport-local` as a dependency and add it to your server as follows: `const LocalStrategy = require('passport-local');` +Add `passport-local@~1.0.0` as a dependency and add it to your server as follows: `const LocalStrategy = require('passport-local');` Now you will have to tell passport to **use** an instantiated LocalStrategy object with a few settings defined. Make sure this (as well as everything from this point on) is encapsulated in the database connection since it relies on it! diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md index ca8cbd7cd9..3020f56e31 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md @@ -10,7 +10,7 @@ dashedName: authentication-with-socket-io Currently, you cannot determine who is connected to your web socket. While `req.user` contains the user object, that's only when your user interacts with the web server, and with web sockets you have no `req` (request) and therefore no user data. One way to solve the problem of knowing who is connected to your web socket is by parsing and decoding the cookie that contains the passport session then deserializing it to obtain the user object. Luckily, there is a package on NPM just for this that turns a once complex task into something simple! -Add `passport.socketio`, `connect-mongo`, and `cookie-parser` as dependencies and require them as `passportSocketIo`, `MongoStore`, and `cookieParser` respectively. Also, we need to initialize a new memory store, from `express-session` which we previously required. It should look like this: +Add `passport.socketio@~3.7.0`, `connect-mongo@~3.2.0`, and `cookie-parser@~1.4.5` as dependencies and require them as `passportSocketIo`, `MongoStore`, and `cookieParser` respectively. Also, we need to initialize a new memory store, from `express-session` which we previously required. It should look like this: ```js const MongoStore = require('connect-mongo')(session); diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md index 13321446e9..f6cf40e834 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md @@ -43,7 +43,7 @@ Modules should be present. ); assert.match( data, - /client.db[^]*routes/gi, + /client\s*\.db[^]*routes/gi, 'Your new modules should be called after your connection to the database' ); }, diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md index ee33328d67..43459f9438 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md @@ -10,7 +10,7 @@ dashedName: hashing-your-passwords Going back to the information security section, you may remember that storing plaintext passwords is *never* okay. Now it is time to implement BCrypt to solve this issue. -Add BCrypt as a dependency, and require it in your server. You will need to handle hashing in 2 key areas: where you handle registering/saving a new account, and when you check to see that a password is correct on login. +Add `bcrypt@~5.0.0` as a dependency, and require it in your server. You will need to handle hashing in 2 key areas: where you handle registering/saving a new account, and when you check to see that a password is correct on login. Currently on our registration route, you insert a user's password into the database like so: `password: req.body.password`. An easy way to implement saving a hash instead is to add the following before your database logic `const hash = bcrypt.hashSync(req.body.password, 12);`, and replacing the `req.body.password` in the database saving with just `password: hash`. diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md index 8b9c8e8d95..3cc137ac92 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md @@ -8,7 +8,7 @@ dashedName: implementation-of-social-authentication-ii # --description-- -The last part of setting up your GitHub authentication is to create the strategy itself. For this, you will need to add the dependency of 'passport-github' to your project and require it in your `auth.js` as `GithubStrategy` like this: `const GitHubStrategy = require('passport-github').Strategy;`. Do not forget to require and configure `dotenv` to use your environment variables. +The last part of setting up your GitHub authentication is to create the strategy itself. For this, you will need to add the dependency of `passport-github@~1.1.0` to your project and require it in your `auth.js` as `GithubStrategy` like this: `const GitHubStrategy = require('passport-github').Strategy;`. Do not forget to require and configure `dotenv` to use your environment variables. To set up the GitHub strategy, you have to tell Passport to use an instantiated `GitHubStrategy`, which accepts 2 arguments: an object (containing `clientID`, `clientSecret`, and `callbackURL`) and a function to be called when a user is successfully authenticated, which will determine if the user is new and what fields to save initially in the user's database object. This is common across many strategies, but some may require more information as outlined in that specific strategy's GitHub README. For example, Google requires a *scope* as well which determines what kind of information your request is asking to be returned and asks the user to approve such access. The current strategy we are implementing has its usage outlined [here](https://github.com/jaredhanson/passport-github/), but we're going through it all right here on freeCodeCamp! @@ -78,7 +78,7 @@ GitHub strategy should be setup correctly thus far. (data) => { assert.match( data, - /passport\.use.*new GitHubStrategy/gi, + /passport\.use.*new GitHubStrategy/gis, 'Passport should use a new GitHubStrategy' ); assert.match( diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md index 66ab3a79db..2912bbed16 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md @@ -18,7 +18,7 @@ The basic path this kind of authentication will follow in your app is: Strategies with OAuth require you to have at least a *Client ID* and a *Client Secret* which is a way for the service to verify who the authentication request is coming from and if it is valid. These are obtained from the site you are trying to implement authentication with, such as GitHub, and are unique to your app--**THEY ARE NOT TO BE SHARED** and should never be uploaded to a public repository or written directly in your code. A common practice is to put them in your `.env` file and reference them like so: `process.env.GITHUB_CLIENT_ID`. For this challenge we're going to use the GitHub strategy. -Obtaining your *Client ID and Secret* from GitHub is done in your account profile settings under 'developer settings', then '[OAuth applications](https://github.com/settings/developers)'. Click 'Register a new application', name your app, paste in the url to your Repl.it homepage (**Not the project code's url**), and lastly, for the callback url, paste in the same url as the homepage but with `/auth/github/callback` added on. This is where users will be redirected for us to handle after authenticating on GitHub. Save the returned information as `'GITHUB_CLIENT_ID'` and `'GITHUB_CLIENT_SECRET'` in your `.env` file. +Obtaining your *Client ID and Secret* from GitHub is done in your account profile settings under 'developer settings', then '[OAuth applications](https://github.com/settings/developers)'. Click 'Register a new application', name your app, paste in the url to your Replit homepage (**Not the project code's url**), and lastly, for the callback url, paste in the same url as the homepage but with `/auth/github/callback` added on. This is where users will be redirected for us to handle after authenticating on GitHub. Save the returned information as `'GITHUB_CLIENT_ID'` and `'GITHUB_CLIENT_SECRET'` in your `.env` file. In your `routes.js` file, add `showSocialAuth: true` to the homepage route, after `showRegistration: true`. Now, create 2 routes accepting GET requests: `/auth/github` and `/auth/github/callback`. The first should only call passport to authenticate `'github'`. The second should call passport to authenticate `'github'` with a failure redirect to `/`, and then if that is successful redirect to `/profile` (similar to our last project). diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md index f3967b928a..32b3ab7963 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md @@ -12,7 +12,7 @@ Serialization and deserialization are important concepts in regards to authentic To set this up properly, we need to have a serialize function and a deserialize function. In Passport, we create these with `passport.serializeUser( OURFUNCTION )` and `passport.deserializeUser( OURFUNCTION )` -The `serializeUser` is called with 2 arguments, the full user object and a callback used by passport. A unique key to identify that user should be returned in the callback, the easiest one to use being the user's `_id` in the object. It should be unique as it generated by MongoDB. Similarly, `deserializeUser` is called with that key and a callback function for passport as well, but, this time, we have to take that key and return the full user object to the callback. To make a query search for a Mongo `_id`, you will have to create `const ObjectID = require('mongodb').ObjectID;`, and then to use it you call `new ObjectID(THE_ID)`. Be sure to add MongoDB as a dependency. You can see this in the examples below: +The `serializeUser` is called with 2 arguments, the full user object and a callback used by passport. A unique key to identify that user should be returned in the callback, the easiest one to use being the user's `_id` in the object. It should be unique as it is generated by MongoDB. Similarly, `deserializeUser` is called with that key and a callback function for passport as well, but, this time, we have to take that key and return the full user object to the callback. To make a query search for a Mongo `_id`, you will have to create `const ObjectID = require('mongodb').ObjectID;`, and then to use it you call `new ObjectID(THE_ID)`. Be sure to add `mongodb@~3.6.0` as a dependency. You can see this in the examples below: ```js passport.serializeUser((user, done) => { diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md index eb90238236..0a89bd5293 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md @@ -8,7 +8,13 @@ dashedName: set-up-a-template-engine # --description-- -As a reminder, this project is built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-advancednode), or clone from [GitHub](https://github.com/freeCodeCamp/boilerplate-advancednode/). +Working on these challenges will involve you writing your code using one of the following methods: + +- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-advancednode/) and complete these challenges locally. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-advancednode) to complete these challenges. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. A template engine enables you to use static template files (such as those written in *Pug*) in your app. At runtime, the template engine replaces variables in a template file with actual values which can be supplied by your server. Then it transforms the template into a static HTML file that is sent to the client. This approach makes it easier to design an HTML page and allows for displaying variables on the page without needing to make an API call from the client. diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-passport.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-passport.md index 852d12c28c..98c406d1d2 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-passport.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-passport.md @@ -10,9 +10,9 @@ dashedName: set-up-passport It's time to set up *Passport* so we can finally start allowing a user to register or login to an account! In addition to Passport, we will use Express-session to handle sessions. Using this middleware saves the session id as a cookie in the client and allows us to access the session data using that id on the server. This way we keep personal account information out of the cookie used by the client to verify to our server they are authenticated and just keep the *key* to access the data stored on the server. -To set up Passport for use in your project, you will need to add it as a dependency first in your package.json. `"passport": "^0.3.2"` +To set up Passport for use in your project, you will need to add it as a dependency first in your package.json. `passport@~0.4.1` -In addition, add Express-session as a dependency now as well. Express-session has a ton of advanced features you can use but for now we're just going to use the basics! `"express-session": "^1.15.0"` +In addition, add Express-session as a dependency now as well. Express-session has a ton of advanced features you can use but for now we're just going to use the basics! `express-session@~1.17.1` You will need to set up the session settings now and initialize Passport. Be sure to first create the variables 'session' and 'passport' to require 'express-session' and 'passport' respectively. diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md index 12fc60fb52..9da23f8cac 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md @@ -10,7 +10,7 @@ dashedName: set-up-the-environment The following challenges will make use of the `chat.pug` file. So, in your `routes.js` file, add a GET route pointing to `/chat` which makes use of `ensureAuthenticated`, and renders `chat.pug`, with `{ user: req.user }` passed as an argument to the response. Now, alter your existing `/auth/github/callback` route to set the `req.session.user_id = req.user.id`, and redirect to `/chat`. -Add `http` and `socket.io` as a dependency and require/instantiate them in your server defined as follows: +Add `socket.io@~2.3.0` as a dependency and require/instantiate it in your server defined as follows, with `http` (comes built-in with Nodejs): ```javascript const http = require('http').createServer(app); @@ -19,7 +19,7 @@ const io = require('socket.io')(http); Now that the *http* server is mounted on the *express app*, you need to listen from the *http* server. Change the line with `app.listen` to `http.listen`. -The first thing needing to be handled is listening for a new connection from the client. The on keyword does just that- listen for a specific event. It requires 2 arguments: a string containing the title of the event thats emitted, and a function with which the data is passed though. In the case of our connection listener, we use *socket* to define the data in the second argument. A socket is an individual client who is connected. +The first thing needing to be handled is listening for a new connection from the client. The on keyword does just that- listen for a specific event. It requires 2 arguments: a string containing the title of the event that's emitted, and a function with which the data is passed though. In the case of our connection listener, we use *socket* to define the data in the second argument. A socket is an individual client who is connected. To listen for connections to your server, add the following within your database connection: diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md index 2a49a6e67b..df609ee419 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md @@ -8,7 +8,7 @@ dashedName: assert-deep-equality-with--deepequal-and--notdeepequal # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). `deepEqual()` asserts that two objects are deep equal. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md index 49e53e01b3..30f1e51eee 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md @@ -8,7 +8,7 @@ dashedName: compare-the-properties-of-two-elements # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). # --instructions-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md index 411c4032d5..9f855975a0 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md @@ -8,7 +8,13 @@ dashedName: learn-how-javascript-assertions-work # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +Working on these challenges will involve you writing your code using one of the following methods: + +- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-mochachai/) and complete these challenges locally. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-mochachai) to complete these challenges. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. # --instructions-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iii---put-method.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iii---put-method.md index fef7dae300..f9ca69d575 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iii---put-method.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iii---put-method.md @@ -8,7 +8,7 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iii---put-me # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). In the next example we'll see how to send data in a request payload (body). We are going to test a PUT request. The `'/travellers'` endpoint accepts a JSON object taking the structure: diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iv---put-method.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iv---put-method.md index e52c9af7fb..c4644a785f 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iv---put-method.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iv---put-method.md @@ -8,7 +8,7 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-met # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). This exercise is similar to the preceding one. Look at it for the details. +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). This exercise is similar to the preceding one. Look at it for the details. Now that you have seen how it is done, it is your turn to do it from scratch. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http-ii.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http-ii.md index cf47e5ae87..53d2c7459e 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http-ii.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http-ii.md @@ -8,7 +8,7 @@ dashedName: run-functional-tests-on-api-endpoints-using-chai-http-ii # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). # --instructions-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http.md index e48d66852e..dc99b2d46a 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http.md @@ -8,7 +8,7 @@ dashedName: run-functional-tests-on-api-endpoints-using-chai-http # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). Mocha allows testing asyncronous operations. There is a small (BIG) difference. Can you spot it? diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md index 815edc8c24..d34360de18 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md @@ -8,7 +8,7 @@ dashedName: run-functional-tests-using-a-headless-browser-ii # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). # --instructions-- @@ -94,7 +94,7 @@ You should assert that the element 'span#dates' exist and its count is 1. (getUserInput) => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then( (data) => { - assert.equal(data.assertions[3].method, 'browser.element'); + assert.equal(data.assertions[3].method, 'browser.elements'); assert.match(data.assertions[3].args[0], /('|")span#dates\1/); assert.equal(data.assertions[3].args[1], 1); }, diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md index 2c15f1d1dc..3da3211b67 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md @@ -8,7 +8,7 @@ dashedName: run-functional-tests-using-a-headless-browser # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). In the HTML main view we provided a input form. It sends data to the `PUT /travellers` endpoint that we used above with an Ajax request. When the request successfully completes, the client code appends a `
` containing the info returned by the call to the DOM. Here is an example of how to interact with this form: @@ -18,7 +18,7 @@ test('#test - submit the input "surname" : "Polo"', function (done) { browser.assert.success(); browser.assert.text('span#name', 'Marco'); browser.assert.text('span#surname', 'Polo'); - browser.assert.element('span#dates', 1); + browser.assert.elements('span#dates', 1); done(); }); } @@ -31,7 +31,7 @@ Then, once a response is received from the AJAX request, a few assertions are ma 1. The status of the response is `200` 2. The text within the `` element matches `'Marco'` 3. The text within the `` element matches `'Polo'` -4. The there is `1` `` element. +4. There is `1` `` element. Finally, the `done` callback is invoked, which is needed due to the asynchronous test. @@ -119,7 +119,7 @@ You should assert that the element 'span#dates' exist and its count is 1. (getUserInput) => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then( (data) => { - assert.equal(data.assertions[3].method, 'browser.element'); + assert.equal(data.assertions[3].method, 'browser.elements'); assert.match(data.assertions[3].args[0], /('|")span#dates\1/); assert.equal(data.assertions[3].args[1], 1); }, diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md index c5a21227db..7bf0765de5 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md @@ -7,13 +7,13 @@ dashedName: simulate-actions-using-a-headless-browser # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). In the next challenges we are going to simulate the human interaction with a page using a device called 'Headless Browser'. A headless browser is a web browser without a graphical user interface. This kind of tool is particularly useful for testing web pages, as it is able to render and understand HTML, CSS, and JavaScript the same way a browser would. -For these challenges we are using Zombie.JS. It's a lightweight browser which is totally based on JS, without relying on additional binaries to be installed. This feature makes it usable in an environment such as Repl.it. There are many other (more powerful) options. +For these challenges we are using Zombie.JS. It's a lightweight browser which is totally based on JS, without relying on additional binaries to be installed. This feature makes it usable in an environment such as Replit. There are many other (more powerful) options. Mocha allows you to prepare the ground running some code before the actual tests. This can be useful for example to create items in the database, which will be used in the successive tests. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md index d06c838a5a..a12fe6397b 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md @@ -8,7 +8,7 @@ dashedName: test-for-truthiness # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). `isTrue()` will test for the boolean value `true` and `isNotTrue()` will pass when given anything but the boolean value of `true`. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md index 3db5ce9dab..60bf0f0bd1 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md @@ -8,7 +8,7 @@ dashedName: test-if-a-string-contains-a-substring # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). `include()` and `notInclude()` work for strings too! `include()` asserts that the actual string contains the expected substring. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md index 7ee2db2e83..7cddc15804 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md @@ -8,7 +8,7 @@ dashedName: test-if-a-value-falls-within-a-specific-range # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). ```javascript .approximately(actual, expected, delta, [message]) diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md index d51fae0ff7..9fa5b147ec 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md @@ -8,7 +8,7 @@ dashedName: test-if-a-value-is-a-string # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). `isString` or `isNotString` asserts that the actual value is a string. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md index aa9ba1e31a..3ed6428022 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md @@ -8,7 +8,7 @@ dashedName: test-if-a-value-is-an-array # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). # --instructions-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md index d40e7da38a..55b278c0df 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md @@ -8,7 +8,7 @@ dashedName: test-if-a-value-is-of-a-specific-data-structure-type # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). `#typeOf` asserts that value's type is the given string, as determined by `Object.prototype.toString`. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md index e90101f335..426165f522 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md @@ -8,7 +8,7 @@ dashedName: test-if-a-variable-or-function-is-defined # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). # --instructions-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md index 320f7b6edb..0938de8bfc 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md @@ -8,7 +8,7 @@ dashedName: test-if-an-array-contains-an-item # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). # --instructions-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md index 34d88a9ff4..54540528da 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md @@ -8,7 +8,7 @@ dashedName: test-if-an-object-has-a-property # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). `property` asserts that the actual object has a given property. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md index cccba2ce79..6855c8a644 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md @@ -8,7 +8,7 @@ dashedName: test-if-an-object-is-an-instance-of-a-constructor # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). `#instanceOf` asserts that an object is an instance of a constructor. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md index be4dcadd85..66f6d98b9d 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md @@ -8,7 +8,7 @@ dashedName: test-if-one-value-is-below-or-at-least-as-large-as-another # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). # --instructions-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md index d7cd803053..cf5da7e951 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md @@ -8,7 +8,7 @@ dashedName: use-assert-isok-and-assert-isnotok # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). `isOk()` will test for a truthy value, and `isNotOk()` will test for a falsy value. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md index bfd745c7ee..676b8b07b8 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md @@ -8,7 +8,7 @@ dashedName: use-regular-expressions-to-test-a-string # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). `match()` asserts that the actual value matches the second argument regular expression. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-double-equals-to-assert-equality.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-double-equals-to-assert-equality.md index eab031cce7..2878f794bd 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-double-equals-to-assert-equality.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-double-equals-to-assert-equality.md @@ -8,7 +8,7 @@ dashedName: use-the-double-equals-to-assert-equality # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). `equal()` compares objects using `==`. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md index de0259762c..b8e6aeedd2 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md @@ -8,7 +8,7 @@ dashedName: use-the-triple-equals-to-assert-strict-equality # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). `strictEqual()` compares objects using `===`. diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/american-british-translator.md index c2e5448f12..5f932d6168 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -2,6 +2,7 @@ id: 5e601c0d5ac9d0ecd8b94afe title: American British Translator challengeType: 4 +forumTopicId: 462358 dashedName: american-british-translator --- @@ -10,7 +11,7 @@ dashedName: american-british-translator Build a full stack JavaScript app that is functionally similar to this: . Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-american-british-english-translator/) and complete your project locally. -- Use [our repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-american-british-english-translator) to complete your project. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-american-british-english-translator) to complete your project. - Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. @@ -21,8 +22,8 @@ When you are done, make sure a working demo of your project is hosted somewhere - Complete the `/api/translate` route in `/routes/api.js` - Create all of the unit/functional tests in `tests/1_unit-tests.js` and `tests/2_functional-tests.js` - See the JavaScript files in `/components` for the different spelling and terms your application should translate -- To run the tests on Repl.it, set `NODE_ENV` to `test` without quotes in the `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Repl.it console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- To run the tests on Replit, set `NODE_ENV` to `test` without quotes in the `.env` file +- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" Write the following tests in `tests/1_unit-tests.js`: @@ -129,7 +130,7 @@ async (getUserInput) => { }; ``` -The `/api/translate` route should also handle the way titles/honorifics are abbreviated in American and British English. For example, Doctor Wright is abbreviated as "Dr Wright" in British English and "Dr. Wright" in American English. See `/public/american-to-british-titles.js` for the different titles your application should handle. +The `/api/translate` route should also handle the way titles/honorifics are abbreviated in American and British English. For example, Doctor Wright is abbreviated as "Dr Wright" in British English and "Dr. Wright" in American English. See `/components/american-to-british-titles.js` for the different titles your application should handle. ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/issue-tracker.md index 46e3eb91af..a2fce8e7c3 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/issue-tracker.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/issue-tracker.md @@ -11,7 +11,7 @@ dashedName: issue-tracker Build a full stack JavaScript app that is functionally similar to this: . Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-issuetracker/) and complete your project locally. -- Use [this repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-issuetracker) to complete your project. +- Use [this Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-issuetracker) to complete your project. - Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. @@ -22,7 +22,7 @@ When you are done, make sure a working demo of your project is hosted somewhere - Create all of the functional tests in `tests/2_functional-tests.js` - Copy the `sample.env` file to `.env` and set the variables appropriately - To run the tests uncomment `NODE_ENV=test` in your `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Repl.it console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" Write the following tests in `tests/2_functional-tests.js`: diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md index a448bda36d..e99c8953c0 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md @@ -11,7 +11,7 @@ dashedName: metric-imperial-converter Build a full stack JavaScript app that is functionally similar to this: . Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-metricimpconverter/) and complete your project locally. -- Use [our repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-metricimpconverter) to complete your project. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-metricimpconverter) to complete your project. - Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. @@ -22,7 +22,7 @@ When you are done, make sure a working demo of your project is hosted somewhere - Complete the necessary routes in `/routes/api.js` - Copy the `sample.env` file to `.env` and set the variables appropriately - To run the tests uncomment `NODE_ENV=test` in your `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Repl.it console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" Write the following tests in `tests/1_unit-tests.js`: @@ -66,7 +66,9 @@ getUserInput => { ``` You can `GET` `/api/convert` with a single parameter containing an accepted number and unit and have it converted. (Hint: Split the input by looking for the index of the first character which will mark the start of the unit) + ```js + ``` You can convert `'gal'` to `'L'` and vice versa. (1 gal to 3.78541 L) diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/personal-library.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/personal-library.md index 6cd072b446..6254a8c417 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/personal-library.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/personal-library.md @@ -11,15 +11,14 @@ dashedName: personal-library Build a full stack JavaScript app that is functionally similar to this: . Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-library) and complete your project locally. -- Use [our repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-library)) to complete your project. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-library) to complete your project. - Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. # --instructions-- -1. Add your MongoDB connection string to `.env` without quotes as `DB` - Example: `DB=mongodb://admin:pass@1234.mlab.com:1234/fccpersonallib` +1. Add your MongoDB connection string to `.env` without quotes as `DB` Example: `DB=mongodb://admin:pass@1234.mlab.com:1234/fccpersonallib` 2. In your `.env` file set `NODE_ENV` to `test`, without quotes 3. You need to create all routes within `routes/api.js` 4. You will create all functional tests in `tests/2_functional-tests.js` @@ -66,7 +65,7 @@ async (getUserInput) => { let a = $.post(url, { title: 'Faux Book A' }); let b = $.post(url, { title: 'Faux Book B' }); let c = $.post(url, { title: 'Faux Book C' }); - Promise.all([a, b, c]).then(async () => { + await Promise.all([a, b, c]).then(async () => { let data = await $.get(url); assert.isArray(data); assert.isAtLeast(data.length, 3); @@ -214,8 +213,8 @@ async (getUserInput) => { ```js /** - Backend challenges don't need solutions, - because they would need to be tested against a full working project. + Backend challenges don't need solutions, + because they would need to be tested against a full working project. Please check our contributing guidelines to learn more. */ ``` diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/sudoku-solver.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/sudoku-solver.md index dde3301c58..b371014bf5 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/sudoku-solver.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/sudoku-solver.md @@ -2,6 +2,7 @@ id: 5e601bf95ac9d0ecd8b94afd title: Sudoku Solver challengeType: 4 +forumTopicId: 462357 dashedName: sudoku-solver --- @@ -10,7 +11,7 @@ dashedName: sudoku-solver Build a full stack JavaScript app that is functionally similar to this: . Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freecodecamp/boilerplate-project-sudoku-solver) and complete your project locally. -- Use [our repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-sudoku-solver) to complete your project. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-sudoku-solver) to complete your project. - Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. @@ -24,7 +25,7 @@ When you are done, make sure a working demo of your project is hosted somewhere - All routing logic can go into `/routes/api.js` - See the `puzzle-strings.js` file in `/controllers` for some sample puzzles your application should solve - To run the challenge tests on this page, set `NODE_ENV` to `test` without quotes in the `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Repl.it console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" Write the following tests in `tests/1_unit-tests.js`: @@ -39,7 +40,7 @@ Write the following tests in `tests/1_unit-tests.js`: - Logic handles an invalid region (3x3 grid) placement - Valid puzzle strings pass the solver - Invalid puzzle strings fail the solver -- Solver returns the the expected solution for an incomplete puzzzle +- Solver returns the expected solution for an incomplete puzzle Write the following tests in `tests/2_functional-tests.js` @@ -202,6 +203,25 @@ async (getUserInput) => { }; ``` +If `value` submitted to `/api/check` is already placed in `puzzle` on that `coordinate`, the returned value will be an object containing a `valid` property with `true` if `value` is not conflicting. + +```js +async (getUserInput) => { + const input = + '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; + const coordinate = 'C3'; + const value = '2'; + const data = await fetch(getUserInput('url') + '/api/check', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ puzzle: input, coordinate, value }) + }); + const parsed = await data.json(); + assert.property(parsed, 'valid'); + assert.isTrue(parsed.valid); +}; +``` + If the puzzle submitted to `/api/check` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }` ```js diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md index 781a0fcce8..e11c4968a0 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md @@ -1,6 +1,6 @@ --- id: 5e7b9f0a0b6c005b0e76f069 -title: Diccionarios y ciclos +title: Dictionaries and Loops challengeType: 11 videoId: EEmekKiKG70 dashedName: dictionaries-and-loops diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md index c6f3482dba..b03590db98 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md @@ -2,6 +2,7 @@ id: 5e44412c903586ffb414c94c title: Arithmetic Formatter challengeType: 10 +forumTopicId: 462359 dashedName: arithmetic-formatter --- @@ -9,7 +10,7 @@ dashedName: arithmetic-formatter Create a function that receives a list of strings that are arithmetic problems and returns the problems arranged vertically and side-by-side. -You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-arithmetic-formatter). +You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-arithmetic-formatter). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md index f67225f534..de8c1f893b 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md @@ -2,6 +2,7 @@ id: 5e44413e903586ffb414c94e title: Budget App challengeType: 10 +forumTopicId: 462361 dashedName: budget-app --- @@ -9,7 +10,7 @@ dashedName: budget-app Create a "Category" class that can be used to create different budget categories. -You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-budget-app). +You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-budget-app). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md index 21c24f9652..8c7067f044 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md @@ -2,6 +2,7 @@ id: 5e444147903586ffb414c94f title: Polygon Area Calculator challengeType: 10 +forumTopicId: 462363 dashedName: polygon-area-calculator --- @@ -9,7 +10,7 @@ dashedName: polygon-area-calculator In this project you will use object oriented programming to create a Rectangle class and a Square class. The Square class should be a subclass of Rectangle and inherit methods and attributes. -You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-polygon-area-calculator). +You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-polygon-area-calculator). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md index 58cf748584..b89b308ffd 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md @@ -2,6 +2,7 @@ id: 5e44414f903586ffb414c950 title: Probability Calculator challengeType: 10 +forumTopicId: 462364 dashedName: probability-calculator --- @@ -9,7 +10,7 @@ dashedName: probability-calculator Write a program to determine the approximate probability of drawing certain balls randomly from a hat. -You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-probability-calculator). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. +You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-probability-calculator). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project: diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md index 2037f57ad7..1f6e988b81 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md @@ -2,6 +2,7 @@ id: 5e444136903586ffb414c94d title: Time Calculator challengeType: 10 +forumTopicId: 462360 dashedName: time-calculator --- @@ -9,7 +10,7 @@ dashedName: time-calculator Write a function named "add_time" that can add a duration to a start time and return the result. -You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-time-calculator). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. +You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-time-calculator). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project: diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/how-to-use-jupyter-notebooks-intro.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/how-to-use-jupyter-notebooks-intro.md index 4ac7363d87..1dd69ee8d9 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/how-to-use-jupyter-notebooks-intro.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/how-to-use-jupyter-notebooks-intro.md @@ -14,7 +14,6 @@ More resources: - [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/ds-content-interactive-jupyterlab-tutorial) - [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb) -- [Twitter Cheat Sheet](https://twitter.com/rmotr_com/status/1122176794696847361) # --question-- diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md index a092ad93a8..a907b1568d 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md @@ -10,31 +10,30 @@ dashedName: introduction-to-data-analysis More resources: -\- [Slides](https://docs.google.com/presentation/d/1fDpjlyMiOMJyuc7_jMekcYLPP2XlSl1eWw9F7yE7byk) +\- [Slides](https://docs.google.com/presentation/d/1cUIt8b2ySz-85_ykfeuuWsurccwTAuFPn782pZBzFsU/edit?usp=sharing) # --question-- ## --text-- -Why should you choose R over Python for data analysis? +Which of the following is **not** part of Data Analysis? ## --answers-- -It's simple to learn. +Building statistical models and data visualizations. --- -It's better at dealing with advanced statistical methods. +Picking a desired conclusion for the analysis. --- -There are many powerful libraries that support R. +Fixing incorrect values and removing invalid data. --- -It's free and open source. +Transforming data into an appropriate data structure. ## --video-solution-- 2 - diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md index 137b9f53bd..b886303b16 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md @@ -14,7 +14,6 @@ More resources: - [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/ds-content-interactive-jupyterlab-tutorial) - [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb) -- [Twitter Cheat Sheet](https://twitter.com/rmotr_com/status/1122176794696847361) # --question-- diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md index 104edcae19..7bc910fcc4 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md @@ -14,7 +14,6 @@ More resources: - [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/ds-content-interactive-jupyterlab-tutorial) - [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb) -- [Twitter Cheat Sheet](https://twitter.com/rmotr_com/status/1122176794696847361) # --question-- diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/parsing-html-and-saving-data.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/parsing-html-and-saving-data.md index 284a5eabab..1585b497b2 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/parsing-html-and-saving-data.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/parsing-html-and-saving-data.md @@ -12,7 +12,7 @@ dashedName: parsing-html-and-saving-data More resources: -- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/RDP-Reading-Data-with-Python-and-Pandas) +- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/RDP-Reading-Data-with-Python-and-Pandas/tree/master/unit-1-reading-data-with-python-and-pandas/lesson-17-reading-html-tables/files) - [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb) # --question-- diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md index 18d6487a0a..442d815a51 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md @@ -12,7 +12,7 @@ dashedName: reading-data-csv-and-txt More resources: -- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/RDP-Reading-Data-with-Python-and-Pandas) +- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/RDP-Reading-Data-with-Python-and-Pandas/tree/master/unit-1-reading-data-with-python-and-pandas/lesson-1-reading-csv-and-txt-files/files) - [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb) # --question-- diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md index 5502a07e7a..9a6275ac38 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md @@ -12,7 +12,7 @@ dashedName: reading-data-from-databases More resources: -- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/RDP-Reading-Data-with-Python-and-Pandas) +- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/RDP-Reading-Data-with-Python-and-Pandas/tree/master/unit-1-reading-data-with-python-and-pandas/lesson-11-reading-data-from-relational-databases/files) - [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb) # --question-- diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md index a16b2d0176..5a98490864 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md @@ -12,7 +12,7 @@ dashedName: reading-data-introduction More resources: -- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/RDP-Reading-Data-with-Python-and-Pandas) +- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/RDP-Reading-Data-with-Python-and-Pandas/tree/master/unit-1-reading-data-with-python-and-pandas/lesson-1-reading-csv-and-txt-files/files) - [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb) # --question-- diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md index 66246f3d5d..135049889c 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md @@ -2,6 +2,7 @@ id: 5e46f7e5ac417301a38fb929 title: Demographic Data Analyzer challengeType: 10 +forumTopicId: 462367 dashedName: demographic-data-analyzer --- @@ -9,7 +10,7 @@ dashedName: demographic-data-analyzer In this challenge you must analyze demographic data using Pandas. You are given a dataset of demographic data that was extracted from the 1994 Census database. -You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-demographic-data-analyzer). +You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-demographic-data-analyzer). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md index 76fed744e5..c1e596625d 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md @@ -2,6 +2,7 @@ id: 5e46f7e5ac417301a38fb928 title: Mean-Variance-Standard Deviation Calculator challengeType: 10 +forumTopicId: 462366 dashedName: mean-variance-standard-deviation-calculator --- @@ -9,7 +10,7 @@ dashedName: mean-variance-standard-deviation-calculator Create a function that uses Numpy to output the mean, variance, and standard deviation of the rows, columns, and elements in a 3 x 3 matrix. -You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mean-variance-standard-deviation-calculator). +You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-mean-variance-standard-deviation-calculator). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md index 4d7cfc2f13..d8ef3d60c9 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md @@ -2,6 +2,7 @@ id: 5e46f7f8ac417301a38fb92a title: Medical Data Visualizer challengeType: 10 +forumTopicId: 462368 dashedName: medical-data-visualizer --- @@ -9,7 +10,7 @@ dashedName: medical-data-visualizer In this project, you will visualize and make calculations from medical examination data using matplotlib, seaborn, and pandas. -You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-medical-data-visualizer). +You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-medical-data-visualizer). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md index b33d2eeed6..f0501c882b 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md @@ -2,6 +2,7 @@ id: 5e46f802ac417301a38fb92b title: Page View Time Series Visualizer challengeType: 10 +forumTopicId: 462369 dashedName: page-view-time-series-visualizer --- @@ -9,7 +10,7 @@ dashedName: page-view-time-series-visualizer For this project you will visualize time series data using a line chart, bar chart, and box plots. You will use Pandas, matplotlib, and seaborn to visualize a dataset containing the number of page views each day on the freeCodeCamp.org forum from 2016-05-09 to 2019-12-03. The data visualizations will help you understand the patterns in visits and identify yearly and monthly growth. -You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-page-view-time-series-visualizer). +You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-page-view-time-series-visualizer). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md index 58075caec0..a708eedae1 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md @@ -2,6 +2,7 @@ id: 5e4f5c4b570f7e3a4949899f title: Sea Level Predictor challengeType: 10 +forumTopicId: 462370 dashedName: sea-level-predictor --- @@ -9,7 +10,7 @@ dashedName: sea-level-predictor In this project, you will analyze a dataset of the global average sea level change since 1880. You will use the data to predict the sea level change through year 2050. -You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-sea-level-predictor). +You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-sea-level-predictor). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. diff --git a/curriculum/challenges/espanol/09-information-security/information-security-projects/anonymous-message-board.md b/curriculum/challenges/espanol/09-information-security/information-security-projects/anonymous-message-board.md index 20970a8e21..10b7e3ad58 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-projects/anonymous-message-board.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-projects/anonymous-message-board.md @@ -13,7 +13,7 @@ Build a full stack JavaScript app that is functionally similar to this: { You can send a POST request to `/api/threads/{board}` with form data including `text` and `delete_password`. The saved database record will have at least the fields `_id`, `text`, `created_on`(date & time), `bumped_on`(date & time, starts same as `created_on`), `reported` (boolean), `delete_password`, & `replies` (array). ```js - +async (getUserInput) => { + const date = new Date(); + const text = `fcc_test_${date}`; + const deletePassword = 'delete_me'; + const data = { text, delete_password: deletePassword }; + const url = getUserInput('url'); + const res = await fetch(url + '/api/threads/fcc_test', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data) + }); + if (res.ok) { + const checkData = await fetch(url + '/api/threads/fcc_test'); + const parsed = await checkData.json(); + try { + assert.equal(parsed[0].text, text); + assert.isNotNull(parsed[0]._id); + assert.equal(new Date(parsed[0].created_on).toDateString(), date.toDateString()); + assert.equal(parsed[0].bumped_on, parsed[0].created_on); + assert.isArray(parsed[0].replies); + } catch (err) { + throw new Error(err.responseText || err.message); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; ``` You can send a POST request to `/api/replies/{board}` with form data including `text`, `delete_password`, & `thread_id`. This will update the `bumped_on` date to the comment's date. In the thread's `replies` array, an object will be saved with at least the properties `_id`, `text`, `created_on`, `delete_password`, & `reported`. diff --git a/curriculum/challenges/espanol/09-information-security/information-security-projects/port-scanner.md b/curriculum/challenges/espanol/09-information-security/information-security-projects/port-scanner.md index 5c776ca7d0..d4b4d6cb89 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-projects/port-scanner.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-projects/port-scanner.md @@ -2,6 +2,7 @@ id: 5e46f979ac417301a38fb932 title: Port Scanner challengeType: 10 +forumTopicId: 462372 helpCategory: Python dashedName: port-scanner --- @@ -10,7 +11,7 @@ dashedName: port-scanner Create a port scanner using Python. -You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-port-scanner). +You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-port-scanner). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. diff --git a/curriculum/challenges/espanol/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md b/curriculum/challenges/espanol/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md index 3ced001df3..99f371813e 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md @@ -2,6 +2,7 @@ id: 5e601c775ac9d0ecd8b94aff title: Secure Real Time Multiplayer Game challengeType: 4 +forumTopicId: 462375 dashedName: secure-real-time-multiplayer-game --- @@ -10,11 +11,15 @@ dashedName: secure-real-time-multiplayer-game Develop a 2D real time multiplayer game using the HTML Canvas API and [Socket.io](https://socket.io/) that is functionally similar to this: . Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-secure-real-time-multiplayer-game/) and complete your project locally. -- Use [our repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-secure-real-time-multiplayer-game) to complete your project. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-secure-real-time-multiplayer-game) to complete your project. - Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +# --instructions-- + +**Note**: `helmet@^3.21.3` is needed for the user stories. This means you will need to use the previous version of Helmet's docs, for information on how to achieve the user stories. + # --hints-- You can provide your own project, not the example URL. @@ -116,25 +121,47 @@ Players can disconnect from the game at any time. Prevent the client from trying to guess / sniff the MIME type. ```js - +async (getUserInput) => { + const data = await fetch(getUserInput('url') + '/_api/app-info'); + const parsed = await data.json(); + assert.equal(parsed.headers['x-content-type-options'], 'nosniff'); +}; ``` Prevent cross-site scripting (XSS) attacks. ```js - +async (getUserInput) => { + const data = await fetch(getUserInput('url') + '/_api/app-info'); + const parsed = await data.json(); + assert.equal(parsed.headers['x-xss-protection'], '1; mode=block'); +}; ``` Nothing from the website is cached in the client. ```js - +async (getUserInput) => { + const data = await fetch(getUserInput('url') + '/_api/app-info'); + const parsed = await data.json(); + assert.equal(parsed.headers['surrogate-control'], 'no-store'); + assert.equal( + parsed.headers['cache-control'], + 'no-store, no-cache, must-revalidate, proxy-revalidate' + ); + assert.equal(parsed.headers['pragma'], 'no-cache'); + assert.equal(parsed.headers['expires'], '0'); +}; ``` The headers say that the site is powered by "PHP 7.4.3" even though it isn't (as a security measure). ```js - +async (getUserInput) => { + const data = await fetch(getUserInput('url') + '/_api/app-info'); + const parsed = await data.json(); + assert.equal(parsed.headers['x-powered-by'], 'PHP 7.4.3'); +}; ``` # --solutions-- diff --git a/curriculum/challenges/espanol/09-information-security/information-security-projects/sha-1-password-cracker.md b/curriculum/challenges/espanol/09-information-security/information-security-projects/sha-1-password-cracker.md index 8a79bb1b7c..50bb715271 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-projects/sha-1-password-cracker.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-projects/sha-1-password-cracker.md @@ -2,6 +2,7 @@ id: 5e46f983ac417301a38fb933 title: SHA-1 Password Cracker challengeType: 10 +forumTopicId: 462374 helpCategory: Python dashedName: sha-1-password-cracker --- @@ -10,7 +11,7 @@ dashedName: sha-1-password-cracker For this project you will learn about the importance of good security by creating a password cracker to figure out passwords that were hashed using SHA-1. -You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-SHA-1-password-cracker). +You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-SHA-1-password-cracker). After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below. diff --git a/curriculum/challenges/espanol/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/espanol/09-information-security/information-security-projects/stock-price-checker.md index ce584c58d5..2a0a1ea2fd 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-projects/stock-price-checker.md @@ -15,7 +15,7 @@ Since all reliable stock price APIs require an API key, we've built a workaround Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-stockchecker/) and complete your project locally. -- Use [our repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-stockchecker) to complete your project. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-stockchecker) to complete your project. - Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your projects source code in the `GitHub Link` field. @@ -62,7 +62,7 @@ async (getUserInput) => { }; ``` -You can send a `GET` request to `/api/stock-prices` with form data containing a NASDAQ stock ticker. Returned will be an object with the property `stockData`. +You can send a `GET` request to `/api/stock-prices`, passing a NASDAQ stock symbol to a `stock` query parameter. The returned object will contain a property named `stockData`. ```js async (getUserInput) => { @@ -74,7 +74,7 @@ async (getUserInput) => { }; ``` -The `stockData` property includes the `stock` ticker as a string, the `price` as a number, and `likes` as a number. +The `stockData` property includes the `stock` symbol as a string, the `price` as a number, and `likes` as a number. ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md index 6bf78cfccc..9d5cba3e75 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md @@ -8,13 +8,13 @@ dashedName: ask-browsers-to-access-your-site-via-https-only-with-helmet-hsts # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). HTTP Strict Transport Security (HSTS) is a web security policy which helps to protect websites against protocol downgrade attacks and cookie hijacking. If your website can be accessed via HTTPS you can ask user’s browsers to avoid using insecure HTTP. By setting the header Strict-Transport-Security, you tell the browsers to use HTTPS for the future requests in a specified amount of time. This will work for the requests coming after the initial request. # --instructions-- -Configure `helmet.hsts()` to use HTTPS for the next 90 days. Pass the config object `{maxAge: timeInSeconds, force: true}`. You can create a variable `ninetyDaysInSeconds = 90*24*60*60;` to use for the `timeInSeconds`. Repl.it already has hsts enabled. To override its settings you need to set the field "force" to true in the config object. We will intercept and restore the Repl.it header, after inspecting it for testing. +Configure `helmet.hsts()` to use HTTPS for the next 90 days. Pass the config object `{maxAge: timeInSeconds, force: true}`. You can create a variable `ninetyDaysInSeconds = 90*24*60*60;` to use for the `timeInSeconds`. Replit already has hsts enabled. To override its settings you need to set the field "force" to true in the config object. We will intercept and restore the Replit header, after inspecting it for testing. Note: Configuring HTTPS on a custom website requires the acquisition of a domain, and a SSL/TLS Certificate. diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md index 2bbd3bf02e..1ea172a936 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md @@ -8,7 +8,7 @@ dashedName: avoid-inferring-the-response-mime-type-with-helmet-nosniff # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). Browsers can use content or MIME sniffing to override response `Content-Type` headers to guess and process the data using an implicit content type. While this can be convenient in some scenarios, it can also lead to some dangerous attacks. This middleware sets the X-Content-Type-Options header to `nosniff`, instructing the browser to not bypass the provided `Content-Type`. +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). Browsers can use content or MIME sniffing to override response `Content-Type` headers to guess and process the data using an implicit content type. While this can be convenient in some scenarios, it can also lead to some dangerous attacks. This middleware sets the X-Content-Type-Options header to `nosniff`, instructing the browser to not bypass the provided `Content-Type`. # --instructions-- diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md index 6865d3896c..8f96da298a 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md @@ -8,7 +8,7 @@ dashedName: configure-helmet-using-the-parent-helmet-middleware # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). `app.use(helmet())` will automatically include all the middleware introduced above, except `noCache()`, and `contentSecurityPolicy()`, but these can be enabled if necessary. You can also disable or configure any other middleware individually, using a configuration object. @@ -21,7 +21,7 @@ app.use(helmet({ }, contentSecurityPolicy: { // enable and configure directives: { - defaultSrc: ["self"], + defaultSrc: ["'self'"], styleSrc: ['style.com'], } }, diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md index 21cf373400..b12dedf8de 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md @@ -8,7 +8,7 @@ dashedName: disable-client-side-caching-with-helmet-nocache # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). If you are releasing an update for your website, and you want the users to always download the newer version, you can (try to) disable caching on client’s browser. It can be useful in development too. Caching has performance benefits, which you will lose, so only use this option when there is a real need. diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md index 5d212b6dbe..3a855aebb7 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md @@ -8,7 +8,7 @@ dashedName: disable-dns-prefetching-with-helmet-dnsprefetchcontrol # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). To improve performance, most browsers prefetch DNS records for the links in a page. In that way the destination ip is already known when the user clicks on a link. This may lead to over-use of the DNS service (if you own a big website, visited by millions people…), privacy issues (one eavesdropper could infer that you are on a certain page), or page statistics alteration (some links may appear visited even if they are not). If you have high security needs you can disable DNS prefetching, at the cost of a performance penalty. diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md index 5d6126daa7..0165afc950 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md @@ -8,7 +8,7 @@ dashedName: hash-and-compare-passwords-asynchronously # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-bcrypt), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-bcrypt/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-bcrypt), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-bcrypt/). As hashing is designed to be computationally intensive, it is recommended to do so asynchronously on your server as to avoid blocking incoming connections while you hash. All you have to do to hash a password asynchronous is call diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md index c03109f16a..f7efd69368 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md @@ -8,7 +8,7 @@ dashedName: hash-and-compare-passwords-synchronously # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-bcrypt), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-bcrypt/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-bcrypt), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-bcrypt/). Hashing synchronously is just as easy to do but can cause lag if using it server side with a high cost or with hashing done very often. Hashing with this method is as easy as calling diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md index 630302ea38..fbf4faceb1 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md @@ -8,9 +8,9 @@ dashedName: hide-potentially-dangerous-information-using-helmet-hidepoweredby # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). -Hackers can exploit known vulnerabilities in Express/Node if they see that your site is powered by Express. X-Powered-By: Express is sent in every request coming from Express by default. The `helmet.hidePoweredBy()` middleware will remove the X-Powered-By header. You can also explicitly set the header to something else, to throw people off. e.g. `app.use(helmet.hidePoweredBy({ setTo: 'PHP 4.2.0' }))` +Hackers can exploit known vulnerabilities in Express/Node if they see that your site is powered by Express. `X-Powered-By: Express` is sent in every request coming from Express by default. Use the `helmet.hidePoweredBy()` middleware to remove the X-Powered-By header. # --hints-- diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md index 0a58f1d597..2e89c44399 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md @@ -8,7 +8,13 @@ dashedName: install-and-require-helmet # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). +Working on these challenges will involve you writing your code using one of the following methods: + +- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-infosec/) and complete these challenges locally. +- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-infosec) to complete these challenges. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Helmet helps you secure your Express apps by setting various HTTP headers. @@ -16,7 +22,7 @@ Helmet helps you secure your Express apps by setting various HTTP headers. All your code for these lessons goes in the `myApp.js` file between the lines of code we have started you off with. Do not change or delete the code we have added for you. -Install Helmet version `3.21.3`, then require it. +Install Helmet version `3.21.3`, then require it. You can install a specific version of a package with `npm install --save-exact package@version`, or by adding it to your `package.json` directly. # --hints-- @@ -26,8 +32,9 @@ Install Helmet version `3.21.3`, then require it. (getUserInput) => $.get(getUserInput('url') + '/_api/package.json').then( (data) => { - var packJson = JSON.parse(data); - assert(packJson.dependencies.helmet === '3.21.3'); + const packJson = JSON.parse(data); + const helmet = packJson.dependencies.helmet; + assert(helmet === '3.21.3' || helmet === '^3.21.3'); }, (xhr) => { throw new Error(xhr.responseText); diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md index 1759d2e727..33b43cd3be 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md @@ -8,7 +8,7 @@ dashedName: mitigate-the-risk-of-clickjacking-with-helmet-frameguard # --description-- -As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). +As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-infosec), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-infosec/). Your page could be put in a `` or `