From 31bdea63a2da36516fd5a6e7da8d0eddca36a2ad Mon Sep 17 00:00:00 2001 From: "Nicholas Carrigan (he/him)" Date: Thu, 25 Feb 2021 09:19:24 -0800 Subject: [PATCH] chore(learn): audit front end libraries (#41179) * chore(learn): audit bootstrap * chore(learn): audit FE projects * chore(learn): audit jQuery * chore(learn): audit React * chore(learn): audit react-redux * chore(learn): audit redux * chore(learn): audit sass * fix: apply review suggestions Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: apply non-suggestions * chore: remove comments from code Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> --- .../add-font-awesome-icons-to-all-of-our-buttons.md | 6 +++--- .../bootstrap/add-font-awesome-icons-to-our-buttons.md | 2 +- .../call-out-optional-actions-with-btn-info.md | 4 ++-- .../create-a-block-element-bootstrap-button.md | 2 +- .../bootstrap/create-a-bootstrap-button.md | 4 ++-- .../bootstrap/create-bootstrap-wells.md | 4 ++-- .../bootstrap/ditch-custom-css-for-bootstrap.md | 6 +++--- .../bootstrap/label-bootstrap-buttons.md | 2 +- .../bootstrap/use-a-span-to-target-inline-elements.md | 4 ++-- ...your-users-of-a-dangerous-action-with-btn-danger.md | 4 ++-- .../front-end-libraries-projects/build-a-25-5-clock.md | 2 +- .../build-a-drum-machine.md | 4 ++-- .../build-a-javascript-calculator.md | 6 +++--- .../jquery/delete-your-jquery-functions.md | 2 +- .../target-the-children-of-an-element-using-jquery.md | 2 +- ...-the-same-element-with-multiple-jquery-selectors.md | 3 +-- .../react-and-redux/extract-state-logic-to-redux.md | 2 +- .../use-provider-to-connect-redux-to-react.md | 2 +- .../react/access-props-using-this.props.md | 2 +- .../react/add-event-listeners.md | 4 ++-- .../react/add-inline-styles-in-react.md | 2 +- .../react/bind-this-to-a-class-method.md | 4 ++-- .../react/create-a-component-with-composition.md | 4 ++-- .../react/create-a-controlled-input.md | 2 +- .../react/create-a-simple-jsx-element.md | 4 ++-- .../react/create-a-stateful-component.md | 2 +- .../react/create-a-stateless-functional-component.md | 3 ++- .../react/introducing-inline-styles.md | 6 +++--- .../react/render-conditionally-from-props.md | 4 ++-- .../react/render-state-in-the-user-interface.md | 2 +- .../react/use--for-a-more-concise-conditional.md | 4 ++-- .../use-advanced-javascript-in-react-render-method.md | 2 +- .../use-array.filter-to-dynamically-filter-an-array.md | 4 ++-- .../react/use-state-to-toggle-an-element.md | 2 +- .../react/write-a-simple-counter.md | 2 +- .../redux/create-a-redux-store.md | 4 ++-- .../redux/define-a-redux-action.md | 4 ++-- .../redux/define-an-action-creator.md | 4 ++-- .../redux/get-state-from-the-redux-store.md | 2 +- .../use-middleware-to-handle-asynchronous-actions.md | 2 +- .../redux/use-the-spread-operator-on-arrays.md | 4 ++-- ...pply-a-style-until-a-condition-is-met-with-while.md | 10 +++++----- .../sass/create-reusable-css-with-mixins.md | 6 +++--- ...it-your-styles-into-smaller-chunks-with-partials.md | 2 -- .../sass/store-data-with-sass-variables.md | 9 ++++++--- .../sass/use-each-to-map-over-items-in-a-list.md | 2 +- .../use-if-and-else-to-add-logic-to-your-styles.md | 8 ++++---- 47 files changed, 86 insertions(+), 85 deletions(-) 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 f10b6cbaf16..9c9a200e028 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 327ccf1b3d5..87960ebd2fd 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 e0661892708..50f3b1dbd76 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 784250c7e57..9155723465e 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 2cf8ce1aff6..3014dc69319 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 6e79e8f12e2..47de1536d6e 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 543e90d7a25..76a1bffcd77 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 06e1b6f63b4..6d995aa3186 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 dfb243376e3..d025ee97e0d 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 fa35d89a563..3102b61875f 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 0a332ee2b3b..62c21368800 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 add89ca96a1..dd645d0d81f 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 4104edb0752..4ff044bacbb 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 5fe49c713a9..e5d188bff7b 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 cd7add5572d..c6af54922df 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 84746e66159..65e25dbc547 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 15ba65940aa..6718ed802e6 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 f286f16b2ee..dfef55cdd21 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 93d96e4f8c0..5fe3a39679a 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 b1f8942c410..d49282cfe6c 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 90a51753101..a1fbd8e4982 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 291e3712d7d..ed61f77d7fe 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 6abea21598d..956c87a620c 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 88c018d8079..e38cf90ad5f 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 ee4ee865a52..68734736876 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 86c86859cf1..41ebc9c77b6 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 b1b0925d7c4..e76b742adac 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 70b4df7f929..383b9126949 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 39a3515bb13..6607403bb84 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 e9a117d6564..766b22bd9a5 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 a103a216256..a6f878b2aae 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 6efebc2ddb0..d9bccebbf2f 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 2d8c9a7a2cc..7a5f46d7d93 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 534aa278e4e..d4b7578928d 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 cfc063e0efc..9522c78e54f 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 7881ad686d3..4eb9227a82a 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 0c33ade1a00..31f49e2e332 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 13f0f279ece..656723c9e15 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 c7a02905de3..7c348ad3307 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 12c66b6acb6..98398552041 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 a03547ccb61..e0029a784c2 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 88f02b1441f..0e6f582247a 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 d84a69bbc69..0d9d13c6f0b 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 fa421a0cb02..9262041c3ae 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 6829bc9477f..2482800b000 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 963960aa092..bfdc68db556 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 5192bbacbae..e13d113b23f 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));