diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md index f10b6cbaf1..9c9a200e02 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md @@ -21,7 +21,7 @@ Use Font Awesome to add an `info-circle` icon to your info button and a `trash` # --hints-- -You should add a `` within your info button element. +You should add a `` within your `info` button element. ```js assert( @@ -30,7 +30,7 @@ assert( ); ``` -You should add a `` within your delete button element. +You should add a `` within your `delete` button element. ```js assert( @@ -39,7 +39,7 @@ assert( ); ``` -Each of your `i` elements should have a closing tag and `` is in your like button element. +Each of your `i` elements should have a closing tag and `` is in your `like` button element. ```js assert( diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md index 327ccf1b3d..87960ebd2f 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md @@ -27,7 +27,7 @@ Note that the `span` element is also acceptable for use with icons. # --instructions-- -Use Font Awesome to add a `thumbs-up` icon to your like button by giving it an `i` element with the classes `fas` and `fa-thumbs-up`. Make sure to keep the text "Like" next to the icon. +Use Font Awesome to add a `thumbs-up` icon to your like button by giving it an `i` element with the classes `fas` and `fa-thumbs-up`. Make sure to keep the text `Like` next to the icon. # --hints-- diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md index e066189270..50f3b1dbd7 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md @@ -10,13 +10,13 @@ dashedName: call-out-optional-actions-with-btn-info Bootstrap comes with several pre-defined colors for buttons. The `btn-info` class is used to call attention to optional actions that the user can take. -Create a new block-level Bootstrap button below your "Like" button with the text "Info", and add Bootstrap's `btn-info` and `btn-block` classes to it. +Create a new block-level Bootstrap button below your `Like` button with the text `Info`, and add Bootstrap's `btn-info` and `btn-block` classes to it. Note that these buttons still need the `btn` and `btn-block` classes. # --hints-- -You should create a new `button` element with the text "Info". +You should create a new `button` element with the text `Info`. ```js assert(new RegExp('info', 'gi').test($('button').text())); diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md index 784250c7e5..9155723465 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md @@ -12,7 +12,7 @@ Normally, your `button` elements with the `btn` and `btn-default` classes are on `` -This button would only be as wide as the word "Submit". +This button would only be as wide as the word `Submit`. diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md index 2cf8ce1aff..3014dc6931 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md @@ -10,11 +10,11 @@ dashedName: create-a-bootstrap-button Bootstrap has its own styles for `button` elements, which look much better than the plain HTML ones. -Create a new `button` element below your large kitten photo. Give it the `btn` and `btn-default` classes, as well as the text of "Like". +Create a new `button` element below your large kitten photo. Give it the `btn` and `btn-default` classes, as well as the text of `Like`. # --hints-- -You should create a new `button` element with the text "Like". +You should create a new `button` element with the text `Like`. ```js assert( diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.md index 6e79e8f12e..47de1536d6 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.md @@ -14,13 +14,13 @@ Nest one `div` element with the class `well` within each of your `col-xs-6` `div # --hints-- -You should add a `div` element with the class `well` inside each of your `div` elements with the class `"col-xs-6"` +You should add a `div` element with the class `well` inside each of your `div` elements with the class `col-xs-6` ```js assert($('div.col-xs-6').not(':has(>div.well)').length < 1); ``` -Both of your `div` elements with the class `"col-xs-6"` should be nested within your `div` element with the class `"row"`. +Both of your `div` elements with the class `col-xs-6` should be nested within your `div` element with the class `row`. ```js assert($('div.row > div.col-xs-6').length > 1); diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md index 543e90d7a2..76a1bffcd7 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md @@ -16,17 +16,17 @@ Delete the `.red-text`, `p`, and `.smaller-image` CSS declarations from your `st Then delete the `p` element that contains a dead link. Then remove the `red-text` class from your `h2` element and replace it with the `text-primary` Bootstrap class. -Finally, remove the "smaller-image" class from your first `img` element and replace it with the `img-responsive` class. +Finally, remove the `smaller-image` class from your first `img` element and replace it with the `img-responsive` class. # --hints-- -Your h2 element should no longer have the class `red-text`. +Your `h2` element should no longer have the class `red-text`. ```js assert(!$('h2').hasClass('red-text')); ``` -Your h2 element should now have the class `text-primary`. +Your `h2` element should now have the class `text-primary`. ```js assert($('h2').hasClass('text-primary')); diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md index 06e1b6f63b..6d995aa318 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md @@ -10,7 +10,7 @@ dashedName: label-bootstrap-buttons Just like we labeled our wells, we want to label our buttons. -Give each of your `button` elements text that corresponds to its `id`'s selector. +Give each of your `button` elements text that corresponds to its id selector. # --hints-- diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.md index dfb243376e..d025ee97e0 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.md @@ -18,9 +18,9 @@ That illustrates the difference between an "inline" element and a "block" elemen By using the inline `span` element, you can put several elements on the same line, and even style different parts of the same line differently. -Nest the word "love" in your "Things cats love" element below within a `span` element. Then give that `span` the class `text-danger` to make the text red. +Using a `span` element, nest the word `love` inside the `p` element that currently has the text `Things cats love`. Then give the `span` the class `text-danger` to make the text red. -Here's how you would do this with the "Top 3 things cats hate" element: +Here's how you would do this for the `p` element that has the text `Top 3 things cats hate`: `

