Merge pull request #6175 from erictleung/fix/multi-line-code-block-tags
Replace multi-line code block tags with blockquote
This commit is contained in:
Rex Schrader
@ -104,8 +104,7 @@
|
||||
"<code>myVariable = 5;</code>",
|
||||
"Assigns the <code>Number</code> value <code>5</code> to <code>myVariable</code>.",
|
||||
"Assignment always goes from right to left. Everything to the right of the <code>=</code> operator is resolved before the value is assigned to the variable to the left of the operator.",
|
||||
"<code>myVar = 5;</code>",
|
||||
"<code>myNum = myVar;</code>",
|
||||
"<blockquote>myVar = 5;<br>myNum = myVar;</blockquote>",
|
||||
"Assigns <code>5</code> to <code>myVar</code> and then resolves <code>myVar</code> to <code>5</code> again and assigns it to <code>myNum</code>.",
|
||||
"<h4>Instructions</h4>",
|
||||
"Assign the value <code>7</code> to variable <code>a</code>.",
|
||||
@ -1487,9 +1486,7 @@
|
||||
"description": [
|
||||
"An easy way to append data to the end of an array is via the <code>push()</code> function.",
|
||||
"<code>.push()</code> takes one or more <dfn>parameter</dfn> and \"pushes\" it onto the end of the array.",
|
||||
"<code>var arr = [1,2,3];</code>",
|
||||
"<code>arr.push(4);</code>",
|
||||
"<code>// arr is now [1,2,3,4]</code>",
|
||||
"<blockquote>var arr = [1,2,3];<br>arr.push(4);<br>// arr is now [1,2,3,4]</blockquote>",
|
||||
"<h4>Instructions</h4>",
|
||||
"Push <code>[\"dog\", 3]</code> onto the end of the <code>myArray</code> variable."
|
||||
],
|
||||
|
||||
@ -315,12 +315,9 @@
|
||||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, you were giving that individual <code>h2</code> element an <code>inline style</code>.",
|
||||
"That's one way to add style to an element, but a better way is by using <code>CSS</code>, which stands for <code>Cascading Style Sheets</code>.",
|
||||
"At the top of your code, create a <code>style</code> element like this:",
|
||||
"<code><style></code>",
|
||||
"<code></style></code>",
|
||||
"<blockquote><style><br></style></blockquote>",
|
||||
"Inside that style element, 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, your style element would look like this:",
|
||||
"<code><style></code>",
|
||||
" <code>h2 {color: red;}</code>",
|
||||
"<code></style></code>",
|
||||
"<blockquote><style><br> h2 {color: red;}<br></style></blockquote>",
|
||||
"Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles.",
|
||||
"Delete your <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue."
|
||||
],
|
||||
@ -368,11 +365,7 @@
|
||||
"description": [
|
||||
"Classes are reusable styles that can be added to HTML elements.",
|
||||
"Here's an example CSS class declaration:",
|
||||
"<code><style></code>",
|
||||
"<code> .blue-text {</code>",
|
||||
"<code> color: blue;</code>",
|
||||
"<code> }</code>",
|
||||
"<code></style></code>",
|
||||
"<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>",
|
||||
"You can see that we've created a CSS class called <code>blue-text</code> within the <code><style></code> tag.",
|
||||
"You can apply a class to an HTML element like this:",
|
||||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||||
@ -433,9 +426,7 @@
|
||||
"description": [
|
||||
"Remember that you can attach classes to HTML elements by using <code>class=\"your-class-here\"</code> within the relevant element's opening tag.",
|
||||
"Remember that CSS class selectors require a period at the beginning like this:",
|
||||
"<code>.blue-text {</code>",
|
||||
"<code> color: blue;</code>",
|
||||
"<code>}</code>",
|
||||
"<blockquote>.blue-text {<br> color: blue;<br>}</blockquote>",
|
||||
"But also remember that class declarations don't use a period, like this:",
|
||||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||||
"Apply the <code>red-text</code> class to your <code>h2</code> and <code>p</code> elements."
|
||||
@ -482,9 +473,7 @@
|
||||
"id": "bad87fee1348bd9aedf08806",
|
||||
"description": [
|
||||
"Font size is controlled by the <code>font-size</code> CSS property, like this:",
|
||||
"<code>h1 {</code>",
|
||||
"<code> font-size: 30px;</code>",
|
||||
"<code>}</code>",
|
||||
"<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>",
|
||||
"Create a second <code>p</code> element with the following kitty ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||||
"Inside the same <code><style></code> tag that we created for your <code>red-text</code> class, set the <code>font-size</code> of all <code>p</code> elements to 16 pixels (<code>16px</code>)."
|
||||
],
|
||||
@ -530,9 +519,7 @@
|
||||
"description": [
|
||||
"You can set an element's font by using the <code>font-family</code> property.",
|
||||
"For example, if you wanted to set your <code>h2</code> element's font to <code>Sans-serif</code>, you would use the following CSS:",
|
||||
"<code>h2 {</code>",
|
||||
"<code> font-family: Sans-serif;</code>",
|
||||
"<code>}</code>",
|
||||
"<blockquote>h2 {<br> font-family: Sans-serif;<br>}</blockquote>",
|
||||
"Make all of your <code>p</code> elements use the <code>Monospace</code> font."
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -632,9 +619,7 @@
|
||||
"There are several default fonts that are available in all browsers. These include <code>Monospace</code>, <code>Serif</code> and <code>Sans-Serif</code>",
|
||||
"When one font isn't available, you can tell the browser to \"degrade\" to another font.",
|
||||
"For example, if you wanted an element to use the <code>Helvetica</code> font, but also degrade to the <code>Sans-Serif</code> font when <code>Helvetica</code> wasn't available, you could use this CSS style:",
|
||||
"<code>p {</code>",
|
||||
"<code> font-family: Helvetica, Sans-Serif;</code>",
|
||||
"<code>}</code>",
|
||||
"<blockquote>p {<br> font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
|
||||
"Now comment out your call to Google Fonts, so that the <code>Lobster</code> font isn't available. Notice how it degrades to the <code>Monospace</code> font."
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -748,11 +733,7 @@
|
||||
"description": [
|
||||
"CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
|
||||
"For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use:",
|
||||
"<code><style></code>",
|
||||
"<code> .larger-image {</code>",
|
||||
"<code> width: 500px;</code>",
|
||||
"<code> }</code>",
|
||||
"<code></style></code>",
|
||||
"<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>",
|
||||
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -809,13 +790,7 @@
|
||||
"description": [
|
||||
"CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>",
|
||||
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:",
|
||||
"<code><style></code>",
|
||||
"<code> .thin-red-border {</code>",
|
||||
"<code> border-color: red;</code>",
|
||||
"<code> border-width: 5px;</code>",
|
||||
"<code> border-style: solid;</code>",
|
||||
"<code> }</code>",
|
||||
"<code></style></code>",
|
||||
"<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>",
|
||||
"Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo.",
|
||||
"Remember that you can apply multiple classes to an element by separating each class with a space within its <code>class</code> attribute. For example:",
|
||||
"<code><img class=\"class1 class2\"></code>"
|
||||
@ -1366,10 +1341,7 @@
|
||||
"HTML has a special element for creating <code>unordered lists</code>, or bullet point-style lists.",
|
||||
"Unordered lists start with a <code><ul></code> element. Then they contain some number of <code><li></code> elements.",
|
||||
"For example: ",
|
||||
"<code><ul></code>",
|
||||
" <code><li>milk</li></code>",
|
||||
" <code><li>cheese</li></code>",
|
||||
"<code></ul></code>",
|
||||
"<blockquote><ul><br> <li>milk</li><br> <li>cheese</li><br></ul></blockquote>",
|
||||
"would create a bullet point-style list of \"milk\" and \"cheese\".",
|
||||
"Remove the last two <code>p</code> elements and create an unordered list of three things that cats love at the bottom of the page."
|
||||
],
|
||||
@ -1445,10 +1417,7 @@
|
||||
"HTML has a special element for creating <code>ordered lists</code>, or numbered-style lists.",
|
||||
"Ordered lists start with a <code><ol></code> element. Then they contain some number of <code><li></code> elements.",
|
||||
"For example:",
|
||||
"<code><ol></code>",
|
||||
" <code><li>Garfield</li></code>",
|
||||
" <code><li>Sylvester</li></code>",
|
||||
"<code></ol></code>",
|
||||
"<blockquote><ol><br> <li>Garfield</li><br> <li>Sylvester</li><br></ol></blockquote>",
|
||||
"would create a numbered list of \"Garfield\" and \"Sylvester\".",
|
||||
"Create an ordered list of the top 3 things cats hate the most."
|
||||
],
|
||||
@ -2287,9 +2256,7 @@
|
||||
"description": [
|
||||
"You can set an element's background color with the <code>background-color</code> property.",
|
||||
"For example, if you wanted an element's background color to be <code>green</code>, you'd put this within your <code>style</code> element:",
|
||||
"<code>.green-background {</code>",
|
||||
"<code> background-color: green;</code>",
|
||||
"<code>}</code>",
|
||||
"<blockquote>.green-background {<br> background-color: green;<br>}</blockquote>",
|
||||
"Create a class called <code>gray-background</code> with the <code>background-color</code> of gray. Assign this class to your <code>div</code> element."
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -2461,9 +2428,7 @@
|
||||
"description": [
|
||||
"One cool thing about <code>id</code> attributes is that, like classes, you can style them using CSS.",
|
||||
"Here's an example of how you can take your element with the <code>id</code> attribute of <code>cat-photo-element</code> and give it the background color of green. In your <code>style</code> element:",
|
||||
"<code>#cat-photo-element {</code>",
|
||||
"<code> background-color: green;</code>",
|
||||
"<code>}</code>",
|
||||
"<blockquote>#cat-photo-element {<br> background-color: green;<br>}</blockquote>",
|
||||
"Note that inside your <code>style</code> element, you always reference classes by putting a <code>.</code> in front of their names. You always reference ids by putting a <code>#</code> in front of their names.",
|
||||
"Try giving your form, which now has the <code>id</code> attribute of <code>cat-photo-form</code>, a green background."
|
||||
],
|
||||
@ -3028,9 +2993,7 @@
|
||||
"Every HTML page has a <code>body</code> element.",
|
||||
"We can prove that the <code>body</code> element exists here by giving it a <code>background-color</code> of black.",
|
||||
"We can do this by adding the following to our <code>style</code> element:",
|
||||
"<code>body {</code>",
|
||||
"<code> background-color: black;</code>",
|
||||
"<code>}</code>"
|
||||
"<blockquote>body {<br> background-color: black;<br>}</blockquote>"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3182,9 +3145,7 @@
|
||||
"<code><h1 id=\"orange-text\"></code>",
|
||||
"Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.",
|
||||
"Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's an example of what this looks like:",
|
||||
"<code>#brown-text {</code>",
|
||||
"<code> color: brown;</code>",
|
||||
"<code>}</code>",
|
||||
"<blockquote>#brown-text {<br> color: brown;<br>}</blockquote>",
|
||||
"Note: It doesn't matter whether you declare this css above or below pink-text class, since id attribute will always take precedence."
|
||||
],
|
||||
"challengeSeed": [
|
||||
|
||||
@ -59,11 +59,7 @@
|
||||
"We are also able to create objects using <code>constructor</code> functions.",
|
||||
"A <code>constructor</code> function is given a capitalized name to make it clear that it is a <code>constructor</code>.",
|
||||
"Here's an example of a <code>constructor</code> function:",
|
||||
"<code>var Car = function() {</code>",
|
||||
"<code> this.wheels = 4;</code>",
|
||||
"<code> this.engines = 1;</code>",
|
||||
"<code> this.seats = 1;</code>",
|
||||
"<code>};</code>",
|
||||
"<blockquote>var Car = function() {<br> this.wheels = 4;<br> this.engines = 1;<br> this.seats = 1;<br>};</blockquote>",
|
||||
"In a <code>constructor</code> the <code>this</code> variable refers to the new object being created by the constructor. So when we write,",
|
||||
"<code> this.wheels = 4;</code>",
|
||||
"inside of the <code>constructor</code> we are giving the new object it creates a property called <code>wheels</code> with a value of <code>4</code>.",
|
||||
@ -121,11 +117,7 @@
|
||||
"To use a <code>constructor</code> function we call it with the <code>new</code> keyword in front of it like:",
|
||||
"<code>var myCar = new Car();</code>",
|
||||
"<code>myCar</code> is now an <code>instance</code> of the <code>Car</code> constructor that looks like the object it described:",
|
||||
"<code>{</code>",
|
||||
"<code> wheels: 4,</code>",
|
||||
"<code> engines: 1,</code>",
|
||||
"<code> seats: 1</code>",
|
||||
"<code>}</code>",
|
||||
"<blockquote>{<br> wheels: 4,<br> engines: 1,<br> seats: 1<br>}</blockquote>",
|
||||
"Note that it is important to use the <code>new</code> keyword when calling a constructor. This is how Javascript knows to create a new object and that all the references to <code>this</code> inside the constructor should be referring to this new object.",
|
||||
"Now, once the <code>myCar</code> <code>instance</code> is created it can be used like any other object and can have its properties accessed and modified the same way you would usually. For example:",
|
||||
"<code>myCar.turboType = \"twin\";</code>",
|
||||
@ -183,19 +175,11 @@
|
||||
"description": [
|
||||
"The <code>constructor</code> we have is great, but what if we don't always want to create the same object?",
|
||||
"To solve this we can add <code>parameters</code> to our <code>constructor</code>. We do this like the following example:",
|
||||
"<code>var Car = function(wheels, seats, engines) {</code>",
|
||||
"<code> this.wheels = wheels;</code>",
|
||||
"<code> this.seats = seats;</code>",
|
||||
"<code> this.engines = engines;</code>",
|
||||
"<code>};</code>",
|
||||
"<blockquote>var Car = function(wheels, seats, engines) {<br> this.wheels = wheels;<br> this.seats = seats;<br> this.engines = engines;<br>};</blockquote>",
|
||||
"Now we can pass in <code>arguments</code> when we call our <code>constructor</code>.",
|
||||
"<code>var myCar = new Car(6, 3, 1);</code>",
|
||||
"This code will create an object that uses the <code>arguments</code> we passed in and looks like:",
|
||||
"<code>{</code>",
|
||||
"<code> wheels: 6,</code>",
|
||||
"<code> seats: 3,</code>",
|
||||
"<code> engines: 1</code>",
|
||||
"<code>}</code>",
|
||||
"<blockquote>{<br> wheels: 6,<br> seats: 3,<br> engines: 1<br>}</blockquote>",
|
||||
"Now give it a try yourself! Alter the <code>Car</code> <code>constructor</code> to use <code>parameters</code> to assign values to the <code>wheels</code>, <code>seats</code>, and <code>engines</code> properties.",
|
||||
"Then call your new <code>constructor</code> with three number <code>arguments</code> and assign it to <code>myCar</code> to see it in action."
|
||||
],
|
||||
@ -318,9 +302,7 @@
|
||||
"title": "Iterate over Arrays with .map",
|
||||
"description": [
|
||||
"The <code>map</code> method is a convenient way to iterate through arrays. Here's an example usage:",
|
||||
"<code>var timesFour = oldArray.map(function(val){</code>",
|
||||
"<code> return val * 4;</code>",
|
||||
"<code>});</code>",
|
||||
"<blockquote>var timesFour = oldArray.map(function(val){<br> return val * 4;<br>});</blockquote>",
|
||||
"",
|
||||
"The <code>map</code> method will iterate through every element of the array, creating a new array with values that have been modified by the callback function, and return it.",
|
||||
"In our example the callback only uses the value of the array element (the <code>val</code> argument) but your callback can also include arguments for the <code>index</code> and <code>array</code> being acted on.",
|
||||
@ -364,9 +346,7 @@
|
||||
"To use <code>reduce</code> you pass in a callback whose arguments are an accumulator (in this case, <code>previousVal</code>) and the current value (<code>currentVal</code>).",
|
||||
"<code>reduce</code> has an optional second argument which can be used to set the initial value of the accumulator. If no initial value is specified it will be the first array element and <code>currentVal</code> will start with the second array element.",
|
||||
"Here is an example of <code>reduce</code> being used to subtract all the values of an array:",
|
||||
"<code>var singleVal = array.reduce(function(previousVal, currentVal) {</code>",
|
||||
"<code> return previousVal - currentVal;</code>",
|
||||
"<code>}, 0);</code>",
|
||||
"<blockquote>var singleVal = array.reduce(function(previousVal, currentVal) {<br> return previousVal - currentVal;<br>}, 0);</blockquote>",
|
||||
"Use the <code>reduce</code> method to sum all the values in <code>array</code> and assign it to <code>singleVal</code>."
|
||||
],
|
||||
"tests": [
|
||||
@ -407,9 +387,7 @@
|
||||
"Any array element for which the callback returns true will be kept and elements that return false will be filtered out.",
|
||||
"The following code is an example of using <code>filter</code> to remove array elements that are equal to five:",
|
||||
"Note: We omit the second and third arguments since we only need the value",
|
||||
"<code>array = array.filter(function(val) {</code>",
|
||||
"<code> return val !== 5;</code>",
|
||||
"<code>});</code>",
|
||||
"<blockquote>array = array.filter(function(val) {<br> return val !== 5;<br>});</blockquote>",
|
||||
"Use <code>filter</code> to remove all elements from <code>oldArray</code> that are greater than 5."
|
||||
],
|
||||
"tests": [
|
||||
@ -451,10 +429,7 @@
|
||||
"Unlike the previous array methods we have been looking at, <code>sort</code> actually alters the array in place. However, it also returns this sorted array.",
|
||||
"<code>sort</code> can be passed a compare function as a callback. If no compare function is passed in it will convert the values to strings and sort alphabetically.",
|
||||
"Here is an example of using sort with a compare function that will sort the elements from smallest to largest number:",
|
||||
"<code>var array = [1, 12, 21, 2];</code>",
|
||||
"<code>array.sort(function(a, b) {</code>",
|
||||
"<code> return a - b;</code>",
|
||||
"<code>});</code>",
|
||||
"<blockquote>var array = [1, 12, 21, 2];<br>array.sort(function(a, b) {<br> return a - b;<br>});</blockquote>",
|
||||
"Use <code>sort</code> to sort <code>array</code> from largest to smallest."
|
||||
],
|
||||
"tests": [
|
||||
@ -493,7 +468,7 @@
|
||||
"description": [
|
||||
"You can use the <code>reverse</code> method to reverse the elements of an array.",
|
||||
"<code>reverse</code> is another array method that alters the array in place, but it also returns the reversed array.",
|
||||
"<code>var myArray = [1, 2, 3];\n myArray.reverse();</code>",
|
||||
"<blockquote>var myArray = [1, 2, 3];<br>myArray.reverse();</blockquote>",
|
||||
"<em>returns [3, 2, 1]</em>",
|
||||
"Use <code>reverse</code> to reverse the <code>array</code> variable and assign it to <code>newArray</code>."
|
||||
],
|
||||
@ -603,9 +578,7 @@
|
||||
"description": [
|
||||
"We can use the <code>join</code> method to join each element of an array into a string separated by whatever delimiter you provide as an argument.",
|
||||
"The following is an example of using <code>join</code> to join all of the elements of an array into a string with all the elements separated by word `Na`:",
|
||||
"<code>var joinMe = [\"Na \", \"Na \", \"Na \", \"Na \", \"Batman!\"];</code>",
|
||||
"<code>var joinedString = joinMe.join(\"Na \");</code>",
|
||||
"<code>console.log(joinedString);</code>",
|
||||
"<blockquote>var joinMe = [\"Na \", \"Na \", \"Na \", \"Na \", \"Batman!\"];<br>var joinedString = joinMe.join(\"Na \");<br>console.log(joinedString);</blockquote>",
|
||||
"Use the <code>join</code> method to create a string from <code>joinMe</code> with spaces in between each element and assign it to <code>joinedString</code>."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
Reference in New Issue
Block a user