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>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
654afae0cf
commit
31bdea63a2
@ -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 `<i class="fas fa-info-circle"></i>` within your info button element.
|
||||
You should add a `<i class="fas fa-info-circle"></i>` within your `info` button element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -30,7 +30,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should add a `<i class="fas fa-trash"></i>` within your delete button element.
|
||||
You should add a `<i class="fas fa-trash"></i>` within your `delete` button element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,7 +39,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Each of your `i` elements should have a closing tag and `<i class="fas fa-thumbs-up"></i>` is in your like button element.
|
||||
Each of your `i` elements should have a closing tag and `<i class="fas fa-thumbs-up"></i>` is in your `like` button element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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()));
|
||||
|
||||
@ -12,7 +12,7 @@ Normally, your `button` elements with the `btn` and `btn-default` classes are on
|
||||
|
||||
`<button class="btn btn-default">Submit</button>`
|
||||
|
||||
This button would only be as wide as the word "Submit".
|
||||
This button would only be as wide as the word `Submit`.
|
||||
|
||||
<button class='btn btn-default'>Submit</button>
|
||||
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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'));
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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`:
|
||||
|
||||
`<p>Top 3 things cats <span class="text-danger">hate:</span></p>`
|
||||
|
||||
|
||||
@ -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()));
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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).
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -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 <dfn>children</dfn> of that element. For example, the button elements in this challenge with the text "#target1", "#target2", and "#target3" are all children of the `<div class="well" id="left-well">` element.
|
||||
When HTML elements are placed one level below another they are called <dfn>children</dfn> of that element. For example, the button elements in this challenge with the text `#target1`, `#target2`, and `#target3` are all children of the `<div class="well" id="left-well">` element.
|
||||
|
||||
jQuery has a function called `children()` that allows you to access the children of whichever element you've selected.
|
||||
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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 () => {
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -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 <div> will have a CSS class of 'customClass'
|
||||
const DemoComponent = function() {
|
||||
return (
|
||||
<div className='customClass' />
|
||||
@ -23,6 +22,8 @@ const DemoComponent = function() {
|
||||
};
|
||||
```
|
||||
|
||||
After being transpiled, the `<div>` 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--
|
||||
|
||||
@ -20,13 +20,13 @@ JSX elements use the `style` attribute, but because of the way JSX is transpiled
|
||||
|
||||
`<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>`
|
||||
|
||||
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--
|
||||
|
||||
|
||||
@ -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
|
||||
(() => {
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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 && <p>markup</p>}`
|
||||
|
||||
@ -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('&&'));
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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
|
||||
(() => {
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: create-reusable-css-with-mixins
|
||||
|
||||
In Sass, a <dfn>mixin</dfn> 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));
|
||||
|
||||
@ -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'
|
||||
```
|
||||
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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));
|
||||
|
||||
Reference in New Issue
Block a user