Top 3 things cats hate:

` diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md index fa35d89a56..3102b61875 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md @@ -10,13 +10,13 @@ dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger Bootstrap comes with several pre-defined colors for buttons. The `btn-danger` class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo. -Create a button with the text "Delete" and give it the class `btn-danger`. +Create a button with the text `Delete` and give it the class `btn-danger`. Note that these buttons still need the `btn` and `btn-block` classes. # --hints-- -You should create a new `button` element with the text "Delete". +You should create a new `button` element with the text `Delete`. ```js assert(new RegExp('Delete', 'gi').test($('button').text())); diff --git a/curriculum/challenges/english/03-front-end-libraries/front-end-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/english/03-front-end-libraries/front-end-libraries-projects/build-a-25-5-clock.md index 0a332ee2b3..62c2136880 100644 --- a/curriculum/challenges/english/03-front-end-libraries/front-end-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/english/03-front-end-libraries/front-end-libraries-projects/build-a-25-5-clock.md @@ -34,7 +34,7 @@ You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and **User Story #10:** I can see a clickable element with a corresponding `id="reset"`. -**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to it's default state. +**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to its default state. **User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value. diff --git a/curriculum/challenges/english/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/english/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md index add89ca96a..dd645d0d81 100644 --- a/curriculum/challenges/english/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/english/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md @@ -18,13 +18,13 @@ You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and **User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`. -**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order. +**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order. **User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). **User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered. -**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string "Q", pressing the W key should trigger the drum pad which contains the string "W", etc.). +**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.). **User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique). diff --git a/curriculum/challenges/english/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/english/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.md index 4104edb075..4ff044bacb 100644 --- a/curriculum/challenges/english/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/english/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.md @@ -26,7 +26,7 @@ You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and **User Story #6:** My calculator should contain an element to display values with a corresponding `id="display"`. -**User Story #7:** At any time, pressing the clear button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`. +**User Story #7:** At any time, pressing the `clear` button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`. **User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`. @@ -36,9 +36,9 @@ You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and **User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted. -**User Story #12:** I should be able to perform any operation (+, -, \*, /) on numbers containing decimal points. +**User Story #12:** I should be able to perform any operation (`+`, `-`, `*`, `/`) on numbers containing decimal points. -**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (-) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. 5 \* 7); if `5 * - 5 =` is entered, the result should be `-25` (i.e. 5 x (-5)). +**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (`-`) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. `5 * 7`); if `5 * - 5 =` is entered, the result should be `-25` (i.e. `5 * (-5)`). **User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation. diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.md b/curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.md index 5fe49c713a..e5d188bff7 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.md @@ -34,7 +34,7 @@ You should leave your `$(document).ready(function() {` at the beginning of your assert(code.match(/\$\(document\)\.ready\(function\(\)\s?\{/g)); ``` -You should leave your "document ready function" closing `})` intact. +You should leave the `document.ready` function's closing `})` intact. ```js assert(code.match(/.*\s*\}\);/g)); 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 cd7add5572..c6af54922d 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 @@ -8,7 +8,7 @@ dashedName: target-the-children-of-an-element-using-jquery # --description-- -When HTML elements are placed one level below another they are called children of that element. For example, the button elements in this challenge with the text "#target1", "#target2", and "#target3" are all children of the `
` element. +When HTML elements are placed one level below another they are called children of that element. For example, the button elements in this challenge with the text `#target1`, `#target2`, and `#target3` are all children of the `
` element. jQuery has a function called `children()` that allows you to access the children of whichever element you've selected. diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.md index 84746e6615..65e25dbc54 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.md @@ -22,8 +22,7 @@ Add the `shake` class to all the buttons with class `.btn`. Add the `btn-primary` class to the button with id `#target1`. -**Note** -You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes `shake`, `animated`, and `btn-primary` to `#target1`. +**Note:** You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes `shake`, `animated`, and `btn-primary` to `#target1`. # --hints-- diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.md index 15ba65940a..6718ed802e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md index f286f16b2e..dfef55cdd2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/react/access-props-using-this.props.md b/curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.md index 93d96e4f8c..5fe3a39679 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.md @@ -53,7 +53,7 @@ assert( ); ``` -The `tempPassword` prop of `ReturnTempPassword` should be equal to a string of at least `8` characters. +The `tempPassword` prop of `ReturnTempPassword` should be equal to a string of at least 8 characters. ```js assert( diff --git a/curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.md b/curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.md index b1f8942c41..d49282cfe6 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.md @@ -31,7 +31,7 @@ assert( ); ``` -A keydown listener should be attached to the document in `componentDidMount`. +A `keydown` listener should be attached to the document in `componentDidMount`. ```js assert( @@ -47,7 +47,7 @@ assert( ); ``` -The keydown listener should be removed from the document in `componentWillUnmount`. +The `keydown` listener should be removed from the document in `componentWillUnmount`. ```js assert( diff --git a/curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.md b/curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.md index 90a5175310..a1fbd8e498 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.md @@ -14,7 +14,7 @@ All property value length units (like `height`, `width`, and `fontSize`) are ass # --instructions-- -If you have a large set of styles, you can assign a style `object` to a constant to keep your code organized. Initialize a `styles` constant and assign an `object` with three style properties and their values to it. Give the `div` a color of `"purple"`, a font-size of `40`, and a border of `"2px solid purple"`. Then set the `style` attribute equal to the `styles` constant. +If you have a large set of styles, you can assign a style `object` to a constant to keep your code organized. Initialize a `styles` constant and assign an `object` with three style properties and their values to it. Give the `div` a color of `purple`, a font-size of `40`, and a border of `2px solid purple`. Then set the `style` attribute equal to the `styles` constant. # --hints-- diff --git a/curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.md b/curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.md index 291e3712d7..ed61f77d7f 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.md @@ -16,7 +16,7 @@ One common way is to explicitly bind `this` in the constructor so `this` becomes # --instructions-- -The code editor has a component with a `state` that keeps track of the text. It also has a method which allows you to set the text to `"You clicked!"`. However, the method doesn't work because it's using the `this` keyword that is undefined. Fix it by explicitly binding `this` to the `handleClick()` method in the component's constructor. +The code editor has a component with a `state` that keeps track of the text. It also has a method which allows you to set the text to `You clicked!`. However, the method doesn't work because it's using the `this` keyword that is undefined. Fix it by explicitly binding `this` to the `handleClick()` method in the component's constructor. Next, add a click handler to the `button` element in the render method. It should trigger the `handleClick()` method when the button receives a click event. Remember that the method you pass to the `onClick` handler needs curly braces because it should be interpreted directly as JavaScript. @@ -48,7 +48,7 @@ assert( ); ``` -Clicking the `button` element should run the `handleClick` method and set the state `text` to `"You clicked!"`. +Clicking the `button` element should run the `handleClick` method and set the state `text` to `You clicked!`. ```js async () => { diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.md index 6abea21598..956c87a620 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.md @@ -8,7 +8,7 @@ dashedName: create-a-component-with-composition # --description-- -Now we will look at how we can compose multiple React components together. Imagine you are building an App and have created three components, a `Navbar`, `Dashboard`, and `Footer`. +Now we will look at how we can compose multiple React components together. Imagine you are building an app and have created three components: a `Navbar`, `Dashboard`, and `Footer`. To compose these components together, you could create an `App` *parent* component which renders each of these three components as *children*. To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX. For example, in the `render` method you could write: @@ -54,7 +54,7 @@ assert( ); ``` -The component should return the ChildComponent as its second child. +The component should return the `ChildComponent` as its second child. ```js assert( diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.md index 88c018d807..e38cf90ad5 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.md @@ -16,7 +16,7 @@ The code editor has the skeleton of a component called `ControlledInput` to crea First, create a method called `handleChange()` that has a parameter called `event`. When the method is called, it receives an `event` object that contains a string of text from the `input` element. You can access this string with `event.target.value` inside the method. Update the `input` property of the component's `state` with this new string. -In the render method, create the `input` element above the `h4` tag. Add a `value` attribute which is equal to the `input` property of the component's `state`. Then add an `onChange()` event handler set to the `handleChange()` method. +In the `render` method, create the `input` element above the `h4` tag. Add a `value` attribute which is equal to the `input` property of the component's `state`. Then add an `onChange()` event handler set to the `handleChange()` method. When you type in the input box, that text is processed by the `handleChange()` method, set as the `input` property in the local `state`, and rendered as the value in the `input` box on the page. The component `state` is the single source of truth regarding the input data. diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-simple-jsx-element.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-simple-jsx-element.md index ee4ee865a5..6873473687 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-simple-jsx-element.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-simple-jsx-element.md @@ -8,7 +8,7 @@ dashedName: create-a-simple-jsx-element # --description-- -**Intro:** React is an Open Source view library created and maintained by Facebook. It's a great tool to render the User Interface (UI) of modern web applications. +React is an Open Source view library created and maintained by Facebook. It's a great tool to render the User Interface (UI) of modern web applications. React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript. This has several benefits. It lets you use the full programmatic power of JavaScript within HTML, and helps to keep your code readable. For the most part, JSX is similar to the HTML that you have already learned, however there are a few key differences that will be covered throughout these challenges. @@ -20,7 +20,7 @@ It's worth noting that under the hood the challenges are calling `ReactDOM.rende # --instructions-- -**Instructions:** The current code uses JSX to assign a `div` element to the constant `JSX`. Replace the `div` with an `h1` element and add the text `Hello JSX!` inside it. +The current code uses JSX to assign a `div` element to the constant `JSX`. Replace the `div` with an `h1` element and add the text `Hello JSX!` inside it. # --hints-- diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.md index 86c86859cf..41ebc9c77b 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.md @@ -14,7 +14,7 @@ You create state in a React component by declaring a `state` property on the com ```jsx this.state = { - // describe your state here + } ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.md index b1b0925d7c..e76b742ada 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.md @@ -15,7 +15,6 @@ There are two ways to create a React component. The first way is to use a JavaSc To create a component with a function, you simply write a JavaScript function that returns either JSX or `null`. One important thing to note is that React requires your function name to begin with a capital letter. Here's an example of a stateless functional component that assigns an HTML class in JSX: ```jsx -// After being transpiled, the
will have a CSS class of 'customClass' const DemoComponent = function() { return (
@@ -23,6 +22,8 @@ const DemoComponent = function() { }; ``` +After being transpiled, the `
` will have a CSS class of `customClass`. + Because a JSX component represents HTML, you could put several components together to create a more complex HTML page. This is one of the key advantages of the component architecture React provides. It allows you to compose your UI from many separate, isolated components. This makes it easier to build and maintain complex user interfaces. # --instructions-- 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 70b4df7f92..383b912694 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 @@ -20,13 +20,13 @@ JSX elements use the `style` attribute, but because of the way JSX is transpiled `
Mellow Yellow
` -Notice how we camelCase the "fontSize" property? This is because React will not accept kebab-case keys in the style object. React will apply the correct property name for us in the HTML. +Notice how we camelCase the `fontSize` property? This is because React will not accept kebab-case keys in the style object. React will apply the correct property name for us in the HTML. # --instructions-- -Add a `style` attribute to the `div` in the code editor to give the text a color of red and font size of 72px. +Add a `style` attribute to the `div` in the code editor to give the text a color of red and font size of `72px`. -Note that you can optionally set the font size to be a number, omitting the units "px", or write it as "72px". +Note that you can optionally set the font size to be a number, omitting the units `px`, or write it as `72px`. # --hints-- diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.md b/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.md index 39a3515bb1..6607403bb8 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.md @@ -18,7 +18,7 @@ The code editor has two components that are partially defined for you: a parent First, you'll need a simple expression that randomly returns a different value every time it is run. You can use `Math.random()`. This method returns a value between `0` (inclusive) and `1` (exclusive) each time it is called. So for 50/50 odds, use `Math.random() >= .5` in your expression. Statistically speaking, this expression will return `true` 50% of the time, and `false` the other 50%. In the render method, replace `null` with the above expression to complete the variable declaration. -Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. Render the `Results` component as a child of `GameOfChance`, and pass in `expression` as a prop called `fiftyFifty`. In the `Results` component, write a ternary expression to render the `h1` element with the text `"You Win!"` or `"You Lose!"` based on the `fiftyFifty` prop that's being passed in from `GameOfChance`. Finally, make sure the `handleClick()` method is correctly counting each turn so the user knows how many times they've played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row. +Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. Render the `Results` component as a child of `GameOfChance`, and pass in `expression` as a prop called `fiftyFifty`. In the `Results` component, write a ternary expression to render the `h1` element with the text `You Win!` or `You Lose!` based on the `fiftyFifty` prop that's being passed in from `GameOfChance`. Finally, make sure the `handleClick()` method is correctly counting each turn so the user knows how many times they've played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row. # --hints-- @@ -71,7 +71,7 @@ assert.strictEqual( ); ``` -Each time the button is clicked, the counter state should be incremented by a value of 1, and a single `p` element should be rendered to the DOM that contains the text "Turn: N", where N is the value of the counter state. +Each time the button is clicked, the counter state should be incremented by a value of 1, and a single `p` element should be rendered to the DOM that contains the text `Turn: N`, where `N` is the value of the counter state. ```js (() => { diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.md b/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.md index e9a117d656..766b22bd9a 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.md @@ -12,7 +12,7 @@ Once you define a component's initial state, you can display any part of it in t If you want to access a state value within the `return` of the render method, you have to enclose the value in curly braces. -`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` 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. 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. diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.md b/curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.md index a103a21625..a6f878b2aa 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.md @@ -8,7 +8,7 @@ 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

}` @@ -73,7 +73,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/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.md b/curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.md index 6efebc2ddb..d9bccebbf2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.md +++ b/curriculum/challenges/english/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/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 2d8c9a7a2c..7a5f46d7d9 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 @@ -27,7 +27,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 +81,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/english/03-front-end-libraries/react/use-state-to-toggle-an-element.md b/curriculum/challenges/english/03-front-end-libraries/react/use-state-to-toggle-an-element.md index 534aa278e4..d4b7578928 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-state-to-toggle-an-element.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/react/write-a-simple-counter.md b/curriculum/challenges/english/03-front-end-libraries/react/write-a-simple-counter.md index cfc063e0ef..9522c78e54 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/write-a-simple-counter.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/redux/create-a-redux-store.md b/curriculum/challenges/english/03-front-end-libraries/redux/create-a-redux-store.md index 7881ad686d..4eb9227a82 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/create-a-redux-store.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/redux/define-a-redux-action.md b/curriculum/challenges/english/03-front-end-libraries/redux/define-a-redux-action.md index 0c33ade1a0..31f49e2e33 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/define-a-redux-action.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/redux/define-an-action-creator.md b/curriculum/challenges/english/03-front-end-libraries/redux/define-an-action-creator.md index 13f0f279ec..656723c9e1 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/define-an-action-creator.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/redux/get-state-from-the-redux-store.md b/curriculum/challenges/english/03-front-end-libraries/redux/get-state-from-the-redux-store.md index c7a02905de..7c348ad330 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/get-state-from-the-redux-store.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.md b/curriculum/challenges/english/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.md index 12c66b6acb..9839855204 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.md +++ b/curriculum/challenges/english/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/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 a03547ccb6..e0029a784c 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 @@ -12,7 +12,7 @@ One solution from ES6 to help enforce state immutability in Redux is the spread `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 +20,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/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.md b/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.md index 88f02b1441..0e6f582247 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.md index d84a69bbc6..0d9d13c6f0 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md b/curriculum/challenges/english/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md index fa421a0cb0..9262041c3a 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/sass/store-data-with-sass-variables.md b/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.md index 6829bc9477..2482800b00 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.md +++ b/curriculum/challenges/english/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,11 +32,11 @@ 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)); diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.md b/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.md index 963960aa09..bfdc68db55 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.md +++ b/curriculum/challenges/english/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/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md b/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md index 5192bbacba..e13d113b23 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md +++ b/curriculum/challenges/english/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));