remove misused <dfn> tags
This commit is contained in:
SomeDer
@ -8,7 +8,7 @@ forumTopicId: 301086
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
To create a CSS variable, you just need to give it a <dfn>name</dfn> with two dashes in front of it and assign it a <dfn>value</dfn> 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;
|
||||
|
||||
@ -16,7 +16,7 @@ These four values work like a clock: top, right, bottom, left, and will produce
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <dfn>Clockwise Notation</dfn> 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,8 +8,8 @@ forumTopicId: 18349
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
With CSS, there are hundreds of CSS <dfn>properties</dfn> 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 <dfn>inline CSS</dfn>, which stands for <dfn>Cascading Style Sheets</dfn>.
|
||||
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:
|
||||
|
||||
@ -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 <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:
|
||||
Inside that style block, you can create a CSS selector 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 <dfn>hex code</dfn> 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>.
|
||||
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 decimals, 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
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16814
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML has a special element for creating <dfn>unordered lists</dfn>, or bullet point style lists.
|
||||
HTML has a special element for creating unordered lists, 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 <dfn>checkboxes</dfn> for questions that may have more than one answer.
|
||||
Forms commonly use checkboxes 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 <dfn>radio buttons</dfn> for questions where you want the user to only give you one answer out of multiple options.
|
||||
You can use radio buttons 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 <dfn>ordered lists</dfn>, or numbered lists.
|
||||
HTML has another special element for creating ordered lists, 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 <dfn>lorem ipsum text</dfn> as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.
|
||||
Web developers traditionally use lorem ipsum text 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 <dfn>kitty ipsum text</dfn>.
|
||||
Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called kitty ipsum text.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -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 <dfn>code</dfn> in your <dfn>code editor</dfn>, which is embedded into this web page.
|
||||
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 <dfn>element</dfn>.
|
||||
Most HTML elements have an <dfn>opening tag</dfn> and a <dfn>closing tag</dfn>.
|
||||
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 <dfn>indexes</dfn>.
|
||||
We can access the data inside arrays using indexes.
|
||||
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,7 +8,7 @@ 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.
|
||||
There are many comparison operators 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
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301189
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<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>.
|
||||
Off by one errors (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
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16003
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
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.
|
||||
One of the simplest and most widely known ciphers is a Caesar cipher, also known as a shift cipher. 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,8 +7,8 @@ forumTopicId: 301318
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
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:
|
||||
Objects can have a special type of property, called a method.
|
||||
<dfn>Methods</dfn> 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 = {
|
||||
|
||||
@ -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 <dfn>inheritance</dfn>.
|
||||
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:
|
||||
|
||||
|
||||
@ -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 <dfn>mixins</dfn>. A mixin allows other objects to use a collection of functions.
|
||||
For unrelated objects, it's better to use mixins. A mixin allows other objects to use a collection of functions.
|
||||
|
||||
```js
|
||||
let flyMixin = function(obj) {
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301334
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
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.
|
||||
There's a principle in programming called "Don't Repeat Yourself" (DRY). 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
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301354
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
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.
|
||||
You saw how you can use character sets 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>.
|
||||
|
||||
|
||||
@ -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 <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.
|
||||
You can search for a literal pattern with some flexibility with character classes. 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
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 301360
|
||||
## Description
|
||||
<section id='description'>
|
||||
<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.
|
||||
There are two kinds of lookaheads: positive lookahead and negative lookahead.
|
||||
A <dfn>positive lookahead</dfn> 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 <dfn>negative lookahead</dfn> 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
|
||||
|
||||
@ -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 <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.
|
||||
You can search for repeat substrings using capture groups. 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:
|
||||
|
||||
|
||||
@ -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 <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.
|
||||
You can specify the lower and upper number of patterns with quantity specifiers. 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 <dfn>responsive design</dfn>.
|
||||
Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name "responsive design".
|
||||
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 <dfn>function chaining</dfn> 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 function chaining 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 dollar sign operator, or as bling.
|
||||
jQuery often selects an HTML element with a <dfn>selector</dfn>, 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 selector, 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.
|
||||
|
||||
@ -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 <dfn>inline</dfn> 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 <strong><em>inline</em></strong> 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 <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:
|
||||
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:
|
||||
|
||||
```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 <dfn>dynamically render</dfn> 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 <em><strong>dynamically render</strong></em> 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: 301457
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Sass allows <dfn>nesting</dfn> 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
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301489
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<dfn>SVG</dfn> stands for <dfn>Scalable Vector Graphics</dfn>.
|
||||
SVG stands for "Scalable Vector Graphics".
|
||||
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