fix: use dfn instead of code tag (#36640)
* Use dfn tags
* remove misused <dfn> tags
* Revert "remove misused <dfn> tags"
This reverts commit b24968a968.
* Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.english.md
Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
* Make "array" lowercase
Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
* Fix dfn usage
* Address last dfn tags
This commit is contained in:
SomeDer
Randell Dawson
@ -8,7 +8,7 @@ forumTopicId: 301044
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS treats each HTML element as its own box, which is usually referred to as the <code>CSS Box Model</code>. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the <code>normal flow</code> of a document, but CSS offers the position property to override it.
|
||||
CSS treats each HTML element as its own box, which is usually referred to as the <dfn>CSS Box Model</dfn>. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the <dfn>normal flow</dfn> of a document, but CSS offers the position property to override it.
|
||||
When the position of an element is set to <code>relative</code>, it allows you to specify how CSS should move it <i>relative</i> to its current position in the normal flow of the page. It pairs with the CSS offset properties of <code>left</code> or <code>right</code>, and <code>top</code> or <code>bottom</code>. These say how many pixels, percentages, or ems to move the item <i>away</i> from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:
|
||||
|
||||
```css
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301086
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
To create a CSS variable, you just need to give it a <code>name</code> with <code>two dashes</code> in front of it and assign it a <code>value</code> like this:
|
||||
To create a CSS variable, you just need to give it a name with two dashes in front of it and assign it a value like this:
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
|
||||
@ -14,7 +14,7 @@ There are other ways that you can override CSS. Do you remember inline styles?
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use an <code>inline style</code> to try to make our <code>h1</code> element white. Remember, in line styles look like this:
|
||||
Use an inline style to try to make our <code>h1</code> element white. Remember, in line styles look like this:
|
||||
<code><h1 style="color: green;"></code>
|
||||
Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.
|
||||
</section>
|
||||
|
||||
@ -16,7 +16,7 @@ These four values work like a clock: top, right, bottom, left, and will produce
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <code>Clockwise Notation</code> to give the element with the <code>blue-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.
|
||||
Use Clockwise Notation to give the element with the <code>blue-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 18349
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.
|
||||
When you entered <code><h2 style="color: red;">CatPhotoApp</h2></code>, you were styling that individual <code>h2</code> element with <code>inline CSS</code>, which stands for <code>Cascading Style Sheets</code>.
|
||||
That's one way to specify the style of an element, but there's a better way to apply <code>CSS</code>.
|
||||
With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.
|
||||
When you entered <code><h2 style="color: red;">CatPhotoApp</h2></code>, you were styling that individual <code>h2</code> element with inline CSS, which stands for Cascading Style Sheets.
|
||||
That's one way to specify the style of an element, but there's a better way to apply CSS.
|
||||
At the top of your code, create a <code>style</code> block like this:
|
||||
|
||||
```html
|
||||
@ -18,7 +18,7 @@ At the top of your code, create a <code>style</code> block like this:
|
||||
</style>
|
||||
```
|
||||
|
||||
Inside that style block, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, you would add a style rule that looks like this:
|
||||
Inside that style block, you can create a <dfn>CSS selector</dfn> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, you would add a style rule that looks like this:
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
@ -8,8 +8,8 @@ forumTopicId: 18350
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or <code>hex code</code> for short.
|
||||
We usually use <code>decimals</code>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <code>Hexadecimals</code> (or <code>hex</code>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in <code>hexadecimal</code>, giving us 16 total possible values. You can find more information about <a target='_blank' href='https://en.wikipedia.org/wiki/Hexadecimal'>hexadecimal numbers here</a>.
|
||||
Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short.
|
||||
We usually use <dfn>decimals</dfn>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <dfn>Hexadecimals</dfn> (or <dfn>hex</dfn>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in hexadecimal, giving us 16 total possible values. You can find more information about <a target='_blank' href='https://en.wikipedia.org/wiki/Hexadecimal'>hexadecimal numbers here</a>.
|
||||
In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, <code>#000000</code> is black and is also the lowest possible value. You can find more information about the <a target='_blank' href='https://en.wikipedia.org/wiki/RGB_color_model'>RGB color system here</a>.
|
||||
|
||||
```css
|
||||
@ -22,7 +22,7 @@ body {
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Replace the word <code>black</code> in our <code>body</code> element's background-color with its <code>hex code</code> representation, <code>#000000</code>.
|
||||
Replace the word <code>black</code> in our <code>body</code> element's background-color with its hex code representation, <code>#000000</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -15,7 +15,7 @@ To do this, just add the word "checked" to the inside of an input element. For e
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Set the first of your <code>radio button</code>s and the first of your <code>checkbox</code>es to both be checked by default.
|
||||
Set the first of your radio buttons and the first of your checkboxes to both be checked by default.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16814
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML has a special element for creating <code>unordered lists</code>, or bullet point style lists.
|
||||
HTML has a special element for creating <dfn>unordered lists</dfn>, or bullet point style lists.
|
||||
Unordered lists start with an opening <code><ul></code> element, followed by any number of <code><li></code> elements. Finally, unordered lists close with a <code></ul></code>
|
||||
For example:
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16821
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Forms commonly use <code>checkboxes</code> for questions that may have more than one answer.
|
||||
Forms commonly use <dfn>checkboxes</dfn> for questions that may have more than one answer.
|
||||
Checkboxes are a type of <code>input</code>.
|
||||
Each of your checkboxes can be nested within its own <code>label</code> element. By wrapping an <code>input</code> element inside of a <code>label</code> element it will automatically associate the checkbox input with the label element surrounding it.
|
||||
All related checkbox inputs should have the same <code>name</code> attribute.
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16822
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can use <code>radio button</code>s for questions where you want the user to only give you one answer out of multiple options.
|
||||
You can use <dfn>radio buttons</dfn> for questions where you want the user to only give you one answer out of multiple options.
|
||||
Radio buttons are a type of <code>input</code>.
|
||||
Each of your radio buttons can be nested within its own <code>label</code> element. By wrapping an <code>input</code> element inside of a <code>label</code> element it will automatically associate the radio button input with the label element surrounding it.
|
||||
All related radio buttons should have the same <code>name</code> attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16824
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML has another special element for creating <code>ordered lists</code>, or numbered lists.
|
||||
HTML has another special element for creating <dfn>ordered lists</dfn>, or numbered lists.
|
||||
Ordered lists start with an opening <code><ol></code> element, followed by any number of <code><li></code> elements. Finally, ordered lists are closed with the <code></ol></code> tag.
|
||||
|
||||
For example:
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 18178
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Web developers traditionally use <code>lorem ipsum text</code> as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.
|
||||
Web developers traditionally use <dfn>lorem ipsum text</dfn> as placeholder text. The lorem ipsum text is randomly scraped from a famous passage by Cicero of Ancient Rome.
|
||||
Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.
|
||||
Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called <code>kitty ipsum text</code>.
|
||||
Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called "kitty ipsum text".
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -15,7 +15,7 @@ This element tells the browser about the structure of your website. <code>h1</co
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add an <code>h2</code> tag that says "CatPhotoApp" to create a second HTML <code>element</code> below your "Hello World" <code>h1</code> element.
|
||||
Add an <code>h2</code> tag that says "CatPhotoApp" to create a second HTML element below your "Hello World" <code>h1</code> element.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -16,7 +16,7 @@ Then your browser will display the text <strong>"this links to freecodecamp.org"
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has "cat photos" as its <code>anchor text</code>.
|
||||
Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has "cat photos" as its anchor text.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -24,7 +24,7 @@ Create an <code>a</code> element that links to <code>http://freecatphotoapp.com<
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".
|
||||
- text: Your <code>a</code> element should have the anchor text of "cat photos".
|
||||
testString: assert((/cat photos/gi).test($("a").text()));
|
||||
- text: You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>
|
||||
testString: assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")));
|
||||
|
||||
@ -9,9 +9,9 @@ forumTopicId: 18276
|
||||
## Description
|
||||
<section id='description'>
|
||||
Welcome to freeCodeCamp's HTML coding challenges. These will walk you through web development step-by-step.
|
||||
First, you'll start by building a simple web page using HTML. You can edit <code>code</code> in your <code>code editor</code>, which is embedded into this web page.
|
||||
Do you see the code in your code editor that says <code><h1>Hello</h1></code>? That's an HTML <code>element</code>.
|
||||
Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>.
|
||||
First, you'll start by building a simple web page using HTML. You can edit code in your code editor, which is embedded into this web page.
|
||||
Do you see the code in your code editor that says <code><h1>Hello</h1></code>? That's an HTML element.
|
||||
Most HTML elements have an opening tag and a closing tag.
|
||||
Opening tags look like this:
|
||||
<code><h1></code>
|
||||
Closing tags look like this:
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16158
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
We can access the data inside arrays using <code>indexes</code>.
|
||||
We can access the data inside arrays using <dfn>indexes</dfn>.
|
||||
Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array. Like strings, arrays use <dfn>zero-based</dfn> indexing, so the first element in an array is element <code>0</code>.
|
||||
<br />
|
||||
<strong>Example</strong>
|
||||
|
||||
@ -8,8 +8,8 @@ forumTopicId: 16784
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
There are many <dfn>Comparison Operators</dfn> in JavaScript. All of these operators return a boolean <code>true</code> or <code>false</code> value.
|
||||
The most basic operator is the equality operator <code>==</code>. The equality operator compares two values and returns <code>true</code> if they're equivalent or <code>false</code> if they are not. Note that equality is different from assignment (<code>=</code>), which assigns the value at the right of the operator to a variable on the left.
|
||||
There are many <dfn>comparison operators</dfn> in JavaScript. All of these operators return a boolean <code>true</code> or <code>false</code> value.
|
||||
The most basic operator is the equality operator <code>==</code>. The equality operator compares two values and returns <code>true</code> if they're equivalent or <code>false</code> if they are not. Note that equality is different from assignment (<code>=</code>), which assigns the value at the right of the operator to a variable in the left.
|
||||
|
||||
```js
|
||||
function equalityTest(myVal) {
|
||||
@ -21,7 +21,7 @@ function equalityTest(myVal) {
|
||||
```
|
||||
|
||||
If <code>myVal</code> is equal to <code>10</code>, the equality operator returns <code>true</code>, so the code in the curly braces will execute, and the function will return <code>"Equal"</code>. Otherwise, the function will return <code>"Not Equal"</code>.
|
||||
In order for JavaScript to compare two different <code>data types</code> (for example, <code>numbers</code> and <code>strings</code>), it must convert one type to another. This is known as "Type Coercion". Once it does, however, it can compare terms as follows:
|
||||
In order for JavaScript to compare two different <dfn>data types</dfn> (for example, <code>numbers</code> and <code>strings</code>), it must convert one type to another. This is known as "Type Coercion". Once it does, however, it can compare terms as follows:
|
||||
|
||||
```js
|
||||
1 == 1 // true
|
||||
@ -34,7 +34,7 @@ In order for JavaScript to compare two different <code>data types</code> (for ex
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the <code>equality operator</code> to the indicated line so that the function will return "Equal" when <code>val</code> is equivalent to <code>12</code>.
|
||||
Add the equality operator to the indicated line so that the function will return "Equal" when <code>val</code> is equivalent to <code>12</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -23,7 +23,7 @@ Like the equality operator, greater than operator will convert data types of val
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the <code>greater than</code> operator to the indicated lines so that the return statements make sense.
|
||||
Add the greater than operator to the indicated lines so that the return statements make sense.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16785
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>greater than or equal to</code> operator (<code>>=</code>) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.
|
||||
The greater than or equal to operator (<code>>=</code>) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.
|
||||
Like the equality operator, <code>greater than or equal to</code> operator will convert data types while comparing.
|
||||
<strong>Examples</strong>
|
||||
|
||||
@ -23,7 +23,7 @@ Like the equality operator, <code>greater than or equal to</code> operator will
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the <code>greater than or equal to</code> operator to the indicated lines so that the return statements make sense.
|
||||
Add the greater than or equal to operator to the indicated lines so that the return statements make sense.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -23,7 +23,7 @@ The <dfn>less than</dfn> operator (<code><</code>) compares the values of two
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the <code>less than</code> operator to the indicated lines so that the return statements make sense.
|
||||
Add the less than operator to the indicated lines so that the return statements make sense.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16788
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>less than or equal to</code> operator (<code><=</code>) compares the values of two numbers. If the number to the left is less than or equal to the number to the right, it returns <code>true</code>. If the number on the left is greater than the number on the right, it returns <code>false</code>. Like the equality operator, <code>less than or equal to</code> converts data types.
|
||||
The less than or equal to operator (<code><=</code>) compares the values of two numbers. If the number to the left is less than or equal to the number to the right, it returns <code>true</code>. If the number on the left is greater than the number on the right, it returns <code>false</code>. Like the equality operator, <code>less than or equal to</code> converts data types.
|
||||
<strong>Examples</strong>
|
||||
|
||||
```js
|
||||
@ -23,7 +23,7 @@ The <code>less than or equal to</code> operator (<code><=</code>) compares th
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the <code>less than or equal to</code> operator to the indicated lines so that the return statements make sense.
|
||||
Add the less than or equal to operator to the indicated lines so that the return statements make sense.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -21,7 +21,7 @@ The strict inequality operator (<code>!==</code>) is the logical opposite of the
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the <code>strict inequality operator</code> to the <code>if</code> statement so the function will return "Not Equal" when <code>val</code> is not strictly equal to <code>17</code>
|
||||
Add the strict inequality operator to the <code>if</code> statement so the function will return "Not Equal" when <code>val</code> is not strictly equal to <code>17</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -9,7 +9,7 @@ forumTopicId: 18219
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can run the same code multiple times by using a loop.
|
||||
The most common type of JavaScript loop is called a <code>for loop</code> because it runs "for" a specific number of times.
|
||||
The most common type of JavaScript loop is called a <code>for</code> loop because it runs "for" a specific number of times.
|
||||
For loops are declared with three optional expressions separated by semicolons:
|
||||
<code>for ([initialization]; [condition]; [final-expression])</code>
|
||||
The <code>initialization</code> statement is executed one time only before the loop starts. It is typically used to define and setup your loop variable.
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 18247
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can also nest arrays within other arrays, like this: <code>[["Bulls", 23], ["White Sox", 45]]</code>. This is also called a <dfn>Multi-dimensional Array<dfn>.
|
||||
You can also nest arrays within other arrays, like this: <code>[["Bulls", 23], ["White Sox", 45]]</code>. This is also called a <dfn>multi-dimensional arrray<dfn>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -28,7 +28,7 @@ typeof '3' // returns 'string'
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
The <code>compareEquality</code> function in the editor compares two values using the <code>equality operator</code>. Modify the function so that it returns "Equal" only when the values are strictly equal.
|
||||
The <code>compareEquality</code> function in the editor compares two values using the equality operator. Modify the function so that it returns "Equal" only when the values are strictly equal.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,14 +8,14 @@ forumTopicId: 18341
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>Bracket notation</code> is a way to get a character at a specific <code>index</code> within a string.
|
||||
<dfn>Bracket notation</dfn> is a way to get a character at a specific <code>index</code> within a string.
|
||||
Most modern programming languages, like JavaScript, don't start counting at 1 like humans do. They start at 0. This is referred to as <dfn>Zero-based</dfn> indexing.
|
||||
For example, the character at index 0 in the word "Charles" is "C". So if <code>var firstName = "Charles"</code>, you can get the value of the first letter of the string by using <code>firstName[0]</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <dfn>bracket notation</dfn> to find the first character in the <code>lastName</code> variable and assign it to <code>firstLetterOfLastName</code>.
|
||||
Use bracket notation to find the first character in the <code>lastName</code> variable and assign it to <code>firstLetterOfLastName</code>.
|
||||
<strong>Hint</strong><br>Try looking at the <code>firstLetterOfFirstName</code> variable declaration if you get stuck.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301179
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In the previous challenge, you used a single <code>conditional operator</code>. You can also chain them together to check for multiple conditions.
|
||||
In the previous challenge, you used a single conditional operator. You can also chain them together to check for multiple conditions.
|
||||
The following function uses if, else if, and else statements to check multiple conditions:
|
||||
|
||||
```js
|
||||
@ -25,7 +25,7 @@ function findGreaterOrEqual(a, b) {
|
||||
}
|
||||
```
|
||||
|
||||
The above function can be re-written using multiple <code>conditional operators</code>:
|
||||
The above function can be re-written using multiple conditional operators:
|
||||
|
||||
```js
|
||||
function findGreaterOrEqual(a, b) {
|
||||
@ -35,7 +35,7 @@ function findGreaterOrEqual(a, b) {
|
||||
}
|
||||
```
|
||||
|
||||
However, this should be used with care as using multiple <code>conditional operators</code> without proper indentation may make your code hard to read. For example:
|
||||
However, this should be used with care as using multiple conditional operators without proper indentation may make your code hard to read. For example:
|
||||
|
||||
```js
|
||||
function findGreaterOrEqual(a, b) {
|
||||
@ -47,7 +47,7 @@ function findGreaterOrEqual(a, b) {
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use multiple <code>conditional operators</code> in the <code>checkSign</code> function to check if a number is positive, negative or zero. The function should return "positive", "negative" or "zero".
|
||||
Use multiple conditional operators in the <code>checkSign</code> function to check if a number is positive, negative or zero. The function should return "positive", "negative" or "zero".
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -55,7 +55,7 @@ Use multiple <code>conditional operators</code> in the <code>checkSign</code> fu
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>checkSign</code> should use multiple <code>conditional operators</code>
|
||||
- text: <code>checkSign</code> should use multiple conditional operators
|
||||
testString: assert(/.+?\s*?\?\s*?.+?\s*?:\s*?.+?\s*?\?\s*?.+?\s*?:\s*?.+?/gi.test(code));
|
||||
- text: <code>checkSign(10)</code> should return "positive". Note that capitalization matters
|
||||
testString: assert(checkSign(10) === 'positive');
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301189
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>Off by one errors</code> (sometimes called OBOE) crop up when you're trying to target a specific index of a string or array (to slice or access a segment), or when looping over the indices of them. JavaScript indexing starts at zero, not one, which means the last index is always one less than the length of the item. If you try to access an index equal to the length, the program may throw an "index out of range" reference error or print <code>undefined</code>.
|
||||
<dfn>Off by one errors</dfn> (sometimes called OBOE) crop up when you're trying to target a specific index of a string or array (to slice or access a segment), or when looping over the indices of them. JavaScript indexing starts at zero, not one, which means the last index is always one less than the length of the item. If you try to access an index equal to the length, the program may throw an "index out of range" reference error or print <code>undefined</code>.
|
||||
When you use string or array methods that take index ranges as arguments, it helps to read the documentation and understand if they are inclusive (the item at the given index is part of what's returned) or not. Here are some examples of off by one errors:
|
||||
|
||||
```js
|
||||
|
||||
@ -11,7 +11,7 @@ If you haven't already figured it out, the issue in the previous challenge was w
|
||||
This is a small example of a much larger pattern - you call a function on a variable, array, or an object, and the function changes the variable or something in the object.
|
||||
One of the core principles of functional programming is to not change things. Changes lead to bugs. It's easier to prevent bugs knowing that your functions don't change anything, including the function arguments or any global variable.
|
||||
The previous example didn't have any complicated operations but the <code>splice</code> method changed the original array, and resulted in a bug.
|
||||
Recall that in functional programming, changing or altering things is called <code>mutation</code>, and the outcome is called a <code>side effect</code>. A function, ideally, should be a <code>pure function</code>, meaning that it does not cause any side effects.
|
||||
Recall that in functional programming, changing or altering things is called <dfn>mutation</dfn>, and the outcome is called a <dfn>side effect</dfn>. A function, ideally, should be a <dfn>pure function</dfn>, meaning that it does not cause any side effects.
|
||||
Let's try to master this discipline and not alter any variable or object in our code.
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301229
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>Concatenation</code> means to join items end to end. JavaScript offers the <code>concat</code> method for both strings and arrays that work in the same way. For arrays, the method is called on one, then another array is provided as the argument to <code>concat</code>, which is added to the end of the first array. It returns a new array and does not mutate either of the original arrays. Here's an example:
|
||||
<dfn>Concatenation</dfn> means to join items end to end. JavaScript offers the <code>concat</code> method for both strings and arrays that work in the same way. For arrays, the method is called on one, then another array is provided as the argument to <code>concat</code>, which is added to the end of the first array. It returns a new array and does not mutate either of the original arrays. Here's an example:
|
||||
|
||||
```js
|
||||
[1, 2, 3].concat([4, 5, 6]);
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301232
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>arity</code> of a function is the number of arguments it requires. <code>Currying</code> a function means to convert a function of N <code>arity</code> into N functions of <code>arity</code> 1.
|
||||
The <dfn>arity</dfn> of a function is the number of arguments it requires. <dfn>Currying</dfn> a function means to convert a function of N arity into N functions of arity 1.
|
||||
In other words, it restructures a function so it takes one argument, then returns another function that takes the next argument, and so on.
|
||||
Here's an example:
|
||||
|
||||
@ -29,7 +29,7 @@ const curried = x => y => x + y
|
||||
curried(1)(2) // Returns 3
|
||||
```
|
||||
|
||||
This is useful in your program if you can't supply all the arguments to a function at one time. You can save each function call into a variable, which will hold the returned function reference that takes the next argument when it's available. Here's an example using the <code>curried</code> function in the example above:
|
||||
This is useful in your program if you can't supply all the arguments to a function at one time. You can save each function call into a variable, which will hold the returned function reference that takes the next argument when it's available. Here's an example using the curried function in the example above:
|
||||
|
||||
```js
|
||||
// Call a curried function in parts:
|
||||
@ -37,7 +37,7 @@ var funcForY = curried(1);
|
||||
console.log(funcForY(2)); // Prints 3
|
||||
```
|
||||
|
||||
Similarly, <code>partial application</code> can be described as applying a few arguments to a function at a time and returning another function that is applied to more arguments.
|
||||
Similarly, <dfn>partial application</dfn> can be described as applying a few arguments to a function at a time and returning another function that is applied to more arguments.
|
||||
Here's an example:
|
||||
|
||||
```js
|
||||
|
||||
@ -10,10 +10,10 @@ forumTopicId: 301240
|
||||
The FCC Team had a mood swing and now wants two types of tea: green tea and black tea. General Fact: Client mood swings are pretty common.
|
||||
With that information, we'll need to revisit the <code>getTea</code> function from last challenge to handle various tea requests. We can modify <code>getTea</code> to accept a function as a parameter to be able to change the type of tea it prepares. This makes <code>getTea</code> more flexible, and gives the programmer more control when client requests change.
|
||||
But first, let's cover some functional terminology:
|
||||
<code>Callbacks</code> are the functions that are slipped or passed into another function to decide the invocation of that function. You may have seen them passed to other methods, for example in <code>filter</code>, the callback function tells JavaScript the criteria for how to filter an array.
|
||||
Functions that can be assigned to a variable, passed into another function, or returned from another function just like any other normal value, are called <code>first class</code> functions. In JavaScript, all functions are <code>first class</code> functions.
|
||||
The functions that take a function as an argument, or return a function as a return value are called <code>higher order</code> functions.
|
||||
When the functions are passed in to another function or returned from another function, then those functions which gets passed in or returned can be called a <code>lambda</code>.
|
||||
<dfn>Callbacks</dfn> are the functions that are slipped or passed into another function to decide the invocation of that function. You may have seen them passed to other methods, for example in <code>filter</code>, the callback function tells JavaScript the criteria for how to filter an array.
|
||||
Functions that can be assigned to a variable, passed into another function, or returned from another function just like any other normal value, are called <dfn>first class</dfn> functions. In JavaScript, all functions are first class functions.
|
||||
The functions that take a function as an argument, or return a function as a return value are called <dfn>higher order</dfn> functions.
|
||||
When the functions are passed in to another function or returned from another function, then those functions which gets passed in or returned can be called a <dfn>lambda</dfn>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,7 @@ forumTopicId: 18214
|
||||
<section id='description'>
|
||||
So far we have learned to use pure functions to avoid side effects in a program. Also, we have seen the value in having a function only depend on its input arguments.
|
||||
This is only the beginning. As its name suggests, functional programming is centered around a theory of functions.
|
||||
It would make sense to be able to pass them as arguments to other functions, and return a function from another function. Functions are considered <code>First Class Objects</code> in JavaScript, which means they can be used like any other object. They can be saved in variables, stored in an object, or passed as function arguments.
|
||||
It would make sense to be able to pass them as arguments to other functions, and return a function from another function. Functions are considered <dfn>first class objects</dfn> in JavaScript, which means they can be used like any other object. They can be saved in variables, stored in an object, or passed as function arguments.
|
||||
Let's start with some simple array functions, which are methods on the array object prototype. In this exercise we are looking at <code>Array.prototype.map()</code>, or more simply <code>map</code>.
|
||||
Remember that the <code>map</code> method is a way to iterate over each item in an array. It creates a new array (without changing the original one) after applying a callback function to every element.
|
||||
</section>
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16003
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
One of the simplest and most widely known <dfn>ciphers</dfn> is a <code>Caesar cipher</code>, also known as a <code>shift cipher</code>. In a <code>shift cipher</code> the meanings of the letters are shifted by some set amount.
|
||||
One of the simplest and most widely known <dfn>ciphers</dfn> is a <dfn>Caesar cipher</dfn>, also known as a <dfn>shift cipher</dfn>. In a shift cipher the meanings of the letters are shifted by some set amount.
|
||||
A common modern use is the <a href="https://en.wikipedia.org/wiki/ROT13" target='_blank'>ROT13</a> cipher, where the values of the letters are shifted by 13 places. Thus 'A' ↔ 'N', 'B' ↔ 'O' and so on.
|
||||
Write a function which takes a <a href="https://en.wikipedia.org/wiki/ROT13" target='_blank'>ROT13</a> encoded string as input and returns a decoded string.
|
||||
All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on.
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301315
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
A constructor function that inherits its <code>prototype</code> object from a <code>supertype</code> constructor function can still have its own methods in addition to inherited methods.
|
||||
A constructor function that inherits its <code>prototype</code> object from a supertype constructor function can still have its own methods in addition to inherited methods.
|
||||
For example, <code>Bird</code> is a constructor that inherits its <code>prototype</code> from <code>Animal</code>:
|
||||
|
||||
```js
|
||||
|
||||
@ -7,10 +7,10 @@ forumTopicId: 301317
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Think about things people see everyday, like cars, shops, and birds. These are all <code>objects</code>: tangible things people can observe and interact with.
|
||||
What are some qualities of these <code>objects</code>? A car has wheels. Shops sell items. Birds have wings.
|
||||
These qualities, or <code>properties</code>, define what makes up an <code>object</code>. Note that similar <code>objects</code> share the same <code>properties</code>, but may have different values for those <code>properties</code>. For example, all cars have wheels, but not all cars have the same number of wheels.
|
||||
<code>Objects</code> in JavaScript are used to model real-world objects, giving them <code>properties</code> and behavior just like their real-world counterparts. Here's an example using these concepts to create a <code>duck</code> <code>object</code>:
|
||||
Think about things people see everyday, like cars, shops, and birds. These are all <dfn>objects</dfn>: tangible things people can observe and interact with.
|
||||
What are some qualities of these objects? A car has wheels. Shops sell items. Birds have wings.
|
||||
These qualities, or <dfn>properties</dfn>, define what makes up an object. Note that similar objects share the same properties, but may have different values for those properties. For example, all cars have wheels, but not all cars have the same number of wheels.
|
||||
Objects in JavaScript are used to model real-world objects, giving them properties and behavior just like their real-world counterparts. Here's an example using these concepts to create a <code>duck</code> object:
|
||||
|
||||
```js
|
||||
let duck = {
|
||||
@ -19,12 +19,12 @@ let duck = {
|
||||
};
|
||||
```
|
||||
|
||||
This <code>duck</code> <code>object</code> has two property/value pairs: a <code>name</code> of "Aflac" and a <code>numLegs</code> of 2.
|
||||
This <code>duck</code> object has two property/value pairs: a <code>name</code> of "Aflac" and a <code>numLegs</code> of 2.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a <code>dog</code> <code>object</code> with <code>name</code> and <code>numLegs</code> properties, and set them to a string and a number, respectively.
|
||||
Create a <code>dog</code> object with <code>name</code> and <code>numLegs</code> properties, and set them to a string and a number, respectively.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -32,7 +32,7 @@ Create a <code>dog</code> <code>object</code> with <code>name</code> and <code>n
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>dog</code> should be an <code>object</code>.
|
||||
- text: <code>dog</code> should be an object.
|
||||
testString: assert(typeof(dog) === 'object');
|
||||
- text: <code>dog</code> should have a <code>name</code> property set to a <code>string</code>.
|
||||
testString: assert(typeof(dog.name) === 'string');
|
||||
|
||||
@ -7,8 +7,8 @@ forumTopicId: 301318
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>Objects</code> can have a special type of <code>property</code>, called a <code>method</code>.
|
||||
<code>Methods</code> are <code>properties</code> that are functions. This adds different behavior to an <code>object</code>. Here is the <code>duck</code> example with a method:
|
||||
Objects can have a special type of property, called a <dfn>method</dfn>.
|
||||
Methods are properties that are functions. This adds different behavior to an object. Here is the <code>duck</code> example with a method:
|
||||
|
||||
```js
|
||||
let duck = {
|
||||
@ -20,13 +20,13 @@ duck.sayName();
|
||||
// Returns "The name of this duck is Aflac."
|
||||
```
|
||||
|
||||
The example adds the <code>sayName</code> <code>method</code>, which is a function that returns a sentence giving the name of the <code>duck</code>.
|
||||
Notice that the <code>method</code> accessed the <code>name</code> property in the return statement using <code>duck.name</code>. The next challenge will cover another way to do this.
|
||||
The example adds the <code>sayName</code> method, which is a function that returns a sentence giving the name of the <code>duck</code>.
|
||||
Notice that the method accessed the <code>name</code> property in the return statement using <code>duck.name</code>. The next challenge will cover another way to do this.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Using the <code>dog</code> <code>object</code>, give it a method called <code>sayLegs</code>. The method should return the sentence "This dog has 4 legs."
|
||||
Using the <code>dog</code> object, give it a method called <code>sayLegs</code>. The method should return the sentence "This dog has 4 legs."
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -7,8 +7,8 @@ forumTopicId: 16804
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>Constructors</code> are functions that create new objects. They define properties and behaviors that will belong to the new object. Think of them as a blueprint for the creation of new objects.
|
||||
Here is an example of a <code>constructor</code>:
|
||||
<dfn>Constructors</dfn> are functions that create new objects. They define properties and behaviors that will belong to the new object. Think of them as a blueprint for the creation of new objects.
|
||||
Here is an example of a constructor:
|
||||
|
||||
```js
|
||||
function Bird() {
|
||||
@ -18,14 +18,14 @@ function Bird() {
|
||||
}
|
||||
```
|
||||
|
||||
This <code>constructor</code> defines a <code>Bird</code> object with properties <code>name</code>, <code>color</code>, and <code>numLegs</code> set to Albert, blue, and 2, respectively.
|
||||
<code>Constructors</code> follow a few conventions:
|
||||
<ul><li><code>Constructors</code> are defined with a capitalized name to distinguish them from other functions that are not <code>constructors</code>.</li><li><code>Constructors</code> use the keyword <code>this</code> to set properties of the object they will create. Inside the <code>constructor</code>, <code>this</code> refers to the new object it will create.</li><li><code>Constructors</code> define properties and behaviors instead of returning a value as other functions might.</li></ul>
|
||||
This constructor defines a <code>Bird</code> object with properties <code>name</code>, <code>color</code>, and <code>numLegs</code> set to Albert, blue, and 2, respectively.
|
||||
Constructors follow a few conventions:
|
||||
<ul><li>Constructors are defined with a capitalized name to distinguish them from other functions that are not <code>constructors</code>.</li><li>Constructors use the keyword <code>this</code> to set properties of the object they will create. Inside the constructor, <code>this</code> refers to the new object it will create.</li><li>Constructors define properties and behaviors instead of returning a value as other functions might.</li></ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a <code>constructor</code>, <code>Dog</code>, with properties <code>name</code>, <code>color</code>, and <code>numLegs</code> that are set to a string, a string, and a number, respectively.
|
||||
Create a constructor, <code>Dog</code>, with properties <code>name</code>, <code>color</code>, and <code>numLegs</code> that are set to a string, a string, and a number, respectively.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -16,7 +16,7 @@ Animal.prototype.eat = function() {
|
||||
};
|
||||
```
|
||||
|
||||
This and the next challenge will cover how to reuse <code>Animal's</code> methods inside <code>Bird</code> and <code>Dog</code> without defining them again. It uses a technique called <code>inheritance</code>.
|
||||
This and the next challenge will cover how to reuse <code>Animal's</code> methods inside <code>Bird</code> and <code>Dog</code> without defining them again. It uses a technique called inheritance.
|
||||
This challenge covers the first step: make an instance of the <code>supertype</code> (or parent).
|
||||
You already know one way to create an instance of <code>Animal</code> using the <code>new</code> operator:
|
||||
|
||||
@ -24,7 +24,7 @@ You already know one way to create an instance of <code>Animal</code> using the
|
||||
let animal = new Animal();
|
||||
```
|
||||
|
||||
There are some disadvantages when using this syntax for <code>inheritance</code>, which are too complex for the scope of this challenge. Instead, here's an alternative approach without those disadvantages:
|
||||
There are some disadvantages when using this syntax for inheritance, which are too complex for the scope of this challenge. Instead, here's an alternative approach without those disadvantages:
|
||||
|
||||
```js
|
||||
let animal = Object.create(Animal.prototype);
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301321
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The last challenge introduced a <code>method</code> to the <code>duck</code> object. It used <code>duck.name</code> dot notation to access the value for the <code>name</code> property within the return statement:
|
||||
The last challenge introduced a method to the <code>duck</code> object. It used <code>duck.name</code> dot notation to access the value for the <code>name</code> property within the return statement:
|
||||
<code>sayName: function() {return "The name of this duck is " + duck.name + ".";}</code>
|
||||
While this is a valid way to access the object's property, there is a pitfall here. If the variable name changes, any code referencing the original name would need to be updated as well. In a short object definition, it isn't a problem, but if an object has many references to its properties there is a greater chance for error.
|
||||
A way to avoid these issues is with the <code>this</code> keyword:
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301324
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
When an object inherits its <code>prototype</code> from another object, it also inherits the <code>supertype</code>'s constructor property.
|
||||
When an object inherits its <code>prototype</code> from another object, it also inherits the supertype's constructor property.
|
||||
Here's an example:
|
||||
|
||||
```js
|
||||
|
||||
@ -7,8 +7,8 @@ forumTopicId: 301325
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In the previous challenge you saw the first step for inheriting behavior from the <code>supertype</code> (or parent) <code>Animal</code>: making a new instance of <code>Animal</code>.
|
||||
This challenge covers the next step: set the <code>prototype</code> of the <code>subtype</code> (or child)—in this case, <code>Bird</code>—to be an instance of <code>Animal</code>.
|
||||
In the previous challenge you saw the first step for inheriting behavior from the supertype (or parent) <code>Animal</code>: making a new instance of <code>Animal</code>.
|
||||
This challenge covers the next step: set the <code>prototype</code> of the subtype (or child)—in this case, <code>Bird</code>—to be an instance of <code>Animal</code>.
|
||||
|
||||
```js
|
||||
Bird.prototype = Object.create(Animal.prototype);
|
||||
|
||||
@ -16,12 +16,12 @@ A common pattern in JavaScript is to execute a function as soon as it is declare
|
||||
// Outputs "Chirp, chirp!" immediately
|
||||
```
|
||||
|
||||
Note that the function has no name and is not stored in a variable. The two parentheses () at the end of the function expression cause it to be immediately executed or invoked. This pattern is known as an <code>immediately invoked function expression</code> or <code>IIFE</code>.
|
||||
Note that the function has no name and is not stored in a variable. The two parentheses () at the end of the function expression cause it to be immediately executed or invoked. This pattern is known as an <dfn>immediately invoked function expression</dfn> or <dfn>IIFE</dfn>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Rewrite the function <code>makeNest</code> and remove its call so instead it's an anonymous <code>immediately invoked function expression</code> (<code>IIFE</code>).
|
||||
Rewrite the function <code>makeNest</code> and remove its call so instead it's an anonymous immediately invoked function expression (IIFE).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -20,7 +20,7 @@ function Bird() {
|
||||
let blueBird = new Bird();
|
||||
```
|
||||
|
||||
Notice that the <code>new</code> operator is used when calling a constructor. This tells JavaScript to create a new <code>instance</code> of <code>Bird</code> called <code>blueBird</code>. Without the <code>new</code> operator, <code>this</code> inside the constructor would not point to the newly created object, giving unexpected results.
|
||||
Notice that the <code>new</code> operator is used when calling a constructor. This tells JavaScript to create a new instance of <code>Bird</code> called <code>blueBird</code>. Without the <code>new</code> operator, <code>this</code> inside the constructor would not point to the newly created object, giving unexpected results.
|
||||
Now <code>blueBird</code> has all the properties defined inside the <code>Bird</code> constructor:
|
||||
|
||||
```js
|
||||
@ -50,7 +50,7 @@ Use the <code>Dog</code> constructor from the last lesson to create a new instan
|
||||
tests:
|
||||
- text: <code>hound</code> should be created using the <code>Dog</code> constructor.
|
||||
testString: assert(hound instanceof Dog);
|
||||
- text: Your code should use the <code>new</code> operator to create an <code>instance</code> of <code>Dog</code>.
|
||||
- text: Your code should use the <code>new</code> operator to create an instance of <code>Dog</code>.
|
||||
testString: assert(code.match(/new/g));
|
||||
|
||||
```
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301331
|
||||
## Description
|
||||
<section id='description'>
|
||||
As you have seen, behavior is shared through inheritance. However, there are cases when inheritance is not the best solution. Inheritance does not work well for unrelated objects like <code>Bird</code> and <code>Airplane</code>. They can both fly, but a <code>Bird</code> is not a type of <code>Airplane</code> and vice versa.
|
||||
For unrelated objects, it's better to use <code>mixins</code>. A <code>mixin</code> allows other objects to use a collection of functions.
|
||||
For unrelated objects, it's better to use <dfn>mixins</dfn>. A mixin allows other objects to use a collection of functions.
|
||||
|
||||
```js
|
||||
let flyMixin = function(obj) {
|
||||
@ -42,12 +42,12 @@ bird.fly(); // prints "Flying, wooosh!"
|
||||
plane.fly(); // prints "Flying, wooosh!"
|
||||
```
|
||||
|
||||
Note how the <code>mixin</code> allows for the same <code>fly</code> method to be reused by unrelated objects <code>bird</code> and <code>plane</code>.
|
||||
Note how the mixin allows for the same <code>fly</code> method to be reused by unrelated objects <code>bird</code> and <code>plane</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a <code>mixin</code> named <code>glideMixin</code> that defines a method named <code>glide</code>. Then use the <code>glideMixin</code> to give both <code>bird</code> and <code>boat</code> the ability to glide.
|
||||
Create a mixin named <code>glideMixin</code> that defines a method named <code>glide</code>. Then use the <code>glideMixin</code> to give both <code>bird</code> and <code>boat</code> the ability to glide.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301332
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
An <code>immediately invoked function expression</code> (<code>IIFE</code>) is often used to group related functionality into a single object or <code>module</code>. For example, an earlier challenge defined two mixins:
|
||||
An immediately invoked function expression (IIFE) is often used to group related functionality into a single object or <dfn>module</dfn>. For example, an earlier challenge defined two mixins:
|
||||
|
||||
```js
|
||||
function glideMixin(obj) {
|
||||
@ -22,7 +22,7 @@ function flyMixin(obj) {
|
||||
}
|
||||
```
|
||||
|
||||
We can group these <code>mixins</code> into a module as follows:
|
||||
We can group these mixins into a module as follows:
|
||||
|
||||
```js
|
||||
let motionModule = (function () {
|
||||
@ -41,8 +41,8 @@ let motionModule = (function () {
|
||||
})(); // The two parentheses cause the function to be immediately invoked
|
||||
```
|
||||
|
||||
Note that you have an <code>immediately invoked function expression</code> (<code>IIFE</code>) that returns an object <code>motionModule</code>. This returned object contains all of the <code>mixin</code> behaviors as properties of the object.
|
||||
The advantage of the <code>module</code> pattern is that all of the motion behaviors can be packaged into a single object that can then be used by other parts of your code. Here is an example using it:
|
||||
Note that you have an immediately invoked function expression (IIFE) that returns an object <code>motionModule</code>. This returned object contains all of the mixin behaviors as properties of the object.
|
||||
The advantage of the module pattern is that all of the motion behaviors can be packaged into a single object that can then be used by other parts of your code. Here is an example using it:
|
||||
|
||||
```js
|
||||
motionModule.glideMixin(duck);
|
||||
@ -53,7 +53,7 @@ duck.glide();
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a <code>module</code> named <code>funModule</code> to wrap the two <code>mixins</code> <code>isCuteMixin</code> and <code>singMixin</code>. <code>funModule</code> should return an object.
|
||||
Create a module named <code>funModule</code> to wrap the two mixins <code>isCuteMixin</code> and <code>singMixin</code>. <code>funModule</code> should return an object.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301333
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The last challenge created an <code>object</code> with various <code>properties</code>, now you'll see how to access the values of those <code>properties</code>. Here's an example:
|
||||
The last challenge created an object with various properties, now you'll see how to access the values of those properties. Here's an example:
|
||||
|
||||
```js
|
||||
let duck = {
|
||||
@ -18,12 +18,12 @@ console.log(duck.name);
|
||||
// This prints "Aflac" to the console
|
||||
```
|
||||
|
||||
Dot notation is used on the <code>object</code> name, <code>duck</code>, followed by the name of the <code>property</code>, <code>name</code>, to access the value of "Aflac".
|
||||
Dot notation is used on the object name, <code>duck</code>, followed by the name of the property, <code>name</code>, to access the value of "Aflac".
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Print both <code>properties</code> of the <code>dog</code> object to your console.
|
||||
Print both properties of the <code>dog</code> object to your console.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301334
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
There's a principle in programming called <code>Don't Repeat Yourself (DRY)</code>. The reason repeated code is a problem is because any change requires fixing code in multiple places. This usually means more work for programmers and more room for errors.
|
||||
There's a principle in programming called <dfn>Don't Repeat Yourself (DRY)</dfn>. The reason repeated code is a problem is because any change requires fixing code in multiple places. This usually means more work for programmers and more room for errors.
|
||||
Notice in the example below that the <code>describe</code> method is shared by <code>Bird</code> and <code>Dog</code>:
|
||||
|
||||
```js
|
||||
@ -26,7 +26,7 @@ Dog.prototype = {
|
||||
};
|
||||
```
|
||||
|
||||
The <code>describe</code> method is repeated in two places. The code can be edited to follow the <code>DRY</code> principle by creating a <code>supertype</code> (or parent) called <code>Animal</code>:
|
||||
The <code>describe</code> method is repeated in two places. The code can be edited to follow the DRY principle by creating a <code>supertype</code> (or parent) called <code>Animal</code>:
|
||||
|
||||
```js
|
||||
function Animal() { };
|
||||
@ -55,7 +55,7 @@ Dog.prototype = {
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
The <code>eat</code> method is repeated in both <code>Cat</code> and <code>Bear</code>. Edit the code in the spirit of <code>DRY</code> by moving the <code>eat</code> method to the <code>Animal</code> <code>supertype</code>.
|
||||
The <code>eat</code> method is repeated in both <code>Cat</code> and <code>Bear</code>. Edit the code in the spirit of DRY by moving the <code>eat</code> method to the <code>Animal</code> <code>supertype</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301337
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Anytime a constructor function creates a new object, that object is said to be an <code>instance</code> of its constructor. JavaScript gives a convenient way to verify this with the <code>instanceof</code> operator. <code>instanceof</code> allows you to compare an object to a constructor, returning <code>true</code> or <code>false</code> based on whether or not that object was created with the constructor. Here's an example:
|
||||
Anytime a constructor function creates a new object, that object is said to be an <dfn>instance</dfn> of its constructor. JavaScript gives a convenient way to verify this with the <code>instanceof</code> operator. <code>instanceof</code> allows you to compare an object to a constructor, returning <code>true</code> or <code>false</code> based on whether or not that object was created with the constructor. Here's an example:
|
||||
|
||||
```js
|
||||
let Bird = function(name, color) {
|
||||
|
||||
@ -7,10 +7,10 @@ forumTopicId: 301341
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In regular expressions, a <code>greedy</code> match finds the longest possible part of a string that fits the regex pattern and returns it as a match. The alternative is called a <code>lazy</code> match, which finds the smallest possible part of the string that satisfies the regex pattern.
|
||||
In regular expressions, a <dfn>greedy</dfn> match finds the longest possible part of a string that fits the regex pattern and returns it as a match. The alternative is called a <dfn>lazy</dfn> match, which finds the smallest possible part of the string that satisfies the regex pattern.
|
||||
You can apply the regex <code>/t[a-z]*i/</code> to the string <code>"titanic"</code>. This regex is basically a pattern that starts with <code>t</code>, ends with <code>i</code>, and has some letters in between.
|
||||
Regular expressions are by default <code>greedy</code>, so the match would return <code>["titani"]</code>. It finds the largest sub-string possible to fit the pattern.
|
||||
However, you can use the <code>?</code> character to change it to <code>lazy</code> matching. <code>"titanic"</code> matched against the adjusted regex of <code>/t[a-z]*?i/</code> returns <code>["ti"]</code>.
|
||||
Regular expressions are by default greedy, so the match would return <code>["titani"]</code>. It finds the largest sub-string possible to fit the pattern.
|
||||
However, you can use the <code>?</code> character to change it to lazy matching. <code>"titanic"</code> matched against the adjusted regex of <code>/t[a-z]*?i/</code> returns <code>["ti"]</code>.
|
||||
<strong>Note</strong><br>Parsing HTML with regular expressions should be avoided, but pattern matching an HTML string with regular expressions is completely fine.
|
||||
</section>
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ But it does not find matches in the following strings since there are no letter
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Write a <code>greedy</code> regex that finds one or more criminals within a group of other people. A criminal is represented by the capital letter <code>C</code>.
|
||||
Write a greedy regex that finds one or more criminals within a group of other people. A criminal is represented by the capital letter <code>C</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -39,19 +39,19 @@ Write a <code>greedy</code> regex that finds one or more criminals within a grou
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your regex should match <code>one</code> criminal (<code>C</code>) in <code>"C"</code>
|
||||
- text: Your regex should match one criminal (<code>C</code>) in <code>"C"</code>
|
||||
testString: assert('C'.match(reCriminals) && 'C'.match(reCriminals)[0] == 'C');
|
||||
- text: Your regex should match <code>two</code> criminals (<code>CC</code>) in <code>"CC"</code>
|
||||
- text: Your regex should match two criminals (<code>CC</code>) in <code>"CC"</code>
|
||||
testString: assert('CC'.match(reCriminals) && 'CC'.match(reCriminals)[0] == 'CC');
|
||||
- text: Your regex should match <code>three</code> criminals (<code>CCC</code>) in <code>"P1P5P4CCCP2P6P3"</code>
|
||||
- text: Your regex should match three criminals (<code>CCC</code>) in <code>"P1P5P4CCCP2P6P3"</code>
|
||||
testString: assert('P1P5P4CCCP2P6P3'.match(reCriminals) && 'P1P5P4CCCP2P6P3'.match(reCriminals)[0] == 'CCC');
|
||||
- text: Your regex should match <code>five</code> criminals (<code>CCCCC</code>) in <code>"P6P2P7P4P5CCCCCP3P1"</code>
|
||||
- text: Your regex should match five criminals (<code>CCCCC</code>) in <code>"P6P2P7P4P5CCCCCP3P1"</code>
|
||||
testString: assert('P6P2P7P4P5CCCCCP3P1'.match(reCriminals) && 'P6P2P7P4P5CCCCCP3P1'.match(reCriminals)[0] == 'CCCCC');
|
||||
- text: Your regex should not match any criminals in <code>""</code>
|
||||
testString: assert(!reCriminals.test(''));
|
||||
- text: Your regex should not match any criminals in <code>"P1P2P3"</code>
|
||||
testString: assert(!reCriminals.test('P1P2P3'));
|
||||
- text: Your regex should match <code>fifty</code> criminals (<code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code>) in <code>"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3"</code>.
|
||||
- text: Your regex should match fifty criminals (<code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code>) in <code>"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3"</code>.
|
||||
testString: assert('P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match(reCriminals) && 'P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match(reCriminals)[0] == "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC");
|
||||
|
||||
```
|
||||
|
||||
@ -21,7 +21,7 @@ longHand.test(varNames); // Returns true
|
||||
shortHand.test(varNames); // Returns true
|
||||
```
|
||||
|
||||
These shortcut character classes are also known as <code>shorthand character classes</code>.
|
||||
These shortcut character classes are also known as <dfn>shorthand character classes</dfn>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301349
|
||||
## Description
|
||||
<section id='description'>
|
||||
Prior challenges showed that regular expressions can be used to look for a number of matches. They are also used to search for patterns in specific positions in strings.
|
||||
In an earlier challenge, you used the <code>caret</code> character (<code>^</code>) inside a <code>character set</code> to create a <code>negated character set</code> in the form <code>[^thingsThatWillNotBeMatched]</code>. Outside of a <code>character set</code>, the <code>caret</code> is used to search for patterns at the beginning of strings.
|
||||
In an earlier challenge, you used the caret character (<code>^</code>) inside a character set to create a negated character set in the form <code>[^thingsThatWillNotBeMatched]</code>. Outside of a character set, the caret is used to search for patterns at the beginning of strings.
|
||||
|
||||
```js
|
||||
let firstString = "Ricky is first and can be found.";
|
||||
@ -24,7 +24,7 @@ firstRegex.test(notFirst);
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use the <code>caret</code> character in a regex to find <code>"Cal"</code> only in the beginning of the string <code>rickyAndCal</code>.
|
||||
Use the caret character in a regex to find <code>"Cal"</code> only in the beginning of the string <code>rickyAndCal</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301351
|
||||
## Description
|
||||
<section id='description'>
|
||||
The last challenge used the plus <code>+</code> sign to look for characters that occur one or more times. There's also an option that matches characters that occur zero or more times.
|
||||
The character to do this is the <code>asterisk</code> or <code>star</code>: <code>*</code>.
|
||||
The character to do this is the asterisk or star: <code>*</code>.
|
||||
|
||||
```js
|
||||
let soccerWord = "gooooooooal!";
|
||||
|
||||
@ -7,8 +7,8 @@ forumTopicId: 301352
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In the last challenge, you learned to use the <code>caret</code> character to search for patterns at the beginning of strings. There is also a way to search for patterns at the end of strings.
|
||||
You can search the end of strings using the <code>dollar sign</code> character <code>$</code> at the end of the regex.
|
||||
In the last challenge, you learned to use the caret character to search for patterns at the beginning of strings. There is also a way to search for patterns at the end of strings.
|
||||
You can search the end of strings using the dollar sign character <code>$</code> at the end of the regex.
|
||||
|
||||
```js
|
||||
let theEnding = "This is a never ending story";
|
||||
|
||||
@ -7,8 +7,8 @@ forumTopicId: 301354
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You saw how you can use <code>character sets</code> to specify a group of characters to match, but that's a lot of typing when you need to match a large range of characters (for example, every letter in the alphabet). Fortunately, there is a built-in feature that makes this short and simple.
|
||||
Inside a <code>character set</code>, you can define a range of characters to match using a <code>hyphen</code> character: <code>-</code>.
|
||||
You saw how you can use <dfn>character sets</dfn> to specify a group of characters to match, but that's a lot of typing when you need to match a large range of characters (for example, every letter in the alphabet). Fortunately, there is a built-in feature that makes this short and simple.
|
||||
Inside a character set, you can define a range of characters to match using a hyphen character: <code>-</code>.
|
||||
For example, to match lowercase letters <code>a</code> through <code>e</code> you would use <code>[a-e]</code>.
|
||||
|
||||
```js
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301357
|
||||
## Description
|
||||
<section id='description'>
|
||||
You learned how to match literal patterns (<code>/literal/</code>) and wildcard character (<code>/./</code>). Those are the extremes of regular expressions, where one finds exact matches and the other matches everything. There are options that are a balance between the two extremes.
|
||||
You can search for a literal pattern with some flexibility with <code>character classes</code>. Character classes allow you to define a group of characters you wish to match by placing them inside square (<code>[</code> and <code>]</code>) brackets.
|
||||
You can search for a literal pattern with some flexibility with <dfn>character classes</dfn>. Character classes allow you to define a group of characters you wish to match by placing them inside square (<code>[</code> and <code>]</code>) brackets.
|
||||
For example, you want to match <code>"bag"</code>, <code>"big"</code>, and <code>"bug"</code> but not <code>"bog"</code>. You can create the regex <code>/b[aiu]g/</code> to do this. The <code>[aiu]</code> is the character class that will only match the characters <code>"a"</code>, <code>"i"</code>, or <code>"u"</code>.
|
||||
|
||||
```js
|
||||
|
||||
@ -7,8 +7,8 @@ forumTopicId: 301358
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
So far, you have created a set of characters that you want to match, but you could also create a set of characters that you do not want to match. These types of character sets are called <code>negated character sets</code>.
|
||||
To create a <code>negated character set</code>, you place a <code>caret</code> character (<code>^</code>) after the opening bracket and before the characters you do not want to match.
|
||||
So far, you have created a set of characters that you want to match, but you could also create a set of characters that you do not want to match. These types of character sets are called <dfn>negated character sets</dfn>.
|
||||
To create a negated character set, you place a caret character (<code>^</code>) after the opening bracket and before the characters you do not want to match.
|
||||
For example, <code>/[^aeiou]/gi</code> matches all characters that are not a vowel. Note that characters like <code>.</code>, <code>!</code>, <code>[</code>, <code>@</code>, <code>/</code> and white space are matched - the negated vowel character set only excludes the vowel characters.
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,10 +7,10 @@ forumTopicId: 301360
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>Lookaheads</code> are patterns that tell JavaScript to look-ahead in your string to check for patterns further along. This can be useful when you want to search for multiple patterns over the same string.
|
||||
There are two kinds of <code>lookaheads</code>: <code>positive lookahead</code> and <code>negative lookahead</code>.
|
||||
A <code>positive lookahead</code> will look to make sure the element in the search pattern is there, but won't actually match it. A positive lookahead is used as <code>(?=...)</code> where the <code>...</code> is the required part that is not matched.
|
||||
On the other hand, a <code>negative lookahead</code> will look to make sure the element in the search pattern is not there. A negative lookahead is used as <code>(?!...)</code> where the <code>...</code> is the pattern that you do not want to be there. The rest of the pattern is returned if the negative lookahead part is not present.
|
||||
<dfn>Lookaheads</dfn> are patterns that tell JavaScript to look-ahead in your string to check for patterns further along. This can be useful when you want to search for multiple patterns over the same string.
|
||||
There are two kinds of lookaheads: <dfn>positive lookahead</dfn> and <dfn>negative lookahead</dfn>.
|
||||
A positive lookahead will look to make sure the element in the search pattern is there, but won't actually match it. A positive lookahead is used as <code>(?=...)</code> where the <code>...</code> is the required part that is not matched.
|
||||
On the other hand, a negative lookahead will look to make sure the element in the search pattern is not there. A negative lookahead is used as <code>(?!...)</code> where the <code>...</code> is the pattern that you do not want to be there. The rest of the pattern is returned if the negative lookahead part is not present.
|
||||
Lookaheads are a bit confusing but some examples will help.
|
||||
|
||||
```js
|
||||
@ -22,7 +22,7 @@ quit.match(quRegex); // Returns ["q"]
|
||||
noquit.match(qRegex); // Returns ["q"]
|
||||
```
|
||||
|
||||
A more practical use of <code>lookaheads</code> is to check two or more patterns in one string. Here is a (naively) simple password checker that looks for between 3 and 6 characters and at least one number:
|
||||
A more practical use of lookaheads is to check two or more patterns in one string. Here is a (naively) simple password checker that looks for between 3 and 6 characters and at least one number:
|
||||
|
||||
```js
|
||||
let password = "abc123";
|
||||
@ -34,7 +34,7 @@ checkPass.test(password); // Returns true
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <code>lookaheads</code> in the <code>pwRegex</code> to match passwords that are greater than 5 characters long, do not begin with numbers, and have two consecutive digits.
|
||||
Use lookaheads in the <code>pwRegex</code> to match passwords that are greater than 5 characters long, do not begin with numbers, and have two consecutive digits.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301364
|
||||
## Description
|
||||
<section id='description'>
|
||||
Some patterns you search for will occur multiple times in a string. It is wasteful to manually repeat that regex. There is a better way to specify when you have multiple repeat substrings in your string.
|
||||
You can search for repeat substrings using <code>capture groups</code>. Parentheses, <code>(</code> and <code>)</code>, are used to find repeat substrings. You put the regex of the pattern that will repeat in between the parentheses.
|
||||
You can search for repeat substrings using <dfn>capture groups</dfn>. Parentheses, <code>(</code> and <code>)</code>, are used to find repeat substrings. You put the regex of the pattern that will repeat in between the parentheses.
|
||||
To specify where that repeat string will appear, you use a backslash (<code>\</code>) and then a number. This number starts at 1 and increases with each additional capture group you use. An example would be <code>\1</code> to match the first group.
|
||||
The example below matches any word that occurs twice separated by a space:
|
||||
|
||||
@ -24,7 +24,7 @@ Using the <code>.match()</code> method on a string will return an array with the
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <code>capture groups</code> in <code>reRegex</code> to match numbers that are repeated only three times in a string, each separated by a space.
|
||||
Use capture groups in <code>reRegex</code> to match numbers that are repeated only three times in a string, each separated by a space.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301365
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can specify the lower and upper number of patterns with <code>quantity specifiers</code> using curly brackets. Sometimes you only want a specific number of matches.
|
||||
You can specify the lower and upper number of patterns with quantity specifiers using curly brackets. Sometimes you only want a specific number of matches.
|
||||
To specify a certain number of patterns, just have that one number between the curly brackets.
|
||||
For example, to match only the word <code>"hah"</code> with the letter <code>a</code> <code>3</code> times, your regex would be <code>/ha{3}h/</code>.
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301366
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can specify the lower and upper number of patterns with <code>quantity specifiers</code> using curly brackets. Sometimes you only want to specify the lower number of patterns with no upper limit.
|
||||
You can specify the lower and upper number of patterns with quantity specifiers using curly brackets. Sometimes you only want to specify the lower number of patterns with no upper limit.
|
||||
To only specify the lower number of patterns, keep the first number followed by a comma.
|
||||
For example, to match only the string <code>"hah"</code> with the letter <code>a</code> appearing at least <code>3</code> times, your regex would be <code>/ha{3,}h/</code>.
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301367
|
||||
## Description
|
||||
<section id='description'>
|
||||
Recall that you use the plus sign <code>+</code> to look for one or more characters and the asterisk <code>*</code> to look for zero or more characters. These are convenient but sometimes you want to match a certain range of patterns.
|
||||
You can specify the lower and upper number of patterns with <code>quantity specifiers</code>. Quantity specifiers are used with curly brackets (<code>{</code> and <code>}</code>). You put two numbers between the curly brackets - for the lower and upper number of patterns.
|
||||
You can specify the lower and upper number of patterns with <dfn>quantity specifiers</dfn>. Quantity specifiers are used with curly brackets (<code>{</code> and <code>}</code>). You put two numbers between the curly brackets - for the lower and upper number of patterns.
|
||||
For example, to match only the letter <code>a</code> appearing between <code>3</code> and <code>5</code> times in the string <code>"ah"</code>, your regex would be <code>/a{3,5}h/</code>.
|
||||
|
||||
```js
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 18362
|
||||
## Description
|
||||
<section id='description'>
|
||||
In the HTML5 and CSS section of freeCodeCamp we built a Cat Photo App. Now let's go back to it. This time, we'll style it using the popular Bootstrap responsive CSS framework.
|
||||
Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <code>Responsive Design</code>.
|
||||
Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <dfn>responsive design</dfn>.
|
||||
With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.
|
||||
You can add Bootstrap to any app by adding the following code to the top of your HTML:
|
||||
<code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/></code>
|
||||
|
||||
@ -11,7 +11,7 @@ In addition to moving elements, you can also copy them from one place to another
|
||||
jQuery has a function called <code>clone()</code> that makes a copy of an element.
|
||||
For example, if we wanted to copy <code>target2</code> from our <code>left-well</code> to our <code>right-well</code>, we would use:
|
||||
<code>$("#target2").clone().appendTo("#right-well");</code>
|
||||
Did you notice this involves sticking two jQuery functions together? This is called <code>function chaining</code> and it's a convenient way to get things done with jQuery.
|
||||
Did you notice this involves sticking two jQuery functions together? This is called <dfn>function chaining</dfn> and it's a convenient way to get things done with jQuery.
|
||||
Clone your <code>target5</code> element and append it to your <code>left-well</code>.
|
||||
</section>
|
||||
|
||||
|
||||
@ -10,8 +10,8 @@ forumTopicId: 18319
|
||||
## Description
|
||||
<section id='description'>
|
||||
Now we have a <code>document ready function</code>.
|
||||
Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a <code>dollar sign operator</code>, or as <code>bling</code>.
|
||||
jQuery often selects an HTML element with a <code>selector</code>, then does something to that element.
|
||||
Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a dollar sign operator, or as bling.
|
||||
jQuery often selects an HTML element with a <dfn>selector</dfn>, then does something to that element.
|
||||
For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your document ready function:
|
||||
<code>$("button").addClass("animated bounce");</code>
|
||||
Note that we've already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css <code>bounce</code> class to your <code>button</code> elements.
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 18320
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
When HTML elements are placed one level below another they are called <code>children</code> of that element. For example, the button elements in this challenge with the text "#target1", "#target2", and "#target3" are all <code>children</code> of the <code><div class="well" id="left-well"></code> 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 <code><div class="well" id="left-well"></code> element.
|
||||
jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.
|
||||
Here's an example of how you would use the <code>children()</code> function to give the children of your <code>left-well</code> element the color <code>blue</code>:
|
||||
<code>$("#left-well").children().css("color", "blue")</code>
|
||||
|
||||
@ -9,7 +9,7 @@ forumTopicId: 301395
|
||||
## Description
|
||||
<section id='description'>
|
||||
There are other complex concepts that add powerful capabilities to your React code. But you may be wondering about the more simple problem of how to style those JSX elements you create in React. You likely know that it won't be exactly the same as working with HTML because of <a target="_blank" href="learn/front-end-libraries/react/define-an-html-class-in-jsx"> the way you apply classes to JSX elements</a>.
|
||||
If you import styles from a stylesheet, it isn't much different at all. You apply a class to your JSX element using the <code>className</code> attribute, and apply styles to the class in your stylesheet. Another option is to apply <strong><em>inline</em></strong> styles, which are very common in ReactJS development.
|
||||
If you import styles from a stylesheet, it isn't much different at all. You apply a class to your JSX element using the <code>className</code> attribute, and apply styles to the class in your stylesheet. Another option is to apply inline styles, which are very common in ReactJS development.
|
||||
You apply inline styles to JSX elements similar to how you do it in HTML, but with a few JSX differences. Here's an example of an inline style in HTML:
|
||||
<code><div style="color: yellow; font-size: 16px">Mellow Yellow</div></code>
|
||||
JSX elements use the <code>style</code> attribute, but because of the way JSX is transpiled, you can't set the value to a <code>string</code>. Instead, you set it equal to a JavaScript <code>object</code>. Here's an example:
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301414
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Before moving on to dynamic rendering techniques, there's one last way to use built-in JavaScript conditionals to render what you want: the <em><strong>ternary operator</strong></em>. The ternary operator is often utilized as a shortcut for <code>if/else</code> statements in JavaScript. They're not quite as robust as traditional <code>if/else</code> statements, but they are very popular among React developers. One reason for this is because of how JSX is compiled, <code>if/else</code> statements can't be inserted directly into JSX code. You might have noticed this a couple challenges ago — when an <code>if/else</code> statement was required, it was always <em>outside</em> the <code>return</code> statement. Ternary expressions can be an excellent alternative if you want to implement conditional logic within your JSX. Recall that a ternary operator has three parts, but you can combine several ternary expressions together. Here's the basic syntax:
|
||||
Before moving on to dynamic rendering techniques, there's one last way to use built-in JavaScript conditionals to render what you want: the <dfn>ternary operator</dfn>. The ternary operator is often utilized as a shortcut for <code>if/else</code> statements in JavaScript. They're not quite as robust as traditional <code>if/else</code> statements, but they are very popular among React developers. One reason for this is because of how JSX is compiled, <code>if/else</code> statements can't be inserted directly into JSX code. You might have noticed this a couple challenges ago — when an <code>if/else</code> statement was required, it was always <em>outside</em> the <code>return</code> statement. Ternary expressions can be an excellent alternative if you want to implement conditional logic within your JSX. Recall that a ternary operator has three parts, but you can combine several ternary expressions together. Here's the basic syntax:
|
||||
|
||||
```js
|
||||
condition ? expressionIfTrue : expressionIfFalse
|
||||
|
||||
@ -9,7 +9,7 @@ forumTopicId: 301417
|
||||
## Description
|
||||
<section id='description'>
|
||||
Conditional rendering is useful, but you may need your components to render an unknown number of elements. Often in reactive programming, a programmer has no way to know what the state of an application is until runtime, because so much depends on a user's interaction with that program. Programmers need to write their code to correctly handle that unknown state ahead of time. Using <code>Array.map()</code> in React illustrates this concept.
|
||||
For example, you create a simple "To Do List" app. As the programmer, you have no way of knowing how many items a user might have on their list. You need to set up your component to <em><strong>dynamically render</strong></em> the correct number of list elements long before someone using the program decides that today is laundry day.
|
||||
For example, you create a simple "To Do List" app. As the programmer, you have no way of knowing how many items a user might have on their list. You need to set up your component to dynamically render the correct number of list elements long before someone using the program decides that today is laundry day.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301455
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In Sass, a <code>mixin</code> is a group of CSS declarations that can be reused throughout the style sheet.
|
||||
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":
|
||||
|
||||
```scss
|
||||
@ -20,7 +20,7 @@ div {
|
||||
```
|
||||
|
||||
It's a lot of typing to re-write this rule for all the elements that have a <code>box-shadow</code>, or to change each value to test different effects.
|
||||
<code>Mixins</code> are like functions for CSS. Here is how to write one:
|
||||
Mixins are like functions for CSS. Here is how to write one:
|
||||
|
||||
```scss
|
||||
@mixin box-shadow($x, $y, $blur, $c){
|
||||
@ -32,7 +32,7 @@ It's a lot of typing to re-write this rule for all the elements that have a <cod
|
||||
```
|
||||
|
||||
The definition starts with <code>@mixin</code> followed by a custom name. The parameters (the <code>$x</code>, <code>$y</code>, <code>$blur</code>, and <code>$c</code> in the example above) are optional.
|
||||
Now any time a <code>box-shadow</code> rule is needed, only a single line calling the <code>mixin</code> replaces having to type all the vendor prefixes. A <code>mixin</code> is called with the <code>@include</code> directive:
|
||||
Now any time a <code>box-shadow</code> rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the <code>@include</code> directive:
|
||||
|
||||
```scss
|
||||
div {
|
||||
@ -44,7 +44,7 @@ div {
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Write a <code>mixin</code> for <code>border-radius</code> and give it a <code>$radius</code> parameter. It should use all the vendor prefixes from the example. Then use the <code>border-radius</code> <code>mixin</code> to give the <code>#awesome</code> element a border radius of 15px.
|
||||
Write a mixin for <code>border-radius</code> and give it a <code>$radius</code> parameter. It should use all the vendor prefixes from the example. Then use the <code>border-radius</code> mixin to give the <code>#awesome</code> element a border radius of 15px.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -52,7 +52,7 @@ Write a <code>mixin</code> for <code>border-radius</code> and give it a <code>$r
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your code should declare a <code>mixin</code> named <code>border-radius</code> which has a parameter named <code>$radius</code>.
|
||||
- text: Your code should declare a mixin named <code>border-radius</code> which has a parameter named <code>$radius</code>.
|
||||
testString: assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
|
||||
- text: Your code should include the <code>-webkit-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.
|
||||
testString: assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi));
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301457
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Sass allows <code>nesting</code> of CSS rules, which is a useful way of organizing a style sheet.
|
||||
Sass allows nesting of CSS rules, which is a useful way of organizing a style sheet.
|
||||
Normally, each element is targeted on a different line to style it, like so:
|
||||
|
||||
```scss
|
||||
@ -24,7 +24,7 @@ nav ul li {
|
||||
}
|
||||
```
|
||||
|
||||
For a large project, the CSS file will have many lines and rules. This is where <code>nesting</code> can help organize your code by placing child style rules within the respective parent elements:
|
||||
For a large project, the CSS file will have many lines and rules. This is where nesting can help organize your code by placing child style rules within the respective parent elements:
|
||||
|
||||
```scss
|
||||
nav {
|
||||
@ -45,7 +45,7 @@ nav {
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use the <code>nesting</code> technique shown above to re-organize the CSS rules for both children of <code>.blog-post</code> element. For testing purposes, the <code>h1</code> should come before the <code>p</code> element.
|
||||
Use the nesting technique shown above to re-organize the CSS rules for both children of <code>.blog-post</code> element. For testing purposes, the <code>h1</code> should come before the <code>p</code> element.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -7,9 +7,9 @@ forumTopicId: 301459
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>Partials</code> in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.
|
||||
Names for <code>partials</code> start with the underscore (<code>_</code>) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the <code>.scss</code> file extension. To bring the code in the <code>partial</code> into another Sass file, use the <code>@import</code> directive.
|
||||
For example, if all your <code>mixins</code> are saved in a <code>partial</code> named "_mixins.scss", and they are needed in the "main.scss" file, this is how to use them in the main file:
|
||||
<dfn>Partials</dfn> in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.
|
||||
Names for partials start with the underscore (<code>_</code>) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the <code>.scss</code> file extension. To bring the code in the partial into another Sass file, use the <code>@import</code> directive.
|
||||
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
|
||||
@ -17,12 +17,12 @@ For example, if all your <code>mixins</code> are saved in a <code>partial</code>
|
||||
@import 'mixins'
|
||||
```
|
||||
|
||||
Note that the underscore and file extension are not needed in the <code>import</code> statement - Sass understands it is a <code>partial</code>. Once a <code>partial</code> is imported into a file, all variables, <code>mixins</code>, and other code are available to use.
|
||||
Note that the underscore and file extension are not needed in the <code>import</code> statement - Sass understands it is a partial. Once a partial is imported into a file, all variables, mixins, and other code are available to use.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Write an <code>@import</code> statement to import a <code>partial</code> named <code>_variables.scss</code> into the main.scss file.
|
||||
Write an <code>@import</code> statement to import a partial named <code>_variables.scss</code> into the main.scss file.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -40,7 +40,7 @@ And just like in JavaScript, <code>@else if</code> and <code>@else</code> test f
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a <code>mixin</code> called <code>border-stroke</code> that takes a parameter <code>$val</code>. The <code>mixin</code> should check for the following conditions using <code>@if</code>, <code>@else if</code>, and <code>@else</code>:
|
||||
Create a mixin called <code>border-stroke</code> that takes a parameter <code>$val</code>. The mixin should check for the following conditions using <code>@if</code>, <code>@else if</code>, and <code>@else</code>:
|
||||
|
||||
```scss
|
||||
light - 1px solid black
|
||||
@ -56,15 +56,15 @@ If <code>$val</code> is not <code>light</code>, <code>medium</code>, or <code>he
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your code should declare a <code>mixin</code> named <code>border-stroke</code> which has a parameter named <code>$val</code>.
|
||||
- text: Your code should declare a mixin named <code>border-stroke</code> which has a parameter named <code>$val</code>.
|
||||
testString: assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
|
||||
- text: Your <code>mixin</code> should have an <code>@if</code> statement to check if <code>$val</code> is light, and to set the <code>border</code> to 1px solid black.
|
||||
- text: Your mixin should have an <code>@if</code> statement to check if <code>$val</code> is light, and to set the <code>border</code> to 1px solid black.
|
||||
testString: assert(code.match(/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi));
|
||||
- text: Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is medium, and to set the <code>border</code> to 3px solid black.
|
||||
- text: Your mixin should have an <code>@else if</code> statement to check if <code>$val</code> is medium, and to set the <code>border</code> to 3px solid black.
|
||||
testString: assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi));
|
||||
- text: Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is heavy, and to set the <code>border</code> to 6px solid black.
|
||||
- text: Your mixin should have an <code>@else if</code> statement to check if <code>$val</code> is heavy, and to set the <code>border</code> to 6px solid black.
|
||||
testString: assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi));
|
||||
- text: Your <code>mixin</code> should have an <code>@else</code> statement to set the <code>border</code> to none.
|
||||
- text: Your mixin should have an <code>@else</code> statement to set the <code>border</code> to none.
|
||||
testString: assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301489
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
SVG stands for <code>Scalable Vector Graphics</code>.
|
||||
<dfn>SVG</dfn> stands for <dfn>Scalable Vector Graphics</dfn>.
|
||||
Here "scalable" means that, if you zoom in or out on an object, it would not appear pixelated. It scales with the display system, whether it's on a small mobile screen or a large TV monitor.
|
||||
SVG is used to make common geometric shapes. Since D3 maps data into a visual representation, it uses SVG to create the shapes for the visualization. SVG shapes for a web page must go within an HTML <code>svg</code> tag.
|
||||
CSS can be scalable when styles use relative units (such as <code>vh</code>, <code>vw</code>, or percentages), but using SVG is more flexible to build data visualizations.
|
||||
|
||||
Reference in New Issue
Block a user