Top 3 things cats hate:
` +```html +Top 3 things cats hate:
+``` # --hints-- diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md index 7de266b099..b0348deae2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md @@ -16,7 +16,9 @@ With responsive design, there is no need to design a mobile version of your webs You can add Bootstrap to any app by adding the following code to the top of your HTML: -`` +```html + +``` In this case, we've already added it for you to this page behind the scenes. Note that using either `>` or `/>` to close the `link` tag is acceptable. diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.md b/curriculum/challenges/english/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.md index 2e02864f61..50960b60c6 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.md @@ -14,7 +14,9 @@ jQuery has a function called `.html()` that lets you add HTML tags and text with Here's how you would rewrite and emphasize the text of our heading: -`$("h3").html("jQuery Playground");` +```js +$("h3").html("jQuery Playground"); +``` jQuery also has a similar function called `.text()` that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with. diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.md b/curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.md index 4f86c1e820..aa09b454b9 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.md @@ -16,7 +16,9 @@ jQuery has a function called `.css()` that allows you to change the CSS of an el Here's how we would change its color to blue: -`$("#target1").css("color", "blue");` +```js +$("#target1").css("color", "blue"); +``` This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon. diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.md b/curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.md index 73307848d4..9bb02186d5 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.md @@ -14,7 +14,9 @@ jQuery has a function called `clone()` that makes a copy of an element. For example, if we wanted to copy `target2` from our `left-well` to our `right-well`, we would use: -`$("#target2").clone().appendTo("#right-well");` +```js +$("#target2").clone().appendTo("#right-well"); +``` Did you notice this involves sticking two jQuery functions together? This is called function chaining and it's a convenient way to get things done with jQuery. diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/disable-an-element-using-jquery.md b/curriculum/challenges/english/03-front-end-libraries/jquery/disable-an-element-using-jquery.md index bdfefa4578..07162e70b8 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/disable-an-element-using-jquery.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/disable-an-element-using-jquery.md @@ -16,7 +16,9 @@ jQuery has a function called `.prop()` that allows you to adjust the properties Here's how you would disable all buttons: -`$("button").prop("disabled", true);` +```js +$("button").prop("disabled", true); +``` Disable only the `target1` button. diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.md b/curriculum/challenges/english/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.md index af216522ac..7df3b8052f 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.md @@ -14,7 +14,9 @@ In the same way you can add classes to an element with jQuery's `addClass()` fun Here's how you would do this for a specific button: -`$("#target2").removeClass("btn-default");` +```js +$("#target2").removeClass("btn-default"); +``` Let's remove the `btn-default` class from all of our `button` elements. diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.md index f1d37472b5..0e082e179f 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.md @@ -18,7 +18,9 @@ jQuery uses CSS Selectors to target elements. The `target:nth-child(n)` CSS sele Here's how you would give the third element in each well the bounce class: -`$(".target:nth-child(3)").addClass("animated bounce");` +```js +$(".target:nth-child(3)").addClass("animated bounce"); +``` Make the second child in each of your well elements bounce. You must select the elements' children with the `target` class. diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.md index f7484f9b71..525a6106cf 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.md @@ -22,7 +22,9 @@ Then use jQuery's `.addClass()` function to add the classes `animated` and `shak For example, you could make all the elements with the class `text-primary` shake by adding the following to your `document ready function`: -`$(".text-primary").addClass("animated shake");` +```js +$(".text-primary").addClass("animated shake"); +``` # --hints-- diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-even-elements-using-jquery.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-even-elements-using-jquery.md index 581680ff46..d89318eb3e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-even-elements-using-jquery.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-even-elements-using-jquery.md @@ -16,7 +16,9 @@ Note that jQuery is zero-indexed which means the first element in a selection ha Here's how you would target all the odd elements with class `target` and give them classes: -`$(".target:odd").addClass("animated shake");` +```js +$(".target:odd").addClass("animated shake"); +``` Try selecting all the even `target` elements and giving them the classes of `animated` and `shake`. Remember that **even** refers to the position of elements with a zero-based system in mind. diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.md index de209635d2..5b45498d38 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.md @@ -18,7 +18,9 @@ jQuery often selects an HTML element with a selector, then does somet For example, let's make all of your `button` elements bounce. Just add this code inside your document ready function: -`$("button").addClass("animated bounce");` +```js +$("button").addClass("animated bounce"); +``` Note that we've already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css `bounce` class to your `button` elements. diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.md index c6af54922d..5b75dd072b 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.md @@ -14,7 +14,9 @@ jQuery has a function called `children()` that allows you to access the children Here's an example of how you would use the `children()` function to give the children of your `left-well` element the color `blue`: -`$("#left-well").children().css("color", "blue")` +```js +$("#left-well").children().css("color", "blue") +``` # --instructions-- diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.md index 7e74abd49f..48985e399e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.md @@ -16,7 +16,9 @@ jQuery has a function called `parent()` that allows you to access the parent of Here's an example of how you would use the `parent()` function if you wanted to give the parent element of the `left-well` element a background color of blue: -`$("#left-well").parent().css("background-color", "blue")` +```js +$("#left-well").parent().css("background-color", "blue") +``` Give the parent of the `#target1` element a background-color of red. diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.md b/curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.md index cac332f2f5..5b0f8ef1fe 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.md @@ -14,7 +14,9 @@ jQuery has a function called `appendTo()` that allows you to select HTML element For example, if we wanted to move `target4` from our right well to our left well, we would use: -`$("#target4").appendTo("#left-well");` +```js +$("#target4").appendTo("#left-well"); +``` Move your `target2` element from your `left-well` to your `right-well`. diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-react.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-react.md index 731a208182..b016ed7ef1 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-react.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/react/introducing-inline-styles.md b/curriculum/challenges/english/03-front-end-libraries/react/introducing-inline-styles.md index 383b912694..1266a6cea2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/introducing-inline-styles.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/introducing-inline-styles.md @@ -14,11 +14,15 @@ If you import styles from a stylesheet, it isn't much different at all. You appl You apply inline styles to JSX elements similar to how you do it in HTML, but with a few JSX differences. Here's an example of an inline style in HTML: -`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. diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.md b/curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.md index 7a5f46d7d9..9aa54c9672 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.md +++ b/curriculum/challenges/english/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-- diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md b/curriculum/challenges/english/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md index 49abf8b2c9..2c6a725994 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/redux/copy-an-object-with-object.assign.md b/curriculum/challenges/english/03-front-end-libraries/redux/copy-an-object-with-object.assign.md index 95f447d908..9c004ef012 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/copy-an-object-with-object.assign.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.md b/curriculum/challenges/english/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.md index e0029a784c..68e6f320ac 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.md @@ -10,7 +10,9 @@ 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.