gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #12761 from QuincyLarson/fix/instructions-become-hrs

Browse Source 
turn the "instructions" into an hr element
This commit is contained in:
mrugesh mohapatra
2017-01-24 18:16:54 +05:30
committed by GitHub
parent d4e1ac1290 33b778eed4
commit 9327aa60f2
14 changed files with 337 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
challenges/01-responsive-web-design/applied-accessibility.json
View File

@ -54,7 +54,7 @@
"<code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code>",
"People with visual impairments rely on screen readers to convert web content to an audio interface. They won't get information if it's only presented visually. For images, screen readers can access the <code>alt</code> attribute and read its contents to deliver key information.",
"Good <code>alt</code> text is short but descriptive, and meant to briefly convey the meaning of the image. You should always include an <code>alt</code> attribute on your image. Per HTML5 specification, this is now considered mandatory.",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat happens to be both a coding ninja and an actual ninja, and is building a website to share his knowledge. The profile picture he wants to use shows his skills, and should be appreciated by all site visitors. Add an <code>alt</code> attribute in the <code>img</code> tag, that explains Camper Cat is doing karate. (The image <code>src</code> doesn't link to an actual file, so you should see the <code>alt</code> text in the display.)"
],
"challengeSeed": [
@ -95,7 +95,7 @@
"<code>&lt;img src=&quot;visualDecoration.jpeg&quot; alt=&quot;&quot;&gt;</code>",
"Background images usually fall under the 'decorative' label as well. However, they are typically applied with CSS rules, and therefore not part of the markup screen readers process.",
"<strong>Note</strong><br>For images with a caption, you may still want to include <code>alt</code> text, since it helps search engines catalog the content of the image.",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat has coded a skeleton page for the blog part of his website. He's planning to add a visual break between his two articles with a decorative image of a samurai sword. Add an <code>alt</code> attribute to the <code>img</code> tag and set it to an empty string. (Note that the image <code>src</code> doesn't link to an actual file - don't worry that there are no swords showing in the display.)"
],
"challengeSeed": [
@ -149,7 +149,7 @@
"Headings with equal (or higher) rank start new implied sections, headings with lower rank start subsections of the previous one.",
"As an example, a page with an <code>h2</code> element followed by several subsections labeled with <code>h4</code> tags would confuse a screen reader user. With six choices, it's tempting to use a tag because it looks better in a browser, but you can use CSS to edit the relative sizing.",
"One final point, each page should always have one (and only one) <code>h1</code> element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page.",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix the headings so his markup gives semantic meaning to the content, and shows the proper parent-child relationships of his sections. Change all the <code>h5</code> tags to the proper heading level to indicate they are subsections of the <code>h2</code> ones."
],
"challengeSeed": [
@ -205,7 +205,7 @@
"By default, a browser renders these elements similarly to the humble <code>div</code>. However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users.",
"The <code>main</code> element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information that's related to the central topic of your page. It's not meant to include items that repeat across pages, like navigation links or banners.",
"The <code>main</code> tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you've ever seen a \"Jump to Main Content\" link at the top of a page, using a main tag automatically gives assistive devices that functionality.",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat has some big ideas for his ninja weapons page. Help him set up his markup by adding opening and closing <code>main</code> tags between the <code>header</code> and <code>footer</code> (covered in other challenges). Keep the <code>main</code> tags empty for now."
],
"challengeSeed": [
@ -253,7 +253,7 @@
"Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work.",
"<strong>Note about <code>section</code> and <code>div</code></strong><br>The <code>section</code> element is also new with HTML5, and has a slightly different semantic meaning than <code>article</code>. An <code>articles</code> is for standalone content, and a <code>section</code> is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the <code>article</code>, then each chapter is a <code>section</code>. When there's no relationship between groups of content, then use a <code>div</code>.",
"<blockquote>&lt;div&gt; - blocks content<br>&lt;section&gt; - blocks related content<br>&lt;article&gt; - blocks independent, self-contained content<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat used <code>article</code> tags to wrap the posts on his blog page, but he forgot to use them around the top one. Change the <code>div</code> tag to use an <code>article</code> tag instead."
],
"challengeSeed": [
@ -313,7 +313,7 @@
"The next HTML5 element that adds semantic meaning and improves accessibility is the <code>header</code> tag. It's used to wrap introductory information or navigation links for its parent tag, and works well around content that's repeated at the top on multiple pages.",
"<code>Header</code> shares the embedded landmark feature you saw with <code>main</code>, allowing assistive technologies to quickly navigate to that content.",
"<strong>Note</strong><br><code>Header</code> is meant for use in the <code>body</code> tag of your HTML document. This is different than the <code>head</code> element, which contains the page's title, meta information, etc.",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat is writing some great articles about ninja training, and wants to add a page for them to his site. Change the top <code>div</code> that currently contains the <code>h1</code> to a <code>header</code> tag instead."
],
"challengeSeed": [
@ -377,7 +377,7 @@
"description": [
"The <code>nav</code> element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page.",
"If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a <code>nav</code> tag as well. Using a <code>footer</code> (covered in the next challenge) is sufficient.",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat included navigation links at the top of his training page, but wrapped them in a <code>div</code>. Change the <code>div</code> to a <code>nav</code> tag to improve the accessibility on his page."
],
"challengeSeed": [
@ -446,7 +446,7 @@
"title": "Make Screen Reader Navigation Easier with the Footer Landmark",
"description": [
"Similar to <code>header</code> and <code>nav</code>, the <code>footer</code> element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat's training page is making good progress. Change the <code>div</code> he used to wrap his copyright information at the bottom of the page to a <code>footer</code> element."
],
"challengeSeed": [
@ -521,7 +521,7 @@
"Here's an example:",
"<blockquote>&lt;audio id=&quot;meowClip&quot; controls&gt;<br> &lt;source src=&quot;audio/meow.mp3&quot; type=&quot;audio/mpeg&quot; /&gt;<br> &lt;source src=&quot;audio/meow.ogg&quot; type=&quot;audio/ogg&quot; /&gt;<br>&lt;/audio&gt;<br></blockquote>",
"<strong>Note</strong><br>Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them.",
"<h4>Instructions</h4>",
"<hr>",
"Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an <code>audio</code> element after the <code>p</code>. Include the <code>controls</code> attribute. Then place a <code>source</code> tag inside the <code>audio</code> tags with the <code>src</code> attribute set to \"https://s3.amazonaws.com/freecodecamp/screen-reader.mp3\" and <code>type</code> attribute set to \"audio/mpeg\"."
],
"challengeSeed": [
@ -576,7 +576,7 @@
"For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.",
"Here's an example - note that the <code>figcaption</code> goes inside the <code>figure</code> tags and can be combined with other elements:",
"<blockquote>&lt;figure&gt;<br> &lt;img src=&quot;roundhouseDestruction.jpeg&quot; alt=&quot;Photo of Camper Cat executing a roundhouse kick&quot;&gt;<br> &lt;br&gt;<br> &lt;figcaption&gt;<br> Master Camper Cat demonstrates proper form of a roundhouse kick.<br> &lt;/figcaption&gt;<br>&lt;/figure&gt;<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat is hard at work creating a stacked bar chart showing the amount of time per week to spend training in stealth, combat, and weapons. Help him structure his page better by changing the <code>div</code> tag he used to a <code>figure</code> tag, and the <code>p</code> tag that surrounds the caption to a <code>figcaption</code> tag."
],
"challengeSeed": [
@ -660,7 +660,7 @@
"The <code>label</code> tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The <code>for</code> attribute on a <code>label</code> tag explicitly associates that <code>label</code> with the form control and is used by screen readers.",
"The value of the <code>for</code> attribute must be the same as the value of the <code>id</code> attribute of the form control. Here's an example:",
"<blockquote>&lt;form&gt;<br> &lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;<br> &lt;input type=&quottext&quot; id=&quot;name&quot; name=&quot;name&quot;&gt;<br>&lt;/form&gt;<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat expects a lot of interest in his thoughtful blog posts, and wants to include an email sign up form. Add a <code>for</code> attribute on the email <code>label</code> that matches the <code>id</code> on its <code>input</code> field."
],
"challengeSeed": [
@ -733,7 +733,7 @@
"The <code>fieldset</code> wrapper and <code>legend</code> tag are not necessary when the choices are self-explanatory, like a gender selection. Using a <code>label</code> with the <code>for</code> attribute for each radio button is sufficient.",
"Here's an example:",
"<blockquote>&lt;form&gt;<br> &lt;fieldset&gt;<br> &lt;legend&gt;Choose one of these three items:&lt;/legend&gt;<br> &lt;input id=&quot;one&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;one&quot;&gt;<br> &lt;label for=&quot;one&quot;&gt;Choice One&lt;/label&gt;&lt;br&gt;<br> &lt;input id=&quot;two&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;two&quot;&gt;<br> &lt;label for=&quot;two&quot;&gt;Choice Two&lt;/label&gt;&lt;br&gt;<br> &lt;input id=&quot;three&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;three&quot;&gt;<br> &lt;label for=&quot;three&quot;&gt;Choice Three&lt;/label&gt;<br> &lt;/fieldset&gt;<br>&lt;/form&gt;<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons, and learned from our last lesson to use label tags with <code>for</code> attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the div tag surrounding the radio buttons to a fieldset tag, and change the p tag inside it to a legend."
],
"challengeSeed": [
@ -819,7 +819,7 @@
"For older browsers, the type will default to <code>text</code>, so it helps to show users the expected date format in the label or as placeholder text just in case.",
"Here's an example:",
"<blockquote>&lt;label for=&quot;input1&quot;&gt;Enter a date (MM-DD-YYYY):&lt;/label&gt;<br>&lt;input type=&quot;date&quot; id=&quot;input1&quot; name=&quot;input1&quot;&gt;<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat is setting up a mortal combat tournament and wants to ask his competitors to see what date works best. Add an <code>input</code> tag with a <code>type</code> attribute of \"date\", an <code>id</code> attribute of \"pickdate\", and a <code>name</code> attribute of \"date\"."
],
"challengeSeed": [
@ -883,7 +883,7 @@
"Continuing with the date theme, HTML5 also introduced the <code>time</code> element along with a <code>datetime</code> attribute to standardize times. This is an inline element that can wrap a date or time on a page. A valid format of that date is held by the <code>datetime</code> attribute. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's written in an informal or colloquial manner in the text.",
"Here's an example:",
"<code>&lt;p&gt;Master Camper Cat officiated the cage match between Goro and Scorpion &lt;time datetime=&quot;2013-02-13&quot;&gt;last Wednesday&lt;/time&gt;, which ended in a draw.&lt;/p&gt;</code>",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat's mortal combat survey results are in! Wrap a <code>time</code> tag around the text \"Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;\" and add a <code>datetime</code> attribute to it set to \"2016-09-15\"."
],
"challengeSeed": [
@ -960,7 +960,7 @@
"<li><code>display: none;</code> or <code>visibility: hidden;</code> hides content for everyone, including screen reader users</li>",
"<li>Zero values for pixel sizes, such as <code>width: 0px; height: 0px;</code> removes that element from the flow of your document, meaning screen readers will ignore it</li>",
"</ul>",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an <code>sr-only</code> class, but the CSS rules aren't filled in yet. Give the <code>position</code> an absolute value, the <code>left</code> a -10000px value, and the <code>width</code> and <code>height</code> both 1px values."
],
"challengeSeed": [
@ -1084,7 +1084,7 @@
"description": [
"Low contrast between the foreground and background colors can make text difficult to read. Sufficient contrast improves the readability of your content, but what exactly does \"sufficient\" mean?",
"The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text. The ratio is calculated by comparing the relative luminance values of two colors. This ranges from 1:1 for the same color, or no contrast, to 21:1 for white against black, the strongest contrast. There are many contrast checking tools available online that calculate this ratio for you.",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat's choice of light gray text on a white background for his recent blog post has a 1.5:1 contrast ratio, making it hard to read. Change the <code>color</code> of the text from the current gray (<code>#D3D3D3</code>) to a darker gray (<code>#636363</code>) to improve the contrast ratio to 6:1."
],
"challengeSeed": [
@ -1142,7 +1142,7 @@
"Previous challenges covered having text alternatives to address the first issue. The last challenge introduced contrast checking tools to help with the second. The WCAG-recommended contrast ratio of 4.5:1 applies for color use as well as gray-scale combinations.",
"Colorblind users have trouble distinguishing some colors from others - usually in hue but sometimes lightness as well. You may recall the contrast ratio is calculated using the relative luminance (or lightness) values of the foreground and background colors.",
"In practice, the 4.5:1 ratio can be reached by darkening the darker color and lightening the lighter one with the aid of a color contrast checker. Darker colors on the color wheel are considered to be blues, violets, magentas, and reds, whereas lighter colors are oranges, yellows, greens, and blue-greens.",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat is experimenting with using color for his blog text and background, but his current combination of a greenish <code>background-color</code> with maroon text <code>color</code> has a 2.5:1 contrast ratio. You can easily adjust the lightness of the colors since he declared them using the CSS <code>hsl()</code> property (which stands for hue, saturation, lightness) by changing the third argument. Increase the <code>background-color</code> lightness value from 35% to 55%, and decrease the <code>color</code> lightness value from 20% to 15%. This improves the contrast to 5.9:1."
],
"challengeSeed": [
@ -1199,7 +1199,7 @@
"There are various forms of colorblindness. These can range from a reduced sensitivity to a certain wavelength of light to the inability to see color at all. The most common form is a reduced sensitivity to detect greens.",
"For example, if two similar green colors are the foreground and background color of your content, a colorblind user may not be able to distinguish them. Close colors can be thought of as neighbors on the color wheel, and those combinations should be avoided when conveying important information.",
"<strong>Note</strong><br>Some online color picking tools include visual simulations of how colors appear for different types of colorblindness. These are great resources in addition to online contrast checking calculators.",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat is testing different styles for an important button, but the yellow (<code>#FFFF33</code>) <code>background-color</code> and the green (<code>#33FF33</code>) text <code>color</code> are neighboring hues on the color wheel and virtually indistinguishable for some colorblind users. (Their similar lightness also fails the contrast ratio check). Change the text <code>color</code> to a dark blue (<code>#003366</code>) to solve both problems."
],
"challengeSeed": [
@ -1252,7 +1252,7 @@
"description": [
"Screen reader users have different options for what type of content their device reads. This includes skipping to (or over) landmark elements, jumping to the main content, or getting a page summary from the headings. Another option is to only hear the links available on a page.",
"Screen readers do this by reading the link text, or what's between the anchor (<code>a</code>) tags. Having a list of \"click here\" or \"read more\" links isn't helpful. Instead, you should use brief but descriptive text within the <code>a</code> tags to provide more meaning for these users.",
"<h4>Instructions</h4>",
"<hr>",
"The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (<code>a</code>) tags so they wrap around the text \"information about batteries\" instead of \"Click here\"."
],
"challengeSeed": [
@ -1300,7 +1300,7 @@
"HTML5 allows this attribute to be used on any element, but it's particularly useful when it's used with interactive ones. This includes links, buttons, and form controls.",
"Here's an example:",
"<code>&lt;button accesskey=&quot;b&quot;&gt;Important Button&lt;/button&gt;</code>",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an <code>accesskey</code> attribute to both links and set the first one to \"g\" (for Garfield) and the second one to \"c\" (for Chuck Norris)."
],
"challengeSeed": [
@ -1364,7 +1364,7 @@
"Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as <code>div</code>, <code>span</code>, and <code>p</code>, by placing a <code>tabindex=\"0\"</code> attribute on them. Here's an example:",
"<code>&lt;div tabindex=&quot;0&quot;&gt;I need keyboard focus!&lt;/div&gt;</code>",
"<strong>Note</strong><br>A negative <code>tabindex</code> value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a <code>div</code> used for a pop-up window is activated), and is beyond the scope of these challenges.",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a <code>tabindex</code> attribute to the <code>p</code> tag and set its value to \"0\". Bonus - using <code>tabindex</code> also enables the CSS pseudo-class <code>:focus</code> to work on the <code>p</code> tag."
],
"challengeSeed": [
@ -1453,7 +1453,7 @@
"Here's an example:",
"<code>&lt;div tabindex=&quot;1&quot;&gt;I get keyboard focus, and I get it first!&lt;/div&gt;</code>",
"<code>&lt;div tabindex=&quot;2&quot;&gt;I get keyboard focus, and I get it second!&lt;/div&gt;</code>",
"<h4>Instructions</h4>",
"<hr>",
"Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search <code>input</code> and submit <code>input</code> form controls to be the first two items in the tab order. Add a <code>tabindex</code> attribute set to \"1\" to the search <code>input</code>, and a <code>tabindex</code> attribute set to \"2\" to the submit <code>input</code>."
],
"challengeSeed": [

109
challenges/01-responsive-web-design/applied-visual-design.json
View File

@ -40,7 +40,7 @@
"description": [
"This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles.",
"Text is often a large part of web content. CSS has several options for how to align it with the <code>text-align</code> property.",
"<h4>Instructions</h4>",
"<hr>",
"Align the <code>h4</code> tag's text, which says \"Google\", to the center. Then justify the paragraph tag which contains information about how Google was founded. Finally, align the two anchor tags to the left by using the <code>links</code> class selector.",
"<strong>Note</strong><br>When you align the two anchor tags, you will see no difference. This is because text is aligned to the left by default."
],
@ -113,7 +113,7 @@
"description": [
"You can specify the width of an element using the <code>width</code> property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:",
"<blockquote>img {<br> width: 220px;<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add a <code>width</code> property to the entire card and set it to an absolute value of 245px. Use the <code>fullCard</code> class to select the element."
],
"challengeSeed": [
@ -184,7 +184,7 @@
"description": [
"You can specify the height of an element using the <code>height</code> property in CSS, similar to the <code>width</code> property. Here's an example that changes the height of an image to 20px:",
"<blockquote>img {<br> height: 20px;<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add a <code>height</code> property to the <code>h4</code> tag and set it to 40px."
],
"challengeSeed": [
@ -256,7 +256,7 @@
"description": [
"This challenge changes the layout of the links by stacking them to look more like a list.",
"To keep everything balanced, you can make sure every element's width and height makes sense in that context.",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>height</code> of the <code>h4</code> tag to 25px to make the card more compact and a little cleaner."
],
"challengeSeed": [
@ -330,7 +330,7 @@
"title": "Use the Strong Tag to Make Text Bold",
"description": [
"To make text bold, you can use the <code>strong</code> tag. This is often used to draw attention to text and symbolize that it is important. With the <code>strong</code> tag, the browser applies the CSS of <code>font-weight: bold;</code> to the element.",
"<h4>Instructions</h4>",
"<hr>",
"Wrap a <code>strong</code> tag around the entire <code>h4</code> element and its contents."
],
"challengeSeed": [
@ -405,7 +405,7 @@
"title": "Use the u Tag to Underline Text",
"description": [
"To underline text, you can use the <code>u</code> tag. This is often used to signify that a section of text is important, or something to remember. With the <code>u</code> tag, the browser applies the CSS of <code>text-decoration: underline;</code> to the element.",
"<h4>Instructions</h4>",
"<hr>",
"Wrap the <code>u</code> tag around the two anchor tags. It should not include the parent <code>div</code> that has the class of <code>cardLinks</code>.",
"<strong>Note</strong><br>Try to avoid using the <code>u</code> tag when it could be confused for a link. Anchor tags also have a default underlined formatting."
],
@ -482,7 +482,7 @@
"title": "Use the em Tag to Italicize Text",
"description": [
"To emphasize text, you can use the <code>em</code> tag. This displays text as italicized, as the browser applies the CSS of <code>font-style: italic;</code> to the element.",
"<h4>Instructions</h4>",
"<hr>",
"Wrap an <code>em</code> tag around the paragraph tag to give it emphasis."
],
"challengeSeed": [
@ -559,7 +559,7 @@
"title": "Use the del Tag to Strikethrough Text",
"description": [
"To strikethrough text, which is when a horizontal line cuts across the characters, you can use the <code>del</code> tag. It shows that a section of text is no longer valid. With the <code>del</code> tag, the browser applies the CSS of <code>text-decoration: line-through;</code> to the element.",
"<h4>Instructions</h4>",
"<hr>",
"Wrap the <code>del</code> tag around \"Google\" inside the <code>h4</code> tag and then add the word Alphabet beside it, which should not have the strikethrough formatting."
],
"challengeSeed": [
@ -637,7 +637,7 @@
"title": "Create a Horizontal Line Using the hr Element",
"description": [
"You can use the <code>hr</code> tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.",
"<h4>Instructions</h4>",
"<hr>",
"Add an <code>hr</code> tag underneath the <code>h4</code> which contains the card title.",
"<strong>Note</strong><br>In HTML, <code>hr</code> is a self-closing tag, and therefore doesn't need a separate closing tag."
],
@ -719,7 +719,7 @@
"<blockquote>rgba stands for:<br> r = red<br> g = green<br> b = blue<br> a = alpha/level of opacity</blockquote>",
"The rgb values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. <code>rgba()</code> is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.",
"You'll use <code>background-color: rgba(45, 45, 45, 0.1)</code> for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.",
"<h4>Instructions</h4>",
"<hr>",
"To make the text stand out more, adjust the <code>background-color</code> of the <code>h4</code> element to the given <code>rgba()</code> value.",
"Also for the <code>h4</code>, remove the <code>height</code> property and add <code>padding</code> of 10px."
],
@ -801,7 +801,7 @@
"title": "Adjust the Size of a Header Versus a Paragraph Tag",
"description": [
"The font size of header tags (<code>h1</code> through <code>h6</code>) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the <code>font-size</code> property to adjust the size of the text in an element.",
"<h4>Instructions</h4>",
"<hr>",
"To make the heading significantly larger than the paragraph, change the <code>font-size</code> of the <code>h4</code> tag to 27 pixels."
],
"challengeSeed": [
@ -883,7 +883,7 @@
"The <code>box-shadow</code> property takes values for <code>offset-x</code> (how far to push the shadow horizontally from the element), <code>offset-y</code> (how far to push the shadow vertically from the element), <code>blur-radius</code>, <code>spread-radius</code> and a color value, in that order. The <code>blur-radius</code> and <code>spread-radius</code> values are optional.",
"Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:",
"<blockquote>box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the example CSS values above to place a <code>box-shadow</code> on the card. The element now has an id of <code>thumbnail</code>, use this selector to place the shadows for the hover state."
],
"challengeSeed": [
@ -970,7 +970,7 @@
"The <code>opacity</code> property in CSS is used to adjust the opacity, or conversely, the transparency for an item.",
"<blockquote>A value of 1 is opaque, which isn't transparent at all.<br>A value of 0.5 is half see-through.<br>A value of 0 is completely transparent.</blockquote>",
"The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text.",
"<h4>Instructions</h4>",
"<hr>",
"Set the <code>opacity</code> of the anchor tags to 0.7 using <code>links</code> class to select them."
],
"challengeSeed": [
@ -1054,7 +1054,7 @@
"description": [
"The <code>text-transform</code> property in CSS is used to set text to uppercase.",
"<strong>Note</strong><br>Other values for this property are lowercase, capitalize (transforms the first letter of each word to uppercase), initial (sets the property to the default value), inherit (inherits the property from parent element) and none (the default).",
"<h4>Instructions</h4>",
"<hr>",
"Set the text inside the <code>h4</code> tag to be uppercase using the <code>text-transform</code> property."
],
"challengeSeed": [
@ -1149,7 +1149,7 @@
"<code>&lt;link href=\"https://fonts.googleapis.com/css?family=Open+Sans\" rel=\"stylesheet\"&gt;</code>",
"Once the link is in place, the font is available to include in your CSS by using the pattern <code>font-family: 'FONT', FAMILY_NAME;</code>.",
"In this example, \"FONT\" would be 'Open Sans' and \"FAMILY_NAME\" would be sans-serif. The quotes around 'Open Sans' are required because it has a space in its name. Also, capitalization of the font name matters.",
"<h4>Instructions</h4>",
"<hr>",
"Set the <code>font-family</code> of the body to \"Open Sans\"."
],
"challengeSeed": [
@ -1238,7 +1238,7 @@
"title": "Set the Font-size for Multiple Heading Elements",
"description": [
"The <code>font-size</code> property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all <code>h1</code> through <code>h6</code> tags to balance the heading sizes.",
"<h4>Instructions</h4>",
"<hr>",
"<ul>",
"<li>Set the <code>font-size</code> of the <code>h1</code> tag to 68px.</li>",
"<li>Set the <code>font-size</code> of the <code>h2</code> tag to 52px.</li>",
@ -1301,7 +1301,7 @@
"description": [
"You set the <code>font-size</code> of each heading tag in the last challenge, here you'll adjust the <code>font-weight</code>.",
"The <code>font-weight</code> property sets how thick or thin characters are in a section of text.",
"<h4>Instructions</h4>",
"<hr>",
"<ul>",
"<li>Set the <code>font-weight</code> of the <code>h1</code> tag to 800.</li>",
"<li>Set the <code>font-weight</code> of the <code>h2</code> tag to 600.</li>",
@ -1381,7 +1381,7 @@
"title": "Set the Font-size of Paragraph Text",
"description": [
"The <code>font-size</code> property in CSS is not limited to headings, it can be applied to any element containing text.",
"<h4>Instructions</h4>",
"<hr>",
"Change the value of the <code>font-size</code> property for the paragraph to 16px to make it more visible."
],
"challengeSeed": [
@ -1425,7 +1425,7 @@
"title": "Set the Line-height of Paragraphs",
"description": [
"CSS offers the <code>line-height</code> property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.",
"<h4>Instructions</h4>",
"<hr>",
"Add a <code>line-height</code> property to the <code>p</code> tag and set it to 25px."
],
"challengeSeed": [
@ -1470,7 +1470,7 @@
"title": "Adjust the Color of an Anchor Tag",
"description": [
"You can adjust the text color of any text in an element with the <code>color</code> property.",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>color</code> property of the anchor (<code>a</code>) tag to <code>#000</code> (black)."
],
"challengeSeed": [
@ -1512,7 +1512,7 @@
"title": "Adjust the Hover State of an Anchor Tag",
"description": [
"Following from the previous challenge, the styling of the anchor tag can be changed for its hover state using the <code>:hover</code> pseudo-class selector.",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>a</code> tag's CSS so when the user hovers over it, the <code>color</code> is blue and the underline is removed.",
"<strong>Note</strong><br>You can remove underlining of anchor tags using the <code>text-decoration</code> property set to none."
],
@ -1563,7 +1563,8 @@
"<blockquote>p {<br> position: relative;<br> bottom: 10px;<br>}</blockquote>",
"Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.",
"<strong>Note</strong><br>Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.",
"<h4>Instructions</h4>",
"<hr>",
"<a href='https://google.com' target='_top'>test</a>",
"Change the <code>position</code> of the <code>h2</code> to <code>relative</code>, and use a CSS offset to move it 15 pixels away from the <code>top</code> of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements."
],
"challengeSeed": [
@ -1611,7 +1612,7 @@
"title": "Move a Relatively Positioned Element with CSS Offsets",
"description": [
"The CSS offsets of <code>top</code> or <code>bottom</code>, and <code>left</code> or <code>right</code> tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. This can be slightly confusing, because you're offsetting an element away from a given spot, which effectively moves it towards the opposite direction. As you saw in the last challenge, using the top offset moved the h2 downwards. Likewise, using a left offset effectively moves an item to the right.",
"<h4>Instructions</h4>",
"<hr>",
"Use CSS offsets to move the <code>h2</code> 15 pixels to the right and 10 pixels up."
],
"challengeSeed": [
@ -1663,7 +1664,7 @@
"description": [
"The next option for the CSS <code>position</code> property is <code>absolute</code>, which locks the element in place relative to its parent container. Unlike the <code>relative</code> position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.",
"One nuance with absolute positioning is that it will be locked relative to its closest <em>positioned</em> ancestor. If you forget to add a position rule to the parent item, (this is typically done using <code>position: relative;</code>), the browser will keep looking up the chain and ultimately default to the body tag.",
"<h4>Instructions</h4>",
"<hr>",
"Lock the <code>#searchbar</code> element to the top-right of its <code>section</code> parent by declaring its <code>position</code> as <code>absolute</code>. Give it <code>top</code> and <code>right</code> offsets of 0 pixels each."
],
"challengeSeed": [
@ -1722,7 +1723,7 @@
"description": [
"The next layout scheme that CSS offers is the <code>fixed</code> position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer \"realize\" where it is positioned, which may require some layout adjustments elsewhere.",
"One key difference from the <code>absolute</code> position is that the element won't move when the user scrolls.",
"<h4>Instructions</h4>",
"<hr>",
"The navigation bar in the code is labeled with an id of <code>navbar</code>. Change its <code>position</code> to <code>fixed</code>, and offset it 0 pixels from the <code>top</code> and 0 pixels from the <code>left</code>. Notice the (lack of) impact to the <code>h1</code> position, it hasn't been pushed down to accommodate the navigation bar and would need to be adjusted separately."
],
"challengeSeed": [
@ -1792,7 +1793,7 @@
"title": "Push Elements Left or Right with the Float Property",
"description": [
"The next positioning tool does not actually use <code>position</code>, but sets the <code>float</code> property of an element. Floating elements are removed from the normal flow of a document and pushed to either the <code>left</code> or <code>right</code> of their containing parent element. It's commonly used with the <code>width</code> property to specify how much horizontal space the floated element requires.",
"<h4>Instructions</h4>",
"<hr>",
"The given markup would work well as a two-column layout, with the <code>section</code> and <code>aside</code> elements next to each other. Give the <code>#left</code> item a <code>float</code> of <code>left</code> and the <code>#right</code> item a <code>float</code> of <code>right</code>."
],
"challengeSeed": [
@ -1858,7 +1859,7 @@
"title": "Change the Position of Overlapping Elements with the Z-index Property",
"description": [
"When elements are positioned to overlap, the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the <code>z-index</code> property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the <code>z-index</code> property of an element move it higher in the stack than those with lower values.",
"<h4>Instructions</h4>",
"<hr>",
"Add a <code>z-index</code> property to the element with the class name of <code>first</code> (the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle)."
],
"challengeSeed": [
@ -1918,7 +1919,7 @@
"description": [
"Another positioning technique is to center a block element horizontally. One way to do this is to set its <code>margin</code> to a value of auto.",
"This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the <code>display</code> property to block.",
"<h4>Instructions</h4>",
"<hr>",
"Center the <code>div</code> on the page by adding a <code>margin</code> property with a value of auto."
],
"challengeSeed": [
@ -1968,7 +1969,7 @@
"<blockquote>red (#FF0000) and cyan (#00FFFF)<br>green (#00FF00) and magenta (#FF00FF)<br>blue (#0000FF) and yellow (#FFFF00)</blockquote>",
"There are many color picking tools available online that have an option to find the complement of a color.",
"<strong>Note</strong><br>For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>background-color</code> property of the <code>blue</code> and <code>yellow</code> classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background."
],
"challengeSeed": [
@ -2027,7 +2028,7 @@
"There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. It starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but is more subtle than using two complementary colors.",
"Here are three colors using the split-complement scheme:",
"<blockquote>cyan (#00FFFF)<br>orange (#FF7D00)<br>raspberry (#FF007D)</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>background-color</code> property of the <code>orange</code>, <code>cyan</code>, and <code>raspberry</code> classes to their respective colors. Make sure to use the hex codes because the orange and raspberry in the example above are not browser-recognized color names."
],
"challengeSeed": [
@ -2087,7 +2088,7 @@
"title": "Adjusting the Color of Various Elements to Complementary Colors",
"description": [
"The complementary colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.",
"<h4>Instructions</h4>",
"<hr>",
"This page will use a shade of teal (<code>#09A7A1</code>) as the dominant color, and its orange (<code>#FF790E</code>) complement to visually highlight the sign-up buttons. Change the <code>background-color</code> of both the <code>header</code> and <code>footer</code> from black to the teal color. Then change the <code>h2</code> text <code>color</code> to teal as well. Finally, change the <code>background-color</code> of the <code>button</code> to the orange color."
],
"challengeSeed": [
@ -2169,7 +2170,7 @@
"<b>Lightness</b> is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.",
"Here are a few examples of using <code>hsl()</code> with fully-saturated, normal lightness colors:",
"<blockquote>/* Red */<br>hsl(0, 100%, 50%) (Red can also have a hue of 360)<br><br>/* Yellow */<br>hsl(60, 100%, 50%)<br><br>/* Green */<br>hsl(120, 100%, 50%)<br><br>/* Cyan */<br>hsl(180, 100%, 50%)<br><br>/* Blue */<br>hsl(240, 100%, 50%)<br><br>/* Magenta */<br>hsl(300, 100%, 50%)</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>background-color</code> of each <code>div</code> element based on the class names (<code>green</code>, <code>cyan</code>, or <code>blue</code>) using <code>hsl()</code>. All three should have full saturation and normal lightness."
],
"challengeSeed": [
@ -2233,7 +2234,7 @@
"title": "Adjust the Tone of a Color",
"description": [
"The <code>hsl()</code> option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of <code>hsl()</code> stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.",
"<h4>Instructions</h4>",
"<hr>",
"The navigation bar on this site currently inherits its <code>background-color</code> from the <code>header</code> element. Starting with that color as a base, add a <code>background-color</code> to the <code>nav</code> element so it uses the same teal hue, but has 80% saturation and 25% lightness values to change its tone and shade."
],
"challengeSeed": [
@ -2308,7 +2309,7 @@
"The fist argument specifies the direction from which color transition starts - it can be stated as a degree, where 90deg makes a vertical gradient and 45deg is angled like a backslash. The following arguments specify the order of colors used in the gradient.",
"Example:",
"<code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code>",
"<h4>Instructions</h4>",
"<hr>",
"Use a <code>linear-gradient()</code> for the <code>div</code> element's <code>background</code>, and set it from a direction of 35 degrees to change the color from <code>#CCFFFF</code> to <code>#FFCCCC</code>."
],
"challengeSeed": [
@ -2362,7 +2363,7 @@
"For this example, it helps to think about the color stops as pairs where every two colors blend together.",
"<code>0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px</code>",
"If every two color stop values are the same color, the blending isn't noticeable because it's between the same color, followed by a hard transition to the next color, so you end up with stripes.",
"<h4>Instructions</h4>",
"<hr>",
"Make stripes by changing the <code>repeating-linear-gradient()</code> to use a gradient angle of <code>45deg</code>, then set the first two color stops to <code>yellow</code>, and finally the second two color stops to <code>black</code>."
],
"challengeSeed": [
@ -2422,7 +2423,7 @@
"title": "Create Texture by Adding a Subtle Pattern as a Background Image",
"description": [
"One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The <code>background</code> property supports the <code>url()</code> function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses.",
"<h4>Instructions</h4>",
"<hr>",
"Using the url of <code>https://i.imgur.com/MJAkxbh.png</code>, set the <code>background</code> of the whole page with the <code>body</code> selector."
],
"challengeSeed": [
@ -2466,7 +2467,7 @@
"description": [
"To change the scale of an element, CSS has the <code>transform</code> property, along with its <code>scale()</code> function. The following code example doubles the size of all the paragraph elements on the page:",
"<blockquote>p {<br> transform:scale(2);<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Increase the size of the element with the id of <code>ball2</code> to 1.5 times its original size."
],
"challengeSeed": [
@ -2531,7 +2532,7 @@
"The <code>transform</code> property has a verity of functions that lets you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as <code>:hover</code> that specify a certain state of an element, the <code>transform</code> property can easily add interactivity to your elements.",
"Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:",
"<blockquote>p:hover {<br> transform: scale(2.1);}<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add a CSS rule for the <code>hover</code> state of the <code>div</code> and use the <code>transform</code> property to scale the <code>div</code> element to 1.1 times its original size when a user hovers over it."
],
"challengeSeed": [
@ -2588,7 +2589,7 @@
"The next function of the <code>transform</code> property is <code>skewX()</code>, which skews the selected element along its X (horizontal) axis by a given degree.",
"The following code skews the paragraph element by -32 degrees along the X axis.",
"<blockquote>p {<br> transform: skewX(-32deg);<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Skew the element with the id of <code>bottom</code> by 24 degrees along the X axis by using the <code>transform</code> property."
],
"challengeSeed": [
@ -2644,7 +2645,7 @@
"title": "Use the CSS Transform Property SkewY",
"description": [
"Given that the <code>skewX()</code> function skews the selected element along the X axis by a given degree, it is no surprise that the <code>skewY()</code> property skews an element along the Y (vertical) axis.",
"<h4>Instructions</h4>",
"<hr>",
"Skew the element with the id of <code>top</code> -10 degrees along the Y axis by using the <code>transform</code> property."
],
"challengeSeed": [
@ -2702,7 +2703,7 @@
"You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see.",
"In order to create a round object, the <code>border-radius</code> property should be set to a value of 50%.",
"You may recall from an earlier challenge that the <code>box-shadow</code> property takes values for <code>offset-x</code>, <code>offset-y</code>, <code>blur-radius</code>, <code>spread-radius</code> and a color value in that order. The <code>blur-radius</code> and <code>spread-radius</code> values are optional.",
"<h4>Instructions</h4>",
"<hr>",
"Manipulate the square element in the editor to create the moon shape. First, change the <code>background-color</code> to transparent, then set the <code>border-radius</code> property to 50% to make the circular shape. Finally, change the <code>box-shadow</code> property to set the <code>offset-x</code> to 25px, the <code>offset-y</code> to 10px, <code>blur-radius</code> to 0, <code>spread-radius</code> to 0, and color to blue."
],
"challengeSeed": [
@ -2762,7 +2763,7 @@
"<blockquote>.heart:before {<br> content: \"\";<br> background-color: yellow;<br> border-radius: 25%;<br> position: absolute;<br> height: 50px;<br> width: 70px;<br> top: -50px;<br> left: 5px;<br>}</blockquote>",
"For the <code>:before</code> and <code>:after</code> selectors to function properly, they must have a defined <code>content</code> property. It usually has content such as a photo or text. When the <code>:before</code> and <code>:after</code> selectors add shapes, the <code>content</code> property is still required, but it's set to an empty string.",
"In the above example, the element with the class of <code>heart</code> has a <code>:before</code> selector that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.",
"<h4>Instructions</h4>",
"<hr>",
"Transform the element on the screen to a heart. In the <code>heart:after</code> selector, change the <code>background-color</code> to pink and the <code>border-radius</code> to 50%.",
"Next, target the element with the class <code>heart</code> (just <code>heart</code>) and fill in the <code>transform</code> property. Use the <code>rotate()</code> function with -45 degrees. (<code>rotate()</code> works the same way that <code>skewX()</code> and <code>skewY()</code> do).",
"Finally, in the <code>heart:before</code> selector, set its <code>content</code> property to an empty string."
@ -2843,7 +2844,7 @@
"<code>@keyframes</code> is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific \"frames\" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of <code>@keyframes</code> and the animate properties:",
"<blockquote>#anim {<br> animation-name: colorful;<br> animation-duration: 3s;<br>}<br>@keyframes colorful {<br> 0% {<br> background-color: blue;<br> }<br> 100% {<br> background-color: yellow;<br> }<br>}</blockquote>",
"For the element with the <code>anim</code> id, the code snippet above sets the <code>animation-name</code> to <code>colorful</code> and sets the <code>animation-duration</code> to 3 seconds. Then the <code>@keyframes</code> rule links to the animation properties with the name <code>colorful</code>. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.",
"<h4>Instructions</h4>",
"<hr>",
"Create an animation for the element with the id <code>rect</code>, by setting the <code>animation-name</code> to rainbow and the <code>animation-duration</code> to 4 seconds. Next, declare a <code>@keyframes</code> rule, and set the <code>background-color</code> at the beginning of the animation (<code>0%</code>) to blue, the middle of the animation (<code>50%</code>) to green, and the end of the animation (<code>100%</code>) to yellow."
],
"challengeSeed": [
@ -2907,7 +2908,7 @@
"You can use CSS <code>@keyframes</code> to change the color of a button in its hover state.",
"Here's an example of changing the height of an image on hover:",
"<blockquote>&lt;style&gt;<br> img:hover {<br> animation-name: width;<br> animation-duration: 4s;<br> }<br> @keyframes width {<br> 100% {<br> width: 40px;<br> }<br> }<br>&lt;/style&gt;<br>&lt;img src=&quot;https://bit.ly/smallgooglelogo&quot; alt=&quot;Google's Logo&quot; /&gt;</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use CSS <code>@keyframes</code> to change the <code>background-color</code> of the <code>button</code> element so it becomes <code>#4791d0</code> when a user hovers over it. The <code>@keyframes</code> rule should only have an entry for <code>100%</code>."
],
"challengeSeed": [
@ -2961,7 +2962,7 @@
"When elements have a specified <code>position</code>, such as <code>fixed</code> or <code>relative</code>, the CSS offset properties <code>right</code>, <code>left</code>, <code>top</code>, and <code>bottom</code> can be used in animation rules to create movement.",
"As shown in the example below, you can push the item downwards then upwards by setting the <code>top</code> property of the <code>50%</code> keyframe to 50px, but having it set to 0px for the first (<code>0%</code>) and the last (<code>100%</code>) keyframe.",
"<blockquote>@keyframes rainbow {<br> 0% {<br> background-color: blue;<br> top: 0px;<br> }<br> 50% {<br> background-color: green;<br> top: 50px;<br> }<br> 100% {<br> background-color: yellow;<br> top: 0px;<br> }<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add a horizontal motion to the <code>div</code> animation. Using the <code>left</code> offset property, add to the <code>@keyframes</code> rule so rainbow starts at 0 pixels at <code>0%</code>, moves to 25 pixels at <code>50%</code>, and ends at -25 pixels at <code>100%</code>."
],
"challengeSeed": [
@ -3035,7 +3036,7 @@
"description": [
"For this challenge, you'll change the <code>opacity</code> of an animated element so it gradually fades as it reaches the right side of the screen.",
"In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the <code>@keyframes</code> rule.",
"<h4>Instructions</h4>",
"<hr>",
"Target the element with the id of <code>ball</code> and add the <code>opacity</code> property set to 0.1 at <code>50%</code> so the element fades as it moves to the right."
],
"challengeSeed": [
@ -3101,7 +3102,7 @@
"The previous challenges covered how to use some of the animation properties and the <code>@keyframes</code> rule. Another animation property is the <code>animation-iteration-count</code>, which allows you to control how many times you would like to loop through the animation. Here's an example:",
"<code>animation-iteration-count: 3;</code>",
"The above animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.",
"<h4>Instructions</h4>",
"<hr>",
"To keep the ball bouncing on the right on a continuous loop, change the <code>animation-iteration-count</code> property to infinite."
],
"challengeSeed": [
@ -3171,7 +3172,7 @@
"description": [
"Here's one more continuous animation example with the <code>animation-iteration-count</code> property that uses the heart you designed in a previous challenge.",
"The one second long heartbeat animation consists of two animated pieces. The <code>heart</code> elements (including the <code>:before</code> and <code>:after</code> pieces) are animated to change size using the <code>transform</code> property, and the background <code>div</code> is animated to change its color using the <code>background</code> property.",
"<h4>Instructions</h4>",
"<hr>",
"Keep the heart beating by adding the <code>animation-iteration-count</code> property for both the <code>back</code> class and the <code>heart</code> class and setting the value to infinite. The <code>heart:before</code> and <code>heart:after</code> selectors do not need any animation properties."
],
"challengeSeed": [
@ -3278,7 +3279,7 @@
"description": [
"There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an <code>animation-iteration-count</code> property and setting <code>@keyframes</code> rules.",
"To illustrate, the animation on the right consists of two \"stars\" that each decrease in size and opacity at the 20% mark in the <code>@keyframes</code> rule, which creates the twinkle animation. You can change the <code>@keyframes</code> rule for one of the elements so the stars twinkle at different rates.",
"<h4>Instructions</h4>",
"<hr>",
"Alter the animation rate for the element with the class name of <code>star-1</code> by changing its <code>@keyframes</code> rule to 50%."
],
"challengeSeed": [
@ -3369,7 +3370,7 @@
"description": [
"In the previous challenge, you changed the animation rates for two similarly animated elements by altering their <code>@keyframes</code> rules. You can achieve the same goal by manipulating the <code>animation-duration</code> of multiple elements.",
"In the animation running in the code editor, there are three \"stars\" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the <code>animation-duration</code> property to different values for each element.",
"<h4>Instructions</h4>",
"<hr>",
"Set the <code>animation-duration</code> of the elements with the classes <code>star-1</code>, <code>star-2</code>, and <code>star-3</code> to 1s, 0.9s, and 1.1s, respectively."
],
"challengeSeed": [
@ -3461,7 +3462,7 @@
"description": [
"In CSS animations, the <code>animation-timing-function</code> property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your <code>animation-duration</code>), the <code>animation-timing-function</code> says how the car accelerates and decelerates over the course of the drive.",
"There are a number of predefined keywords available for popular options. For example, the default value is <code>linear</code>, which applies a constant animation speed throughout. Other options include <code>ease-out</code>, which is quick in the beginning then slows down, or <code>ease-in</code>, which is slow in the beginning, then speeds up at the end.",
"<h4>Instructions</h4>",
"<hr>",
"For the elements with id of <code>ball1</code> and <code>ball2</code>, add an <code>animation-timing-function</code> property to each, and set <code>#ball1</code> to <code>linear</code>, and <code>#ball2</code> to <code>ease-out</code>. Notice the difference between how the elements move during the animation but end together, since they share the same <code>animation-duration</code> of 2 seconds."
],
"challengeSeed": [
@ -3541,7 +3542,7 @@
"The <code>cubic-bezier</code> function consists of four main points that sit on this 1 by 1 grid: <code>p0</code>, <code>p1</code>, <code>p2</code>, and <code>p3</code>. <code>p0</code> and <code>p3</code> are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the <code>p1</code> and <code>p2</code> \"anchor\" points in the form: <code>(x1, y1, x2, y2)</code>. Pulling it all together, here's an example of a Bezier curve in CSS code:",
"<code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code>",
"In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the <code>linear</code> keyword. In other words, it changes at a constant speed.",
"<h4>Instructions</h4>",
"<hr>",
"For the element with the id of <code>ball1</code>, change the value of the <code>animation-timing-function</code> property from <code>linear</code> to its equivalent <code>cubic-bezier</code> function value. Use the point values given in the example above."
],
"challengeSeed": [
@ -3620,7 +3621,7 @@
"In general, changing the <code>p1</code> and <code>p2</code> anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style:",
"<code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code>",
"Remember that all <code>cubic-bezier</code> functions start with <code>p0</code> at (0, 0) and end with <code>p3</code> at (1, 1). In this example, the curve moves faster through the Y axis (starts at 0, goes to <code>p1</code> y value of 0, then goes to <code>p2</code> y value of 1) than it moves through the X axis (0 to start, then 0 for <code>p1</code>, up to 0.58 for <code>p2</code>). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration.",
"<h4>Instructions</h4>",
"<hr>",
"To see the effect of this Bezier curve in action, change the <code>animation-timing-function</code> of the element with id of <code>red</code> to a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1. This will make both elements progress through the animation similarly."
],
"challengeSeed": [
@ -3694,7 +3695,7 @@
"The following cubic Bezier curve simulates a juggling movement:",
"<code>cubic-bezier(0.3, 0.4, 0.5, 1.6); </code>",
"Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on an 1 by 1 coordinate system, and it can only accept x values from 0 to 1, the y value can be set to numbers larger than one. This results in a bouncing movement that is ideal for simulating the juggling ball.",
"<h4>Instructions</h4>",
"<hr>",
"Change value of the <code>animation-timing-function</code> of the element with the id of <code>green</code> to a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0.311, 0.441, 0.444, 1.649."
],
"challengeSeed": [

2
challenges/01-responsive-web-design/basic-css.json
View File

@ -2059,7 +2059,7 @@
"The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, <code>in</code> and <code>mm</code> refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution.",
"Relative units, such as <code>em</code> or <code>rem</code>, are relative to another length value. For example, <code>em</code> is based on the size of an element's font. If you use it to set the <code>font-size</code> property itself, it's relative to the parent's <code>font-size</code>.",
"<strong>Note</strong><br>There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design section.",
"<h4>Instructions</h4>",
"<hr>",
"Add a <code>padding</code> property to the element with class <code>red-box</code> and set it to <code>1.5em</code>."
],
"challengeSeed": [

10
challenges/01-responsive-web-design/basic-html-and-html5.json
View File

@ -56,7 +56,7 @@
"<code>&#60;/h1&#62;</code>",
"Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.",
"Each challenge has tests that you can run at any time by clicking the \"Run tests\" button. Once you get all tests passing (they change from red to green), you can go to the next coding challenge.",
"<h4>Instructions</h4>",
"<hr>",
"To pass the test on this challenge, change your <code>h1</code> element's text to say \"Hello World\" instead of \"Hello\". Then click the \"Run tests\" button."
],
"challengeSeed": [
@ -263,7 +263,7 @@
"These tags not only make your HTML easier to read, it also helps with Search Engine Optimization (SEO) and accessibility.",
"The <code>main</code> HTML5 tag helps search engines and other developers find the main content of your page.",
"<strong>Note</strong><br>Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.",
"<h4>Instructions</h4>",
"<hr>",
"Wrap the paragraph with an opening and closing <code>main</code> tag."
],
"challengeSeed": [
@ -719,7 +719,7 @@
"Next, you'll want to create a corresponding anchor link in the HTML where you want the internal link to take users. Instead of using the <code>href</code> attribute, you'll use the <code>name</code> attribute. Here's an example:",
"<blockquote>&lt;h1&gt;Contact&lt;/h1&gt;<br>&lt;a name=\"contact\"&gt;&lt;/a&gt;</blockquote>",
"Now when users click the \"Go to contact section\" link, they'll be taken to the section of the webpage with the anchor that has the <code>name</code> attribute \"contact\".",
"<h4>Instructions</h4>",
"<hr>",
"Change your external link to an internal link by changing the <code>href</code> attribute to \"#bottom\" and the anchor text from \"cat photos\" to \"Jump to Bottom\".",
"Then add an anchor link with a <code>name</code> attribute set to \"bottom\" after the last paragraph.",
"<strong>Note</strong><br>Additional kitty ipsum text has been added to the paragraphs to better show the effect of clicking the internal anchor link to jump to the bottom of the page."
@ -2296,7 +2296,7 @@
"Next, the rest of your HTML code needs to be wrapped in <code>html</code> tags. The opening <code>&lt;html&gt;</code> goes directly below the <code>&lt;!DOCTYPE html&gt;</code> line, and the closing <code>&lt;/html&gt;</code> goes at the end of the page.",
"Here's an example of the page structure:",
"<blockquote>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br> &lt;!-- Your HTML code goes here --&gt;<br>&lt;/html&gt;</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add a <code>DOCTYPE</code> tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing <code>html</code> tags, which wrap around an <code>h1</code> element. The heading can include any text."
],
"challengeSeed": [
@ -2321,7 +2321,7 @@
"Metadata elements, such as <code>link</code>, <code>meta</code>, <code>title</code>, and <code>style</code>, typically go inside the <code>head</code> element.",
"Here's an example of a page's layout:",
"<blockquote>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br> &lt;head&gt;<br> &lt;!-- metadata elements --&gt;<br> &lt;/head&gt;<br> &lt;body&gt;<br> &lt;!-- page contents --&gt;<br> &lt;/body&gt;<br>&lt;/html&gt;</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Edit the markup so there's a <code>head</code> and a <code>body</code>. The <code>head</code> element should only include the <code>title</code>, and the <code>body</code> element should only include the <code>h1</code> and <code>p</code>."
],
"challengeSeed": [

34
challenges/01-responsive-web-design/css-flexbox.json
View File

@ -40,7 +40,7 @@
"description": [
"This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.",
"Placing the CSS property <code>display: flex;</code> on an element allows you to use other flex properties to build a responsive page.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>display</code> to both <code>#box-1</code> and <code>#box-2</code> and set each to a value of flex."
],
"challengeSeed": [
@ -102,7 +102,7 @@
"title": "Adding Flex Superpowers to the Tweet Embed",
"description": [
"To the right is the tweet embed that will be used as the practical example. Some of the elements would look better with a different layout. The last challenge demonstrated <code>display: flex</code>. Here you'll add it to several components in the tweet embed to start adjusting their positioning.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>display: flex</code> to all of the following items - note that the selectors are already set up in the CSS:",
"<code>header</code>, the header's <code>.profile-name</code>, the header's <code>.follow-btn</code>, the header's <code>h3</code> and <code>h4</code>, the <code>footer</code>, and the footer's <code>.stats</code>."
],
@ -243,7 +243,7 @@
"description": [
"Adding <code>display: flex</code> to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the <code>flex-direction</code> property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.",
"<strong>Note</strong><br>The default value for the <code>flex-direction</code> property is row.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of row."
],
"challengeSeed": [
@ -309,7 +309,7 @@
"title": "Applying the Flex-direction Property to Create Rows in the Tweet Embed",
"description": [
"The <code>header</code> and <code>footer</code> in the tweet embed example have child items that could be arranged as rows using the <code>flex-direction</code> property. This tells CSS to align the children horizontally.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>flex-direction</code> to both the <code>header</code> and <code>footer</code> and set the value to row."
],
"challengeSeed": [
@ -445,7 +445,7 @@
"title": "Using the Flex-direction Property to Make a Column",
"description": [
"The last two challenges used the <code>flex-direction</code> property set to row. This property can also create a column by vertically stacking the children of a flex container.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of column."
],
"challengeSeed": [
@ -511,7 +511,7 @@
"title": "Applying the Flex-direction Property to Create a Column in the Tweet Embed",
"description": [
"The tweet embed <code>header</code> and <code>footer</code> used the <code>flex-direction</code> property earlier with a row value. Similarly, the items inside the <code>.profile-name</code> element would work well stacked as a column.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>flex-direction</code> to the header's <code>.profile-name</code> element and set the value to column."
],
"challengeSeed": [
@ -652,7 +652,7 @@
"<li><code>space-between</code>: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the other items between them are spaced evenly.</li>",
"<li><code>space-around</code>: similar to <code>space-between</code> but the first and last items are not locked to the edges of the container, the space is distributed around all the items</li>",
"</ul>",
"<h4>Instructions</h4>",
"<hr>",
"An example helps show this property in action. Add the CSS property <code>justify-content</code> to the <code>#box-container</code> element, and give it a value of center.",
"<strong>Bonus</strong><br>Try the other options for the <code>justify-content</code> property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge."
],
@ -721,7 +721,7 @@
"title": "Using the Justify-content Property in the Tweet Embed",
"description": [
"The last challenge showed an example of the <code>justify-content</code> property. For the tweet embed, this property can be applied to align the items in the <code>.profile-name</code> element.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>justify-content</code> to the header's <code>.profile-name</code> element and set the value to any of the options from the last challenge."
],
"challengeSeed": [
@ -864,7 +864,7 @@
"<li><code>stretch</code>: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom.</li>",
"<li><code>baseline</code>: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.</li>",
"</ul>",
"<h4>Instructions</h4>",
"<hr>",
"An example helps show this property in action. Add the CSS property <code>align-items</code> to the <code>#box-container</code> element, and give it a value of center.",
"<strong>Bonus</strong><br>Try the other options for the <code>align-items</code> property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge."
],
@ -933,7 +933,7 @@
"title": "Using the Align-items Property in the Tweet Embed",
"description": [
"The last challenge introduced the <code>align-items</code> property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>align-items</code> to the header's <code>.follow-btn</code> element, the header's <code>h3</code>, and the header's <code>h4</code>. Set the value to center."
],
"challengeSeed": [
@ -1077,7 +1077,7 @@
"<li><code>wrap</code>: wraps items from left-to-right if they are in a row, or top-to-bottom if they are in a column.</li>",
"<li><code>wrap-reverse</code>: wraps items from right-to-left if they are in a row, or bottom-to-top if they are in a column.</li>",
"</ul>",
"<h4>Instructions</h4>",
"<hr>",
"The current layout has too many boxes for one row. Add the CSS property <code>flex-wrap</code> to the <code>#box-container</code> element, and give it a value of wrap."
],
"challengeSeed": [
@ -1171,7 +1171,7 @@
"So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items.",
"The first is the <code>flex-shrink</code> property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.",
"The <code>flex-shrink</code> property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a <code>flex-shrink</code> value of 1 and the other has a <code>flex-shrink</code> value of 3, the one with the value of 3 will shrink three times as much as the other.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>flex-shrink</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 1 and <code>#box-2</code> a value of 2."
],
"challengeSeed": [
@ -1241,7 +1241,7 @@
"description": [
"The opposite of <code>flex-shrink</code> is the <code>flex-grow</code> property. Recall that <code>flex-shrink</code> controls the size of the items when the container shrinks. The <code>flex-grow</code> property controls the size of items when the parent container expands.",
"Using a similar example from the last challenge, if one item has a <code>flex-grow</code> value of 1 and the other has a <code>flex-grow</code> value of 3, the one with the value of 3 will grow three times as much as the other.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>flex-grow</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 1 and <code>#box-2</code> a value of 2."
],
"challengeSeed": [
@ -1311,7 +1311,7 @@
"description": [
"The previous example included <code>flex-basis</code> to help demonstrate how the <code>flex-grow</code> property works. The <code>flex-basis</code> property specifies the initial size of the item before CSS makes adjustments with <code>flex-shrink</code> or <code>flex-grow</code>.",
"The units used by the <code>flex-basis</code> property are the same as other size properties (<code>px</code>, <code>em</code>, <code>%</code>, etc.). The value <code>auto</code> sizes items based on the content.",
"<h4>Instructions</h4>",
"<hr>",
"Set the initial size of the boxes using <code>flex-basis</code>. Add the CSS property <code>flex-basis</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 10em and <code>#box-2</code> a value of 20em."
],
"challengeSeed": [
@ -1382,7 +1382,7 @@
"There is a shortcut available to set several flex properties at once. The <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties can all be set together by using the <code>flex</code> property.",
"For example, <code>flex: 1 0 10px;</code> will set the item to <code>flex-grow: 1;</code>, <code>flex-shrink: 0;</code>, and <code>flex-basis: 10px;</code>.",
"The default property settings are <code>flex: 0 1 auto;</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>flex</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> the values so its <code>flex-grow</code> is 2, its <code>flex-shrink</code> is 2, and its <code>flex-basis</code> is 150px. Give <code>#box-2</code> the values so its <code>flex-grow</code> is 1, its <code>flex-shrink</code> is 1, and its <code>flex-basis</code> is 150px.",
"These values will cause <code>#box-1</code> to be twice the size of <code>#box-2</code> when the container is greater than 300px and half the size of #box-2 when the container is less than 300px. 300px is the combined size of the <code>flex-basis</code> values of the two boxes."
],
@ -1451,7 +1451,7 @@
"title": "Using the Order Property to Rearrange Items",
"description": [
"The <code>order</code> property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>order</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 2 and give <code>#box-2</code> a value of 1."
],
"challengeSeed": [
@ -1521,7 +1521,7 @@
"description": [
"The final property for flex items is <code>align-self</code>. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties <code>float</code>, <code>clear</code>, and <code>vertical-align</code> do not work on flex items.",
"<code>align-self</code> accepts the same values as <code>align-items</code> and will override any value set by the <code>align-items</code> property.",
"<h4>Instructions</h4>",
"<hr>",
"Add the CSS property <code>align-self</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of center and give <code>#box-2</code> a value of flex-end."
],
"challengeSeed": [

8
challenges/01-responsive-web-design/responsive-web-design.json
View File

@ -61,7 +61,7 @@
"Here's an example of a media query that returns the content when the device's width is smaller than 100px:",
"<code>@media (max-width: 100px) { /* CSS Rules */ }</code>",
"Remember, the CSS inside the media query is applied only if the media type matches that of the device being used.",
"<h4>Instructions</h4>",
"<hr>",
"Add a media query, so that the <code>p</code> tag has a <code>font-size</code> of 10px when the device's height is smaller than 800px."
],
"challengeSeed": [
@ -107,7 +107,7 @@
"You can use:",
"<blockquote>img {<br> max-width: 100%;<br> display: block;<br> height: auto;<br>}</blockquote>",
"The <code>max-width</code> property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width. Setting the <code>display</code> property to block changes the image from an inline element (its default), to a block element on its own line. The <code>height</code> property of auto keeps the original aspect ratio of the image.",
"<h4>Instructions</h4>",
"<hr>",
"Add style rules for the <code>img</code> tag to make it responsive to the size of its container. It should display as a block-level element, it should fit the full width of its container without stretching, and it should keep its original aspect ratio."
],
"challengeSeed": [
@ -152,7 +152,7 @@
"The simplest way to make your images appear \"retina\" (and optimize them for retina displays) is to define their <code>width</code> and <code>height</code> values as only half of what the original file is.",
"Here is an example of an image that is only using half of the original height and width:",
"<blockquote>&lt;style&gt;<br> img { height: 250px; width: 250px; }<br>&lt;/style&gt;<br>&lt;img src=&quot;coolPic500x500&quot; alt=&quot;A most excellent picture&quot;&gt;</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Set the <code>width</code> and <code>height</code> of the <code>img</code> tag to half of their original values. In this case, both the original <code>height</code> and the original <code>width</code> are 200px."
],
"challengeSeed": [
@ -201,7 +201,7 @@
"<li><code>vmin: 70vmin</code> would be 70% of the viewport's smaller dimension (height vs. width).</li>",
"<li><code>vmax: 100vmax</code> would be 100% of the viewport's bigger dimension (height vs. width).</li>",
"</ul>",
"<h4>Instructions</h4>",
"<hr>",
"Set the <code>width</code> of the <code>h2</code> tag to 80% of the viewport's width and the <code>width</code> of the paragraph as 75% of the viewport's smaller dimension."
],
"challengeSeed": [

192
challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
View File

@ -15,7 +15,7 @@
"You can make a multi-line comment beginning with <code>/*</code> and ending with <code>*/</code>:",
"<blockquote>/* This is a <br> multi-line comment */</blockquote>",
"<strong>Best Practice</strong><br>As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code&mdash;both for others <em>and</em> for your future self.",
"<h4>Instructions</h4>",
"<hr>",
"Try creating one of each type of comment."
],
"challengeSeed": [
@ -55,7 +55,7 @@
"<code>/*Voici un commentaire <br> sur plusieurs lignes */</code>",
"<strong>Conseils</strong>",
"Lorsque vous écrivez votre code, vous devriez ajouter régulièrement des commentaires pour clarifier l'objectif de certaines parties de votre code. De bons commentaires peuvent aider les autres <em>et</em> vous-même à mieux comprendre votre code.",
"<h4>Instructions</h4>",
"<hr>",
"Essayez de créer un commentaire de chaque type."
]
}
@ -73,7 +73,7 @@
"<blockquote>var ourName;</blockquote>",
"creates a <code>variable</code> called <code>ourName</code>. In JavaScript we end statements with semicolons.",
"<code>Variable</code> names can be made up of numbers, letters, and <code>$</code> or <code>_</code>, but may not contain spaces or start with a number.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>var</code> keyword to create a variable called <code>myName</code>.",
"<strong>Hint</strong><br>Look at the <code>ourName</code> example if you get stuck."
],
@ -117,7 +117,7 @@
"<code>var notreNom</code>;",
"crée une <code>variable</code> appelée <code>notreNom</code>.On termine nos expressions avec un point virgule en JavaScript.",
"Le nom d'une <code>variable</code> peut être composé de nombres, lettres et <code>$</code> ou <code>_</code>, mais ne peut contenir d'espaces ou commencer par un nombre.",
"<h4>Instructions</h4>",
"<hr>",
"Utilisez le mot-clé <code>var</code> pour créer une variable appelée <code>monNom</code>",
"<strong>Conseil</strong><br>Regardez à l'exemple de <code>notreNom</code> si vous vous êtes bloqué."
]
@ -134,7 +134,7 @@
"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.",
"<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>",
"<hr>",
"Assign the value <code>7</code> to variable <code>a</code>.",
"Assign the contents of <code>a</code> to variable <code>b</code>."
],
@ -193,7 +193,7 @@
"It is common to <dfn>initialize</dfn> a variable to an initial value in the same line as it is declared.",
"<code>var myVar = 0;</code>",
"Creates a new variable called <code>myVar</code> and assigns it an initial value of <code>0</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Define a variable <code>a</code> with <code>var</code> and initialize it to a value of <code>9</code>."
],
"releasedOn": "January 1, 2016",
@ -233,7 +233,7 @@
"title": "Understanding Uninitialized Variables",
"description": [
"When JavaScript variables are declared, they have an initial value of <code>undefined</code>. If you do a mathematical operation on an <code>undefined</code> variable your result will be <code>NaN</code> which means <dfn>\"Not a Number\"</dfn>. If you concatenate a string with an <code>undefined</code> variable, you will get a literal <dfn>string</dfn> of <code>\"undefined\"</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Initialize the three variables <code>a</code>, <code>b</code>, and <code>c</code> with <code>5</code>, <code>10</code>, and <code>\"I am a\"</code> respectively so that they will not be <code>undefined</code>."
],
"releasedOn": "January 1, 2016",
@ -285,7 +285,7 @@
"Write variable names in Javascript in <dfn>camelCase</dfn>. In <dfn>camelCase</dfn>, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized.",
"<strong>Examples:</strong>",
"<blockquote>var someVariable;<br>var anotherVariableName;<br>var thisVariableNameIsTooLong;</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Modify the existing declarations and assignments so their names use <dfn>camelCase</dfn>.<br>Do not create any new variables."
],
"releasedOn": "January 1, 2016",
@ -336,11 +336,9 @@
"<code>Number</code> is a data type in JavaScript which represents numeric data.",
"Now let's try to add two numbers using JavaScript.",
"JavaScript uses the <code>+</code> symbol as addition operation when placed between two numbers.",
"",
"<strong>Example</strong>",
"<blockquote>myVar = 5 + 10; // assigned 15</blockquote>",
"",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>0</code> so that sum will equal <code>20</code>."
],
"challengeSeed": [
@ -380,7 +378,7 @@
"<strong>Example</strong>",
"<blockquote>myVar = 12 - 6; // assigned 6</blockquote>",
"",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>0</code> so the difference is <code>12</code>."
],
"challengeSeed": [
@ -422,7 +420,7 @@
"<strong>Example</strong>",
"<blockquote>myVar = 13 * 13; // assigned 169</blockquote>",
"",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>0</code> so that product will equal <code>80</code>."
],
"challengeSeed": [
@ -463,7 +461,7 @@
"<strong>Example</strong>",
"<blockquote>myVar = 16 / 2; // assigned 8</blockquote>",
"",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>0</code> so that the <code>quotient</code> is equal to <code>2</code>."
],
"challengeSeed": [
@ -503,7 +501,7 @@
"is the equivalent of",
"<code>i = i + 1;</code>",
"<strong>Note</strong><br>The entire line becomes <code>i++;</code>, eliminating the need for the equal sign.",
"<h4>Instructions</h4>",
"<hr>",
"Change the code to use the <code>++</code> operator on <code>myVar</code>.",
"<strong>Hint</strong><br>Learn more about <a href=\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment_()\" target=\"_blank\">Arithmetic operators - Increment (++)</a>."
],
@ -553,7 +551,7 @@
"is the equivalent of",
"<code>i = i - 1;</code>",
"<strong>Note</strong><br>The entire line becomes <code>i--;</code>, eliminating the need for the equal sign.",
"<h4>Instructions</h4>",
"<hr>",
"Change the code to use the <code>--</code> operator on <code>myVar</code>."
],
"releasedOn": "January 1, 2016",
@ -598,7 +596,7 @@
"description": [
"We can store decimal numbers in variables too. Decimal numbers are sometimes referred to as <dfn>floating point</dfn> numbers or <dfn>floats</dfn>.",
"<strong>Note</strong><br>Not all real numbers can accurately be represented in <dfn>floating point</dfn>. This can lead to rounding errors. <a href=\"https://en.wikipedia.org/wiki/Floating_point#Accuracy_problems\" target=\"_blank\">Details Here</a>.",
"<h4>Instructions</h4>",
"<hr>",
"Create a variable <code>myDecimal</code> and give it a decimal value with a fractional part (e.g. <code>5.7</code>)."
],
"challengeSeed": [
@ -638,7 +636,7 @@
"description": [
"In JavaScript, you can also perform calculations with decimal numbers, just like whole numbers.",
"Let's multiply two decimals together to get their product.",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>0.0</code> so that product will equal <code>5.0</code>."
],
"challengeSeed": [
@ -675,7 +673,7 @@
"title": "Divide one Decimal by Another with JavaScript",
"description": [
"Now let's divide one decimal by another.",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>0.0</code> so that <code>quotient</code> will equal to <code>2.2</code>."
],
"challengeSeed": [
@ -716,7 +714,7 @@
"<strong>Usage</strong><br>In mathematics, a number can be checked to be even or odd by checking the remainder of the division of the number by <code>2</code>.",
"<blockquote>17 % 2 = 1 (17 is Odd)<br>48 % 2 = 0 (48 is Even)</blockquote>",
"<strong>Note</strong><br>The <dfn>remainder</dfn> operator is sometimes incorrectly referred to as the \"modulus\" operator. It is very similar to modulus, but does not work properly with negative numbers.",
"<h4>Instructions</h4>",
"<hr>",
"Set <code>remainder</code> equal to the remainder of <code>11</code> divided by <code>3</code> using the <dfn>remainder</dfn> (<code>%</code>) operator."
],
"releasedOn": "January 1, 2016",
@ -764,7 +762,7 @@
"to add <code>5</code> to <code>myVar</code>. Since this is such a common pattern, there are operators which do both a mathematical operation and assignment in one step.",
"One such operator is the <code>+=</code> operator.",
"<blockquote>var myVar = 1;<br>myVar += 5;<br>console.log(myVar); // Returns 6</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>+=</code> operator."
],
"releasedOn": "January 1, 2016",
@ -818,7 +816,7 @@
"<code>myVar = myVar - 5;</code>",
"will subtract <code>5</code> from <code>myVar</code>. This can be rewritten as: ",
"<code>myVar -= 5;</code>",
"<h4>Instructions</h4>",
"<hr>",
"Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>-=</code> operator."
],
"releasedOn": "January 1, 2016",
@ -872,7 +870,7 @@
"<code>myVar = myVar * 5;</code>",
"will multiply <code>myVar</code> by <code>5</code>. This can be rewritten as: ",
"<code>myVar *= 5;</code>",
"<h4>Instructions</h4>",
"<hr>",
"Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>*=</code> operator."
],
"releasedOn": "January 1, 2016",
@ -926,7 +924,7 @@
"<code>myVar = myVar / 5;</code>",
"Will divide <code>myVar</code> by <code>5</code>. This can be rewritten as: ",
"<code>myVar /= 5;</code>",
"<h4>Instructions</h4>",
"<hr>",
"Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>/=</code> operator."
],
"releasedOn": "January 1, 2016",
@ -1025,7 +1023,7 @@
"Previously we have used the code",
"<code>var myName = \"your name\";</code>",
"<code>\"your name\"</code> is called a <dfn>string</dfn> <dfn>literal</dfn>. It is a string because it is a series of zero or more characters enclosed in single or double quotes.",
"<h4>Instructions</h4>",
"<hr>",
"Create two new <code>string</code> variables: <code>myFirstName</code> and <code>myLastName</code> and assign them the values of your first and last name, respectively."
],
"challengeSeed": [
@ -1068,7 +1066,7 @@
"<code>var sampleStr = \"Alan said, \\\"Peter is learning JavaScript\\\".\";</code>",
"This signals to JavaScript that the following quote is not the end of the string, but should instead appear inside the string. So if you were to print this to the console, you would get:",
"<code>Alan said, \"Peter is learning JavaScript\".</code>",
"<h4>Instructions</h4>",
"<hr>",
"Use <dfn>backslashes</dfn> to assign a string to the <code>myStr</code> variable so that if you were to print it to the console, you would see:",
"<code>I am a \"double quoted\" string inside \"double quotes\".</code>"
],
@ -1119,7 +1117,7 @@
"The value in using one or the other has to do with the need to <dfn>escape</dfn> quotes of the same type. Unless they are escaped, you cannot have more than one pair of whichever quote type begins a string.",
"If you have a string with many double quotes, this can be difficult to read and write. Instead, use single quotes:",
"<code>'This string has \"double quotes\" in it. And \"probably\" lots of them.'</code>",
"<h4>Instructions</h4>",
"<hr>",
"Change the provided string from double to single quotes and remove the escaping."
],
"releasedOn": "January 1, 2016",
@ -1161,7 +1159,7 @@
"Quotes are not the only characters that can be <dfn>escaped</dfn> inside a string. There are two reasons to use escaping characters: First is to allow you to use characters you might not otherwise be able to type out, such as a backspace. Second is to allow you to represent multiple quotes in a string without JavaScript misinterpreting what you mean. We learned this in the previous challenge.",
"<table class=\"table table-striped\"><thead><tr><th>Code</th><th>Output</th></tr></thead><tbody><tr><td><code>\\'</code></td><td>single quote</td></tr><tr><td><code>\\\"</code></td><td>double quote</td></tr><tr><td><code>\\\\</code></td><td>backslash</td></tr><tr><td><code>\\n</code></td><td>newline</td></tr><tr><td><code>\\r</code></td><td>carriage return</td></tr><tr><td><code>\\t</code></td><td>tab</td></tr><tr><td><code>\\b</code></td><td>backspace</td></tr><tr><td><code>\\f</code></td><td>form feed</td></tr></tbody></table>",
"<em>Note that the backslash itself must be escaped in order to display as a backslash.</em>",
"<h4>Instructions</h4>",
"<hr>",
"Assign the following three lines of text into the single variable <code>myStr</code> using escape sequences.",
"<blockquote>FirstLine<br/>&nbsp;&nbsp;&nbsp;&nbsp;\\SecondLine<br/>ThirdLine</blockquote>",
"You will need to use escape sequences to insert special characters correctly. You will also need to follow the spacing as it looks above, with no spaces between escape sequences or words.",
@ -1211,7 +1209,7 @@
"<strong>Example</strong>",
"<blockquote>'My name is Alan,' + ' I concatenate.'</blockquote>",
"<strong>Note</strong><br>Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.",
"<h4>Instructions</h4>",
"<hr>",
"Build <code>myStr</code> from the strings <code>\"This is the start. \"</code> and <code>\"This is the end.\"</code> using the <code>+</code> operator."
],
"releasedOn": "January 1, 2016",
@ -1265,7 +1263,7 @@
"description": [
"We can also use the <code>+=</code> operator to <dfn>concatenate</dfn> a string onto the end of an existing string variable. This can be very helpful to break a long string over several lines.",
"<strong>Note</strong><br>Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.",
"<h4>Instructions</h4>",
"<hr>",
"Build <code>myStr</code> over several lines by concatenating these two strings:<br><code>\"This is the first sentence. \"</code> and <code>\"This is the second sentence.\"</code> using the <code>+=</code> operator."
],
"releasedOn": "January 1, 2016",
@ -1315,7 +1313,7 @@
"title": "Constructing Strings with Variables",
"description": [
"Sometimes you will need to build a string, <a href=\"https://en.wikipedia.org/wiki/Mad_Libs\" target=\"_blank\">Mad Libs</a> style. By using the concatenation operator (<code>+</code>), you can insert one or more variables into a string you're building.",
"<h4>Instructions</h4>",
"<hr>",
"Set <code>myName</code> to a string equal to your name and build <code>myStr</code> with <code>myName</code> between the strings <code>\"My name is \"</code> and <code>\" and I am well!\"</code>"
],
"releasedOn": "January 1, 2016",
@ -1371,7 +1369,7 @@
"title": "Appending Variables to Strings",
"description": [
"Just as we can build a string over multiple lines out of string <dfn>literals</dfn>, we can also append variables to a string using the plus equals (<code>+=</code>) operator.",
"<h4>Instructions</h4>",
"<hr>",
"Set <code>someAdjective</code> and append it to <code>myStr</code> using the <code>+=</code> operator."
],
"releasedOn": "January 1, 2016",
@ -1430,7 +1428,7 @@
"You can find the length of a <code>String</code> value by writing <code>.length</code> after the string variable or string literal.",
"<code>\"Alan Peter\".length; // 10</code>",
"For example, if we created a variable <code>var firstName = \"Charles\"</code>, we could find out how long the string <code>\"Charles\"</code> is by using the <code>firstName.length</code> property.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>.length</code> property to count the number of characters in the <code>lastName</code> variable and assign it to <code>lastNameLength</code>."
],
"challengeSeed": [
@ -1480,7 +1478,7 @@
"<code>Bracket notation</code> 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>.",
"<h4>Instructions</h4>",
"<hr>",
"Use <dfn>bracket notation</dfn> 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."
],
@ -1534,7 +1532,7 @@
"<blockquote>var myStr = \"Bob\";<br>myStr[0] = \"J\";</blockquote>",
"cannot change the value of <code>myStr</code> to \"Job\", because the contents of <code>myStr</code> cannot be altered. Note that this does <em>not</em> mean that <code>myStr</code> cannot be changed, just that the individual characters of a <dfn>string literal</dfn> cannot be changed. The only way to change <code>myStr</code> would be to assign it with a new string, like this:",
"<blockquote>var myStr = \"Bob\";<br>myStr = \"Job\";</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Correct the assignment to <code>myStr</code> to achieve the desired effect that is intended by <code>myStr[0] = \"H\" ;</code>."
],
"releasedOn": "January 1, 2016",
@ -1581,7 +1579,7 @@
"description": [
"You can also use <dfn>bracket notation</dfn> to get the character at other positions within a string.",
"Remember that computers start counting at <code>0</code>, so the first character is actually the zeroth character.",
"<h4>Instructions</h4>",
"<hr>",
"Let's try to set <code>thirdLetterOfLastName</code> to equal the third letter of the <code>lastName</code> variable using bracket notation.",
"<strong>Hint</strong><br>Try looking at the <code>secondLetterOfFirstName</code> variable declaration if you get stuck."
],
@ -1629,7 +1627,7 @@
"description": [
"In order to get the last letter of a string, you can subtract one from the string's length.",
"For example, if <code>var firstName = \"Charles\"</code>, you can get the value of the last letter of the string by using <code>firstName[firstName.length - 1]</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Use <dfn>bracket notation</dfn> to find the last character in the <code>lastName</code> variable.",
"<strong>Hint</strong><br>Try looking at the <code>lastLetterOfFirstName</code> variable declaration if you get stuck."
],
@ -1677,7 +1675,7 @@
"description": [
"You can use the same principle we just used to retrieve the last character in a string to retrieve the Nth-to-last character.",
"For example, you can get the value of the third-to-last letter of the <code>var firstName = \"Charles\"</code> string by using <code>firstName[firstName.length - 3]</code>",
"<h4>Instructions</h4>",
"<hr>",
"Use <dfn>bracket notation</dfn> to find the second-to-last character in the <code>lastName</code> string.",
"<strong>Hint</strong><br>Try looking at the <code>thirdToLastLetterOfFirstName</code> variable declaration if you get stuck."
],
@ -1776,7 +1774,7 @@
"With JavaScript <code>array</code> variables, we can store several pieces of data in one place.",
"You start an array declaration with an opening square bracket, end it with a closing square bracket, and put a comma between each entry, like this: ",
"<code>var sandwich = [\"peanut butter\", \"jelly\", \"bread\"]</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the new array <code>myArray</code> so that it contains both a <code>string</code> and a <code>number</code> (in that order).",
"<strong>Hint</strong><br>Refer to the example code in the text editor if you get stuck."
],
@ -1819,7 +1817,7 @@
"title": "Nest one Array within Another Array",
"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>.",
"<h4>Instructions</h4>",
"<hr>",
"Create a nested array called <code>myArray</code>."
],
"challengeSeed": [
@ -1861,7 +1859,7 @@
"<strong>Example</strong>",
"<blockquote>var array = [1,2,3];<br>array[0]; // equals 1<br>var data = array[1]; // equals 2</blockquote>",
"<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0]</code>. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.",
"<h4>Instructions</h4>",
"<hr>",
"Create a variable called <code>myData</code> and set it to equal the first value of <code>myArray</code> using bracket notation."
],
"challengeSeed": [
@ -1911,7 +1909,7 @@
"<strong>Example</strong>",
"<blockquote>var ourArray = [3,2,1];<br>ourArray[0] = 1; // equals [1,2,1]</blockquote>",
"<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0]</code>. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the data stored at index <code>0</code> of <code>myArray</code> to a value of <code>3</code>."
],
"challengeSeed": [
@ -1960,7 +1958,7 @@
"<strong>Example</strong>",
"<blockquote>var arr = [<br> [1,2,3],<br> [4,5,6],<br> [7,8,9],<br> [[10,11,12], 13, 14]<br>];<br>arr[3]; // equals [[10,11,12], 13, 14]<br>arr[3][0]; // equals [10,11,12]<br>arr[3][0][1]; // equals 11</blockquote>",
"<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0][0]</code> and even this <code>array [0] [0]</code> is not allowed. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.",
"<h4>Instructions</h4>",
"<hr>",
"Using bracket notation select an element from <code>myArray</code> such that <code>myData</code> is equal to <code>8</code>."
],
"releasedOn": "January 1, 2016",
@ -2004,7 +2002,7 @@
"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>parameters</dfn> and \"pushes\" them onto the end of the array.",
"<blockquote>var arr = [1,2,3];<br>arr.push(4);<br>// arr is now [1,2,3,4]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Push <code>[\"dog\", 3]</code> onto the end of the <code>myArray</code> variable."
],
"challengeSeed": [
@ -2050,7 +2048,7 @@
"<code>.pop()</code> is used to \"pop\" a value off of the end of an array. We can store this \"popped off\" value by assigning it to a variable. In other words, <code>.pop()</code> removes the last element from an array and returns that element.",
"Any type of entry can be \"popped\" off of an array - numbers, strings, even nested arrays.",
"<blockquote><code>var threeArr = [1, 4, 6];<br> var oneDown = threeArr.pop();<br> console.log(oneDown); // Returns 6<br> console.log(threeArr); // Returns [1, 4]</code></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>.pop()</code> function to remove the last item from <code>myArray</code>, assigning the \"popped off\" value to <code>removedFromMyArray</code>."
],
"challengeSeed": [
@ -2099,7 +2097,7 @@
"description": [
"<code>pop()</code> always removes the last element of an array. What if you want to remove the first?",
"That's where <code>.shift()</code> comes in. It works just like <code>.pop()</code>, except it removes the first element instead of the last.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>.shift()</code> function to remove the first item from <code>myArray</code>, assigning the \"shifted off\" value to <code>removedFromMyArray</code>."
],
"challengeSeed": [
@ -2146,7 +2144,7 @@
"description": [
"Not only can you <code>shift</code> elements off of the beginning of an array, you can also <code>unshift</code> elements to the beginning of an array i.e. add elements in front of the array.",
"<code>.unshift()</code> works exactly like <code>.push()</code>, but instead of adding the element at the end of the array, <code>unshift()</code> adds the element at the beginning of the array.",
"<h4>Instructions</h4>",
"<hr>",
"Add <code>[\"Paul\",35]</code> to the beginning of the <code>myArray</code> variable using <code>unshift()</code>."
],
"challengeSeed": [
@ -2263,7 +2261,7 @@
"You can call or <dfn>invoke</dfn> this function by using its name followed by parentheses, like this:",
"<code>functionName();</code>",
"Each time the function is called it will print out the message <code>\"Hello World\"</code> on the dev console. All of the code between the curly braces will be executed every time the function is called.",
"<h4>Instructions</h4>",
"<hr>",
"<ol><li>Create a function called <code>reusableFunction</code> which prints <code>\"Hi World\"</code> to the dev console.</li><li>Call the function.</li></ol>"
],
"head": [
@ -2345,7 +2343,7 @@
"Then we can call <code>testFun</code>:",
"<code>testFun(\"Hello\", \"World\");</code>",
"We have passed two arguments, <code>\"Hello\"</code> and <code>\"World\"</code>. Inside the function, <code>param1</code> will equal \"Hello\" and <code>param2</code> will equal \"World\". Note that you could call <code>testFun</code> again with different arguments and the parameters would take on the value of the new arguments.",
"<h4>Instructions</h4>",
"<hr>",
"<ol><li>Create a function called <code>functionWithArgs</code> that accepts two arguments and outputs their sum to the dev console.</li><li>Call the function.</li></ol>"
],
"releasedOn": "January 1, 2016",
@ -2424,7 +2422,7 @@
"description": [
"In JavaScript, <dfn>scope</dfn> refers to the visibility of variables. Variables which are defined outside of a function block have <dfn>Global</dfn> scope. This means, they can be seen everywhere in your JavaScript code.",
"Variables which are used without the <code>var</code> keyword are automatically created in the <code>global</code> scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with <code>var</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Using <code>var</code>, declare a <code>global</code> variable <code>myGlobal</code> outside of any function. Initialize it with a value of <code>10</code>.",
"Inside function <code>fun1</code>, assign <code>5</code> to <code>oopsGlobal</code> <strong><em>without</em></strong> using the <code>var</code> keyword."
],
@ -2511,7 +2509,7 @@
"Here is a function <code>myTest</code> with a local variable called <code>loc</code>.",
"<blockquote>function myTest() {<br> var loc = \"foo\";<br> console.log(loc);<br>}<br>myTest(); // logs \"foo\"<br>console.log(loc); // loc is not defined</blockquote>",
"<code>loc</code> is not defined outside of the function.",
"<h4>Instructions</h4>",
"<hr>",
"Declare a local variable <code>myVar</code> inside <code>myLocalScope</code>. Run the tests and then follow the instructions commented out in the editor.",
"<strong>Hint</strong><br>Refreshing the page may help if you get stuck."
],
@ -2587,7 +2585,7 @@
"In this example:",
"<blockquote>var someVar = \"Hat\";<br>function myFun() {<br> var someVar = \"Head\";<br> return someVar;<br>}</blockquote>",
"The function <code>myFun</code> will return <code>\"Head\"</code> because the <code>local</code> version of the variable is present.",
"<h4>Instructions</h4>",
"<hr>",
"Add a local variable to <code>myOutfit</code> to override the value of <code>outerWear</code> with <code>\"sweater\"</code>."
],
"releasedOn": "January 1, 2016",
@ -2638,7 +2636,7 @@
"<strong>Example</strong>",
"<blockquote>function plusThree(num) {<br> return num + 3;<br>}<br>var answer = plusThree(5); // 8</blockquote>",
"<code>plusThree</code> takes an <dfn>argument</dfn> for <code>num</code> and returns a value equal to <code>num + 3</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Create a function <code>timesFive</code> that accepts one argument, multiplies it by <code>5</code>, and returns the new value."
],
"releasedOn": "January 1, 2016",
@ -2688,7 +2686,7 @@
"Assume we have pre-defined a function <code>sum</code> which adds two numbers together, then: ",
"<code>ourSum = sum(5, 12);</code>",
"will call <code>sum</code> function, which returns a value of <code>17</code> and assigns it to <code>ourSum</code> variable.",
"<h4>Instructions</h4>",
"<hr>",
"Call the <code>processArg</code> function with an argument of <code>7</code> and assign its return value to the variable <code>processed</code>."
],
"releasedOn": "January 1, 2016",
@ -2819,7 +2817,7 @@
"description": [
"Another data type is the <dfn>Boolean</dfn>. <code>Booleans</code> may only be one of two values: <code>true</code> or <code>false</code>. They are basically little on-off switches, where <code>true</code> is \"on\" and <code>false</code> is \"off.\" These two states are mutually exclusive.",
"<strong>Note</strong><br><code>Boolean</code> values are never written with quotes. The <code>strings</code> <code>\"true\"</code> and <code>\"false\"</code> are not <code>Boolean</code> and have no special meaning in JavaScript.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the <code>welcomeToBooleans</code> function so that it returns <code>true</code> instead of <code>false</code> when the run button is clicked."
],
"challengeSeed": [
@ -2867,7 +2865,7 @@
"<strong>Example</strong>",
"<blockquote>function test (myCondition) {<br> if (myCondition) {<br> return \"It was true\";<br> }<br> return \"It was false\";<br>}<br>test(true); // returns \"It was true\"<br>test(false); // returns \"It was false\"</blockquote>",
"When <code>test</code> is called with a value of <code>true</code>, the <code>if</code> statement evaluates <code>myCondition</code> to see if it is <code>true</code> or not. Since it is <code>true</code>, the function returns <code>\"It was true\"</code>. When we call <code>test</code> with a value of <code>false</code>, <code>myCondition</code> is <em>not</em> <code>true</code> and the statement in the curly braces is not executed and the function returns <code>\"It was false\"</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Create an <code>if</code> statement inside the function to return <code>\"Yes, that was true\"</code> if the parameter <code>wasThatTrue</code> is <code>true</code> and return <code>\"No, that was false\"</code> otherwise."
],
"challengeSeed": [
@ -2934,7 +2932,7 @@
"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. Once it does, however, it can compare terms as follows:",
"<blockquote> 1 == 1 // true<br> 1 == 2 // false<br> 1 == '1' // true<br> \"3\" == 3 // true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"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>"
],
"releasedOn": "January 1, 2016",
@ -2985,7 +2983,7 @@
"<strong>Examples</strong>",
"<blockquote>3 === 3 // true<br>3 === '3' // false</blockquote>",
"In the second example, <code>3</code> is a <code>Number</code> type and <code>'3'</code> is a <code>String</code> type.",
"<h4>Instructions</h4>",
"<hr>",
"Use the strict equality operator in the <code>if</code> statement so the function will return \"Equal\" when <code>val</code> is strictly equal to <code>7</code>"
],
"releasedOn": "January 1, 2016",
@ -3033,7 +3031,7 @@
"The inequality operator (<code>!=</code>) is the opposite of the equality operator. It means \"Not Equal\" and returns <code>false</code> where equality would return <code>true</code> and <em>vice versa</em>. Like the equality operator, the inequality operator will convert data types of values while comparing.",
"<strong>Examples</strong>",
"<blockquote>1 != 2 // true<br>1 != \"1\" // false<br>1 != '1' // false<br>1 != true // false<br>0 != false // false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the inequality operator <code>!=</code> in the <code>if</code> statement so that the function will return \"Not Equal\" when <code>val</code> is not equivalent to <code>99</code>"
],
"releasedOn": "January 1, 2016",
@ -3082,7 +3080,7 @@
"The strict inequality operator (<code>!==</code>) is the logical opposite of the strict equality operator. It means \"Strictly Not Equal\" and returns <code>false</code> where strict equality would return <code>true</code> and <em>vice versa</em>. Strict inequality will not convert data types.",
"<strong>Examples</strong>",
"<blockquote>3 !== 3 // false<br>3 !== '3' // true<br>4 !== 3 // true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"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>"
],
"releasedOn": "January 1, 2016",
@ -3139,7 +3137,7 @@
"Like the equality operator, greater than operator will convert data types of values while comparing.",
"<strong>Examples</strong>",
"<blockquote> 5 > 3 // true<br> 7 > '3' // true<br> 2 > 3 // false<br>'1' > 9 // false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>greater than</code> operator to the indicated lines so that the return statements make sense."
],
"releasedOn": "January 1, 2016",
@ -3196,7 +3194,7 @@
"Like the equality operator, <code>greater than or equal to</code> operator will convert data types while comparing.",
"<strong>Examples</strong>",
"<blockquote> 6 >= 6 // true<br> 7 >= '3' // true<br> 2 >= 3 // false<br>'7' >= 9 // false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>greater than or equal to</code> operator to the indicated lines so that the return statements make sense."
],
"releasedOn": "January 1, 2016",
@ -3252,7 +3250,7 @@
"The <dfn>less than</dfn> operator (<code>&lt;</code>) compares the values of two numbers. If the number to the left is less than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>. Like the equality operator, <dfn>less than</dfn> operator converts data types while comparing.",
"<strong>Examples</strong>",
"<blockquote> 2 &lt; 5 // true<br>'3' &lt; 7 // true<br> 5 &lt; 5 // false<br> 3 &lt; 2 // false<br>'8' &lt; 4 // false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>less than</code> operator to the indicated lines so that the return statements make sense."
],
"releasedOn": "January 1, 2016",
@ -3306,7 +3304,7 @@
"The <code>less than or equal to</code> operator (<code>&lt;=</code>) compares the values of two numbers. If the number to the left is less than or equal 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>",
"<blockquote> 4 &lt;= 5 // true<br>'7' &lt;= 7 // true<br> 5 &lt;= 5 // true<br> 3 &lt;= 2 // false<br>'8' &lt;= 4 // false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>less than or equal to</code> operator to the indicated lines so that the return statements make sense."
],
"releasedOn": "January 1, 2016",
@ -3364,7 +3362,7 @@
"<blockquote>if (num > 5) {<br> if (num < 10) {<br> return \"Yes\";<br> }<br>}<br>return \"No\";</blockquote>",
"will only return \"Yes\" if <code>num</code> is greater than <code>5</code> and less than <code>10</code>. The same logic can be written as:",
"<blockquote>if (num > 5 && num < 10) {<br> return \"Yes\";<br>}<br>return \"No\";</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Combine the two if statements into one statement which will return <code>\"Yes\"</code> if <code>val</code> is less than or equal to <code>50</code> and greater than or equal to <code>25</code>. Otherwise, will return <code>\"No\"</code>."
],
"releasedOn": "January 1, 2016",
@ -3426,7 +3424,7 @@
"<blockquote>if (num > 10) {<br> return \"No\";<br>}<br>if (num < 5) {<br> return \"No\";<br>}<br>return \"Yes\";</blockquote>",
"will return \"Yes\" only if <code>num</code> is between <code>5</code> and <code>10</code> (5 and 10 included). The same logic can be written as:",
"<blockquote>if (num > 10 || num < 5) {<br> return \"No\";<br>}<br>return \"Yes\";</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Combine the two <code>if</code> statements into one statement which returns <code>\"Outside\"</code> if <code>val</code> is not between <code>10</code> and <code>20</code>, inclusive. Otherwise, return <code>\"Inside\"</code>."
],
"releasedOn": "January 1, 2016",
@ -3487,7 +3485,7 @@
"description": [
"When a condition for an <code>if</code> statement is true, the block of code following it is executed. What about when that condition is false? Normally nothing would happen. With an <code>else</code> statement, an alternate block of code can be executed.",
"<blockquote>if (num > 10) {<br> return \"Bigger than 10\";<br>} else {<br> return \"10 or Less\";<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Combine the <code>if</code> statements into a single <code>if/else</code> statement."
],
"releasedOn": "January 1, 2016",
@ -3544,7 +3542,7 @@
"description": [
"If you have multiple conditions that need to be addressed, you can chain <code>if</code> statements together with <code>else if</code> statements.",
"<blockquote>if (num > 15) {<br> return \"Bigger than 15\";<br>} else if (num < 5) {<br> return \"Smaller than 5\";<br>} else {<br> return \"Between 5 and 15\";<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Convert the logic to use <code>else if</code> statements."
],
"releasedOn": "January 1, 2016",
@ -3604,7 +3602,7 @@
"<blockquote>function bar(x) {<br> if (x < 2) {<br> return \"Less than two\";<br> } else if (x < 1) {<br> return \"Less than one\";<br> } else {<br> return \"Greater than or equal to two\";<br> }<br>}</blockquote>",
"While these two functions look nearly identical if we pass a number to both we get different outputs.",
"<blockquote>foo(0) // \"Less than one\"<br>bar(0) // \"Less than two\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the order of logic in the function so that it will return the correct statements in all cases."
],
"challengeSeed": [
@ -3656,7 +3654,7 @@
"description": [
"<code>if/else</code> statements can be chained together for complex logic. Here is <dfn>pseudocode</dfn> of multiple chained <code>if</code> / <code>else if</code> statements:",
"<blockquote>if (<em>condition1</em>) {<br> <em>statement1</em><br>} else if (<em>condition2</em>) {<br> <em>statement2</em><br>} else if (<em>condition3</em>) {<br> <em>statement3</em><br>. . .<br>} else {<br> <em>statementN</em><br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Write chained <code>if</code>/<code>else if</code> statements to fulfill the following conditions:",
"<code>num &lt; 5</code> - return \"Tiny\"<br><code>num &lt; 10</code> - return \"Small\"<br><code>num &lt; 15</code> - return \"Medium\"<br><code>num &lt; 20</code> - return \"Large\"<br><code>num >= 20</code> - return \"Huge\""
],
@ -3766,7 +3764,7 @@
"Here is a <dfn>pseudocode</dfn> example:",
"<blockquote>switch (num) {<br> case value1:<br> statement1;<br> break;<br> case value2:<br> statement2;<br> break;<br>...<br> case valueN:<br> statementN;<br> break;<br>}</blockquote>",
"<code>case</code> values are tested with strict equality (<code>===</code>). The <code>break</code> tells JavaScript to stop executing statements. If the <code>break</code> is omitted, the next statement will be executed.",
"<h4>Instructions</h4>",
"<hr>",
"Write a switch statement which tests <code>val</code> and sets <code>answer</code> for the following conditions:<br><code>1</code> - \"alpha\"<br><code>2</code> - \"beta\"<br><code>3</code> - \"gamma\"<br><code>4</code> - \"delta\""
],
"releasedOn": "January 1, 2016",
@ -3822,7 +3820,7 @@
"In a <code>switch</code> statement you may not be able to specify all possible values as <code>case</code> statements. Instead, you can add the <code>default</code> statement which will be executed if no matching <code>case</code> statements are found. Think of it like the final <code>else</code> statement in an <code>if/else</code> chain.",
"A <code>default</code> statement should be the last case.",
"<blockquote>switch (num) {<br> case value1:<br> statement1;<br> break;<br> case value2:<br> statement2;<br> break;<br>...<br> default:<br> defaultStatement;<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Write a switch statement to set <code>answer</code> for the following conditions:<br><code>\"a\"</code> - \"apple\"<br><code>\"b\"</code> - \"bird\"<br><code>\"c\"</code> - \"cat\"<br><code>default</code> - \"stuff\""
],
"releasedOn": "January 1, 2016",
@ -3876,7 +3874,7 @@
"If the <code>break</code> statement is omitted from a <code>switch</code> statement's <code>case</code>, the following <code>case</code> statement(s) are executed until a <code>break</code> is encountered. If you have multiple inputs with the same output, you can represent them in a <code>switch</code> statement like this:",
"<blockquote>switch(val) {<br> case 1:<br> case 2:<br> case 3:<br> result = \"1, 2, or 3\";<br> break;<br> case 4:<br> result = \"4 alone\";<br>}</blockquote>",
"Cases for 1, 2, and 3 will all produce the same result.",
"<h4>Instructions</h4>",
"<hr>",
"Write a switch statement to set <code>answer</code> for the following ranges:<br><code>1-3</code> - \"Low\"<br><code>4-6</code> - \"Mid\"<br><code>7-9</code> - \"High\"",
"<strong>Note</strong><br>You will need to have a <code>case</code> statement for each number in the range."
],
@ -3936,7 +3934,7 @@
"<blockquote>if (val === 1) {<br> answer = \"a\";<br>} else if (val === 2) {<br> answer = \"b\";<br>} else {<br> answer = \"c\";<br>}</blockquote>",
"can be replaced with:",
"<blockquote>switch (val) {<br> case 1:<br> answer = \"a\";<br> break;<br> case 2:<br> answer = \"b\";<br> break;<br> default:<br> answer = \"c\";<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the chained <code>if</code>/<code>else if</code> statements into a <code>switch</code> statement."
],
"releasedOn": "January 1, 2016",
@ -4005,7 +4003,7 @@
"<blockquote>function isEqual(a,b) {<br> if (a === b) {<br> return true;<br> } else {<br> return false;<br> }<br>}</blockquote>",
"But there's a better way to do this. Since <code>===</code> returns <code>true</code> or <code>false</code>, we can return the result of the comparison:",
"<blockquote>function isEqual(a,b) {<br> return a === b;<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fix the function <code>isLess</code> to remove the <code>if/else</code> statements."
],
"releasedOn": "January 1, 2016",
@ -4058,7 +4056,7 @@
"<strong>Example</strong>",
"<blockquote>function myFun() {<br> console.log(\"Hello\");<br> return \"World\";<br> console.log(\"byebye\")<br>}<br>myFun();</blockquote>",
"The above outputs \"Hello\" to the console, returns \"World\", but <code>\"byebye\"</code> is never output, because the function exits at the <code>return</code> statement.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the function <code>abTest</code> so that if <code>a</code> or <code>b</code> are less than <code>0</code> the function will immediately exit with a value of <code>undefined</code>.",
"<strong>Hint</strong><br>Remember that <a href='http://www.freecodecamp.com/challenges/understanding-uninitialized-variables' target='_blank'><code>undefined</code> is a keyword</a>, not a string."
],
@ -4172,7 +4170,7 @@
"Here's a sample object:",
"<blockquote>var cat = {<br> \"name\": \"Whiskers\",<br> \"legs\": 4,<br> \"tails\": 1,<br> \"enemies\": [\"Water\", \"Dogs\"]<br>};</blockquote>",
"Objects are useful for storing data in a structured way, and can represent real world objects, like a cat.",
"<h4>Instructions</h4>",
"<hr>",
"Make an object that represents a dog called <code>myDog</code> which contains the properties <code>\"name\"</code> (a string), <code>\"legs\"</code>, <code>\"tails\"</code> and <code>\"friends\"</code>.",
"You can set these object properties to whatever values you want, as long <code>\"name\"</code> is a string, <code>\"legs\"</code> and <code>\"tails\"</code> are numbers, and <code>\"friends\"</code> is an array."
],
@ -4237,7 +4235,7 @@
"The dot operator is what you use when you know the name of the property you're trying to access ahead of time.",
"Here is a sample of using the dot operator (<code>.</code>) to read an object property:",
"<blockquote>var myObj = {<br> prop1: \"val1\",<br> prop2: \"val2\"<br>};<br>var prop1val = myObj.prop1; // val1<br>var prop2val = myObj.prop2; // val2</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Read in the property values of <code>testObj</code> using dot notation. Set the variable <code>hatValue</code> equal to the object property <code>hat</code> and set the variable <code>shirtValue</code> equal to the object property <code>shirt</code>."
],
"releasedOn": "January 1, 2016",
@ -4291,7 +4289,7 @@
"Here is a sample of using bracket notation to read an object property:",
"<blockquote>var myObj = {<br> \"Space Name\": \"Kirk\",<br> \"More Space\": \"Spock\"<br>};<br>myObj[\"Space Name\"]; // Kirk<br>myObj['More Space']; // Spock</blockquote>",
"Note that property names with spaces in them must be in quotes (single or double).",
"<h4>Instructions</h4>",
"<hr>",
"Read the values of the properties <code>\"an entree\"</code> and <code>\"the drink\"</code> of <code>testObj</code> using bracket notation and assign them to <code>entreeValue</code> and <code>drinkValue</code> respectively."
],
"releasedOn": "January 1, 2016",
@ -4347,7 +4345,7 @@
"Here is one more:",
"<blockquote>var myDog = \"Hunter\";<br>var dogs = {<br> Fido: \"Mutt\",\n Hunter: \"Doberman\",\n Snoopie: \"Beagle\"<br >}<br>var breed = dogs[myDog];<br>console.log(breed);// \"Doberman\"</blockquote>",
"Note that we do <em>not</em> use quotes around the variable name when using it to access the property because we are using the <em>value</em> of the variable, not the <em>name</em>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>playerNumber</code> variable to lookup player <code>16</code> in <code>testObj</code> using bracket notation. Then assign that name to the <code>player</code> variable."
],
"releasedOn": "January 1, 2016",
@ -4406,7 +4404,7 @@
"<code>ourDog.name = \"Happy Camper\";</code> or",
"<code>ourDog[\"name\"] = \"Happy Camper\";</code>",
"Now when we evaluate <code>ourDog.name</code>, instead of getting \"Camper\", we'll get his new name, \"Happy Camper\".",
"<h4>Instructions</h4>",
"<hr>",
"Update the <code>myDog</code> object's name property. Let's change her name from \"Coder\" to \"Happy Coder\". You can use either dot or bracket notation."
],
"challengeSeed": [
@ -4475,7 +4473,7 @@
"or",
"<code>ourDog[\"bark\"] = \"bow-wow\";</code>",
"Now when we evaluate <code>ourDog.bark</code>, we'll get his bark, \"bow-wow\".",
"<h4>Instructions</h4>",
"<hr>",
"Add a <code>\"bark\"</code> property to <code>myDog</code> and set it to a dog sound, such as \"woof\". You may use either dot or bracket notation."
],
"challengeSeed": [
@ -4532,7 +4530,7 @@
"description": [
"We can also delete properties from objects like this:",
"<code>delete ourDog.bark;</code>",
"<h4>Instructions</h4>",
"<hr>",
"Delete the <code>\"tails\"</code> property from <code>myDog</code>. You may use either dot or bracket notation."
],
"challengeSeed": [
@ -4591,7 +4589,7 @@
"Objects can be thought of as a key/value storage, like a dictionary. If you have tabular data, you can use an object to \"lookup\" values rather than a <code>switch</code> statement or an <code>if/else</code> chain. This is most useful when you know that your input data is limited to a certain range.",
"Here is an example of a simple reverse alphabet lookup:",
"<blockquote>var alpha = {<br> 1:\"Z\",<br> 2:\"Y\",<br> 3:\"X\",<br> 4:\"W\",<br> ...<br> 24:\"C\",<br> 25:\"B\",<br> 26:\"A\"<br>};<br>alpha[2]; // \"Y\"<br>alpha[24]; // \"C\"<br><br>var value = 2;<br>alpha[value]; // \"Y\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Convert the switch statement into a lookup table called <code>lookup</code>. Use it to lookup <code>val</code> and assign the associated string to the <code>result</code> variable."
],
"releasedOn": "January 1, 2016",
@ -4664,7 +4662,7 @@
"Sometimes it is useful to check if the property of a given object exists or not. We can use the <code>.hasOwnProperty(propname)</code> method of objects to determine if that object has the given property name. <code>.hasOwnProperty()</code> returns <code>true</code> or <code>false</code> if the property is found or not.",
"<strong>Example</strong>",
"<blockquote>var myObj = {<br> top: \"hat\",<br> bottom: \"pants\"<br>};<br>myObj.hasOwnProperty(\"top\"); // true<br>myObj.hasOwnProperty(\"middle\"); // false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Modify the function <code>checkObj</code> to test <code>myObj</code> for <code>checkProp</code>. If the property is found, return that property's value. If not, return <code>\"Not Found\"</code>."
],
"releasedOn": "January 1, 2016",
@ -4723,7 +4721,7 @@
"<a href='http://www.json.org/' target=_blank>JavaScript Object Notation</a> or <code>JSON</code> is a related data interchange format used to store data.",
"<blockquote>{<br> \"artist\": \"Daft Punk\",<br> \"title\": \"Homework\",<br> \"release_year\": 1997,<br> \"formats\": [ <br> \"CD\",<br> \"Cassette\",<br> \"LP\"<br> ],<br> \"gold\": true<br>}</blockquote>",
"<strong>Note</strong><br>You will need to place a comma after every object in the array, unless it is the last object in the array.",
"<h4>Instructions</h4>",
"<hr>",
"Add a new album to the <code>myMusic</code> array. Add <code>artist</code> and <code>title</code> strings, <code>release_year</code> number, and a <code>formats</code> array of strings."
],
"releasedOn": "January 1, 2016",
@ -4784,7 +4782,7 @@
"The sub-properties of objects can be accessed by chaining together the dot or bracket notation.",
"Here is a nested object:",
"<blockquote>var ourStorage = {<br> \"desk\": {<br> \"drawer\": \"stapler\"<br> },<br> \"cabinet\": {<br> \"top drawer\": { <br> \"folder1\": \"a file\",<br> \"folder2\": \"secrets\"<br> },<br> \"bottom drawer\": \"soda\"<br> }<br>};<br>ourStorage.cabinet[\"top drawer\"].folder2; // \"secrets\"<br>ourStorage.desk.drawer; // \"stapler\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Access the <code>myStorage</code> object and assign the contents of the <code>glove box</code> property to the <code>gloveBoxContents</code> variable. Use bracket notation for properties with a space in their name."
],
"releasedOn": "January 1, 2016",
@ -4844,7 +4842,7 @@
"As we have seen in earlier examples, objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays.",
"Here is an example of how to access a nested array:",
"<blockquote>var ourPets = [<br> {<br> animalType: \"cat\",<br> names: [<br> \"Meowzer\",<br> \"Fluffy\",<br> \"Kit-Cat\"<br> ]<br> },<br> {<br> animalType: \"dog\",<br> names: [<br> \"Spot\",<br> \"Bowser\",<br> \"Frankie\"<br> ]<br> }<br>];<br>ourPets[0].names[1]; // \"Fluffy\"<br>ourPets[1].names[0]; // \"Spot\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Retrieve the second tree from the variable <code>myPlants</code> using object dot and array bracket notation."
],
"releasedOn": "January 1, 2016",
@ -5003,7 +5001,7 @@
"Another type of JavaScript loop is called a \"<code>while loop</code>\", because it runs \"while\" a specified condition is true and stops once that condition is no longer true.",
"<blockquote>var ourArray = [];<br>var i = 0;<br>while(i &#60; 5) {<br> ourArray.push(i);<br> i++;<br>}</blockquote>",
"Let's try getting a while loop to work by pushing values to an array.",
"<h4>Instructions</h4>",
"<hr>",
"Push the numbers 0 through 4 to <code>myArray</code> using a <code>while</code> loop."
],
"challengeSeed": [
@ -5059,7 +5057,7 @@
"In the following example we initialize with <code>i = 0</code> and iterate while our condition <code>i &#60; 5</code> is true. We'll increment <code>i</code> by <code>1</code> in each loop iteration with <code>i++</code> as our <code>final-expression</code>.",
"<blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 5; i++) {<br> ourArray.push(i);<br>}</blockquote>",
"<code>ourArray</code> will now contain <code>[0,1,2,3,4]</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Use a <code>for</code> loop to work to push the values 1 through 5 onto <code>myArray</code>."
],
"challengeSeed": [
@ -5121,7 +5119,7 @@
"<blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 10; i += 2) {<br> ourArray.push(i);<br>}</blockquote>",
"<code>ourArray</code> will now contain <code>[0,2,4,6,8]</code>.",
"Let's change our <code>initialization</code> so we can count by odd numbers.",
"<h4>Instructions</h4>",
"<hr>",
"Push the odd numbers from 1 through 9 to <code>myArray</code> using a <code>for</code> loop."
],
"challengeSeed": [
@ -5179,7 +5177,7 @@
"<blockquote>var ourArray = [];<br>for (var i=10; i &#62; 0; i-=2) {<br> ourArray.push(i);<br>}</blockquote>",
"<code>ourArray</code> will now contain <code>[10,8,6,4,2]</code>.",
"Let's change our <code>initialization</code> and <code>final-expression</code> so we can count backward by twos by odd numbers.",
"<h4>Instructions</h4>",
"<hr>",
"Push the odd numbers from 9 through 1 to <code>myArray</code> using a <code>for</code> loop."
],
"challengeSeed": [
@ -5236,7 +5234,7 @@
"A common task in JavaScript is to iterate through the contents of an array. One way to do that is with a <code>for</code> loop. This code will output each element of the array <code>arr</code> to the console:",
"<blockquote>var arr = [10,9,8,7,6];<br>for (var i = 0; i < arr.length; i++) {<br> console.log(arr[i]);<br>}</blockquote>",
"Remember that Arrays have zero-based numbering, which means the last index of the array is length - 1. Our <dfn>condition</dfn> for this loop is <code>i < arr.length</code>, which stops when <code>i</code> is at length - 1.",
"<h4>Instructions</h4>",
"<hr>",
"Declare and initialize a variable <code>total</code> to <code>0</code>. Use a <code>for</code> loop to add the value of each element of the <code>myArr</code> array to <code>total</code>."
],
"releasedOn": "January 1, 2016",
@ -5290,7 +5288,7 @@
"If you have a multi-dimensional array, you can use the same logic as the prior waypoint to loop through both the array and any sub-arrays. Here is an example:",
"<blockquote>var arr = [<br> [1,2], [3,4], [5,6]<br>];<br>for (var i=0; i &lt; arr.length; i++) {<br> for (var j=0; j &lt; arr[i].length; j++) {<br> console.log(arr[i][j]);<br> }<br>}</blockquote>",
"This outputs each sub-element in <code>arr</code> one at a time. Note that for the inner loop, we are checking the <code>.length</code> of <code>arr[i]</code>, since <code>arr[i]</code> is itself an array.",
"<h4>Instructions</h4>",
"<hr>",
"Modify function <code>multiplyAll</code> so that it multiplies the <code>product</code> variable by each number in the sub-arrays of <code>arr</code>"
],
"releasedOn": "January 1, 2016",
@ -5419,7 +5417,7 @@
"Random numbers are useful for creating random behavior.",
"JavaScript has a <code>Math.random()</code> function that generates a random decimal number between <code>0</code> (inclusive) and not quite up to <code>1</code> (exclusive). Thus <code>Math.random()</code> can return a <code>0</code> but never quite return a <code>1</code>",
"<strong>Note</strong><br>Like <a href='storing-values-with-the-assignment-operator' target='_blank'>Storing Values with the Equal Operator</a>, all function calls will be resolved before the <code>return</code> executes, so we can <code>return</code> the value of the <code>Math.random()</code> function.",
"<h4>Instructions</h4>",
"<hr>",
"Change <code>randomFraction</code> to return a random number instead of returning <code>0</code>."
],
"challengeSeed": [
@ -5468,7 +5466,7 @@
"Putting everything together, this is what our code looks like:",
"<code>Math.floor(Math.random() * 20);</code>",
"We are calling <code>Math.random()</code>, multiplying the result by 20, then passing the value to <code>Math.floor()</code> function to round the value down to the nearest whole number.",
"<h4>Instructions</h4>",
"<hr>",
"Use this technique to generate and return a random whole number between <code>0</code> and <code>9</code>."
],
"challengeSeed": [
@ -5522,7 +5520,7 @@
"To do this, we'll define a minimum number <code>min</code> and a maximum number <code>max</code>.",
"Here's the formula we'll use. Take a moment to read it and try to understand what this code is doing:",
"<code>Math.floor(Math.random() * (max - min + 1)) + min</code>",
"<h4>Instructions</h4>",
"<hr>",
"Create a function called <code>randomRange</code> that takes a range <code>myMin</code> and <code>myMax</code> and returns a random number that's greater than or equal to <code>myMin</code>, and is less than or equal to <code>myMax</code>, inclusive."
],
"challengeSeed": [

22
challenges/02-javascript-algorithms-and-data-structures/debugging.json
View File

@ -55,7 +55,7 @@
"The <code>console.log()</code> method, which \"prints\" the output of what's within its parentheses to the console, will likely be the most helpful debugging tool. Placing it at strategic points in your code can show you the intermediate values of variables. It's good practice to have an idea of what the output should be before looking at what it is. Having check points to see the status of your calculations throughout your code will help narrow down where the problem is.",
"Here's an example to print 'Hello world!' to the console:",
"<code>console.log('Hello world!');</code>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>console.log()</code> method to print the value of the variable <code>a</code> where noted in the code."
],
"challengeSeed": [
@ -104,7 +104,7 @@
"Here are some examples using <code>typeof</code>:",
"<blockquote>console.log(typeof \"\"); // outputs \"string\"<br>console.log(typeof 0); // outputs \"number\"<br>console.log(typeof []); // outputs \"object\"<br>console.log(typeof {}); // outputs \"object\"</blockquote>",
"JavaScript recognizes six primitive (immutable) data types: <code>Boolean</code>, <code>Null</code>, <code>Undefined</code>, <code>Number</code>, <code>String</code>, and <code>Symbol</code> (new with ES6) and one type for mutable items: <code>Object</code>. Note that in JavaScript, arrays are technically a type of object.",
"<h4>Instructions</h4>",
"<hr>",
"Add two <code>console.log()</code> statements to check the <code>typeof</code> each of the two variables <code>seven</code> and <code>three</code> in the code."
],
"challengeSeed": [
@ -149,7 +149,7 @@
"description": [
"The <code>console.log()</code> and <code>typeof</code> methods are the two primary ways to check intermediate values and types of program output. Now it's time to get into the common forms that bugs take. One syntax-level issue that fast typers can commiserate with is the humble spelling error.",
"Transposed, missing, or mis-capitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - and complain in the form of a reference error. JavaScript variable and function names are case-sensitive.",
"<h4>Instructions</h4>",
"<hr>",
"Fix the two spelling errors in the code so the <code>netWorkingCapital</code> calculation works."
],
"challengeSeed": [
@ -196,7 +196,7 @@
"description": [
"Another syntax error to be aware of is that all opening parentheses, brackets, curly braces, and quotes have a closing pair. Forgetting a piece tends to happen when you're editing existing code and inserting items with one of the pair types. Also, take care when nesting code blocks into others, such as adding a callback function as an argument to a method.",
"One way to avoid this mistake is as soon as the opening character is typed, immediately include the closing match, then move the cursor back between them and continue coding. Fortunately, most modern code editors generate the second half of the pair automatically.",
"<h4>Instructions</h4>",
"<hr>",
"Fix the two pair errors in the code."
],
"challengeSeed": [
@ -242,7 +242,7 @@
"<blockquote>// These are correct:<br>const grouchoContraction = \"I've had a perfectly wonderful evening, but this wasn't it.\";<br>const quoteInString = \"Groucho Marx once said 'Quote me as saying I was mis-quoted.'\";<br>// This is incorrect:<br>const uhOhGroucho = 'I've had a perfectly wonderful evening, but this wasn't it.';</blockquote>",
"Of course, it is okay to use only one style of quotes. You can escape the quotes inside the string by using the backslash (\\) escape character:",
"<blockquote>// Correct use of same quotes:<br>const allSameQuotes = 'I\\'ve had a perfectly wonderful evening, but this wasn\\'t it.';</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fix the string so it either uses different quotes for the <code>href</code> value, or escape the existing ones. Keep the double quote marks around the entire string."
],
"challengeSeed": [
@ -286,7 +286,7 @@
"As covered in previous challenges, the assignment operator (<code>=</code>) in JavaScript assigns a value to a variable name. And the <code>==</code> and <code>===</code> operators check for equality (the triple <code>===</code> tests for strict equality, meaning both value and type are the same).",
"The code below assigns <code>x</code> to be 2, which evaluates as <code>true</code>. Almost every value on its own in JavaScript evaluates to <code>true</code>, except what are known as the \"falsy\" values: <code>false</code>, <code>0</code>, <code>\"\"</code> (an empty string), <code>NaN</code>, <code>undefined</code>, and <code>null</code>.",
"<blockquote>let x = 1;<br>let y = 2;<br>if (x = y) {<br>&nbsp;&nbsp;// this code block will run for any value of y (unless y were originally set as a falsy)<br>} else {<br>&nbsp;&nbsp;// this code block is what should run (but won't) in this example<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fix the condition so the program runs the right branch, and the appropriate value is assigned to <code>result</code>."
],
"challengeSeed": [
@ -337,7 +337,7 @@
"When a function or method doesn't take any arguments, you may forget to include the (empty) opening and closing parentheses when calling it. Often times the result of a function call is saved in a variable for other use in your code. This error can be detected by logging variable values (or their types) to the console and seeing that one is set to a function reference, instead of the expected value the function returns.",
"The variables in the following example are different:",
"<blockquote>function myFunction() {<br>&nbsp;&nbsp;return \"You rock!\";<br>}<br>let varOne = myFunction; // set to equal a function<br>let varTwo = myFunction(); // set to equal the string \"You rock!\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fix the code so the variable <code>result</code> is set to the value returned from calling the function <code>getNine</code>."
],
"challengeSeed": [
@ -383,7 +383,7 @@
"title": "Catch Arguments Passed in the Wrong Order When Calling a Function",
"description": [
"Continuing the discussion on calling functions, the next bug to watch out for is when a function's arguments are supplied in the incorrect order. If the arguments are different types, such as a function expecting an array and an integer, this will likely throw a runtime error. If the arguments are the same type (all integers, for example), then the logic of the code won't make sense. Make sure to supply all required arguments, in the proper order to avoid these issues.",
"<h4>Instructions</h4>",
"<hr>",
"The following function <code>positivePowers</code> raises a base to a positive exponent. Unfortunately, it's not called properly - fix the code so the value of <code>power</code> is the expected 8."
],
"challengeSeed": [
@ -436,7 +436,7 @@
"<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>.",
"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:",
"<blockquote>let alphabet = \"abcdefghijklmnopqrstuvwxyz\";<br>let len = alphabet.length;<br>for (let i = 0; i <= len; i++) {<br>&nbsp;&nbsp;// loops one too many times at the end<br>&nbsp;&nbsp;console.log(alphabet[i]);<br>}<br>for (let j = 1; j < len; j++) {<br>&nbsp;&nbsp;// loops one too few times and misses the first character at index 0<br>&nbsp;&nbsp;console.log(alphabet[j]);<br>}<br>for (let k = 0; k < len; k++) {<br>&nbsp;&nbsp;// Goldilocks approves - this is just right<br>&nbsp;&nbsp;console.log(alphabet[k]);<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fix the two indexing errors in the following function so all the numbers 1 through 5 are printed to the console."
],
"challengeSeed": [
@ -486,7 +486,7 @@
"description": [
"Sometimes it's necessary to save information, increment counters, or re-set variables within a loop. A potential issue is when variables either should be reinitialized, and aren't, or vice versa. This is particularly dangerous if you accidentally reset the variable being used for the terminal condition, causing an infinite loop.",
"Printing variable values with each cycle of your loop by using <code>console.log()</code> can uncover buggy behavior related to resetting, or failing to reset a variable.",
"<h4>Instructions</h4>",
"<hr>",
"The following function is supposed to create a two-dimensional array with <code>m</code> rows and <code>n</code> columns of zeroes. Unfortunately, it's not producing the expected output because the <code>row</code> variable isn't being reinitialized (set back to an empty array) in the outer loop. Fix the code so it returns a correct 3x2 array of zeroes, which looks like <code>[[0, 0], [0, 0], [0, 0]]</code>."
],
"challengeSeed": [
@ -547,7 +547,7 @@
"There was an example of an infinite loop in the introduction to this section - it had no terminal condition to break out of the <code>while</code> loop inside <code>loopy()</code>. Do NOT call this function!",
"<blockquote>function loopy() {<br>&nbsp;&nbsp;while(true) {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Hello, world!\");<br>&nbsp;&nbsp;}<br>}</blockquote>",
"It's the programmer's job to ensure that the terminal condition, which tells the program when to break out of the loop code, is eventually reached. One error is incrementing or decrementing a counter variable in the wrong direction from the terminal condition. Another one is accidentally resetting a counter or index variable within the loop code, instead of incrementing or decrementing it.",
"<h4>Instructions</h4>",
"<hr>",
"The <code>myFunc()</code> function contains an infinite loop because the terminal condition <code>i != 4</code> will never evaluate to <code>false</code> (and break the looping) - <code>i</code> will increment by 2 each pass, and jump right over 4 since <code>i</code> is odd to start. Fix the comparison operator in the terminal condition so the loop only runs for <code>i</code> less than or equal to 4."
],
"challengeSeed": [

44
challenges/02-javascript-algorithms-and-data-structures/functional-programming.json
View File

@ -43,7 +43,7 @@
"1) Isolated functions - there is no dependence on the state of the program, which includes global variables that are subject to change",
"2) Pure functions - the same input always gives the same output",
"3) Functions with limited side effects - any changes, or mutations, to the state of the program outside the function are carefully controlled",
"<h4>Instructions</h4>",
"<hr>",
"The members of Free Code Camp happen to love tea.",
"In the code editor, the <code>prepareTea</code> and <code>getTea</code> functions are already defined for you. Call the <code>getTea</code> function to get 40 cups of tea for the team, and store them in the <code>tea4TeamFCC</code> variable."
],
@ -116,7 +116,7 @@
"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>.",
"<h4>Instructions</h4>",
"<hr>",
"Prepare 27 cups of green tea and 13 cups of black tea and store them in <code>tea4GreenTeamFCC</code> and <code>tea4BlackTeamFCC</code> variables, respectively. Note that the <code>getTea</code> function has been modified so it now takes a function as the first argument.",
"Note: The data (the number of cups of tea) is supplied as the last argument. We'll discuss this more in later lessons."
],
@ -283,7 +283,7 @@
"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.",
"Let's try to master this discipline and not alter any variable or object in our code.",
"<h4>Instructions</h4>",
"<hr>",
"Fill in the code for the function <code>incrementer</code> so it returns the value of the global variable <code>fixedValue</code> increased by one."
],
"challengeSeed": [
@ -337,7 +337,7 @@
"There are several good consequences from this principle. The function is easier to test, you know exactly what input it takes, and it won't depend on anything else in your program.",
"This can give you more confidence when you alter, remove, or add new code. You would know what you can or cannot change and you can see where the potential traps are.",
"Finally, the function would always produce the same output for the same set of inputs, no matter what part of the code executes it.",
"<h4>Instructions</h4>",
"<hr>",
"Let's update the <code>incrementer</code> function to clearly declare its dependencies.",
"Write the <code>incrementer</code> function so it takes an argument, and then increases the value by one."
],
@ -391,7 +391,7 @@
"1) Don't alter a variable or object - create new variables and objects and return them if need be from a function.",
"2) Declare function arguments - any computation inside a function depends only on the arguments, and not on any global object or variable.",
"Adding one to a number is not very exciting, but we can apply these principles when working with arrays or more complex objects.",
"<h4>Instructions</h4>",
"<hr>",
"Refactor (rewrite) the code so the global array <code>bookList</code> is not changed inside either function. The <code>add</code> function should add the given <code>bookName</code> to the end of an array. The <code>remove</code> function should remove the given <code>bookName</code> from an array. Both functions should return an array, and any new parameters should be added before the <code>bookName</code> one."
],
"challengeSeed": [
@ -470,7 +470,7 @@
"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.",
"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.",
"<h4>Instructions</h4>",
"<hr>",
"The <code>watchList</code> array holds objects with information on several movies. Use <code>map</code> to pull the title and rating from <code>watchList</code> and save the new array in the <code>rating</code> variable. The code in the editor currently uses a <code>for</code> loop to do this, replace the loop functionality with your <code>map</code> expression."
],
"challengeSeed": [
@ -636,7 +636,7 @@
"In other words, <code>map</code> is a pure function, and its output depends solely on its inputs. Plus, it takes another function as its argument.",
"It would teach us a lot about <code>map</code> to try to implement a version of it that behaves exactly like the <code>Array.prototype.map()</code> with a <code>for</code> loop or <code>Array.prototype.forEach()</code>.",
"Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.",
"<h4>Instructions</h4>",
"<hr>",
"Write your own <code>Array.prototype.myMap()</code>, which should behave exactly like <code>Array.prototype.map()</code>. You may use a <code>for</code> loop or the <code>forEach</code> method."
],
"challengeSeed": [
@ -689,7 +689,7 @@
"description": [
"Another useful array function is <code>Array.prototype.filter()</code>, or simply <code>filter()</code>. The <code>filter</code> method returns a new array which is at most as long as the original array, but usually has fewer items.",
"<code>Filter</code> doesn't alter the original array, just like <code>map</code>. It takes a callback function that applies the logic inside the callback on each element of the array. If an element returns true based on the criteria in the callback function, then it is included in the new array.",
"<h4>Instructions</h4>",
"<hr>",
"The variable <code>watchList</code> holds an array of objects with information on several movies. Use a combination of <code>filter</code> and <code>map</code> to return a new array of objects with only <code>title</code> and <code>rating</code> keys, but where <code>imdbRating</code> is greater than or equal to 8.0. Note that the rating values are saved as strings in the object and you may want to convert them into numbers to perform mathematical operations on them."
],
"challengeSeed": [
@ -850,7 +850,7 @@
"description": [
"It would teach us a lot about the <code>filter</code> method if we try to implement a version of it that behaves exactly like <code>Array.prototype.filter()</code>. It can use either a <code>for</code> loop or <code>Array.prototype.forEach()</code>.",
"Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.",
"<h4>Instructions</h4>",
"<hr>",
"Write your own <code>Array.prototype.myFilter()</code>, which should behave exactly like <code>Array.prototype.filter()</code>. You may use a <code>for</code> loop or the <code>Array.prototype.forEach()</code> method."
],
"challengeSeed": [
@ -904,7 +904,7 @@
"The <code>slice</code> method returns a copy of certain elements of an array. It can take two arguments, the first gives the index of where to begin the slice, the second is the index for where to end the slice (and it's non-inclusive). If the arguments are not provided, the default is to start at the beginning of the array through the end, which is an easy way to make a copy of the entire array. The <code>slice</code> method does not mutate the original array, but returns a new one.",
"Here's an example:",
"<blockquote>var arr = [\"Cat\", \"Dog\", \"Tiger\", \"Zebra\"];<br>var newArray = arr.slice(1, 3);<br>// Sets newArray to [\"Dog\", \"Tiger\"]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>slice</code> method in the <code>sliceArray</code> function to return part of the <code>anim</code> array given the provided <code>beginSlice</code> and <code>endSlice</code> indices. The function should return an array."
],
"challengeSeed": [
@ -954,7 +954,7 @@
"A common pattern while working with arrays is when you want to remove items and keep the rest of the array. JavaScript offers the <code>splice</code> method for this, which takes arguments for the index of where to start removing items, then the number of items to remove. If the second argument is not provided, the default is to remove items through the end. However, the <code>splice</code> method mutates the original array it is called on. Here's an example:",
"<blockquote>var cities = [\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"];<br>cities.splice(3, 1); // Returns \"London\" and deletes it from the cities array<br>// cities is now [\"Chicago\", \"Delhi\", \"Islamabad\", \"Berlin\"]</blockquote>",
"As we saw in the last challenge, the <code>slice</code> method does not mutate the original array, but returns a new one which can be saved into a variable. Recall that the <code>slice</code> method takes two arguments for the indices to begin and end the slice (the end is non-inclusive), and returns those items in a new array. Using the <code>slice</code> method instead of <code>splice</code> helps to avoid any array-mutating side effects.",
"<h4>Instructions</h4>",
"<hr>",
"Rewrite the function <code>nonMutatingSplice</code> by using <code>slice</code> instead of <code>splice</code>. It should limit the provided <code>cities</code> array to a length of 3, and return a new array with only the first three items.",
"Do not mutate the original array provided to the function."
],
@ -1003,7 +1003,7 @@
"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:",
"<blockquote>[1, 2, 3].concat([4, 5, 6]);<br>// Returns a new array [1, 2, 3, 4, 5, 6]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>concat</code> method in the <code>nonMutatingConcat</code> function to concatenate <code>attach</code> to the end of <code>original</code>. The function should return the concatenated array."
],
"challengeSeed": [
@ -1054,7 +1054,7 @@
"The last challenge introduced the <code>concat</code> method as a way to combine arrays into a new one without mutating the original arrays. Compare <code>concat</code> to the <code>push</code> method. <code>Push</code> adds an item to the end of the same array it is called on, which mutates that array. Here's an example:",
"<blockquote>var arr = [1, 2, 3];<br>arr.push([4, 5, 6]);<br>// arr is changed to [1, 2, 3, 4, 5, 6]<br>// Not the functional programming way</blockquote>",
"<code>Concat</code> offers a way to add new items to the end of an array without any mutating side effects.",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>nonMutatingPush</code> function so it uses <code>concat</code> to add <code>newItem</code> to the end of <code>original</code> instead of <code>push</code>. The function should return an array."
],
"challengeSeed": [
@ -1106,7 +1106,7 @@
"This is not the case with the <code>filter</code> and <code>map</code> methods since they do not allow interaction between two different elements of the array. For example, if you want to compare elements of the array, or add them together, <code>filter</code> or <code>map</code> could not process that.",
"The <code>reduce</code> method allows for more general forms of array processing, and it's possible to show that both <code>filter</code> and <code>map</code> can be derived as a special application of <code>reduce</code>.",
"However, before we get there, let's practice using <code>reduce</code> first.",
"<h4>Instructions</h4>",
"<hr>",
"The variable <code>watchList</code> holds an array of objects with information on several movies. Use <code>reduce</code> to find the average IMDB rating of the movies directed by Christopher Nolan. Recall from prior challenges how to <code>filter</code> data and <code>map</code> over it to pull what you need. You may need to create other variables, but save the final average into the variable <code>averageRating</code>. Note that the rating values are saved as strings in the object and need to be converted into numbers before they are used in any mathematical operations."
],
"challengeSeed": [
@ -1273,7 +1273,7 @@
"For example:",
"<blockquote>function ascendingOrder(arr) {<br>&nbsp;&nbsp;return arr.sort(function(a, b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return a - b;<br>&nbsp;&nbsp;});<br>}<br>ascendingOrder([1, 5, 2, 3, 4]);<br>// Returns [1, 2, 3, 4, 5]<br><br>function reverseAlpha(arr) {<br>&nbsp;&nbsp;return arr.sort(function(a, b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return a < b;<br>&nbsp;&nbsp;});<br>}<br>reverseAlpha(['l', 'h', 'z', 'b', 's']);<br>// Returns ['z', 's', 'l', 'h', 'b']</blockquote>",
"Note: It's encouraged to provide a callback function to specify how to sort the array items. JavaScript's default sorting method is by string Unicode point value, which may return unexpected results.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>sort</code> method in the <code>alphabeticalOrder</code> function to sort the elements of <code>arr</code> in alphabetical order."
],
"challengeSeed": [
@ -1319,7 +1319,7 @@
"title": "Return a Sorted Array Without Changing the Original Array",
"description": [
"A side effect of the <code>sort</code> method is that it changes the order of the elements in the original array. In other words, it mutates the array in place. One way to avoid this is to first concatenate an empty array to the one being sorted (remember that <code>concat</code> returns a new array), then run the <code>sort</code> method.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>sort</code> method in the <code>nonMutatingSort</code> function to sort the elements of an array in ascending order. The function should return a new array, and not mutate the <code>globalArray</code> variable."
],
"challengeSeed": [
@ -1369,7 +1369,7 @@
"Here are two examples that split one string by spaces, then another by digits using a regular expression:",
"<blockquote>var str = \"Hello World\";<br>var bySpace = str.split(\" \");<br>// Sets bySpace to [\"Hello\", \"World\"]<br><br>var otherString = \"How9are7you2today\";<br>var byDigits = str.split(/\\d/);<br>// Sets byDigits to [\"How\", \"are\", \"you\", \"today\"]</blockquote>",
"Since strings are immutable, the <code>split</code> method makes it easier to work with them.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>split</code> method inside the <code>splitify</code> function to split <code>str</code> into an array of words. The function should return the array. Note that the words are not always separated by spaces, and the array should not contain punctuation."
],
"challengeSeed": [
@ -1419,7 +1419,7 @@
"The <code>join</code> method is used to join the elements of an array together to create a string. It takes an argument for the delimiter that is used to separate the array elements in the string.",
"Here's an example:",
"<blockquote>var arr = [\"Hello\", \"World\"];<br>var str = arr.join(\" \");<br>// Sets str to \"Hello World\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>join</code> method (among others) inside the <code>sentensify</code> function to make a sentence from the words in the string <code>str</code>. The function should return a string. For example, \"I-like-Star-Wars\" would be converted to \"I like Star Wars\". For this challenge, do not use the <code>replace</code> method."
],
"challengeSeed": [
@ -1471,7 +1471,7 @@
"The last several challenges covered a number of useful array and string methods that follow functional programming principles. We've also learned about <code>reduce</code>, which is a powerful method used to reduce problems to simpler forms. From computing averages to sorting, any array operation can be achieved by applying it. Recall that <code>map</code> and <code>filter</code> are special cases of <code>reduce</code>.",
"Let's combine what we've learned to solve a practical problem.",
"Many content management sites (CMS) have the titles of a post added to part of the URL for simple bookmarking purposes. For example, if you write a Medium post titled \"Stop Using Reduce\", it's likely the URL would have some form of the title string in it (\".../stop-using-reduce\"). You may have already noticed this on the Free Code Camp site.",
"<h4>Instructions</h4>",
"<hr>",
"Fill in the <code>urlSlug</code> function so it converts a string <code>title</code> and returns the hyphenated version for the URL. You can use any of the methods covered in this section, and don't use <code>replace</code>. Here are the requirements:",
"The input is a string with spaces and title-cased words",
"The output is a string with the spaces between words replaced by a hyphen (<code>-</code>)",
@ -1532,7 +1532,7 @@
"The <code>every</code> method works with arrays to check if <em>every</em> element passes a particular test. It returns a Boolean value - <code>true</code> if all values meet the criteria, <code>false</code> if not.",
"For example, the following code would check if every element in the <code>numbers</code> array is less than 10:",
"<blockquote>var numbers = [1, 5, 8, 0, 10, 11];<br>numbers.every(function(currentValue) {<br>&nbsp;&nbsp;return currentValue < 10;<br>});<br>// Returns false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>every</code> method inside the <code>checkPositive</code> function to check if every element in <code>arr</code> is positive. The function should return a Boolean value."
],
"challengeSeed": [
@ -1580,7 +1580,7 @@
"The <code>some</code> method works with arrays to check if <em>any</em> element passes a particular test. It returns a Boolean value - <code>true</code> if any of the values meet the criteria, <code>false</code> if not.",
"For example, the following code would check if any element in the <code>numbers</code> array is less than 10:",
"<blockquote>var numbers = [10, 50, 8, 220, 110, 11];<br>numbers.some(function(currentValue) {<br>&nbsp;&nbsp;return currentValue < 10;<br>});<br>// Returns true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>some</code> method inside the <code>checkPositive</code> function to check if any element in <code>arr</code> is positive. The function should return a Boolean value."
],
"challengeSeed": [
@ -1634,7 +1634,7 @@
"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.",
"Here's an example:",
"<blockquote>//Impartial function<br>function impartial(x, y, z) {<br>&nbsp;&nbsp;return x + y + z;<br>}<br>var partialFn = impartial.bind(this, 1, 2);<br>partialFn(10); // Returns 13</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fill in the body of the <code>add</code> function so it uses currying to add parameters <code>x</code>, <code>y</code>, and <code>z</code>."
],
"challengeSeed": [

52
challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json
View File

@ -44,7 +44,7 @@
"<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>:",
"<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2<br>};</blockquote>",
"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.",
"<h4>Instructions</h4>",
"<hr>",
"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."
],
"challengeSeed": [
@ -87,7 +87,7 @@
"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:",
"<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2<br>};<br>console.log(duck.name);<br>// This prints \"Aflac\" to the console</blockquote>",
"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\".",
"<h4>Instructions</h4>",
"<hr>",
"Print both <code>properties</code> of the <code>dog</code> object below to your console."
],
"challengeSeed": [
@ -135,7 +135,7 @@
"<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2,<br>&nbsp;&nbsp;sayName: function() {return \"The name of this duck is \" + duck.name + \".\";}<br>};<br>duck.sayName();<br>// Returns \"The name of this duck is Aflac.\"</blockquote>",
"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.",
"<h4>Instructions</h4>",
"<hr>",
"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.\""
],
"challengeSeed": [
@ -185,7 +185,7 @@
"<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2,<br>&nbsp;&nbsp;sayName: function() {return \"The name of this duck is \" + this.name + \".\";}<br>};</blockquote>",
"<code>This</code> is a deep topic, and the above example is only one way to use it. In the current context, <code>this</code> refers to the object that the method is associated with: <code>duck</code>.",
"If the object's name is changed to <code>mallard</code>, it is not necessary to find all the references to <code>duck</code> in the code. It makes the code reusable and easier to read.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the <code>dog.sayLegs</code> method to remove any references to <code>dog</code>. Use the <code>duck</code> example for guidance."
],
"challengeSeed": [
@ -239,7 +239,7 @@
"<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>",
"<h4>Instructions</h4>",
"<hr>",
"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."
],
"challengeSeed": [
@ -286,7 +286,7 @@
"<blockquote>blueBird.name; // => Albert<br>blueBird.color; // => blue<br>blueBird.numLegs; // => 2</blockquote>",
"Just like any other object, its properties can be accessed and modified:",
"<blockquote>blueBird.name = 'Elvira';<br>blueBird.name; // => Elvira</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>Dog</code> constructor from the last lesson to create a new instance of <code>Dog</code>, assigning it to a variable <code>hound</code>."
],
"challengeSeed": [
@ -341,7 +341,7 @@
"The <code>cardinal</code> has these properties:",
"<blockquote>cardinal.name // => Bruce<br>cardinal.color // => red<br>cardinal.numLegs // => 2</blockquote>",
"The constructor is more flexible. It's now possible to define the properties for each <code>Bird</code> at the time it is created, which is one way that JavaScript constructors are so useful. They group objects together based on shared characteristics and behavior and define a blueprint that automates their creation.",
"<h4>Instructions</h4>",
"<hr>",
"Create another <code>Dog</code> constructor. This time, set it up to take the parameters <code>name</code> and <code>color</code>, and have the property <code>numLegs</code> fixed at 4. Then create a new <code>Dog</code> saved in a variable <code>terrier</code>. Pass it two strings as arguments for the <code>name</code> and <code>color</code> properties."
],
"challengeSeed": [
@ -388,7 +388,7 @@
"<blockquote>let Bird = function(name, color) {<br>&nbsp;&nbsp;this.name = name;<br>&nbsp;&nbsp;this.color = color;<br>&nbsp;&nbsp;this.numLegs = 2;<br>}<br><br>let crow = new Bird(\"Alexis\", \"black\");<br><br>crow instanceof Bird; // => true</blockquote>",
"If an object is created without using a constructor, <code>instanceof</code> will verify that it is not an instance of that constructor:",
"<blockquote>let canary = {<br>&nbsp;&nbsp;name: \"Mildred\",<br>&nbsp;&nbsp;color: \"Yellow\",<br>&nbsp;&nbsp;numLegs: 2<br>};<br><br>canary instanceof Bird; // => false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Create a new instance of the <code>House</code> constructor, calling it <code>myHouse</code> and passing a number of bedrooms. Then, use <code>instanceof</code> to verify that it is an instance of <code>House</code>."
],
"challengeSeed": [
@ -437,7 +437,7 @@
"In fact every instance of <code>Bird</code> will have its own copy of these properties.",
"The following code adds all of the <code>own</code> properties of <code>duck</code> to the array <code>ownProps</code>:",
"<blockquote>let ownProps = [];<br><br>for (let property in duck) {<br>&nbsp;&nbsp;if(duck.hasOwnProperty(property)) {<br>&nbsp;&nbsp;&nbsp;&nbsp;ownProps.push(property);<br>&nbsp;&nbsp;}<br>}<br><br>console.log(ownProps); // prints [ \"name\", \"numLegs\" ]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>own</code> properties of <code>canary</code> to the array <code>ownProps</code>."
],
"challengeSeed": [
@ -491,7 +491,7 @@
"<blockquote>console.log(duck.numLegs); // prints 2<br>console.log(canary.numLegs); // prints 2</blockquote>",
"Since all instances automatically have the properties on the <code>prototype</code>, think of a <code>prototype</code> as a \"recipe\" for creating objects.",
"Note that the <code>prototype</code> for <code>duck</code> and <code>canary</code> is part of the <code>Bird</code> constructor as <code>Bird.prototype</code>. Nearly every object in JavaScript has a <code>prototype</code> property which is part of the constructor function that created it.",
"<h4>Instructions</h4>",
"<hr>",
"Add a <code>numLegs</code> property to the <code>prototype</code> of <code>Dog</code>"
],
"challengeSeed": [
@ -541,7 +541,7 @@
"<blockquote>function Bird(name) {<br>&nbsp;&nbsp;this.name = name; //own property<br>}<br><br>Bird.prototype.numLegs = 2; // prototype property<br><br>let duck = new Bird(\"Donald\");</blockquote>",
"Here is how you add <code>duck’s</code> <code>own</code> properties to the array <code>ownProps</code> and <code>prototype</code> properties to the array <code>prototypeProps</code>:",
"<blockquote>let ownProps = [];<br>let prototypeProps = [];<br><br>for (let property in duck) {<br>&nbsp;&nbsp;if(duck.hasOwnProperty(property)) {<br>&nbsp;&nbsp;&nbsp;&nbsp;ownProps.push(property);<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;prototypeProps.push(property);<br>&nbsp;&nbsp;}<br>}<br><br>console.log(ownProps); // prints [\"name\"]<br>console.log(prototypeProps); // prints [\"numLegs\"]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add all of the <code>own</code> properties of <code>beagle</code> to the array <code>ownProps</code>. Add all of the <code>prototype</code> properties of <code>Dog</code> to the array <code>prototypeProps</code>."
],
"challengeSeed": [
@ -598,7 +598,7 @@
"The advantage of the <code>constructor</code> property is that it's possible to check for this property to find out what kind of object it is. Here's an example of how this could be used:",
"<blockquote>function joinBirdFraternity(candidate) {<br>&nbsp;&nbsp;if (candidate.constructor === Bird) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return true;<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;return false;<br>&nbsp;&nbsp;}<br>}</blockquote>",
"<strong>Note</strong><br>Since the <code>constructor</code> property can be overwritten (which will be covered in the next two challenges) it’s generally better to use the <code>instanceof</code> method to check the type of an object.",
"<h4>Instructions</h4>",
"<hr>",
"Write a <code>joinDogFraternity</code> function that takes a <code>candidate</code> parameter and returns <code>true</code> if the candidate is a <code>Dog</code> and returns <code>false</code> otherwise."
],
"challengeSeed": [
@ -649,7 +649,7 @@
"<blockquote>Bird.prototype.eat = function() {<br>&nbsp;&nbsp;console.log(\"nom nom nom\");<br>}<br><br>Bird.prototype.describe = function() {<br>&nbsp;&nbsp;console.log(\"My name is \" + this.name);<br>}</blockquote>",
"A more efficient way is to set the <code>prototype</code> to a new object that already contains the properties. This way, the properties are added all at once:",
"<blockquote>Bird.prototype = {<br>&nbsp;&nbsp;numLegs: 2, <br>&nbsp;&nbsp;eat: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"nom nom nom\");<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;describe = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"My name is \" + this.name);<br>&nbsp;&nbsp;}<br>};</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add three properties <code>numLegs</code>, <code>eat</code>, and <code>describe</code> to the <code>prototype</code> of <code>Dog</code> by setting the <code>prototype</code> to a new object. The properties can be set to any values."
],
"challengeSeed": [
@ -699,7 +699,7 @@
"<blockquote>console.log(duck.constructor)<br>// prints ‘undefined’ - Oops!</blockquote>",
"To fix this, whenever a prototype is manually set to a new object, remember to define the constructor property:",
"<blockquote>Bird.prototype = {<br>&nbsp;&nbsp;constructor: Bird, // define the constructor property<br>&nbsp;&nbsp;numLegs: 2,<br>&nbsp;&nbsp;eat: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"nom nom nom\");<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;describe: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"My name is \" + this.name); <br>&nbsp;&nbsp;}<br>};</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Define the constructor property on the <code>Dog</code> <code>prototype</code>."
],
"challengeSeed": [
@ -753,7 +753,7 @@
"<blockquote>function Bird(name) {<br>&nbsp;&nbsp;this.name = name;<br>}<br><br>let duck = new Bird(\"Donald\");</blockquote>",
"<code>duck</code> inherits its <code>prototype</code> from the <code>Bird</code> constructor function. You can show this relationship with the <code>isPrototypeOf</code> method:",
"<blockquote>Bird.prototype.isPrototypeOf(duck);<br>// returns true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use <code>isPrototypeOf</code> to check the <code>prototype</code> of <code>beagle</code>."
],
"challengeSeed": [
@ -806,7 +806,7 @@
"The <code>hasOwnProperty</code> method is defined in <code>Object.prototype</code>, which can be accessed by <code>Bird.prototype</code>, which can then be accessed by <code>duck</code>. This is an example of the <code>prototype</code> chain.",
"In this <code>prototype</code> chain, <code>Bird</code> is the <code>supertype</code> for <code>duck</code>, while <code>duck</code> is the <code>subtype</code>. <code>Object</code> is a <code>supertype</code> for both <code>Bird</code> and <code>duck</code>.",
"<code>Object</code> is a <code>supertype</code> for all objects in JavaScript. Therefore, any object can use the <code>hasOwnProperty</code> method.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the code to show the correct prototype chain."
],
"challengeSeed": [
@ -859,7 +859,7 @@
"<blockquote>function Animal() { };<br><br>Animal.prototype = {<br>&nbsp;&nbsp;constructor: Animal, <br>&nbsp;&nbsp;describe: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"My name is \" + this.name);<br>&nbsp;&nbsp;}<br>};</blockquote>",
"Since <code>Animal</code> includes the <code>describe</code> method, you can remove it from <code>Bird</code> and <code>Dog</code>:",
"<blockquote>Bird.prototype = {<br>&nbsp;&nbsp;constructor: Bird<br>};<br><br>Dog.prototype = {<br>&nbsp;&nbsp;constructor: Dog<br>};</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"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>."
],
"challengeSeed": [
@ -934,7 +934,7 @@
"<blockquote>let animal = Object.create(Animal.prototype);</blockquote>",
"<code>Object.create(obj)</code> creates a new object, and sets <code>obj</code> as the new object's <code>prototype</code>. Recall that the <code>prototype</code> is like the \"recipe\" for creating an object. By setting the <code>prototype</code> of <code>animal</code> to be <code>Animal's</code> <code>prototype</code>, you are effectively giving the <code>animal</code> instance the same \"recipe\" as any other instance of <code>Animal</code>.",
"<blockquote>animal.eat(); // prints \"nom nom nom\"<br>animal instanceof Animal; // => true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use <code>Object.create</code> to make two instances of <code>Animal</code> named <code>duck</code> and <code>beagle</code>."
],
"challengeSeed": [
@ -994,7 +994,7 @@
"Remember that the <code>prototype</code> is like the \"recipe\" for creating an object. In a way, the recipe for <code>Bird</code> now includes all the key \"ingredients\" from <code>Animal</code>.",
"<blockquote>let duck = new Bird(\"Donald\");<br>duck.eat(); // prints \"nom nom nom\"</blockquote>",
"<code>duck</code> inherits all of <code>Animal's</code> properties, including the <code>eat</code> method.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the code so that instances of <code>Dog</code> inherit from <code>Animal</code>."
],
"challengeSeed": [
@ -1050,7 +1050,7 @@
"<blockquote>function Bird() { }<br>Bird.prototype = Object.create(Animal.prototype);<br>let duck = new Bird();<br>duck.constructor // function Animal(){...}</blockquote>",
"But <code>duck</code> and all instances of <code>Bird</code> should show that they were constructed by <code>Bird</code> and not <code>Animal</code>. To do so, you can manually set <code>Bird's</code> constructor property to the <code>Bird</code> object:",
"<blockquote>Bird.prototype.constructor = Bird;<br>duck.constructor // function Bird(){...}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fix the code so <code>duck.constructor</code> and <code>beagle.constructor</code> return their respective constructors."
],
"challengeSeed": [
@ -1108,7 +1108,7 @@
"<blockquote>Bird.prototype.fly = function() {<br>&nbsp;&nbsp;console.log(\"I'm flying!\");<br>};</blockquote>",
"Now instances of <code>Bird</code> will have both <code>eat()</code> and <code>fly()</code> methods:",
"<blockquote>let duck = new Bird();<br>duck.eat(); // prints \"nom nom nom\"<br>duck.fly(); // prints \"I'm flying!\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add all necessary code so the <code>Dog</code> object inherits from <code>Animal</code> and the <code>Dog's</code> <code>prototype</code> constructor is set to Dog. Then add a <code>bark()</code> method to the <code>Dog</code> object so that <code>beagle</code> can both <code>eat()</code> and <code>bark()</code>. The <code>bark()</code> method should print \"Woof!\" to the console."
],
"challengeSeed": [
@ -1177,7 +1177,7 @@
"2. Bird => Is eat() defined here? => Yes. Execute it and stop searching.",
"3. Animal => eat() is also defined, but JavaScript stopped searching before reaching this level.",
"4. Object => JavaScript stopped searching before reaching this level.",
"<h4>Instructions</h4>",
"<hr>",
"Override the <code>fly()</code> method for <code>Penguin</code> so that it returns \"Alas, this is a flightless bird.\""
],
"challengeSeed": [
@ -1237,7 +1237,7 @@
"Here <code>bird</code> and <code>plane</code> are passed into <code>flyMixin</code>, which then assigns the <code>fly</code> function to each object. Now <code>bird</code> and <code>plane</code> can both fly:",
"<blockquote>bird.fly(); // prints \"Flying, wooosh!\"<br>plane.fly(); // prints \"Flying, wooosh!\"</blockquote>",
"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>.",
"<h4>Instructions</h4>",
"<hr>",
"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."
],
"challengeSeed": [
@ -1297,7 +1297,7 @@
"The simplest way to make properties private is by creating a variable within the constructor function. This changes the scope of that variable to be within the constructor function versus available globally. This way, the property can only be accessed and changed by methods also within the constructor function.",
"<blockquote>function Bird() {<br>&nbsp;&nbsp;let hatchedEgg = 10; // private property<br><br>&nbsp;&nbsp;this.getHatchedEggCount = function() { // publicly available method that a bird object can use<br>&nbsp;&nbsp;&nbsp;&nbsp;return hatchedEgg;<br>&nbsp;&nbsp;};<br>}<br>let ducky = new Bird();<br>ducky.getHatchedEggCount(); // returns 10</blockquote>",
"Here <code>getHachedEggCount</code> is a privileged method, because it has access to the private variable <code>hatchedEgg</code>. This is possible because <code>hatchedEgg</code> is declared in the same context as <code>getHachedEggCount</code>. In JavaScript, a function always has access to the context in which it was created. This is called <code>closure</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Change how <code>weight</code> is declared in the <code>Bird</code> function so it is a private variable. Then, create a method <code>getWeight</code> that returns the value of <code>weight</code>."
],
"challengeSeed": [
@ -1342,7 +1342,7 @@
"A common pattern in JavaScript is to execute a function as soon as it is declared:",
"<blockquote>(function () {<br>&nbsp;&nbsp;console.log(\"Chirp, chirp!\")<br>})(); // this is an anonymous function expression that executes right away<br>// Outputs \"Chirp, chirp!\" immediately</blockquote>",
"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>.",
"<h4>Instructions</h4>",
"<hr>",
"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>)."
],
"challengeSeed": [
@ -1390,7 +1390,7 @@
"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 a example using it:",
"<blockquote>motionModule.glideMixin(duck);<br>duck.glide();</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"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."
],
"challengeSeed": [

64
challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json
View File

@ -42,7 +42,7 @@
"If you want to find the word <code>\"the\"</code> in the string <code>\"The dog chased the cat\"</code>, you could use the following regular expression: <code>/the/</code>. Notice that quote marks are not required within the regular expression.",
"JavaScript has multiple ways to use regexes. One way to test a regex is using the <code>.test()</code> method. The <code>.test()</code> method takes the regex, applies it to a string (which is placed inside the parentheses), and returns <code>true</code> or <code>false</code> if your pattern finds something or not.",
"<blockquote>let testStr = \"FreeCodeCamp\";<br>let testRegex = /Code/;<br>testRegex.test(testStr);<br>// Returns true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Apply the regex <code>myRegex</code> on the string <code>myString</code> using the <code>.test()</code> method."
],
"challengeSeed": [
@ -93,7 +93,7 @@
"<blockquote>let testStr = \"Hello, my name is Kevin.\";<br>let testRegex = /Kevin/;<br>testRegex.test(testStr);<br>// Returns true</blockquote>",
"Any other forms of <code>\"the\"</code> will not match. For example, the regex <code>/the/</code> will not match <code>\"The\"</code> or <code>\"THE\"</code>. A future challenge shows how to match these versions as well.",
"<blockquote>let wrongRegex = /kevin/;<br>wrongRegex.test(testStr);<br>// Returns false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Complete the regex <code>waldoRegex</code> to find <code>\"Waldo\"</code> in the string <code>waldoIsHiding</code> with a literal match."
],
"challengeSeed": [
@ -145,7 +145,7 @@
"This is powerful to search single strings, but it's limited to only one pattern. You can search for multiple patterns using the <code>alternation</code> or <code>OR</code> operator: <code>|</code>.",
"This operator matches patterns either before or after it. For example, if you wanted to match <code>\"yes\"</code> or <code>\"no\"</code>, the regex you want is <code>/yes|no/</code>.",
"You can also search for more than just two patterns. You can do this by adding more patterns with more <code>OR</code> operators separating them, like <code>/yes|no|maybe/</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Complete the regex <code>petRegex</code> to match the pets <code>\"dog\"</code>, <code>\"cat\"</code>, <code>\"bird\"</code>, or <code>\"fish\"</code>."
],
"challengeSeed": [
@ -201,7 +201,7 @@
"Case (or sometimes letter case) is the difference between uppercase letters and lowercase letters. Examples of uppercase are <code>\"A\"</code>, <code>\"B\"</code>, and <code>\"C\"</code>. Examples of lowercase are <code>\"a\"</code>, <code>\"b\"</code>, and <code>\"c\"</code>.",
"You can match both cases using what is called a flag. There are other flags but here you'll focus on the flag that ignores case.",
"The flag that ignores case is the <code>i</code> flag. You can use it by appending it to the regex. An example of using this flag is <code>/ignorecase/i</code>. This regex can match the strings <code>\"ignorecase\"</code>, <code>\"igNoreCase\"</code>, and <code>\"IgnoreCase\"</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Write a regex <code>fccRegex</code> to match <code>\"FreeCodeCamp\"</code>, no matter its case. Your regex should not match any abbreviations or variations with spaces."
],
"challengeSeed": [
@ -259,7 +259,7 @@
"So far, you have only been checking if a pattern exists or not within a string. You can also extract the actual matches you found with the <code>.match()</code> method.",
"To use the <code>.match()</code> method, apply the method on a string and pass in the regex inside the parentheses. Here's an example:",
"<blockquote>\"Hello, World!\".match(/Hello/);<br>// Returns [\"Hello\"]<br>let ourStr = \"Regular expressions\";<br>let ourRegex = /expressions/;<br>ourStr.match(ourRegex);<br>// Returns [\"expressions\"]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Apply the <code>.match()</code> method to extract the word <code>coding</code>."
],
"challengeSeed": [
@ -311,7 +311,7 @@
"<blockquote>let testStr = \"Repeat, Repeat, Repeat\";<br>let ourRegex = /Repeat/;<br>testStr.match(ourRegex);<br>// Returns [\"Repeat\"]</blockquote>",
"To search or extract a pattern more than once, you can use the <code>g</code> flag.",
"<blockquote>let repeatRegex = /Repeat/g;<br>testStr.match(repeatRegex);<br>// Returns [\"Repeat\", \"Repeat\", \"Repeat\"]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Using the regex <code>starRegex</code>, find and extract both <code>\"Twinkle\"</code> words from the string <code>twinkleStar</code>.",
"<strong>Note</strong><br>You can have multiple flags on your regex like <code>/search/gi</code>"
],
@ -364,7 +364,7 @@
"Sometimes you won't (or don't need to) know the exact characters in your patterns. Thinking of all words that match, say, a misspelling would take a long time. Luckily, you can save time using the wildcard character: <code>.</code>",
"The wildcard character <code>.</code> will match any one character. The wildcard is also called <code>dot</code> and <code>period</code>. You can use the wildcard character just like any other character in the regex. For example, if you wanted to match <code>\"hug\"</code>, <code>\"huh\"</code>, <code>\"hut\"</code>, and <code>\"hum\"</code>, you can use the regex <code>/hu./</code> to match all four words.",
"<blockquote>let humStr = \"I'll hum a song\";<br>let hugStr = \"Bear hug\";<br>let huRegex = /hu./;<br>humStr.match(huRegex); // Returns [\"hum\"]<br>hugStr.match(huRegex); // Returns [\"hug\"]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Complete the regex <code>unRegex</code> so that it matches the strings <code>\"run\"</code>, <code>\"sun\"</code>, <code>\"fun\"</code>, <code>\"pun\"</code>, <code>\"nun\"</code>, and <code>\"bun\"</code>. Your regex should use the wildcard character."
],
"challengeSeed": [
@ -423,7 +423,7 @@
"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.",
"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>.",
"<blockquote>let bigStr = \"big\";<br>let bagStr = \"bag\";<br>let bugStr = \"bug\";<br>let bogStr = \"bog\";<br>let bgRegex = /b[aiu]g/;<br>bigStr.match(bgRegex); // Returns [\"big\"]<br>bagStr.match(bgRegex); // Returns [\"bag\"]<br>bugStr.match(bgRegex); // Returns [\"bug\"]<br>bogStr.match(bgRegex); // Returns null</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use a character class with vowels (<code>a</code>, <code>e</code>, <code>i</code>, <code>o</code>, <code>u</code>) in your regex <code>vowelRegex</code> to count the number of vowels in the string <code>quoteSample</code>.",
"<strong>Note</strong><br>Be sure to match both upper- and lowercase vowels."
],
@ -478,7 +478,7 @@
"Inside a <code>character set</code>, you can define a range of characters to match using a <code>hyphen</code> character: <code>-</code>.",
"For example, to match lowercase letters <code>a</code> through <code>e</code> you would use <code>[a-e]</code>.",
"<blockquote>let catStr = \"cat\";<br>let batStr = \"bat\";<br>let matStr = \"mat\";<br>let bgRegex = /[a-e]at/;<br>catStr.match(bgRegex); // Returns [\"cat\"]<br>batStr.match(bgRegex); // Returns [\"bat\"]<br>matStr.match(bgRegex); // Returns null</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Match all the letters in the string <code>quoteSample</code>.",
"<strong>Note</strong><br>Be sure to match both upper- and lowercase vowels."
],
@ -531,7 +531,7 @@
"For example, <code>/[0-5]/</code> matches any number between <code>0</code> and <code>5</code>, including the <code>0</code> and <code>5</code>.",
"Also, it is possible to combine a range of letters and numbers in a single character set.",
"<blockquote>let jennyStr = \"Jenny8675309\";<br>let myRegex = /[a-z0-9]/ig;<br>jennyStr.match(myRegex); // matches all letters and numbers in jennyStr</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Create a single regex that matches a range of letters between <code>h</code> and <code>s</code>, and a range of numbers between <code>2</code> and <code>6</code>. Remember to include the appropriate flags in the regex."
],
"challengeSeed": [
@ -582,7 +582,7 @@
"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.",
"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.",
"<h4>Instructions</h4>",
"<hr>",
"Create a single regex that matches all characters that are not a number or a vowel. Remember to include the appropriate flags in the regex."
],
"challengeSeed": [
@ -633,7 +633,7 @@
"Sometimes, you need to match a character (or group of characters) that appears one or more times in a row. This means it occurs at least once, and may be repeated.",
"You can use the <code>+</code> character to check if that is the case. Remember, the character or pattern has to be present consecutively. That is, the character has to repeat one after the other.",
"For example, <code>/a+/g</code> would find one match in <code>\"abc\"</code> and return <code>[\"a\"]</code>. It would also find one match in <code>\"aabc\"</code> and return <code>[\"aa\"]</code>. If it were checking the string <code>\"abab\"</code>, it would find two matches and return <code>[\"a\", \"a\"]</code> because the <code>a</code> characters are not in a row - there is a <code>b</code> between them. Finally, since there is no <code>\"a\"</code> in the string <code>\"bcd\"</code>, it wouldn't find a match.",
"<h4>Instructions</h4>",
"<hr>",
"You want to find matches when the letter <code>s</code> occurs one or more times in <code>\"Mississippi\"</code>. Write a regex that uses the <code>+</code> sign."
],
"challengeSeed": [
@ -684,7 +684,7 @@
"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>.",
"<blockquote>let sWord1 = \"seed\";<br>let sWord2 = \"saw\";<br>let kWord = \"kite\";<br>let sRegex = /s.*/; // Searches for words starting with s<br>sRegex.test(sWord1); // Returns true<br>sRegex.test(sWord2); // Returns true<br>sRegex.test(kWord); // Returns false<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Create a regex <code>starWarsRegex</code> that uses the <code>*</code> character to match all the movie titles that start with <code>\"Star Wars\"</code>. Your regex does not need flags."
],
"challengeSeed": [
@ -741,7 +741,7 @@
"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\"]<c/ode>. 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>.",
"<h4>Instructions</h4>",
"<hr>",
"Fix the regex <code>/&lt;.*&gt;/</code> to return the HTML tag <code>&lt;h1&gt;</code> and not the text <code>\"&lt;h1&gt;Winter is coming&lt;/h1&gt;\"</code>. Remember the wildcard <code>.</code> in a regular expression matches any character."
],
"challengeSeed": [
@ -793,7 +793,7 @@
"<blockquote>\"z\"<br>\"zzzzzz\"<br>\"ABCzzzz\"<br>\"zzzzABC\"<br>\"abczzzzzzzzzzzzzzzzzzzzzabc\"</blockquote>",
"But it does not find matches in the following strings since there are no letter <code>z</code> characters:",
"<blockquote>\"\"<br>\"ABC\"<br>\"abcabc\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"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>."
],
"challengeSeed": [
@ -852,7 +852,7 @@
"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.",
"<blockquote>let firstString = \"Ricky is first and can be found.\";<br>let firstRegex = /^Ricky/;<br>firstRegex.test(firstString);<br>// Returns true<br>let notFirst = \"You can't find Ricky now.\";<br>firstRegex.test(notFirst);<br>// Returns false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>caret</code> character in a regex to find <code>\"Cal\"</code> only in the beginning of the string <code>rickyAndCal</code>."
],
"challengeSeed": [
@ -904,7 +904,7 @@
"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.",
"<blockquote>let theEnding = \"This is a never ending story\";<br>let storyRegex = /story$/;<br>storyRegex.test(theEnding);<br>// Returns true<br>let noEnding = \"Sometimes a story will have to end\";<br>storyRegex.test(noEnding);<br>// Returns false<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the anchor character (<code>$</code>) to match the string <code>\"caboose\"</code> at the end of the string <code>caboose</code>."
],
"challengeSeed": [
@ -956,7 +956,7 @@
"The closest character class in JavaScript to match the alphabet is <code>\\w</code>. This shortcut is equal to <code>[A-Za-z0-9_]</code>. This character class matches upper and lowercase letters plus numbers. Note, this character class also includes the underscore character (<code>_</code>).",
"<blockquote>let longHand = /[A-Za-z0-9_]+/;<br>let shortHand = /\\w+/;<br>let numbers = \"42\";<br>let varNames = \"important_var\";<br>longHand.test(numbers); // Returns true<br>shortHand.test(numbers); // Returns true<br>longHand.test(varNames); // Returns true<br>shortHand.test(varNames); // Returns true</blockquote>",
"These shortcut character classes are also known as <code>shorthand character classes</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Use the shorthand character class <code>\\w</code> to count the number of alphanumeric characters in various quotes and strings."
],
"challengeSeed": [
@ -1010,7 +1010,7 @@
"You've learned that you can use a shortcut to match alphanumerics <code>[A-Za-z0-9_]</code> using <code>\\w</code>. A natural pattern you might want to search for is the opposite of alphanumerics.",
"You can search for the opposite of the <code>\\w</code> with <code>\\W</code>. Note, the opposite pattern uses a capital letter. This shortcut is the same as <code>[^A-Za-z0-9_]</code>.",
"<blockquote>let shortHand = /\\W/;<br>let numbers = \"42%\";<br>let sentence = \"Coding!\";<br>numbers.match(shortHand); // Returns [\"%\"]<br>sentence.match(shortHand); // Returns [\"!\"]<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the shorthand character class <code>\\W</code> to count the number of non-alphanumeric characters in various quotes and strings."
],
"challengeSeed": [
@ -1062,7 +1062,7 @@
"description": [
"You've learned shortcuts for common string patterns like alphanumerics. Another common pattern is looking for just digits or numbers.",
"The shortcut to look for digit characters is <code>\\d</code>, with a lowercase <code>d</code>. This is equal to the character class <code>[0-9]</code>, which looks for a single character of any number between zero and nine.",
"<h4>Instructions</h4>",
"<hr>",
"Use the shorthand character class <code>\\d</code> to count how many digits are in movie titles. Written out numbers (\"six\" instead of 6) do not count."
],
"challengeSeed": [
@ -1117,7 +1117,7 @@
"description": [
"The last challenge showed how to search for digits using the shortcut <code>\\d</code> with a lowercase <code>d</code>. You can also search for non-digits using a similar shortcut that uses an uppercase <code>D</code> instead.",
"The shortcut to look for non-digit characters is <code>\\D</code>. This is equal to the character class <code>[^0-9]</code>, which looks for a single character that is not a number between zero and nine.",
"<h4>Instructions</h4>",
"<hr>",
"Use the shorthand character class for non-digits <code>\\D</code> to count how many non-digits are in movie titles."
],
"challengeSeed": [
@ -1175,7 +1175,7 @@
"1) The only numbers in the username have to be at the end. There can be zero or more of them at the end.",
"2) Username letters can be lowercase and uppercase.",
"3) Usernames have to be at least two characters long. A two-letter username can only use alphabet letter characters.",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>userCheck</code> to fit the constraints listed above."
],
"challengeSeed": [
@ -1229,7 +1229,7 @@
"The challenges so far have covered matching letters of the alphabet and numbers. You can also match the whitespace or spaces between letters.",
"You can search for whitespace using <code>\\s</code>, which is a lowercase <code>s</code>. This pattern not only matches whitespace, but also carriage return, tab, form feed, and new line characters. You can think of it as similar to the character class <code>[ \\r\\t\\f\\n\\v]</code>.",
"<blockquote>let whiteSpace = \"Whitespace. Whitespace everywhere!\"<br>let spaceRegex = /\\s/g;<br>whiteSpace.match(spaceRegex);<br>// Returns [\" \", \" \"]<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>countWhiteSpace</code> to look for multiple whitespace characters in a string."
],
"challengeSeed": [
@ -1281,7 +1281,7 @@
"You learned about searching for whitespace using <code>\\s</code>, with a lowercase <code>s</code>. You can also search for everything except whitespace.",
"Search for non-whitespace using <code>\\S</code>, which is an uppercase <code>s</code>. This pattern will not match whitespace, carriage return, tab, form feed, and new line characters. You can think of it being similar to the character class <code>[^ \\r\\t\\f\\n\\v]</code>.",
"<blockquote>let whiteSpace = \"Whitespace. Whitespace everywhere!\"<br>let nonSpaceRegex = /\\S/g;<br>whiteSpace.match(nonSpaceRegex).length; // Returns 32</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>countNonWhiteSpace</code> to look for multiple non-whitespace characters in a string."
],
"challengeSeed": [
@ -1334,7 +1334,7 @@
"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.",
"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>.",
"<blockquote>let A4 = \"aaaah\";<br>let A2 = \"aah\";<br>let multipleA = /a{3,5}h/;<br>multipleA.test(A4); // Returns true<br>multipleA.test(A2); // Returns false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>ohRegex</code> to match only <code>3</code> to <code>6</code> letter <code>h</code>'s in the word <code>\"Oh no\"</code>."
],
"challengeSeed": [
@ -1390,7 +1390,7 @@
"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>.",
"<blockquote>let A4 = \"haaaah\";<br>let A2 = \"haah\";<br>let A100 = \"h\" + \"a\".repeat(100) + \"h\";<br>let multipleA = /ha{3,}h/;<br>multipleA.test(A4); // Returns true<br>multipleA.test(A2); // Returns false<br>multipleA.test(A100); // Returns true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>haRegex</code> to match the word <code>\"Hazzah\"</code> only when it has four or more letter <code>z</code>'s."
],
"challengeSeed": [
@ -1446,7 +1446,7 @@
"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>.",
"<blockquote>let A4 = \"haaaah\";<br>let A3 = \"haaah\";<br>let A100 = \"h\" + \"a\".repeat(100) + \"h\";<br>let multipleHA = /a{3}h/;<br>multipleHA.test(A4); // Returns false<br>multipleHA.test(A3); // Returns true<br>multipleHA.test(A100); // Returns false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>timRegex</code> to match the word <code>\"Timber\"</code> only when it has four letter <code>m</code>'s."
],
"challengeSeed": [
@ -1501,7 +1501,7 @@
"You can specify the possible existence of an element with a question mark, <code>?</code>. This checks for zero or one of the preceding element. You can think of this symbol as saying the previous element is optional.",
"For example, there are slight differences in American and British English and you can use the question mark to match both spellings.",
"<blockquote>let american = \"color\";<br>let british = \"colour\";<br>let rainbowRegex= /colou?r/;<br>rainbowRegex.test(american); // Returns true<br>rainbowRegex.test(british); // Returns true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>favRegex</code> to match both the American English (favorite) and the British English (favourite) version of the word."
],
"challengeSeed": [
@ -1558,7 +1558,7 @@
"<blockquote>let quit = \"qu\";<br>let noquit = \"qt\";<br>let quRegex= /q(?=u)/;<br>let qRegex = /q(?!u)/;<br>quit.match(quRegex); // Returns [\"q\"]<br>noquit.match(qRegex); // Returns [\"q\"]</blockquote>",
"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:",
"<blockquote>let password = \"abc123\";<br>let checkPass = /(?=\\w{3,6})(?=\\D*\\d)/;<br>checkPass.test(password); // Returns true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use <code>lookaheads</code> in the <code>pwRegex</code> to match passwords that are greater than 5 characters long and have two consecutive digits."
],
"challengeSeed": [
@ -1616,7 +1616,7 @@
"The example below matches any word that occurs twice separated by a space:",
"<blockquote>let repeatStr = \"regex regex\";<br>let repeatRegex = /(\\w+)\\s\\1/;<br>repeatRegex.test(repeatStr); // Returns true<br>repeatStr.match(repeatRegex); // Returns [\"regex regex\", \"regex\"]</blockquote>",
"Using the <code>.match()</code> method on a string will return an array with the string it matches, along with its capture group.",
"<h4>Instructions</h4>",
"<hr>",
"Use <code>capture groups</code> in <code>reRegex</code> to match numbers that appear three times in a string each separated by a space."
],
"challengeSeed": [
@ -1673,7 +1673,7 @@
"<blockquote>let wrongText = \"The sky is silver.\";<br>let silverRegex = /silver/;<br>wrongText.replace(silverRegex, \"blue\");<br>// Returns \"The sky is blue.\"</blockquote>",
"You can also access capture groups in the replacement string with dollar signs (<code>$</code>).",
"<blockquote>\"Code Camp\".replace(/(\\w+)\\s(\\w+)/, '$2 $1');<br>// Returns \"Camp Code\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Write a regex so that it will search for the string <code>\"good\"</code>. Then update the <code>replaceText</code> variable to replace <code>\"good\"</code> with <code>\"okey-dokey\"</code>."
],
"challengeSeed": [
@ -1723,7 +1723,7 @@
"title": "Remove Whitespace from Start and End",
"description": [
"Sometimes whitespace characters around strings are not wanted but are there. Typical processing of strings is to remove the whitespace at the start and end of it.",
"<h4>Instructions</h4>",
"<hr>",
"Write a regex and use the appropriate string methods to remove whitespace at the beginning and end of strings.",
"<strong>Note</strong><br>The <code>.trim()</code> method would work here, but you'll need to complete this challenge using regular expressions."
],

18
challenges/03-front-end-libraries/sass.json
View File

@ -49,7 +49,7 @@
"Here are a couple examples:",
"<blockquote>$main-fonts: Arial, sans-serif;<br>$headings-color: green;<br><br>//To use variables:<br>h1 {<br>&nbsp;&nbsp;font-family: $main-fonts;<br>&nbsp;&nbsp;color: $headings-color;<br>}</blockquote>",
"One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.",
"<h4>Instructions</h4>",
"<hr>",
"Create a variable <code>$text-color</code> and set it to red. Then change the value of the <code>color</code> property for the <code>.blog-post</code> and <code>h2</code> to the <code>$text-color</code> variable."
],
"challengeSeed": [
@ -130,7 +130,7 @@
"<blockquote>nav {<br>&nbsp;&nbsp;background-color: red;<br>}<br><br>nav ul {<br>&nbsp;&nbsp;list-style: none;<br>}<br><br>li {<br>&nbsp;&nbsp;display: inline-block;<br>}</blockquote>",
"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:",
"<blockquote>nav {<br>&nbsp;&nbsp;background-color: red;<br><br>&nbsp;&nbsp;ul {<br>&nbsp;&nbsp;&nbsp;&nbsp;list-style: none;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;li {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: inline-block;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>}<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"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."
],
"challengeSeed": [
@ -205,7 +205,7 @@
"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:",
"<blockquote>div {<br>&nbsp;&nbsp;@include box-shadow(0px, 0px, 4px, #fff);<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"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."
],
"challengeSeed": [
@ -277,7 +277,7 @@
"<blockquote>@mixin make-bold($bool) {<br>&nbsp;&nbsp;@if $bool == bold { font-weight: bold; }<br>}</blockquote>",
"And just like in JavaScript, <code>@else if</code> and <code>@else</code> test for more conditions:",
"<blockquote>@mixin text-effect($val) {<br>&nbsp;&nbsp;@if $val == danger {color: red;}<br>&nbsp;&nbsp;@else if $val == alert {color: yellow;}<br>&nbsp;&nbsp;@else if $val == success {color: green;}<br>&nbsp;&nbsp;@else {color: black;}<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"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>:",
"<blockquote>light - 1px solid black<br>medium - 3px solid black<br>heavy - 6px solid black<br>none - no border</blockquote>"
],
@ -351,7 +351,7 @@
"The <code>#{$i}</code> part is the syntax to combine a variable (<code>i</code>) with text to make a string. When the Sass file is converted to CSS, it looks like this:",
"<blockquote>.col-1 {<br>&nbsp;&nbsp;width: 8.33333%;<br>}<br><br>.col-2 {<br>&nbsp;&nbsp;width: 16.66667%;<br>}<br><br>...<br><br>.col-12 {<br>&nbsp;&nbsp;width: 100%;<br>}</blockquote>",
"This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.",
"<h4>Instructions</h4>",
"<hr>",
"Write a <code>@for</code> directive that takes a variable <code>$j</code> that goes from 1 <b>to</b> 6.",
"It should create 5 classes called <code>.text-1</code> to <code>.text-5</code> where each has a <code>font-size</code> set to 10px multiplied by the index."
],
@ -425,7 +425,7 @@
"Note that the <code>$key</code> variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have <code>color1</code>, <code>color2</code>... in it.",
"Both of the above code examples are converted into the following CSS:",
"<blockquote>.blue-text {<br>&nbsp;&nbsp;color: blue;<br>}<br><br>.red-text {<br>&nbsp;&nbsp;color: red;<br>}<br><br>.green-text {<br>&nbsp;&nbsp;color: green;<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Write an <code>@each</code> directive that goes through a list: <code>blue, black, red</code> and assigns each variable to a <code>.color-bg</code> class, where the \"color\" part changes for each item.",
"Each class should set the <code>background-color</code> the respective color."
],
@ -496,7 +496,7 @@
"<blockquote>$x: 1;<br>@while $x < 13 {<br>&nbsp;&nbsp;.col-#{$x} { width: 100%/12 * $x;}<br>&nbsp;&nbsp;$x: $x + 1;<br>}</blockquote>",
"First, define a variable <code>$x</code> and set it to 1. Next, use the <code>@while</code> directive to create the grid system <i>while</i> <code>$x</code> is less than 13.",
"After setting the CSS rule for <code>width</code>, <code>$x</code> is incremented by 1 to avoid an infinite loop.",
"<h4>Instructions</h4>",
"<hr>",
"Use <code>@while</code> to create a series of classes with different <code>font-sizes</code>.",
"There should be 10 different classes from <code>text-1</code> to <code>text-10</code>. Then set <code>font-size</code> to 5px multiplied by the current index number. Make sure to avoid an infinite loop!"
],
@ -579,7 +579,7 @@
"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:",
"<blockquote>// In the main.scss file<br><br>@import 'mixins'</blockquote>",
"Note that the underscore is 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.",
"<h4>Instructions</h4>",
"<hr>",
"Write an <code>@import</code> statement to import a <code>partial</code> named <code>_variables.scss</code> into the main.scss file."
],
"challengeSeed": [
@ -641,7 +641,7 @@
"The <code>extend</code> directive is a simple way to reuse the rules written for one element, then add more for another:",
"<blockquote>.big-panel{<br>&nbsp;&nbsp;@extend .panel;<br>&nbsp;&nbsp;width: 150px;<br>&nbsp;&nbsp;font-size: 2em;<br>}</blockquote>",
"The <code>.big-panel</code> will have the same properties as <code>.panel</code> in addition to the new styles.",
"<h4>Instructions</h4>",
"<hr>",
"Make a class <code>.info-important</code> that extends <code>.info</code> and also has a <code>background-color</code> set to magenta."
],
"challengeSeed": [

58
challenges/04-data-visualization/data-visualization-with-d3.json
View File

@ -53,7 +53,7 @@
"Here's an example that selects an unordered list, appends a list item, and adds text:",
"<blockquote>d3.select(\"ul\")<br> .append(\"li\")<br> .text(\"Very important item\");</blockquote>",
"D3 allows you to chain several methods together with periods to perform a number of actions in a row.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>select</code> method to select the <code>body</code> tag in the document. Then <code>append</code> an <code>h1</code> tag to it, and add the text \"Learning D3\" into the <code>h1</code> element."
],
"challengeSeed": [
@ -110,7 +110,7 @@
"D3 also has the <code>selectAll()</code> method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document:",
"<code>const anchors = d3.selectAll(\"a\");</code>",
"Like the <code>select()</code> method, <code>selectAll()</code> supports method chaining, and you can use it with other methods.",
"<h4>Instructions</h4>",
"<hr>",
"Select all of the <code>li</code> tags in the document, and change their text to \"list item\"."
],
"challengeSeed": [
@ -173,7 +173,7 @@
"Here is an example that selects a <code>ul</code> element and creates a new list item based on the number of entries in the array:",
"<blockquote>&lt;body&gt;<br> &lt;ul&gt;&lt;/ul&gt;<br> &lt;script&gt;<br> const dataset = [\"a\", \"b\", \"c\"];<br> d3.select(\"ul\").selectAll(\"li\")<br> .data(dataset)<br> .enter()<br> .append(\"li\")<br> .text(\"New item\");<br> &lt;/script&gt;<br>&lt;/body&gt;</blockquote>",
"It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the <code>ul</code> on the page. Next, select all list items, which returns an empty selection. Then the <code>data()</code> method reviews the dataset and runs the following code three times, once for each item in the array. The <code>enter()</code> method sees there are no <code>li</code> elements on the page, but it needs 3 (one for each piece of data in <code>dataset</code>). New <code>li</code> elements are appended to the <code>ul</code> and have the text \"New item\".",
"<h4>Instructions</h4>",
"<hr>",
"Select the <code>body</code> node, then select all <code>h2</code> elements. Have D3 create and append an <code>h2</code> tag for each item in the <code>dataset</code> array. The text in the <code>h2</code> should say \"New Title\". Your code should use the <code>data()</code> and <code>enter()</code> methods."
],
"challengeSeed": [
@ -231,7 +231,7 @@
"The last challenge created a new <code>h2</code> for each item in the data array, but it displayed the same text (\"New Title\") for each heading. Fortunately, there is a way to access and display the actual data with callback functions.",
"The <code>text()</code> method can take a string or a callback function as an argument. Since the data from the <code>dataset</code> array is attached to each element, the callback function has access to it. The parameter used in the callback function (<code>d</code> in the example below) is for the individual data-point itself. This callback function would set the text in the selection to the data value:",
"<code>selection.text((d) => d)</code>",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>text()</code> method so it does not place \"New Title\" in each heading. Instead, it displays the data from the array with a space and \"USD\". For example, the first heading should say \"12 USD\"."
],
"challengeSeed": [
@ -297,7 +297,7 @@
"D3 lets you add inline CSS styles on dynamic elements with the <code>style()</code> method.",
"The <code>style()</code> method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue:",
"<code>selection.style(\"color\",\"blue\");</code>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>style()</code> method to the code in the editor to make all the displayed text have a <code>font-family</code> of <code>verdana</code>."
],
"challengeSeed": [
@ -358,7 +358,7 @@
"For example, you may want to color a data point blue if has a value less than 20, and red otherwise. You can use a callback function in the <code>style()</code> method and include the conditional logic. The callback function uses the <code>d</code> parameter to represent the data point:",
"<blockquote>selection.style(\"color\", (d) => {<br> /* Logic that returns the color based on a condition */<br>});</blockquote>",
"The <code>style()</code> method is not limited to setting the <code>color</code> - it can be used with other CSS properties as well.",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>style()</code> method to the code in the editor to set the <code>color</code> of the <code>h2</code> elements conditionally. Write the callback function so if the data value is less than 20, it returns \"red\", otherwise it returns \"green\".",
"<strong>Note</strong><br>You can use if-else logic, or the ternary operator."
],
@ -426,7 +426,7 @@
"Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the <code>attr()</code> method to add any HTML attribute to an element, including a class name.",
"The <code>attr()</code> method works the same way that <code>style()</code> does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of \"container\" to a selection:",
"<code>selection.attr(\"class\", \"container\");</code>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>attr()</code> method to the code in the editor and put a class of <code>bar</code> on the <code>div</code> elements."
],
"challengeSeed": [
@ -495,7 +495,7 @@
"2) Give each <code>div</code> a dynamic height, using a callback function in the <code>style()</code> method that sets height equal to the data value",
"Recall the format to set a style using a callback function:",
"<code>selection.style(\"cssProperty\", (d) => d)</code>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>style()</code> method to the code in the editor to set the <code>height</code> property for each element. Use a callback function to return the value of the data point with the string \"px\" added to it."
],
"challengeSeed": [
@ -570,7 +570,7 @@
"The last challenge created a bar chart, but there are a couple of formatting changes that could improve it:",
"1) Add space between each bar to visually separate them, which is done by adding a margin to the CSS for the <code>bar</code> class",
"2) Increase the height of the bars to better show the difference in values, which is done by multiplying the value by a number to scale the height",
"<h4>Instructions</h4>",
"<hr>",
"First, add a <code>margin</code> of 2px to the <code>bar</code> class in the <code>style</code> tag. Next, change the callback function in the <code>style()</code> method so it returns a value 10 times the original data value (plus the \"px\").",
"<strong>Note</strong><br>Multiplying each data point by the <em>same</em> constant only alters the scale. It's like zooming in, and it doesn't change the meaning of the underlying data."
],
@ -649,7 +649,7 @@
"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.",
"<h4>Instructions</h4>",
"<hr>",
"Add an <code>svg</code> node to the <code>body</code> using <code>append()</code>. Give it a <code>width</code> attribute of 500 and a <code>height</code> attribute of 100 using the <code>attr()</code> method for each. You'll see it in the output because there's a <code>background-color</code> of pink applied to it in the <code>style</code> tag.",
"<strong>Note</strong><br>Width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is."
],
@ -717,7 +717,7 @@
"When you place a shape into the <code>svg</code> area, you can specify where it goes with <code>x</code> and <code>y</code> coordinates. The origin point of (0, 0) is in the upper-left corner. Positive vales for <code>x</code> push the shape to the right, and positive values for <code>y</code> push the shape down from the origin point.",
"To place a shape in the middle of the 500 (width) x 100 (height) <code>svg</code> from last challenge, the <code>x</code> coordinate would be 250 and the <code>y</code> coordinate would be 50.",
"An SVG <code>rect</code> has four attributes. There are the <code>x</code> and <code>y</code> coordinates for where it is placed in the <code>svg</code> area. It also has a <code>height</code> and <code>width</code> to specify the size.",
"<h4>Instructions</h4>",
"<hr>",
"Add a <code>rect</code> shape to the <code>svg</code> using <code>append()</code>, and give it a <code>width</code> attribute of 25 and <code>height</code> attribute of 100. Also, give the <code>rect</code> <code>x</code> and <code>y</code> attributes each set to 0."
],
"challengeSeed": [
@ -783,7 +783,7 @@
"A previous challenge showed the format for how to create and append a <code>div</code> for each item in <code>dataset</code>:",
"<blockquote>d3.select(\"body\").selectAll(\"div\")<br> .data(dataset)<br> .enter()<br> .append(\"div\")</blockquote>",
"There are a few differences working with <code>rect</code> elements instead of <code>divs</code>. The <code>rects</code> must be appended to an <code>svg</code> element, not directly to the <code>body</code>. Also, you need to tell D3 where to place each <code>rect</code> within the <code>svg</code> area. The bar placement will be covered in the next challenge.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>data()</code>, <code>enter()</code>, and <code>append()</code> methods to create and append a <code>rect</code> for each item in <code>dataset</code>. The bars should display all on top of each other, this will be fixed in the next challenge."
],
"challengeSeed": [
@ -856,7 +856,7 @@
"The <code>attr()</code> method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually <code>d</code>) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format:",
"<blockquote>selection.attr(\"property\", (d, i) => {<br> /* <br> * d is the data point value<br> * i is the index of the data point in the array<br> */<br>})</blockquote>",
"It's important to note that you do NOT need to write a <code>for</code> loop or use <code>forEach()</code> to iterate over the items in the data set. Recall that the <code>data()</code> method parses the data set, and any method that's chained after <code>data()</code> is run once for each item in the data set.",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>x</code> attribute callback function so it returns the index times 30.",
"<strong>Note</strong><br>Each bar has a width of 25, so increasing each <code>x</code> value by 30 adds some space between the bars. Any value greater than 25 would work in this example."
],
@ -935,7 +935,7 @@
"description": [
"The height of each bar can be set to the value of the data point in the array, similar to how the <code>x</code> value was set dynamically.",
"<blockquote>selection.attr(\"property\", (d, i) => {<br> /* <br> * d is the data point value<br> * i is the index of the data point in the array<br> */<br>})</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the callback function for the <code>height</code> attribute to return the data value times 3.",
"<strong>Note</strong><br>Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example."
],
@ -1017,7 +1017,7 @@
"To make the bars right-side-up, you need to change the way the <code>y</code> coordinate is calculated. It needs to account for both the height of the bar and the total height of the SVG area.",
"The height of the SVG area is 100. If you have a data point of 0 in the set, you would want the bar to start at the bottom of the SVG area (not the top). To do this, the <code>y</code> coordinate needs a value of 100. If the data point value were 1, you would start with a <code>y</code> coordinate of 100 to set the bar at the bottom. Then you need to account for the height of the bar of 1, so the final <code>y</code> coordinate would be 99.",
"The <code>y</code> coordinate that is <code>y = heightOfSVG - heightOfBar</code> would place the bars right-side-up.",
"<h4>Instructions</h4>",
"<hr>",
"Change the callback function for the <code>y</code> attribute to set the bars right-side-up. Remember that the <code>height</code> of the bar is 3 times the data value <code>d</code>.",
"<strong>Note</strong><br>In general, the relationship is <code>y = h - m * d</code>, where <code>m</code> is the constant that scales the data points."
],
@ -1096,7 +1096,7 @@
"description": [
"The bars are in the right position, but they are all the same black color. SVG has a way to change the color of the bars.",
"In SVG, a <code>rect</code> shape is colored with the <code>fill</code> attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.",
"<h4>Instructions</h4>",
"<hr>",
"Add an <code>attr()</code> method to set the \"fill\" of all the bars to the color \"navy\"."
],
"challengeSeed": [
@ -1166,7 +1166,7 @@
"D3 lets you label a graph element, such as a bar, using the SVG <code>text</code> element.",
"Like the <code>rect</code> element, a <code>text</code> element needs to have <code>x</code> and <code>y</code> attributes, to place it on the SVG canvas. It also needs to access the data to display those values.",
"D3 gives you a high level of control over how you label your bars.",
"<h4>Instructions</h4>",
"<hr>",
"The code in the editor already binds the data to each new <code>text</code> element. First, append <code>text</code> nodes to the <code>svg</code>. Next, add attributes for the <code>x</code> and <code>y</code> coordinates. They should be calculated the same way as the <code>rect</code> ones, except the <code>y</code> value for the <code>text</code> should make the label sit 3 units higher than the bar. Finally, use the D3 <code>text()</code> method to set the label equal to the data point value.",
"<strong>Note</strong><br>For the label to sit higher than the bar, decide if the <code>y</code> value for the <code>text</code> should be 3 greater or 3 less than the <code>y</code> value for the bar."
],
@ -1249,7 +1249,7 @@
],
"description": [
"D3 methods can add styles to the bar labels. The <code>fill</code> attribute sets the color of the text for a <code>text</code> node. The <code>style()</code> method sets CSS rules for other styles, such as \"font-family\" or \"font-size\".",
"<h4>Instructions</h4>",
"<hr>",
"Set the <code>font-size</code> of the <code>text</code> elements to 25px, and the color of the text to red."
],
"challengeSeed": [
@ -1328,7 +1328,7 @@
"description": [
"It's possible to add effects that highlight a bar when the user hovers over it with the mouse. So far, the styling for the rectangles is applied with the built-in D3 and SVG methods, but you can use CSS as well.",
"You set the CSS class on the SVG elements with the <code>attr()</code> method. Then the <code>:hover</code> pseudo-class for your new class holds the style rules for any hover effects.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>attr()</code> method to add a class of <code>bar</code> to all the <code>rect</code> elements. This changes the <code>fill</code> color of the bar to brown when you mouse over it."
],
"challengeSeed": [
@ -1412,7 +1412,7 @@
"description": [
"A tooltip shows more information about an item on a page when the user hovers over that item. There are several ways to add a tooltip to a visualization, this challenge uses the SVG <code>title</code> element.",
"<code>title</code> pairs with the <code>text()</code> method to dynamically add data to the bars.",
"<h4>Instructions</h4>",
"<hr>",
"Append a <code>title</code> element under each <code>rect</code> node. Then call the <code>text()</code> method with a callback function so the text displays the data value."
],
"challengeSeed": [
@ -1506,7 +1506,7 @@
"description": [
"A scatter plot is another type of visualization. It usually uses circles to map data points, which have two values each. These values tie to the <code>x</code> and <code>y</code> axes, and are used to position the circle in the visualization.",
"SVG has a <code>circle</code> tag to create the circle shape. It works a lot like the <code>rect</code> elements you used for the bar chart.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>data()</code>, <code>enter()</code>, and <code>append()</code> methods to bind <code>dataset</code> to new <code>circle</code> elements that are appended to the SVG canvas."
],
"challengeSeed": [
@ -1583,7 +1583,7 @@
"A <code>circle</code> in SVG has three main attributes. The <code>cx</code> and <code>cy</code> attributes are the coordinates. They tell D3 where to position the <em>center</em> of the shape on the SVG canvas. The radius (<code>r</code> attribute) gives the size of the <code>circle</code>.",
"Just like the <code>rect</code> <code>y</code> coordinate, the <code>cy</code> attribute for a <code>circle</code> is measured from the top of the SVG canvas, not from the bottom.",
"All three attributes can use a callback function to set their values dynamically. Remember that all methods chained after <code>data(dataset)</code> run once per item in <code>dataset</code>. The <code>d</code> parameter in the callback function refers to the current item in <code>dataset</code>, which is an array for each point. You use bracket notation, like <code>d[0]</code>, to access the values in that array.",
"<h4>Instructions</h4>",
"<hr>",
"Add <code>cx</code>, <code>cy</code>, and <code>r</code> attributes to the <code>circle</code> elements. The <code>cx</code> value should be the first number in the array for each item in <code>dataset</code>. The <code>cy</code> value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The <code>r</code> value should be 5 for all circles."
],
"challengeSeed": [
@ -1674,7 +1674,7 @@
"You can add text to create labels for the points in a scatter plot.",
"The goal is to display the comma-separated values for the first (<code>x</code>) and second (<code>y</code>) fields of each item in <code>dataset</code>.",
"The <code>text</code> nodes need <code>x</code> and <code>y</code> attributes to position it on the SVG canvas. In this challenge, the <code>y</code> value (which determines height) can use the same value that the <code>circle</code> uses for its <code>cy</code> attribute. The <code>x</code> value can be slightly larger than the <code>cx</code> value of the <code>circle</code>, so the label is visible. This will push the label to the right of the plotted point.",
"<h4>Instructions</h4>",
"<hr>",
"Label each point on the scatter plot using the <code>text</code> elements. The text of the label should be the two values separated by a comma and a space. For example, the label for the first point is \"34, 78\". Set the <code>x</code> attribute so it's 5 units more than the value you used for the <code>cx</code> attribute on the <code>circle</code>. Set the <code>y</code> attribute the same way that's used for the <code>cy</code> value on the <code>circle</code>."
],
"challengeSeed": [
@ -1774,7 +1774,7 @@
"D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method <code>scaleLinear()</code>:",
"<code> const scale = d3.scaleLinear()</code>",
"By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this.",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>scale</code> variable to create a linear scale. Then set the <code>output</code> variable to the scale called with an input argument of 50."
],
"challengeSeed": [
@ -1837,7 +1837,7 @@
"The <code>domain()</code> and <code>range()</code> methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example:",
"<blockquote>// Set a domain<br>// The domain covers the set of input values<br>scale.domain([50, 480]);<br>// Set a range<br>// The range covers the set of output values<br>scale.range([10, 500]);<br>scale(50) // Returns 10<br>scale(480) // Returns 500<br>scale(325) // Returns 323.37<br>scale(750) // Returns 807.67<br>d3.scaleLinear()</blockquote>",
"Notice that the scale uses the linear relationship between the domain and range values to figure out what the output should be for a given number. The minimum value in the domain (50) maps to the minimum value (10) in the range.",
"<h4>Instructions</h4>",
"<hr>",
"Create a scale and set its domain to <code>[250, 500]</code> and range to <code>[10, 150]</code>.",
"<strong>Note</strong><br>You can chain the <code>domain()</code> and <code>range()</code> methods onto the <code>scale</code> variable."
],
@ -1904,7 +1904,7 @@
"Fortunately, both the <code>min()</code> and <code>max()</code> methods take a callback function.",
"In this example, the callback function's argument <code>d</code> is for the current inner array. The callback needs to return the element from the inner array (the x or y value) over which you want to compute the maximum or minimum. Here's an example for how to find the min and max values with an array of arrays:",
"<blockquote>const locationData = [[1, 7],[6, 3],[8, 3]];<br>// Returns the smallest number out of the first elements<br>const minX = d3.min(locationData, (d) => d[0]);<br>// minX compared 1, 6, and 8 and is set to 1</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"The <code>positionData</code> variable holds a 3-dimensional (3D) array. Use a D3 method to find the maximum value of the z coordinate (the third value) from the arrays and save it in the <code>output</code> variable.",
"<strong>Note</strong><br>Fun fact - D3 can plot 3D arrays."
],
@ -1966,7 +1966,7 @@
"In the example, the domain goes from 0 to the maximum in the set. It uses the <code>max()</code> method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (<code>w</code>), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas.",
"<blockquote>const dataset = [<br> [ 34, 78 ],<br> [ 109, 280 ],<br> [ 310, 120 ],<br> [ 79, 411 ],<br> [ 420, 220 ],<br> [ 233, 145 ],<br> [ 333, 96 ],<br> [ 222, 333 ],<br> [ 78, 320 ],<br> [ 21, 123 ]<br> ];<br>const w = 500;<br>const h = 500;<br><br>// Padding between the SVG canvas boundary and the plot<br>const padding = 30;<br>const xScale = d3.scaleLinear()<br> .domain([0, d3.max(dataset, (d) => d[0])])<br> .range([padding, w - padding]);</blockquote>",
"The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG canvas). Including the padding in the <code>range()</code> method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500).",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>yScale</code> variable to create a linear y-axis scale. The domain should start at zero and go to the maximum y value in the set. The range should use the SVG height (<code>h</code>) and include padding.",
"<strong>Note</strong><br>Remember to keep the plot right-side-up. When you set the range for the y coordinates, the higher value (height less padding) is the first argument, and the lower value is the second argument."
],
@ -2053,7 +2053,7 @@
"You set the coordinate attribute values for an SVG shape with the scaling function. This includes <code>x</code> and <code>y</code> attributes for <code>rect</code> or <code>text</code> elements, or <code>cx</code> and <code>cy</code> for <code>circles</code>. Here's an example:",
"<blockquote>shape<br> .attr(\"x\", (d) => xScale(d[0]))</blockquote>",
"Scales set shape coordinate attributes to place the data points onto the SVG canvas. You don't need to apply scales when you display the actual data value, for example, in the <code>text()</code> method for a tooltip or label.",
"<h4>Instructions</h4>",
"<hr>",
"Use <code>xScale</code> and <code>yScale</code> to position both the <code>circle</code> and <code>text</code> shapes onto the SVG canvas. For the <code>circles</code>, apply the scales to set the <code>cx</code> and <code>cy</code> attributes. Give them a radius of 5 units, too.",
"For the <code>text</code> elements, apply the scales to set the <code>x</code> and <code>y</code> attributes. The labels should be offset to the right of the dots. To do this, add 10 units to the x data value before passing it to the <code>xScale</code>."
],
@ -2180,7 +2180,7 @@
"<blockquote>const xAxis = d3.axisBottom(xScale);<br><br>svg.append(\"g\")<br> .attr(\"transform\", \"translate(0, \" + (h - padding) + \")\")<br> .call(xAxis);</blockquote>",
"The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the <code>call()</code> method.",
"The y-axis works is the same way, except the <code>translate</code> argument is in the form (x, 0). Because <code>translate</code> is a string in the <code>attr()</code> method above, you can use concatenation to include variable values for its arguments.",
"<h4>Instructions</h4>",
"<hr>",
"The scatter plot now has an x-axis. Create a y-axis in a variable named <code>yAxis</code> using the <code>axisLeft()</code> method. Then render the axis using a <code>g</code> element. Make sure to use a <code>transform</code> attribute to translate the axis by the amount of padding units right, and 0 units down. Remember to <code>call()</code> the axis."
],
"challengeSeed": [

18
challenges/04-data-visualization/json-apis-and-ajax.json
View File

@ -49,7 +49,7 @@
"<blockquote>document.addEventListener('DOMContentLoaded',function() {<br><br>});</blockquote>",
"Next, you can implement a click event handler that goes inside of the <code>DOMContentLoaded</code> function by adding the following code:",
"<code>document.getElementById('getMessage').onclick=function(){};</code>",
"<h4>Instructions</h4>",
"<hr>",
"Add a click event handler inside of the <code>DOMContentLoaded</code> function for the element with id of <code>getMessage</code>."
],
"challengeSeed": [
@ -132,7 +132,7 @@
"For example, when a user clicks the \"Get Message\" button, it changes the text of the element with the class <code>message</code> to say \"Here is the message\".",
"This works by adding the following code within the click event:",
"<code>document.getElementsByClassName('message')[0].innerHTML=\"Here is the message\";</code>",
"<h4>Instructions</h4>",
"<hr>",
"Add code inside the <code>onclick</code> event handler to change the text inside the <code>message</code> element to say \"Here is the message\"."
],
"challengeSeed": [
@ -223,7 +223,7 @@
"Here's a review of what each piece is doing. The JavaScript <code>XMLHttpRequest</code> object has a number of properties and methods that are used to transfer data. First, an instance of the <code>XMLHttpRequest</code> object is created and saved in the <code>req</code> variable.",
"Next, the <code>open</code> method initializes a request - this example is requesting data from an API, therefore is a \"GET\" request. The second argument for <code>open</code> is the URL of the API you are requesting data from. The third argument is a Boolean value where <code>true</code> makes it an asynchronous request.",
"The <code>send</code> method sends the request. Finally, the <code>onload</code> event handler parses the returned data and applies the <code>JSON.stringify</code> method to convert the JavaScript object into a string. This string is then inserted as the message text.",
"<h4>Instructions</h4>",
"<hr>",
"Update the code to create and send a \"GET\" request to the Free Code Camp Cat Photo API. Then click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the API."
],
"challengeSeed": [
@ -320,7 +320,7 @@
"Another interesting \"key-value pair\" in the first object is <code>\"codeNames\":[\"Juggernaut\",\"Mrs. Wallace\",\"ButterCup\"]</code>. Here \"codeNames\" is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.",
"Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the \"altText\" of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called <code>json</code>:",
"<blockquote>console.log(json[0].altText);<br>// Prints \"A white cat wearing a green helmet shaped melon on it's head.\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"For the cat with the \"id\" of 2, print to the console the second value in the <code>codeNames</code> array. You should use bracket and dot notation on the object (which is saved in the variable <code>json</code>) to access the value."
],
"challengeSeed": [
@ -413,7 +413,7 @@
"Then, loop through the JSON, adding HTML to the variable that wraps the key names in <code>strong</code> tags, followed by the value. When the loop is finished, you render it.",
"Here's the code that does this:",
"<blockquote>json.forEach(function(val) {</br> var keys = Object.keys(val);</br> html += \"&lt;div class = 'cat'&gt;\";</br> keys.forEach(function(key) {</br> html += \"&lt;strong&gt;\" + key + \"&lt;/strong&gt;: \" + val[key] + \"&lt;br&gt;\";</br> });</br> html += \"&lt;/div&gt;&lt;br&gt;\";</br>});</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add a <code>forEach</code> method to loop over the JSON data and create the HTML elements to display it."
],
"challengeSeed": [
@ -506,7 +506,7 @@
"When you're looping through these objects, you can use this <code>imageLink</code> property to display this image in an <code>img</code> element.",
"Here's the code that does this:",
"<code>html += \"&lt;img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'&gt;\";</code>",
"<h4>Instructions</h4>",
"<hr>",
"Add code to use the <code>imageLink</code> and <code>altText</code> properties in an <code>img</code> tag."
],
"challengeSeed": [
@ -602,7 +602,7 @@
"Given that the JSON data is stored in an array, you can use the <code>filter</code> method to filter out the cat whose \"id\" key has a value of 1.",
"Here's the code to do this:",
"<blockquote>json = json.filter(function(val) {<br> return (val.id !== 1);<br>});</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add code to <code>filter</code> the json data to remove the cat with the \"id\" value of 1."
],
"challengeSeed": [
@ -704,7 +704,7 @@
"Here's code that does this:",
"<blockquote>if (navigator.geolocation){<br> navigator.geolocation.getCurrentPosition(function(position) {<br> document.getElementById('data').innerHTML=\"latitude: \"+ position.coords.latitude + \"&lt;br&gt;longitude: \" + position.coords.longitude;<br> });<br>}</blockquote>",
"First, it checks if the <code>navigator.geolocation</code> object exists. If it does, the <code>getCurrentPosition</code> method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the <code>position</code> object's values for latitude and longitude using dot notation and updates the HTML.",
"<h4>Instructions</h4>",
"<hr>",
"Add the example code inside the <code>script</code> tags to check a user's current location and insert it into the HTML."
],
"challengeSeed": [
@ -759,7 +759,7 @@
"The <code>setRequestHeader</code> method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the <code>open</code> method, but before the <code>send</code> method. The two parameters are the name of the header and the value to set as the body of that header.",
"Next, the <code>onreadystatechange</code> event listener handles a change in the state of the request. A <code>readyState</code> of 4 means the operation is complete, and a <code>status</code> of 200 means it was a successful request. The document's HTML can be updated.",
"Finally, the <code>send</code> method sends the request with the <code>userName</code> value, which was given by the user in the <code>input</code> field.",
"<h4>Instructions</h4>",
"<hr>",
"Update the code to create and send a \"POST\" request. Then enter your name in input box and click \"Send Message\". Your Ajax function will replace \"Reply from Server will be here.\" with the reply of the server. In this case, it is your name appended with \" loves cats\"."
],
"challengeSeed": [