diff --git a/challenges/01-responsive-web-design/applied-accessibility.json b/challenges/01-responsive-web-design/applied-accessibility.json index 467b9c07d5..de273e6bb9 100644 --- a/challenges/01-responsive-web-design/applied-accessibility.json +++ b/challenges/01-responsive-web-design/applied-accessibility.json @@ -54,7 +54,7 @@ "<img src="importantLogo.jpeg" alt="Company logo">", "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 alt attribute and read its contents to deliver key information.", "Good alt text is short but descriptive, and meant to briefly convey the meaning of the image. You should always include an alt attribute on your image. Per HTML5 specification, this is now considered mandatory.", - "

Instructions

", + "
", "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 alt attribute in the img tag, that explains Camper Cat is doing karate. (The image src doesn't link to an actual file, so you should see the alt text in the display.)" ], "challengeSeed": [ @@ -95,7 +95,7 @@ "<img src="visualDecoration.jpeg" alt="">", "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.", "Note
For images with a caption, you may still want to include alt text, since it helps search engines catalog the content of the image.", - "

Instructions

", + "
", "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 alt attribute to the img tag and set it to an empty string. (Note that the image src 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 h2 element followed by several subsections labeled with h4 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) h1 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.", - "

Instructions

", + "
", "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 h5 tags to the proper heading level to indicate they are subsections of the h2 ones." ], "challengeSeed": [ @@ -205,7 +205,7 @@ "By default, a browser renders these elements similarly to the humble div. 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 main 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 main 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.", - "

Instructions

", + "
", "Camper Cat has some big ideas for his ninja weapons page. Help him set up his markup by adding opening and closing main tags between the header and footer (covered in other challenges). Keep the main 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.", "Note about section and div
The section element is also new with HTML5, and has a slightly different semantic meaning than article. An articles is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article, then each chapter is a section. When there's no relationship between groups of content, then use a div.", "
<div> - blocks content
<section> - blocks related content
<article> - blocks independent, self-contained content
", - "

Instructions

", + "
", "Camper Cat used article tags to wrap the posts on his blog page, but he forgot to use them around the top one. Change the div tag to use an article tag instead." ], "challengeSeed": [ @@ -313,7 +313,7 @@ "The next HTML5 element that adds semantic meaning and improves accessibility is the header 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.", "Header shares the embedded landmark feature you saw with main, allowing assistive technologies to quickly navigate to that content.", "Note
Header is meant for use in the body tag of your HTML document. This is different than the head element, which contains the page's title, meta information, etc.", - "

Instructions

", + "
", "Camper Cat is writing some great articles about ninja training, and wants to add a page for them to his site. Change the top div that currently contains the h1 to a header tag instead." ], "challengeSeed": [ @@ -377,7 +377,7 @@ "description": [ "The nav 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 nav tag as well. Using a footer (covered in the next challenge) is sufficient.", - "

Instructions

", + "
", "Camper Cat included navigation links at the top of his training page, but wrapped them in a div. Change the div to a nav 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 header and nav, the footer 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.", - "

Instructions

", + "
", "Camper Cat's training page is making good progress. Change the div he used to wrap his copyright information at the bottom of the page to a footer element." ], "challengeSeed": [ @@ -521,7 +521,7 @@ "Here's an example:", "
<audio id="meowClip" controls>
<source src="audio/meow.mp3" type="audio/mpeg" />
<source src="audio/meow.ogg" type="audio/ogg" />
</audio>
", "Note
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.", - "

Instructions

", + "
", "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 audio element after the p. Include the controls attribute. Then place a source tag inside the audio tags with the src attribute set to \"https://s3.amazonaws.com/freecodecamp/screen-reader.mp3\" and type 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 figcaption goes inside the figure tags and can be combined with other elements:", "
<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
", - "

Instructions

", + "
", "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 div tag he used to a figure tag, and the p tag that surrounds the caption to a figcaption tag." ], "challengeSeed": [ @@ -660,7 +660,7 @@ "The label 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 for attribute on a label tag explicitly associates that label with the form control and is used by screen readers.", "The value of the for attribute must be the same as the value of the id attribute of the form control. Here's an example:", "
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
", - "

Instructions

", + "
", "Camper Cat expects a lot of interest in his thoughtful blog posts, and wants to include an email sign up form. Add a for attribute on the email label that matches the id on its input field." ], "challengeSeed": [ @@ -733,7 +733,7 @@ "The fieldset wrapper and legend tag are not necessary when the choices are self-explanatory, like a gender selection. Using a label with the for attribute for each radio button is sufficient.", "Here's an example:", "
<form>
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
<input id="three" type="radio" name="items" value="three">
<label for="three">Choice Three</label>
</fieldset>
</form>
", - "

Instructions

", + "
", "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 for 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 text, so it helps to show users the expected date format in the label or as placeholder text just in case.", "Here's an example:", "
<label for="input1">Enter a date (MM-DD-YYYY):</label>
<input type="date" id="input1" name="input1">
", - "

Instructions

", + "
", "Camper Cat is setting up a mortal combat tournament and wants to ask his competitors to see what date works best. Add an input tag with a type attribute of \"date\", an id attribute of \"pickdate\", and a name attribute of \"date\"." ], "challengeSeed": [ @@ -883,7 +883,7 @@ "Continuing with the date theme, HTML5 also introduced the time element along with a datetime 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 datetime 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:", "<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>", - "

Instructions

", + "
", "Camper Cat's mortal combat survey results are in! Wrap a time tag around the text \"Thursday, September 15<sup>th</sup>\" and add a datetime attribute to it set to \"2016-09-15\"." ], "challengeSeed": [ @@ -960,7 +960,7 @@ "
  • display: none; or visibility: hidden; hides content for everyone, including screen reader users
    • ", "
  • Zero values for pixel sizes, such as width: 0px; height: 0px; removes that element from the flow of your document, meaning screen readers will ignore it
    • ", "", - "

    Instructions

    ", + "
    ", "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 sr-only class, but the CSS rules aren't filled in yet. Give the position an absolute value, the left a -10000px value, and the width and height 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.", - "

    Instructions

    ", + "
    ", "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 color of the text from the current gray (#D3D3D3) to a darker gray (#636363) 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.", - "

    Instructions

    ", + "
    ", "Camper Cat is experimenting with using color for his blog text and background, but his current combination of a greenish background-color with maroon text color has a 2.5:1 contrast ratio. You can easily adjust the lightness of the colors since he declared them using the CSS hsl() property (which stands for hue, saturation, lightness) by changing the third argument. Increase the background-color lightness value from 35% to 55%, and decrease the color 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.", "Note
    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.", - "

    Instructions

    ", + "
    ", "Camper Cat is testing different styles for an important button, but the yellow (#FFFF33) background-color and the green (#33FF33) text color 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 color to a dark blue (#003366) 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 (a) tags. Having a list of \"click here\" or \"read more\" links isn't helpful. Instead, you should use brief but descriptive text within the a tags to provide more meaning for these users.", - "

    Instructions

    ", + "
    ", "The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (a) 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:", "<button accesskey="b">Important Button</button>", - "

    Instructions

    ", + "
    ", "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 accesskey 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 div, span, and p, by placing a tabindex=\"0\" attribute on them. Here's an example:", "<div tabindex="0">I need keyboard focus!</div>", "Note
    A negative tabindex 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 div used for a pop-up window is activated), and is beyond the scope of these challenges.", - "

    Instructions

    ", + "
    ", "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 tabindex attribute to the p tag and set its value to \"0\". Bonus - using tabindex also enables the CSS pseudo-class :focus to work on the p tag." ], "challengeSeed": [ @@ -1453,7 +1453,7 @@ "Here's an example:", "<div tabindex="1">I get keyboard focus, and I get it first!</div>", "<div tabindex="2">I get keyboard focus, and I get it second!</div>", - "

    Instructions

    ", + "
    ", "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 input and submit input form controls to be the first two items in the tab order. Add a tabindex attribute set to \"1\" to the search input, and a tabindex attribute set to \"2\" to the submit input." ], "challengeSeed": [ diff --git a/challenges/01-responsive-web-design/applied-visual-design.json b/challenges/01-responsive-web-design/applied-visual-design.json index 8fc9e892e0..f2d5e9d226 100644 --- a/challenges/01-responsive-web-design/applied-visual-design.json +++ b/challenges/01-responsive-web-design/applied-visual-design.json @@ -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 text-align property.", - "

    Instructions

    ", + "
    ", "Align the h4 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 links class selector.", "Note
    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 width 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:", "
    img {
    width: 220px;
    }
    ", - "

    Instructions

    ", + "
    ", "Add a width property to the entire card and set it to an absolute value of 245px. Use the fullCard class to select the element." ], "challengeSeed": [ @@ -184,7 +184,7 @@ "description": [ "You can specify the height of an element using the height property in CSS, similar to the width property. Here's an example that changes the height of an image to 20px:", "
    img {
    height: 20px;
    }
    ", - "

    Instructions

    ", + "
    ", "Add a height property to the h4 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.", - "

    Instructions

    ", + "
    ", "Change the height of the h4 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 strong tag. This is often used to draw attention to text and symbolize that it is important. With the strong tag, the browser applies the CSS of font-weight: bold; to the element.", - "

    Instructions

    ", + "
    ", "Wrap a strong tag around the entire h4 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 u tag. This is often used to signify that a section of text is important, or something to remember. With the u tag, the browser applies the CSS of text-decoration: underline; to the element.", - "

    Instructions

    ", + "
    ", "Wrap the u tag around the two anchor tags. It should not include the parent div that has the class of cardLinks.", "Note
    Try to avoid using the u 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 em tag. This displays text as italicized, as the browser applies the CSS of font-style: italic; to the element.", - "

    Instructions

    ", + "
    ", "Wrap an em 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 del tag. It shows that a section of text is no longer valid. With the del tag, the browser applies the CSS of text-decoration: line-through; to the element.", - "

    Instructions

    ", + "
    ", "Wrap the del tag around \"Google\" inside the h4 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 hr 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.", - "

    Instructions

    ", + "
    ", "Add an hr tag underneath the h4 which contains the card title.", "Note
    In HTML, hr is a self-closing tag, and therefore doesn't need a separate closing tag." ], @@ -719,7 +719,7 @@ "
    rgba stands for:
    r = red
    g = green
    b = blue
    a = alpha/level of opacity
    ", "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. rgba() 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 background-color: rgba(45, 45, 45, 0.1) for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.", - "

    Instructions

    ", + "
    ", "To make the text stand out more, adjust the background-color of the h4 element to the given rgba() value.", "Also for the h4, remove the height property and add padding of 10px." ], @@ -801,7 +801,7 @@ "title": "Adjust the Size of a Header Versus a Paragraph Tag", "description": [ "The font size of header tags (h1 through h6) 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 font-size property to adjust the size of the text in an element.", - "

    Instructions

    ", + "
    ", "To make the heading significantly larger than the paragraph, change the font-size of the h4 tag to 27 pixels." ], "challengeSeed": [ @@ -883,7 +883,7 @@ "The box-shadow property takes values for offset-x (how far to push the shadow horizontally from the element), offset-y (how far to push the shadow vertically from the element), blur-radius, spread-radius and a color value, in that order. The blur-radius and spread-radius values are optional.", "Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:", "
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    ", - "

    Instructions

    ", + "
    ", "Use the example CSS values above to place a box-shadow on the card. The element now has an id of thumbnail, use this selector to place the shadows for the hover state." ], "challengeSeed": [ @@ -970,7 +970,7 @@ "The opacity property in CSS is used to adjust the opacity, or conversely, the transparency for an item.", "
    A value of 1 is opaque, which isn't transparent at all.
    A value of 0.5 is half see-through.
    A value of 0 is completely transparent.
    ", "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.", - "

    Instructions

    ", + "
    ", "Set the opacity of the anchor tags to 0.7 using links class to select them." ], "challengeSeed": [ @@ -1054,7 +1054,7 @@ "description": [ "The text-transform property in CSS is used to set text to uppercase.", "Note
    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).", - "

    Instructions

    ", + "
    ", "Set the text inside the h4 tag to be uppercase using the text-transform property." ], "challengeSeed": [ @@ -1149,7 +1149,7 @@ "<link href=\"https://fonts.googleapis.com/css?family=Open+Sans\" rel=\"stylesheet\">", "Once the link is in place, the font is available to include in your CSS by using the pattern font-family: 'FONT', FAMILY_NAME;.", "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.", - "

    Instructions

    ", + "
    ", "Set the font-family of the body to \"Open Sans\"." ], "challengeSeed": [ @@ -1238,7 +1238,7 @@ "title": "Set the Font-size for Multiple Heading Elements", "description": [ "The font-size 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 h1 through h6 tags to balance the heading sizes.", - "

    Instructions

    ", + "
    ", "", - "

    Instructions

    ", + "
    ", "An example helps show this property in action. Add the CSS property align-items to the #box-container element, and give it a value of center.", "Bonus
    Try the other options for the align-items 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 align-items property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.", - "

    Instructions

    ", + "
    ", "Add the CSS property align-items to the header's .follow-btn element, the header's h3, and the header's h4. Set the value to center." ], "challengeSeed": [ @@ -1077,7 +1077,7 @@ "
  • wrap: wraps items from left-to-right if they are in a row, or top-to-bottom if they are in a column.
    • ", "
  • wrap-reverse: wraps items from right-to-left if they are in a row, or bottom-to-top if they are in a column.
    • ", "", - "

    Instructions

    ", + "
    ", "The current layout has too many boxes for one row. Add the CSS property flex-wrap to the #box-container 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 flex-shrink 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 flex-shrink 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 flex-shrink value of 1 and the other has a flex-shrink value of 3, the one with the value of 3 will shrink three times as much as the other.", - "

    Instructions

    ", + "
    ", "Add the CSS property flex-shrink to both #box-1 and #box-2. Give #box-1 a value of 1 and #box-2 a value of 2." ], "challengeSeed": [ @@ -1241,7 +1241,7 @@ "description": [ "The opposite of flex-shrink is the flex-grow property. Recall that flex-shrink controls the size of the items when the container shrinks. The flex-grow property controls the size of items when the parent container expands.", "Using a similar example from the last challenge, if one item has a flex-grow value of 1 and the other has a flex-grow value of 3, the one with the value of 3 will grow three times as much as the other.", - "

    Instructions

    ", + "
    ", "Add the CSS property flex-grow to both #box-1 and #box-2. Give #box-1 a value of 1 and #box-2 a value of 2." ], "challengeSeed": [ @@ -1311,7 +1311,7 @@ "description": [ "The previous example included flex-basis to help demonstrate how the flex-grow property works. The flex-basis property specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.", "The units used by the flex-basis property are the same as other size properties (px, em, %, etc.). The value auto sizes items based on the content.", - "

    Instructions

    ", + "
    ", "Set the initial size of the boxes using flex-basis. Add the CSS property flex-basis to both #box-1 and #box-2. Give #box-1 a value of 10em and #box-2 a value of 20em." ], "challengeSeed": [ @@ -1382,7 +1382,7 @@ "There is a shortcut available to set several flex properties at once. The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the flex property.", "For example, flex: 1 0 10px; will set the item to flex-grow: 1;, flex-shrink: 0;, and flex-basis: 10px;.", "The default property settings are flex: 0 1 auto;.", - "

    Instructions

    ", + "
    ", "Add the CSS property flex to both #box-1 and #box-2. Give #box-1 the values so its flex-grow is 2, its flex-shrink is 2, and its flex-basis is 150px. Give #box-2 the values so its flex-grow is 1, its flex-shrink is 1, and its flex-basis is 150px.", "These values will cause #box-1 to be twice the size of #box-2 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 flex-basis values of the two boxes." ], @@ -1451,7 +1451,7 @@ "title": "Using the Order Property to Rearrange Items", "description": [ "The order 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.", - "

    Instructions

    ", + "
    ", "Add the CSS property order to both #box-1 and #box-2. Give #box-1 a value of 2 and give #box-2 a value of 1." ], "challengeSeed": [ @@ -1521,7 +1521,7 @@ "description": [ "The final property for flex items is align-self. 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 float, clear, and vertical-align do not work on flex items.", "align-self accepts the same values as align-items and will override any value set by the align-items property.", - "

    Instructions

    ", + "
    ", "Add the CSS property align-self to both #box-1 and #box-2. Give #box-1 a value of center and give #box-2 a value of flex-end." ], "challengeSeed": [ diff --git a/challenges/01-responsive-web-design/responsive-web-design.json b/challenges/01-responsive-web-design/responsive-web-design.json index 83e3b3070a..120bd6030f 100644 --- a/challenges/01-responsive-web-design/responsive-web-design.json +++ b/challenges/01-responsive-web-design/responsive-web-design.json @@ -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:", "@media (max-width: 100px) { /* CSS Rules */ }", "Remember, the CSS inside the media query is applied only if the media type matches that of the device being used.", - "

    Instructions

    ", + "
    ", "Add a media query, so that the p tag has a font-size of 10px when the device's height is smaller than 800px." ], "challengeSeed": [ @@ -107,7 +107,7 @@ "You can use:", "
    img {
    max-width: 100%;
    display: block;
    height: auto;
    }
    ", "The max-width 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 display property to block changes the image from an inline element (its default), to a block element on its own line. The height property of auto keeps the original aspect ratio of the image.", - "

    Instructions

    ", + "
    ", "Add style rules for the img 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 width and height 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:", "
    <style>
    img { height: 250px; width: 250px; }
    </style>
    <img src="coolPic500x500" alt="A most excellent picture">
    ", - "

    Instructions

    ", + "
    ", "Set the width and height of the img tag to half of their original values. In this case, both the original height and the original width are 200px." ], "challengeSeed": [ @@ -201,7 +201,7 @@ "
  • vmin: 70vmin would be 70% of the viewport's smaller dimension (height vs. width).
    • ", "
  • vmax: 100vmax would be 100% of the viewport's bigger dimension (height vs. width).
    • ", "", - "

    Instructions

    ", + "
    ", "Set the width of the h2 tag to 80% of the viewport's width and the width of the paragraph as 75% of the viewport's smaller dimension." ], "challengeSeed": [ diff --git a/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json b/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json index 235d83d81b..726a3506d8 100644 --- a/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json +++ b/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json @@ -15,7 +15,7 @@ "You can make a multi-line comment beginning with /* and ending with */:", "
    /* This is a
    multi-line comment */
    ", "Best Practice
    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—both for others and for your future self.", - "

    Instructions

    ", + "
    ", "Try creating one of each type of comment." ], "challengeSeed": [ @@ -55,7 +55,7 @@ "/*Voici un commentaire
    sur plusieurs lignes */    ", "Conseils", "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 et vous-même à mieux comprendre votre code.", - "

    Instructions

    ", + "
    ", "Essayez de créer un commentaire de chaque type." ] } @@ -73,7 +73,7 @@ "
    var ourName;
    ", "creates a variable called ourName. In JavaScript we end statements with semicolons.", "Variable names can be made up of numbers, letters, and $ or _, but may not contain spaces or start with a number.", - "

    Instructions

    ", + "
    ", "Use the var keyword to create a variable called myName.", "Hint
    Look at the ourName example if you get stuck." ], @@ -117,7 +117,7 @@ "var notreNom;", "crée une variable appelée notreNom.On termine nos expressions avec un point virgule en JavaScript.", "Le nom d'une variable peut être composé de nombres, lettres et $ ou _, mais ne peut contenir d'espaces ou commencer par un nombre.", - "

    Instructions

    ", + "
    ", "Utilisez le mot-clé var pour créer une variable appelée monNom", "Conseil
    Regardez à l'exemple de notreNom si vous vous êtes bloqué." ] @@ -134,7 +134,7 @@ "Assignment always goes from right to left. Everything to the right of the = operator is resolved before the value is assigned to the variable to the left of the operator.", "
    myVar = 5;
    myNum = myVar;
    ", "Assigns 5 to myVar and then resolves myVar to 5 again and assigns it to myNum.", - "

    Instructions

    ", + "
    ", "Assign the value 7 to variable a.", "Assign the contents of a to variable b." ], @@ -193,7 +193,7 @@ "It is common to initialize a variable to an initial value in the same line as it is declared.", "var myVar = 0;", "Creates a new variable called myVar and assigns it an initial value of 0.", - "

    Instructions

    ", + "
    ", "Define a variable a with var and initialize it to a value of 9." ], "releasedOn": "January 1, 2016", @@ -233,7 +233,7 @@ "title": "Understanding Uninitialized Variables", "description": [ "When JavaScript variables are declared, they have an initial value of undefined. If you do a mathematical operation on an undefined variable your result will be NaN which means \"Not a Number\". If you concatenate a string with an undefined variable, you will get a literal string of \"undefined\".", - "

    Instructions

    ", + "
    ", "Initialize the three variables a, b, and c with 5, 10, and \"I am a\" respectively so that they will not be undefined." ], "releasedOn": "January 1, 2016", @@ -285,7 +285,7 @@ "Write variable names in Javascript in camelCase. In camelCase, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized.", "Examples:", "
    var someVariable;
    var anotherVariableName;
    var thisVariableNameIsTooLong;
    ", - "

    Instructions

    ", + "
    ", "Modify the existing declarations and assignments so their names use camelCase.
    Do not create any new variables." ], "releasedOn": "January 1, 2016", @@ -336,11 +336,9 @@ "Number is a data type in JavaScript which represents numeric data.", "Now let's try to add two numbers using JavaScript.", "JavaScript uses the + symbol as addition operation when placed between two numbers.", - "", "Example", "
    myVar = 5 + 10; // assigned 15
    ", - "", - "

    Instructions

    ", + "
    ", "Change the 0 so that sum will equal 20." ], "challengeSeed": [ @@ -380,7 +378,7 @@ "Example", "
    myVar = 12 - 6; // assigned 6
    ", "", - "

    Instructions

    ", + "
    ", "Change the 0 so the difference is 12." ], "challengeSeed": [ @@ -422,7 +420,7 @@ "Example", "
    myVar = 13 * 13; // assigned 169
    ", "", - "

    Instructions

    ", + "
    ", "Change the 0 so that product will equal 80." ], "challengeSeed": [ @@ -463,7 +461,7 @@ "Example", "
    myVar = 16 / 2; // assigned 8
    ", "", - "

    Instructions

    ", + "
    ", "Change the 0 so that the quotient is equal to 2." ], "challengeSeed": [ @@ -503,7 +501,7 @@ "is the equivalent of", "i = i + 1;", "Note
    The entire line becomes i++;, eliminating the need for the equal sign.", - "

    Instructions

    ", + "
    ", "Change the code to use the ++ operator on myVar.", "Hint
    Learn more about Arithmetic operators - Increment (++)." ], @@ -553,7 +551,7 @@ "is the equivalent of", "i = i - 1;", "Note
    The entire line becomes i--;, eliminating the need for the equal sign.", - "

    Instructions

    ", + "
    ", "Change the code to use the -- operator on myVar." ], "releasedOn": "January 1, 2016", @@ -598,7 +596,7 @@ "description": [ "We can store decimal numbers in variables too. Decimal numbers are sometimes referred to as floating point numbers or floats.", "Note
    Not all real numbers can accurately be represented in floating point. This can lead to rounding errors. Details Here.", - "

    Instructions

    ", + "
    ", "Create a variable myDecimal and give it a decimal value with a fractional part (e.g. 5.7)." ], "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.", - "

    Instructions

    ", + "
    ", "Change the 0.0 so that product will equal 5.0." ], "challengeSeed": [ @@ -675,7 +673,7 @@ "title": "Divide one Decimal by Another with JavaScript", "description": [ "Now let's divide one decimal by another.", - "

    Instructions

    ", + "
    ", "Change the 0.0 so that quotient will equal to 2.2." ], "challengeSeed": [ @@ -716,7 +714,7 @@ "Usage
    In mathematics, a number can be checked to be even or odd by checking the remainder of the division of the number by 2.", "
    17 % 2 = 1 (17 is Odd)
    48 % 2 = 0 (48 is Even)
    ", "Note
    The remainder operator is sometimes incorrectly referred to as the \"modulus\" operator. It is very similar to modulus, but does not work properly with negative numbers.", - "

    Instructions

    ", + "
    ", "Set remainder equal to the remainder of 11 divided by 3 using the remainder (%) operator." ], "releasedOn": "January 1, 2016", @@ -764,7 +762,7 @@ "to add 5 to myVar. 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 += operator.", "
    var myVar = 1;
    myVar += 5;
    console.log(myVar); // Returns 6
    ", - "

    Instructions

    ", + "
    ", "Convert the assignments for a, b, and c to use the += operator." ], "releasedOn": "January 1, 2016", @@ -818,7 +816,7 @@ "myVar = myVar - 5;", "will subtract 5 from myVar. This can be rewritten as: ", "myVar -= 5;", - "

    Instructions

    ", + "
    ", "Convert the assignments for a, b, and c to use the -= operator." ], "releasedOn": "January 1, 2016", @@ -872,7 +870,7 @@ "myVar = myVar * 5;", "will multiply myVar by 5. This can be rewritten as: ", "myVar *= 5;", - "

    Instructions

    ", + "
    ", "Convert the assignments for a, b, and c to use the *= operator." ], "releasedOn": "January 1, 2016", @@ -926,7 +924,7 @@ "myVar = myVar / 5;", "Will divide myVar by 5. This can be rewritten as: ", "myVar /= 5;", - "

    Instructions

    ", + "
    ", "Convert the assignments for a, b, and c to use the /= operator." ], "releasedOn": "January 1, 2016", @@ -1025,7 +1023,7 @@ "Previously we have used the code", "var myName = \"your name\";", "\"your name\" is called a string literal. It is a string because it is a series of zero or more characters enclosed in single or double quotes.", - "

    Instructions

    ", + "
    ", "Create two new string variables: myFirstName and myLastName and assign them the values of your first and last name, respectively." ], "challengeSeed": [ @@ -1068,7 +1066,7 @@ "var sampleStr = \"Alan said, \\\"Peter is learning JavaScript\\\".\";", "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:", "Alan said, \"Peter is learning JavaScript\".", - "

    Instructions

    ", + "
    ", "Use backslashes to assign a string to the myStr variable so that if you were to print it to the console, you would see:", "I am a \"double quoted\" string inside \"double quotes\"." ], @@ -1119,7 +1117,7 @@ "The value in using one or the other has to do with the need to escape 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:", "'This string has \"double quotes\" in it. And \"probably\" lots of them.'", - "

    Instructions

    ", + "
    ", "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 escaped 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.", "
    CodeOutput
    \\'single quote
    \\\"double quote
    \\\\backslash
    \\nnewline
    \\rcarriage return
    \\ttab
    \\bbackspace
    \\fform feed
    ", "Note that the backslash itself must be escaped in order to display as a backslash.", - "

    Instructions

    ", + "
    ", "Assign the following three lines of text into the single variable myStr using escape sequences.", "
    FirstLine
        \\SecondLine
    ThirdLine
    ", "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 @@ "Example", "
    'My name is Alan,' + ' I concatenate.'
    ", "Note
    Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.", - "

    Instructions

    ", + "
    ", "Build myStr from the strings \"This is the start. \" and \"This is the end.\" using the + operator." ], "releasedOn": "January 1, 2016", @@ -1265,7 +1263,7 @@ "description": [ "We can also use the += operator to concatenate a string onto the end of an existing string variable. This can be very helpful to break a long string over several lines.", "Note
    Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.", - "

    Instructions

    ", + "
    ", "Build myStr over several lines by concatenating these two strings:
    \"This is the first sentence. \" and \"This is the second sentence.\" using the += operator." ], "releasedOn": "January 1, 2016", @@ -1315,7 +1313,7 @@ "title": "Constructing Strings with Variables", "description": [ "Sometimes you will need to build a string, Mad Libs style. By using the concatenation operator (+), you can insert one or more variables into a string you're building.", - "

    Instructions

    ", + "
    ", "Set myName to a string equal to your name and build myStr with myName between the strings \"My name is \" and \" and I am well!\"" ], "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 literals, we can also append variables to a string using the plus equals (+=) operator.", - "

    Instructions

    ", + "
    ", "Set someAdjective and append it to myStr using the += operator." ], "releasedOn": "January 1, 2016", @@ -1430,7 +1428,7 @@ "You can find the length of a String value by writing .length after the string variable or string literal.", "\"Alan Peter\".length; // 10", "For example, if we created a variable var firstName = \"Charles\", we could find out how long the string \"Charles\" is by using the firstName.length property.", - "

    Instructions

    ", + "
    ", "Use the .length property to count the number of characters in the lastName variable and assign it to lastNameLength." ], "challengeSeed": [ @@ -1480,7 +1478,7 @@ "Bracket notation is a way to get a character at a specific index 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 Zero-based indexing.", "For example, the character at index 0 in the word \"Charles\" is \"C\". So if var firstName = \"Charles\", you can get the value of the first letter of the string by using firstName[0].", - "

    Instructions

    ", + "
    ", "Use bracket notation to find the first character in the lastName variable and assign it to firstLetterOfLastName.", "Hint
    Try looking at the firstLetterOfFirstName variable declaration if you get stuck." ], @@ -1534,7 +1532,7 @@ "
    var myStr = \"Bob\";
    myStr[0] = \"J\";
    ", "cannot change the value of myStr to \"Job\", because the contents of myStr cannot be altered. Note that this does not mean that myStr cannot be changed, just that the individual characters of a string literal cannot be changed. The only way to change myStr would be to assign it with a new string, like this:", "
    var myStr = \"Bob\";
    myStr = \"Job\";
    ", - "

    Instructions

    ", + "
    ", "Correct the assignment to myStr to achieve the desired effect that is intended by myStr[0] = \"H\" ;." ], "releasedOn": "January 1, 2016", @@ -1581,7 +1579,7 @@ "description": [ "You can also use bracket notation to get the character at other positions within a string.", "Remember that computers start counting at 0, so the first character is actually the zeroth character.", - "

    Instructions

    ", + "
    ", "Let's try to set thirdLetterOfLastName to equal the third letter of the lastName variable using bracket notation.", "Hint
    Try looking at the secondLetterOfFirstName 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 var firstName = \"Charles\", you can get the value of the last letter of the string by using firstName[firstName.length - 1].", - "

    Instructions

    ", + "
    ", "Use bracket notation to find the last character in the lastName variable.", "Hint
    Try looking at the lastLetterOfFirstName 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 var firstName = \"Charles\" string by using firstName[firstName.length - 3]", - "

    Instructions

    ", + "
    ", "Use bracket notation to find the second-to-last character in the lastName string.", "Hint
    Try looking at the thirdToLastLetterOfFirstName variable declaration if you get stuck." ], @@ -1776,7 +1774,7 @@ "With JavaScript array 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: ", "var sandwich = [\"peanut butter\", \"jelly\", \"bread\"].", - "

    Instructions

    ", + "
    ", "Modify the new array myArray so that it contains both a string and a number (in that order).", "Hint
    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: [[\"Bulls\", 23], [\"White Sox\", 45]]. This is also called a Multi-dimensional Array.", - "

    Instructions

    ", + "
    ", "Create a nested array called myArray." ], "challengeSeed": [ @@ -1861,7 +1859,7 @@ "Example", "
    var array = [1,2,3];
    array[0]; // equals 1
    var data = array[1]; // equals 2
    ", "Note
    There shouldn't be any spaces between the array name and the square brackets, like array [0]. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.", - "

    Instructions

    ", + "
    ", "Create a variable called myData and set it to equal the first value of myArray using bracket notation." ], "challengeSeed": [ @@ -1911,7 +1909,7 @@ "Example", "
    var ourArray = [3,2,1];
    ourArray[0] = 1; // equals [1,2,1]
    ", "Note
    There shouldn't be any spaces between the array name and the square brackets, like array [0]. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.", - "

    Instructions

    ", + "
    ", "Modify the data stored at index 0 of myArray to a value of 3." ], "challengeSeed": [ @@ -1960,7 +1958,7 @@ "Example", "
    var arr = [
    [1,2,3],
    [4,5,6],
    [7,8,9],
    [[10,11,12], 13, 14]
    ];
    arr[3]; // equals [[10,11,12], 13, 14]
    arr[3][0]; // equals [10,11,12]
    arr[3][0][1]; // equals 11
    ", "Note
    There shouldn't be any spaces between the array name and the square brackets, like array [0][0] and even this array [0] [0] is not allowed. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.", - "

    Instructions

    ", + "
    ", "Using bracket notation select an element from myArray such that myData is equal to 8." ], "releasedOn": "January 1, 2016", @@ -2004,7 +2002,7 @@ "An easy way to append data to the end of an array is via the push() function.", ".push() takes one or more parameters and \"pushes\" them onto the end of the array.", "
    var arr = [1,2,3];
    arr.push(4);
    // arr is now [1,2,3,4]
    ", - "

    Instructions

    ", + "
    ", "Push [\"dog\", 3] onto the end of the myArray variable." ], "challengeSeed": [ @@ -2050,7 +2048,7 @@ ".pop() 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, .pop() 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.", "
    var threeArr = [1, 4, 6];
    var oneDown = threeArr.pop();
    console.log(oneDown); // Returns 6
    console.log(threeArr); // Returns [1, 4]
    ", - "

    Instructions

    ", + "
    ", "Use the .pop() function to remove the last item from myArray, assigning the \"popped off\" value to removedFromMyArray." ], "challengeSeed": [ @@ -2099,7 +2097,7 @@ "description": [ "pop() always removes the last element of an array. What if you want to remove the first?", "That's where .shift() comes in. It works just like .pop(), except it removes the first element instead of the last.", - "

    Instructions

    ", + "
    ", "Use the .shift() function to remove the first item from myArray, assigning the \"shifted off\" value to removedFromMyArray." ], "challengeSeed": [ @@ -2146,7 +2144,7 @@ "description": [ "Not only can you shift elements off of the beginning of an array, you can also unshift elements to the beginning of an array i.e. add elements in front of the array.", ".unshift() works exactly like .push(), but instead of adding the element at the end of the array, unshift() adds the element at the beginning of the array.", - "

    Instructions

    ", + "
    ", "Add [\"Paul\",35] to the beginning of the myArray variable using unshift()." ], "challengeSeed": [ @@ -2263,7 +2261,7 @@ "You can call or invoke this function by using its name followed by parentheses, like this:", "functionName();", "Each time the function is called it will print out the message \"Hello World\" on the dev console. All of the code between the curly braces will be executed every time the function is called.", - "

    Instructions

    ", + "
    ", "
    1. Create a function called reusableFunction which prints \"Hi World\" to the dev console.
    2. Call the function.
    " ], "head": [ @@ -2345,7 +2343,7 @@ "Then we can call testFun:", "testFun(\"Hello\", \"World\");", "We have passed two arguments, \"Hello\" and \"World\". Inside the function, param1 will equal \"Hello\" and param2 will equal \"World\". Note that you could call testFun again with different arguments and the parameters would take on the value of the new arguments.", - "

    Instructions

    ", + "
    ", "
    1. Create a function called functionWithArgs that accepts two arguments and outputs their sum to the dev console.
    2. Call the function.
    " ], "releasedOn": "January 1, 2016", @@ -2424,7 +2422,7 @@ "description": [ "In JavaScript, scope refers to the visibility of variables. Variables which are defined outside of a function block have Global scope. This means, they can be seen everywhere in your JavaScript code.", "Variables which are used without the var keyword are automatically created in the global scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with var.", - "

    Instructions

    ", + "
    ", "Using var, declare a global variable myGlobal outside of any function. Initialize it with a value of 10.", "Inside function fun1, assign 5 to oopsGlobal without using the var keyword." ], @@ -2511,7 +2509,7 @@ "Here is a function myTest with a local variable called loc.", "
    function myTest() {
    var loc = \"foo\";
    console.log(loc);
    }
    myTest(); // logs \"foo\"
    console.log(loc); // loc is not defined
    ", "loc is not defined outside of the function.", - "

    Instructions

    ", + "
    ", "Declare a local variable myVar inside myLocalScope. Run the tests and then follow the instructions commented out in the editor.", "Hint
    Refreshing the page may help if you get stuck." ], @@ -2587,7 +2585,7 @@ "In this example:", "
    var someVar = \"Hat\";
    function myFun() {
    var someVar = \"Head\";
    return someVar;
    }
    ", "The function myFun will return \"Head\" because the local version of the variable is present.", - "

    Instructions

    ", + "
    ", "Add a local variable to myOutfit to override the value of outerWear with \"sweater\"." ], "releasedOn": "January 1, 2016", @@ -2638,7 +2636,7 @@ "Example", "
    function plusThree(num) {
    return num + 3;
    }
    var answer = plusThree(5); // 8
    ", "plusThree takes an argument for num and returns a value equal to num + 3.", - "

    Instructions

    ", + "
    ", "Create a function timesFive that accepts one argument, multiplies it by 5, and returns the new value." ], "releasedOn": "January 1, 2016", @@ -2688,7 +2686,7 @@ "Assume we have pre-defined a function sum which adds two numbers together, then: ", "ourSum = sum(5, 12);", "will call sum function, which returns a value of 17 and assigns it to ourSum variable.", - "

    Instructions

    ", + "
    ", "Call the processArg function with an argument of 7 and assign its return value to the variable processed." ], "releasedOn": "January 1, 2016", @@ -2819,7 +2817,7 @@ "description": [ "Another data type is the Boolean. Booleans may only be one of two values: true or false. They are basically little on-off switches, where true is \"on\" and false is \"off.\" These two states are mutually exclusive.", "Note
    Boolean values are never written with quotes. The strings \"true\" and \"false\" are not Boolean and have no special meaning in JavaScript.", - "

    Instructions

    ", + "
    ", "Modify the welcomeToBooleans function so that it returns true instead of false when the run button is clicked." ], "challengeSeed": [ @@ -2867,7 +2865,7 @@ "Example", "
    function test (myCondition) {
    if (myCondition) {
    return \"It was true\";
    }
    return \"It was false\";
    }
    test(true); // returns \"It was true\"
    test(false); // returns \"It was false\"
    ", "When test is called with a value of true, the if statement evaluates myCondition to see if it is true or not. Since it is true, the function returns \"It was true\". When we call test with a value of false, myCondition is not true and the statement in the curly braces is not executed and the function returns \"It was false\".", - "

    Instructions

    ", + "
    ", "Create an if statement inside the function to return \"Yes, that was true\" if the parameter wasThatTrue is true and return \"No, that was false\" otherwise." ], "challengeSeed": [ @@ -2934,7 +2932,7 @@ "If myVal is equal to 10, the equality operator returns true, so the code in the curly braces will execute, and the function will return \"Equal\". Otherwise, the function will return \"Not Equal\".", "In order for JavaScript to compare two different data types (for example, numbers and strings), it must convert one type to another. Once it does, however, it can compare terms as follows:", "
    1 == 1 // true
    1 == 2 // false
    1 == '1' // true
    \"3\" == 3 // true
    ", - "

    Instructions

    ", + "
    ", "Add the equality operator to the indicated line so that the function will return \"Equal\" when val is equivalent to 12" ], "releasedOn": "January 1, 2016", @@ -2985,7 +2983,7 @@ "Examples", "
    3 === 3 // true
    3 === '3' // false
    ", "In the second example, 3 is a Number type and '3' is a String type.", - "

    Instructions

    ", + "
    ", "Use the strict equality operator in the if statement so the function will return \"Equal\" when val is strictly equal to 7" ], "releasedOn": "January 1, 2016", @@ -3033,7 +3031,7 @@ "The inequality operator (!=) is the opposite of the equality operator. It means \"Not Equal\" and returns false where equality would return true and vice versa. Like the equality operator, the inequality operator will convert data types of values while comparing.", "Examples", "
    1 != 2 // true
    1 != \"1\" // false
    1 != '1' // false
    1 != true // false
    0 != false // false
    ", - "

    Instructions

    ", + "
    ", "Add the inequality operator != in the if statement so that the function will return \"Not Equal\" when val is not equivalent to 99" ], "releasedOn": "January 1, 2016", @@ -3082,7 +3080,7 @@ "The strict inequality operator (!==) is the logical opposite of the strict equality operator. It means \"Strictly Not Equal\" and returns false where strict equality would return true and vice versa. Strict inequality will not convert data types.", "Examples", "
    3 !== 3 // false
    3 !== '3' // true
    4 !== 3 // true
    ", - "

    Instructions

    ", + "
    ", "Add the strict inequality operator to the if statement so the function will return \"Not Equal\" when val is not strictly equal to 17" ], "releasedOn": "January 1, 2016", @@ -3139,7 +3137,7 @@ "Like the equality operator, greater than operator will convert data types of values while comparing.", "Examples", "
    5 > 3 // true
    7 > '3' // true
    2 > 3 // false
    '1' > 9 // false
    ", - "

    Instructions

    ", + "
    ", "Add the greater than operator to the indicated lines so that the return statements make sense." ], "releasedOn": "January 1, 2016", @@ -3196,7 +3194,7 @@ "Like the equality operator, greater than or equal to operator will convert data types while comparing.", "Examples", "
    6 >= 6 // true
    7 >= '3' // true
    2 >= 3 // false
    '7' >= 9 // false
    ", - "

    Instructions

    ", + "
    ", "Add the greater than or equal to operator to the indicated lines so that the return statements make sense." ], "releasedOn": "January 1, 2016", @@ -3252,7 +3250,7 @@ "The less than operator (<) compares the values of two numbers. If the number to the left is less than the number to the right, it returns true. Otherwise, it returns false. Like the equality operator, less than operator converts data types while comparing.", "Examples", "
    2 < 5 // true
    '3' < 7 // true
    5 < 5 // false
    3 < 2 // false
    '8' < 4 // false
    ", - "

    Instructions

    ", + "
    ", "Add the less than operator to the indicated lines so that the return statements make sense." ], "releasedOn": "January 1, 2016", @@ -3306,7 +3304,7 @@ "The less than or equal to operator (<=) compares the values of two numbers. If the number to the left is less than or equal the number to the right, it returns true. If the number on the left is greater than the number on the right, it returns false. Like the equality operator, less than or equal to converts data types.", "Examples", "
    4 <= 5 // true
    '7' <= 7 // true
    5 <= 5 // true
    3 <= 2 // false
    '8' <= 4 // false
    ", - "

    Instructions

    ", + "
    ", "Add the less than or equal to operator to the indicated lines so that the return statements make sense." ], "releasedOn": "January 1, 2016", @@ -3364,7 +3362,7 @@ "
    if (num > 5) {
    if (num < 10) {
    return \"Yes\";
    }
    }
    return \"No\";
    ", "will only return \"Yes\" if num is greater than 5 and less than 10. The same logic can be written as:", "
    if (num > 5 && num < 10) {
    return \"Yes\";
    }
    return \"No\";
    ", - "

    Instructions

    ", + "
    ", "Combine the two if statements into one statement which will return \"Yes\" if val is less than or equal to 50 and greater than or equal to 25. Otherwise, will return \"No\"." ], "releasedOn": "January 1, 2016", @@ -3426,7 +3424,7 @@ "
    if (num > 10) {
    return \"No\";
    }
    if (num < 5) {
    return \"No\";
    }
    return \"Yes\";
    ", "will return \"Yes\" only if num is between 5 and 10 (5 and 10 included). The same logic can be written as:", "
    if (num > 10 || num < 5) {
    return \"No\";
    }
    return \"Yes\";
    ", - "

    Instructions

    ", + "
    ", "Combine the two if statements into one statement which returns \"Outside\" if val is not between 10 and 20, inclusive. Otherwise, return \"Inside\"." ], "releasedOn": "January 1, 2016", @@ -3487,7 +3485,7 @@ "description": [ "When a condition for an if statement is true, the block of code following it is executed. What about when that condition is false? Normally nothing would happen. With an else statement, an alternate block of code can be executed.", "
    if (num > 10) {
    return \"Bigger than 10\";
    } else {
    return \"10 or Less\";
    }
    ", - "

    Instructions

    ", + "
    ", "Combine the if statements into a single if/else statement." ], "releasedOn": "January 1, 2016", @@ -3544,7 +3542,7 @@ "description": [ "If you have multiple conditions that need to be addressed, you can chain if statements together with else if statements.", "
    if (num > 15) {
    return \"Bigger than 15\";
    } else if (num < 5) {
    return \"Smaller than 5\";
    } else {
    return \"Between 5 and 15\";
    }
    ", - "

    Instructions

    ", + "
    ", "Convert the logic to use else if statements." ], "releasedOn": "January 1, 2016", @@ -3604,7 +3602,7 @@ "
    function bar(x) {
    if (x < 2) {
    return \"Less than two\";
    } else if (x < 1) {
    return \"Less than one\";
    } else {
    return \"Greater than or equal to two\";
    }
    }
    ", "While these two functions look nearly identical if we pass a number to both we get different outputs.", "
    foo(0) // \"Less than one\"
    bar(0) // \"Less than two\"
    ", - "

    Instructions

    ", + "
    ", "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": [ "if/else statements can be chained together for complex logic. Here is pseudocode of multiple chained if / else if statements:", "
    if (condition1) {
    statement1
    } else if (condition2) {
    statement2
    } else if (condition3) {
    statement3
    . . .
    } else {
    statementN
    }
    ", - "

    Instructions

    ", + "
    ", "Write chained if/else if statements to fulfill the following conditions:", "num < 5 - return \"Tiny\"
    num < 10 - return \"Small\"
    num < 15 - return \"Medium\"
    num < 20 - return \"Large\"
    num >= 20 - return \"Huge\"" ], @@ -3766,7 +3764,7 @@ "Here is a pseudocode example:", "
    switch (num) {
    case value1:
    statement1;
    break;
    case value2:
    statement2;
    break;
    ...
    case valueN:
    statementN;
    break;
    }
    ", "case values are tested with strict equality (===). The break tells JavaScript to stop executing statements. If the break is omitted, the next statement will be executed.", - "

    Instructions

    ", + "
    ", "Write a switch statement which tests val and sets answer for the following conditions:
    1 - \"alpha\"
    2 - \"beta\"
    3 - \"gamma\"
    4 - \"delta\"" ], "releasedOn": "January 1, 2016", @@ -3822,7 +3820,7 @@ "In a switch statement you may not be able to specify all possible values as case statements. Instead, you can add the default statement which will be executed if no matching case statements are found. Think of it like the final else statement in an if/else chain.", "A default statement should be the last case.", "
    switch (num) {
    case value1:
    statement1;
    break;
    case value2:
    statement2;
    break;
    ...
    default:
    defaultStatement;
    }
    ", - "

    Instructions

    ", + "
    ", "Write a switch statement to set answer for the following conditions:
    \"a\" - \"apple\"
    \"b\" - \"bird\"
    \"c\" - \"cat\"
    default - \"stuff\"" ], "releasedOn": "January 1, 2016", @@ -3876,7 +3874,7 @@ "If the break statement is omitted from a switch statement's case, the following case statement(s) are executed until a break is encountered. If you have multiple inputs with the same output, you can represent them in a switch statement like this:", "
    switch(val) {
    case 1:
    case 2:
    case 3:
    result = \"1, 2, or 3\";
    break;
    case 4:
    result = \"4 alone\";
    }
    ", "Cases for 1, 2, and 3 will all produce the same result.", - "

    Instructions

    ", + "
    ", "Write a switch statement to set answer for the following ranges:
    1-3 - \"Low\"
    4-6 - \"Mid\"
    7-9 - \"High\"", "Note
    You will need to have a case statement for each number in the range." ], @@ -3936,7 +3934,7 @@ "
    if (val === 1) {
    answer = \"a\";
    } else if (val === 2) {
    answer = \"b\";
    } else {
    answer = \"c\";
    }
    ", "can be replaced with:", "
    switch (val) {
    case 1:
    answer = \"a\";
    break;
    case 2:
    answer = \"b\";
    break;
    default:
    answer = \"c\";
    }
    ", - "

    Instructions

    ", + "
    ", "Change the chained if/else if statements into a switch statement." ], "releasedOn": "January 1, 2016", @@ -4005,7 +4003,7 @@ "
    function isEqual(a,b) {
    if (a === b) {
    return true;
    } else {
    return false;
    }
    }
    ", "But there's a better way to do this. Since === returns true or false, we can return the result of the comparison:", "
    function isEqual(a,b) {
    return a === b;
    }
    ", - "

    Instructions

    ", + "
    ", "Fix the function isLess to remove the if/else statements." ], "releasedOn": "January 1, 2016", @@ -4058,7 +4056,7 @@ "Example", "
    function myFun() {
    console.log(\"Hello\");
    return \"World\";
    console.log(\"byebye\")
    }
    myFun();
    ", "The above outputs \"Hello\" to the console, returns \"World\", but \"byebye\" is never output, because the function exits at the return statement.", - "

    Instructions

    ", + "
    ", "Modify the function abTest so that if a or b are less than 0 the function will immediately exit with a value of undefined.", "Hint
    Remember that undefined is a keyword, not a string." ], @@ -4172,7 +4170,7 @@ "Here's a sample object:", "
    var cat = {
    \"name\": \"Whiskers\",
    \"legs\": 4,
    \"tails\": 1,
    \"enemies\": [\"Water\", \"Dogs\"]
    };
    ", "Objects are useful for storing data in a structured way, and can represent real world objects, like a cat.", - "

    Instructions

    ", + "
    ", "Make an object that represents a dog called myDog which contains the properties \"name\" (a string), \"legs\", \"tails\" and \"friends\".", "You can set these object properties to whatever values you want, as long \"name\" is a string, \"legs\" and \"tails\" are numbers, and \"friends\" 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 (.) to read an object property:", "
    var myObj = {
    prop1: \"val1\",
    prop2: \"val2\"
    };
    var prop1val = myObj.prop1; // val1
    var prop2val = myObj.prop2; // val2
    ", - "

    Instructions

    ", + "
    ", "Read in the property values of testObj using dot notation. Set the variable hatValue equal to the object property hat and set the variable shirtValue equal to the object property shirt." ], "releasedOn": "January 1, 2016", @@ -4291,7 +4289,7 @@ "Here is a sample of using bracket notation to read an object property:", "
    var myObj = {
    \"Space Name\": \"Kirk\",
    \"More Space\": \"Spock\"
    };
    myObj[\"Space Name\"]; // Kirk
    myObj['More Space']; // Spock
    ", "Note that property names with spaces in them must be in quotes (single or double).", - "

    Instructions

    ", + "
    ", "Read the values of the properties \"an entree\" and \"the drink\" of testObj using bracket notation and assign them to entreeValue and drinkValue respectively." ], "releasedOn": "January 1, 2016", @@ -4347,7 +4345,7 @@ "Here is one more:", "
    var myDog = \"Hunter\";
    var dogs = {
    Fido: \"Mutt\",\n Hunter: \"Doberman\",\n Snoopie: \"Beagle\"
    }
    var breed = dogs[myDog];
    console.log(breed);// \"Doberman\"
    ", "Note that we do not use quotes around the variable name when using it to access the property because we are using the value of the variable, not the name", - "

    Instructions

    ", + "
    ", "Use the playerNumber variable to lookup player 16 in testObj using bracket notation. Then assign that name to the player variable." ], "releasedOn": "January 1, 2016", @@ -4406,7 +4404,7 @@ "ourDog.name = \"Happy Camper\"; or", "ourDog[\"name\"] = \"Happy Camper\";", "Now when we evaluate ourDog.name, instead of getting \"Camper\", we'll get his new name, \"Happy Camper\".", - "

    Instructions

    ", + "
    ", "Update the myDog 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", "ourDog[\"bark\"] = \"bow-wow\";", "Now when we evaluate ourDog.bark, we'll get his bark, \"bow-wow\".", - "

    Instructions

    ", + "
    ", "Add a \"bark\" property to myDog 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:", "delete ourDog.bark;", - "

    Instructions

    ", + "
    ", "Delete the \"tails\" property from myDog. 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 switch statement or an if/else 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:", "
    var alpha = {
    1:\"Z\",
    2:\"Y\",
    3:\"X\",
    4:\"W\",
    ...
    24:\"C\",
    25:\"B\",
    26:\"A\"
    };
    alpha[2]; // \"Y\"
    alpha[24]; // \"C\"

    var value = 2;
    alpha[value]; // \"Y\"
    ", - "

    Instructions

    ", + "
    ", "Convert the switch statement into a lookup table called lookup. Use it to lookup val and assign the associated string to the result 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 .hasOwnProperty(propname) method of objects to determine if that object has the given property name. .hasOwnProperty() returns true or false if the property is found or not.", "Example", "
    var myObj = {
    top: \"hat\",
    bottom: \"pants\"
    };
    myObj.hasOwnProperty(\"top\"); // true
    myObj.hasOwnProperty(\"middle\"); // false
    ", - "

    Instructions

    ", + "
    ", "Modify the function checkObj to test myObj for checkProp. If the property is found, return that property's value. If not, return \"Not Found\"." ], "releasedOn": "January 1, 2016", @@ -4723,7 +4721,7 @@ "JavaScript Object Notation or JSON is a related data interchange format used to store data.", "
    {
    \"artist\": \"Daft Punk\",
    \"title\": \"Homework\",
    \"release_year\": 1997,
    \"formats\": [
    \"CD\",
    \"Cassette\",
    \"LP\"
    ],
    \"gold\": true
    }
    ", "Note
    You will need to place a comma after every object in the array, unless it is the last object in the array.", - "

    Instructions

    ", + "
    ", "Add a new album to the myMusic array. Add artist and title strings, release_year number, and a formats 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:", "
    var ourStorage = {
    \"desk\": {
    \"drawer\": \"stapler\"
    },
    \"cabinet\": {
    \"top drawer\": {
    \"folder1\": \"a file\",
    \"folder2\": \"secrets\"
    },
    \"bottom drawer\": \"soda\"
    }
    };
    ourStorage.cabinet[\"top drawer\"].folder2; // \"secrets\"
    ourStorage.desk.drawer; // \"stapler\"
    ", - "

    Instructions

    ", + "
    ", "Access the myStorage object and assign the contents of the glove box property to the gloveBoxContents 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:", "
    var ourPets = [
    {
    animalType: \"cat\",
    names: [
    \"Meowzer\",
    \"Fluffy\",
    \"Kit-Cat\"
    ]
    },
    {
    animalType: \"dog\",
    names: [
    \"Spot\",
    \"Bowser\",
    \"Frankie\"
    ]
    }
    ];
    ourPets[0].names[1]; // \"Fluffy\"
    ourPets[1].names[0]; // \"Spot\"
    ", - "

    Instructions

    ", + "
    ", "Retrieve the second tree from the variable myPlants using object dot and array bracket notation." ], "releasedOn": "January 1, 2016", @@ -5003,7 +5001,7 @@ "Another type of JavaScript loop is called a \"while loop\", because it runs \"while\" a specified condition is true and stops once that condition is no longer true.", "
    var ourArray = [];
    var i = 0;
    while(i < 5) {
    ourArray.push(i);
    i++;
    }
    ", "Let's try getting a while loop to work by pushing values to an array.", - "

    Instructions

    ", + "
    ", "Push the numbers 0 through 4 to myArray using a while loop." ], "challengeSeed": [ @@ -5059,7 +5057,7 @@ "In the following example we initialize with i = 0 and iterate while our condition i < 5 is true. We'll increment i by 1 in each loop iteration with i++ as our final-expression.", "
    var ourArray = [];
    for (var i = 0; i < 5; i++) {
    ourArray.push(i);
    }
    ", "ourArray will now contain [0,1,2,3,4].", - "

    Instructions

    ", + "
    ", "Use a for loop to work to push the values 1 through 5 onto myArray." ], "challengeSeed": [ @@ -5121,7 +5119,7 @@ "
    var ourArray = [];
    for (var i = 0; i < 10; i += 2) {
    ourArray.push(i);
    }
    ", "ourArray will now contain [0,2,4,6,8].", "Let's change our initialization so we can count by odd numbers.", - "

    Instructions

    ", + "
    ", "Push the odd numbers from 1 through 9 to myArray using a for loop." ], "challengeSeed": [ @@ -5179,7 +5177,7 @@ "
    var ourArray = [];
    for (var i=10; i > 0; i-=2) {
    ourArray.push(i);
    }
    ", "ourArray will now contain [10,8,6,4,2].", "Let's change our initialization and final-expression so we can count backward by twos by odd numbers.", - "

    Instructions

    ", + "
    ", "Push the odd numbers from 9 through 1 to myArray using a for 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 for loop. This code will output each element of the array arr to the console:", "
    var arr = [10,9,8,7,6];
    for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    }
    ", "Remember that Arrays have zero-based numbering, which means the last index of the array is length - 1. Our condition for this loop is i < arr.length, which stops when i is at length - 1.", - "

    Instructions

    ", + "
    ", "Declare and initialize a variable total to 0. Use a for loop to add the value of each element of the myArr array to total." ], "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:", "
    var arr = [
    [1,2], [3,4], [5,6]
    ];
    for (var i=0; i < arr.length; i++) {
    for (var j=0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
    }
    }
    ", "This outputs each sub-element in arr one at a time. Note that for the inner loop, we are checking the .length of arr[i], since arr[i] is itself an array.", - "

    Instructions

    ", + "
    ", "Modify function multiplyAll so that it multiplies the product variable by each number in the sub-arrays of arr" ], "releasedOn": "January 1, 2016", @@ -5419,7 +5417,7 @@ "Random numbers are useful for creating random behavior.", "JavaScript has a Math.random() function that generates a random decimal number between 0 (inclusive) and not quite up to 1 (exclusive). Thus Math.random() can return a 0 but never quite return a 1", "Note
    Like Storing Values with the Equal Operator, all function calls will be resolved before the return executes, so we can return the value of the Math.random() function.", - "

    Instructions

    ", + "
    ", "Change randomFraction to return a random number instead of returning 0." ], "challengeSeed": [ @@ -5468,7 +5466,7 @@ "Putting everything together, this is what our code looks like:", "Math.floor(Math.random() * 20);", "We are calling Math.random(), multiplying the result by 20, then passing the value to Math.floor() function to round the value down to the nearest whole number.", - "

    Instructions

    ", + "
    ", "Use this technique to generate and return a random whole number between 0 and 9." ], "challengeSeed": [ @@ -5522,7 +5520,7 @@ "To do this, we'll define a minimum number min and a maximum number max.", "Here's the formula we'll use. Take a moment to read it and try to understand what this code is doing:", "Math.floor(Math.random() * (max - min + 1)) + min", - "

    Instructions

    ", + "
    ", "Create a function called randomRange that takes a range myMin and myMax and returns a random number that's greater than or equal to myMin, and is less than or equal to myMax, inclusive." ], "challengeSeed": [ diff --git a/challenges/02-javascript-algorithms-and-data-structures/debugging.json b/challenges/02-javascript-algorithms-and-data-structures/debugging.json index 46c4e321f4..c36b67b290 100644 --- a/challenges/02-javascript-algorithms-and-data-structures/debugging.json +++ b/challenges/02-javascript-algorithms-and-data-structures/debugging.json @@ -55,7 +55,7 @@ "The console.log() 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:", "console.log('Hello world!');", - "

    Instructions

    ", + "
    ", "Use the console.log() method to print the value of the variable a where noted in the code." ], "challengeSeed": [ @@ -104,7 +104,7 @@ "Here are some examples using typeof:", "
    console.log(typeof \"\"); // outputs \"string\"
    console.log(typeof 0); // outputs \"number\"
    console.log(typeof []); // outputs \"object\"
    console.log(typeof {}); // outputs \"object\"
    ", "JavaScript recognizes six primitive (immutable) data types: Boolean, Null, Undefined, Number, String, and Symbol (new with ES6) and one type for mutable items: Object. Note that in JavaScript, arrays are technically a type of object.", - "

    Instructions

    ", + "
    ", "Add two console.log() statements to check the typeof each of the two variables seven and three in the code." ], "challengeSeed": [ @@ -149,7 +149,7 @@ "description": [ "The console.log() and typeof 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.", - "

    Instructions

    ", + "
    ", "Fix the two spelling errors in the code so the netWorkingCapital 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.", - "

    Instructions

    ", + "
    ", "Fix the two pair errors in the code." ], "challengeSeed": [ @@ -242,7 +242,7 @@ "
    // These are correct:
    const grouchoContraction = \"I've had a perfectly wonderful evening, but this wasn't it.\";
    const quoteInString = \"Groucho Marx once said 'Quote me as saying I was mis-quoted.'\";
    // This is incorrect:
    const uhOhGroucho = 'I've had a perfectly wonderful evening, but this wasn't it.';
    ", "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:", "
    // Correct use of same quotes:
    const allSameQuotes = 'I\\'ve had a perfectly wonderful evening, but this wasn\\'t it.';
    ", - "

    Instructions

    ", + "
    ", "Fix the string so it either uses different quotes for the href 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 (=) in JavaScript assigns a value to a variable name. And the == and === operators check for equality (the triple === tests for strict equality, meaning both value and type are the same).", "The code below assigns x to be 2, which evaluates as true. Almost every value on its own in JavaScript evaluates to true, except what are known as the \"falsy\" values: false, 0, \"\" (an empty string), NaN, undefined, and null.", "
    let x = 1;
    let y = 2;
    if (x = y) {
      // this code block will run for any value of y (unless y were originally set as a falsy)
    } else {
      // this code block is what should run (but won't) in this example
    }
    ", - "

    Instructions

    ", + "
    ", "Fix the condition so the program runs the right branch, and the appropriate value is assigned to result." ], "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:", "
    function myFunction() {
      return \"You rock!\";
    }
    let varOne = myFunction; // set to equal a function
    let varTwo = myFunction(); // set to equal the string \"You rock!\"
    ", - "

    Instructions

    ", + "
    ", "Fix the code so the variable result is set to the value returned from calling the function getNine." ], "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.", - "

    Instructions

    ", + "
    ", "The following function positivePowers raises a base to a positive exponent. Unfortunately, it's not called properly - fix the code so the value of power is the expected 8." ], "challengeSeed": [ @@ -436,7 +436,7 @@ "Off by one errors (sometimes called OBOE) crop up when you're trying to target a specific index of a string or array (to slice or access a segment), or when looping over the indices of them. JavaScript indexing starts at zero, not one, which means the last index is always one less than the length of the item. If you try to access an index equal to the length, the program may throw an \"index out of range\" reference error or print undefined.", "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:", "
    let alphabet = \"abcdefghijklmnopqrstuvwxyz\";
    let len = alphabet.length;
    for (let i = 0; i <= len; i++) {
      // loops one too many times at the end
      console.log(alphabet[i]);
    }
    for (let j = 1; j < len; j++) {
      // loops one too few times and misses the first character at index 0
      console.log(alphabet[j]);
    }
    for (let k = 0; k < len; k++) {
      // Goldilocks approves - this is just right
      console.log(alphabet[k]);
    }
    ", - "

    Instructions

    ", + "
    ", "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 console.log() can uncover buggy behavior related to resetting, or failing to reset a variable.", - "

    Instructions

    ", + "
    ", "The following function is supposed to create a two-dimensional array with m rows and n columns of zeroes. Unfortunately, it's not producing the expected output because the row 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 [[0, 0], [0, 0], [0, 0]]." ], "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 while loop inside loopy(). Do NOT call this function!", "
    function loopy() {
      while(true) {
        console.log(\"Hello, world!\");
      }
    }
    ", "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.", - "

    Instructions

    ", + "
    ", "The myFunc() function contains an infinite loop because the terminal condition i != 4 will never evaluate to false (and break the looping) - i will increment by 2 each pass, and jump right over 4 since i is odd to start. Fix the comparison operator in the terminal condition so the loop only runs for i less than or equal to 4." ], "challengeSeed": [ diff --git a/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json b/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json index 1532d4c25b..3f4c6317ec 100644 --- a/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json +++ b/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json @@ -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", - "

    Instructions

    ", + "
    ", "The members of Free Code Camp happen to love tea.", "In the code editor, the prepareTea and getTea functions are already defined for you. Call the getTea function to get 40 cups of tea for the team, and store them in the tea4TeamFCC 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 first class functions. In JavaScript, all functions are first class functions.", "The functions that take a function as an argument, or return a function as a return value are called higher order 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 lambda.", - "

    Instructions

    ", + "
    ", "Prepare 27 cups of green tea and 13 cups of black tea and store them in tea4GreenTeamFCC and tea4BlackTeamFCC variables, respectively. Note that the getTea 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 splice method changed the original array, and resulted in a bug.", "Recall that in functional programming, changing or altering things is called mutation, and the outcome is called a side effect. A function, ideally, should be a pure function, 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.", - "

    Instructions

    ", + "
    ", "Fill in the code for the function incrementer so it returns the value of the global variable fixedValue 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.", - "

    Instructions

    ", + "
    ", "Let's update the incrementer function to clearly declare its dependencies.", "Write the incrementer 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.", - "

    Instructions

    ", + "
    ", "Refactor (rewrite) the code so the global array bookList is not changed inside either function. The add function should add the given bookName to the end of an array. The remove function should remove the given bookName from an array. Both functions should return an array, and any new parameters should be added before the bookName 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 First Class Objects 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 Array.prototype.map(), or more simply map.", "Remember that the map 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.", - "

    Instructions

    ", + "
    ", "The watchList array holds objects with information on several movies. Use map to pull the title and rating from watchList and save the new array in the rating variable. The code in the editor currently uses a for loop to do this, replace the loop functionality with your map expression." ], "challengeSeed": [ @@ -636,7 +636,7 @@ "In other words, map 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 map to try to implement a version of it that behaves exactly like the Array.prototype.map() with a for loop or Array.prototype.forEach().", "Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.", - "

    Instructions

    ", + "
    ", "Write your own Array.prototype.myMap(), which should behave exactly like Array.prototype.map(). You may use a for loop or the forEach method." ], "challengeSeed": [ @@ -689,7 +689,7 @@ "description": [ "Another useful array function is Array.prototype.filter(), or simply filter(). The filter method returns a new array which is at most as long as the original array, but usually has fewer items.", "Filter doesn't alter the original array, just like map. 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.", - "

    Instructions

    ", + "
    ", "The variable watchList holds an array of objects with information on several movies. Use a combination of filter and map to return a new array of objects with only title and rating keys, but where imdbRating 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 filter method if we try to implement a version of it that behaves exactly like Array.prototype.filter(). It can use either a for loop or Array.prototype.forEach().", "Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.", - "

    Instructions

    ", + "
    ", "Write your own Array.prototype.myFilter(), which should behave exactly like Array.prototype.filter(). You may use a for loop or the Array.prototype.forEach() method." ], "challengeSeed": [ @@ -904,7 +904,7 @@ "The slice 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 slice method does not mutate the original array, but returns a new one.", "Here's an example:", "
    var arr = [\"Cat\", \"Dog\", \"Tiger\", \"Zebra\"];
    var newArray = arr.slice(1, 3);
    // Sets newArray to [\"Dog\", \"Tiger\"]
    ", - "

    Instructions

    ", + "
    ", "Use the slice method in the sliceArray function to return part of the anim array given the provided beginSlice and endSlice 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 splice 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 splice method mutates the original array it is called on. Here's an example:", "
    var cities = [\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"];
    cities.splice(3, 1); // Returns \"London\" and deletes it from the cities array
    // cities is now [\"Chicago\", \"Delhi\", \"Islamabad\", \"Berlin\"]
    ", "As we saw in the last challenge, the slice method does not mutate the original array, but returns a new one which can be saved into a variable. Recall that the slice 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 slice method instead of splice helps to avoid any array-mutating side effects.", - "

    Instructions

    ", + "
    ", "Rewrite the function nonMutatingSplice by using slice instead of splice. It should limit the provided cities 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": [ "Concatenation means to join items end to end. JavaScript offers the concat 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 concat, 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:", "
    [1, 2, 3].concat([4, 5, 6]);
    // Returns a new array [1, 2, 3, 4, 5, 6]
    ", - "

    Instructions

    ", + "
    ", "Use the concat method in the nonMutatingConcat function to concatenate attach to the end of original. The function should return the concatenated array." ], "challengeSeed": [ @@ -1054,7 +1054,7 @@ "The last challenge introduced the concat method as a way to combine arrays into a new one without mutating the original arrays. Compare concat to the push method. Push adds an item to the end of the same array it is called on, which mutates that array. Here's an example:", "
    var arr = [1, 2, 3];
    arr.push([4, 5, 6]);
    // arr is changed to [1, 2, 3, 4, 5, 6]
    // Not the functional programming way
    ", "Concat offers a way to add new items to the end of an array without any mutating side effects.", - "

    Instructions

    ", + "
    ", "Change the nonMutatingPush function so it uses concat to add newItem to the end of original instead of push. The function should return an array." ], "challengeSeed": [ @@ -1106,7 +1106,7 @@ "This is not the case with the filter and map 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, filter or map could not process that.", "The reduce method allows for more general forms of array processing, and it's possible to show that both filter and map can be derived as a special application of reduce.", "However, before we get there, let's practice using reduce first.", - "

    Instructions

    ", + "
    ", "The variable watchList holds an array of objects with information on several movies. Use reduce to find the average IMDB rating of the movies directed by Christopher Nolan. Recall from prior challenges how to filter data and map over it to pull what you need. You may need to create other variables, but save the final average into the variable averageRating. 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:", "
    function ascendingOrder(arr) {
      return arr.sort(function(a, b) {
        return a - b;
      });
    }
    ascendingOrder([1, 5, 2, 3, 4]);
    // Returns [1, 2, 3, 4, 5]

    function reverseAlpha(arr) {
      return arr.sort(function(a, b) {
        return a < b;
      });
    }
    reverseAlpha(['l', 'h', 'z', 'b', 's']);
    // Returns ['z', 's', 'l', 'h', 'b']
    ", "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.", - "

    Instructions

    ", + "
    ", "Use the sort method in the alphabeticalOrder function to sort the elements of arr in alphabetical order." ], "challengeSeed": [ @@ -1319,7 +1319,7 @@ "title": "Return a Sorted Array Without Changing the Original Array", "description": [ "A side effect of the sort 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 concat returns a new array), then run the sort method.", - "

    Instructions

    ", + "
    ", "Use the sort method in the nonMutatingSort function to sort the elements of an array in ascending order. The function should return a new array, and not mutate the globalArray variable." ], "challengeSeed": [ @@ -1369,7 +1369,7 @@ "Here are two examples that split one string by spaces, then another by digits using a regular expression:", "
    var str = \"Hello World\";
    var bySpace = str.split(\" \");
    // Sets bySpace to [\"Hello\", \"World\"]

    var otherString = \"How9are7you2today\";
    var byDigits = str.split(/\\d/);
    // Sets byDigits to [\"How\", \"are\", \"you\", \"today\"]
    ", "Since strings are immutable, the split method makes it easier to work with them.", - "

    Instructions

    ", + "
    ", "Use the split method inside the splitify function to split str 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 join 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:", "
    var arr = [\"Hello\", \"World\"];
    var str = arr.join(\" \");
    // Sets str to \"Hello World\"
    ", - "

    Instructions

    ", + "
    ", "Use the join method (among others) inside the sentensify function to make a sentence from the words in the string str. 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 replace 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 reduce, 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 map and filter are special cases of reduce.", "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.", - "

    Instructions

    ", + "
    ", "Fill in the urlSlug function so it converts a string title and returns the hyphenated version for the URL. You can use any of the methods covered in this section, and don't use replace. 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 (-)", @@ -1532,7 +1532,7 @@ "The every method works with arrays to check if every element passes a particular test. It returns a Boolean value - true if all values meet the criteria, false if not.", "For example, the following code would check if every element in the numbers array is less than 10:", "
    var numbers = [1, 5, 8, 0, 10, 11];
    numbers.every(function(currentValue) {
      return currentValue < 10;
    });
    // Returns false
    ", - "

    Instructions

    ", + "
    ", "Use the every method inside the checkPositive function to check if every element in arr is positive. The function should return a Boolean value." ], "challengeSeed": [ @@ -1580,7 +1580,7 @@ "The some method works with arrays to check if any element passes a particular test. It returns a Boolean value - true if any of the values meet the criteria, false if not.", "For example, the following code would check if any element in the numbers array is less than 10:", "
    var numbers = [10, 50, 8, 220, 110, 11];
    numbers.some(function(currentValue) {
      return currentValue < 10;
    });
    // Returns true
    ", - "

    Instructions

    ", + "
    ", "Use the some method inside the checkPositive function to check if any element in arr is positive. The function should return a Boolean value." ], "challengeSeed": [ @@ -1634,7 +1634,7 @@ "Similarly, partial application 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:", "
    //Impartial function
    function impartial(x, y, z) {
      return x + y + z;
    }
    var partialFn = impartial.bind(this, 1, 2);
    partialFn(10); // Returns 13
    ", - "

    Instructions

    ", + "
    ", "Fill in the body of the add function so it uses currying to add parameters x, y, and z." ], "challengeSeed": [ diff --git a/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json b/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json index 5ef6159d29..a1ff7a9cf5 100644 --- a/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json +++ b/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json @@ -44,7 +44,7 @@ "Objects in JavaScript are used to model real-world objects, giving them properties and behavior just like their real-world counterparts. Here's an example using these concepts to create a duck object:", "
    let duck = {
      name: \"Aflac\",
      numLegs: 2
    };
    ", "This duck object has two property/value pairs: a name of \"Aflac\" and a numLegs of 2.", - "

    Instructions

    ", + "
    ", "Create a dog object with name and numLegs properties, and set them to a string and a number, respectively." ], "challengeSeed": [ @@ -87,7 +87,7 @@ "The last challenge created an object with various properties, now you'll see how to access the values of those properties. Here's an example:", "
    let duck = {
      name: \"Aflac\",
      numLegs: 2
    };
    console.log(duck.name);
    // This prints \"Aflac\" to the console
    ", "Dot notation is used on the object name, duck, followed by the name of the property, name, to access the value of \"Aflac\".", - "

    Instructions

    ", + "
    ", "Print both properties of the dog object below to your console." ], "challengeSeed": [ @@ -135,7 +135,7 @@ "
    let duck = {
      name: \"Aflac\",
      numLegs: 2,
      sayName: function() {return \"The name of this duck is \" + duck.name + \".\";}
    };
    duck.sayName();
    // Returns \"The name of this duck is Aflac.\"
    ", "The example adds the sayName method, which is a function that returns a sentence giving the name of the duck.", "Notice that the method accessed the name property in the return statement using duck.name. The next challenge will cover another way to do this.", - "

    Instructions

    ", + "
    ", "Using the dog object, give it a method called sayLegs. The method should return the sentence \"This dog has 4 legs.\"" ], "challengeSeed": [ @@ -185,7 +185,7 @@ "
    let duck = {
      name: \"Aflac\",
      numLegs: 2,
      sayName: function() {return \"The name of this duck is \" + this.name + \".\";}
    };
    ", "This is a deep topic, and the above example is only one way to use it. In the current context, this refers to the object that the method is associated with: duck.", "If the object's name is changed to mallard, it is not necessary to find all the references to duck in the code. It makes the code reusable and easier to read.", - "

    Instructions

    ", + "
    ", "Modify the dog.sayLegs method to remove any references to dog. Use the duck example for guidance." ], "challengeSeed": [ @@ -239,7 +239,7 @@ "
  • Constructors use the keyword this to set properties of the object they will create. Inside the constructor, this refers to the new object it will create.
    • ", "
  • Constructors define properties and behaviors instead of returning a value as other functions might.
    • ", "", - "

    Instructions

    ", + "
    ", "Create a constructor, Dog, with properties name, color, and numLegs that are set to a string, a string, and a number, respectively." ], "challengeSeed": [ @@ -286,7 +286,7 @@ "
    blueBird.name; // => Albert
    blueBird.color; // => blue
    blueBird.numLegs; // => 2
    ", "Just like any other object, its properties can be accessed and modified:", "
    blueBird.name = 'Elvira';
    blueBird.name; // => Elvira
    ", - "

    Instructions

    ", + "
    ", "Use the Dog constructor from the last lesson to create a new instance of Dog, assigning it to a variable hound." ], "challengeSeed": [ @@ -341,7 +341,7 @@ "The cardinal has these properties:", "
    cardinal.name // => Bruce
    cardinal.color // => red
    cardinal.numLegs // => 2
    ", "The constructor is more flexible. It's now possible to define the properties for each Bird 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.", - "

    Instructions

    ", + "
    ", "Create another Dog constructor. This time, set it up to take the parameters name and color, and have the property numLegs fixed at 4. Then create a new Dog saved in a variable terrier. Pass it two strings as arguments for the name and color properties." ], "challengeSeed": [ @@ -388,7 +388,7 @@ "
    let Bird = function(name, color) {
      this.name = name;
      this.color = color;
      this.numLegs = 2;
    }

    let crow = new Bird(\"Alexis\", \"black\");

    crow instanceof Bird; // => true
    ", "If an object is created without using a constructor, instanceof will verify that it is not an instance of that constructor:", "
    let canary = {
      name: \"Mildred\",
      color: \"Yellow\",
      numLegs: 2
    };

    canary instanceof Bird; // => false
    ", - "

    Instructions

    ", + "
    ", "Create a new instance of the House constructor, calling it myHouse and passing a number of bedrooms. Then, use instanceof to verify that it is an instance of House." ], "challengeSeed": [ @@ -437,7 +437,7 @@ "In fact every instance of Bird will have its own copy of these properties.", "The following code adds all of the own properties of duck to the array ownProps:", "
    let ownProps = [];

    for (let property in duck) {
      if(duck.hasOwnProperty(property)) {
        ownProps.push(property);
      }
    }

    console.log(ownProps); // prints [ \"name\", \"numLegs\" ]
    ", - "

    Instructions

    ", + "
    ", "Add the own properties of canary to the array ownProps." ], "challengeSeed": [ @@ -491,7 +491,7 @@ "
    console.log(duck.numLegs); // prints 2
    console.log(canary.numLegs); // prints 2
    ", "Since all instances automatically have the properties on the prototype, think of a prototype as a \"recipe\" for creating objects.", "Note that the prototype for duck and canary is part of the Bird constructor as Bird.prototype. Nearly every object in JavaScript has a prototype property which is part of the constructor function that created it.", - "

    Instructions

    ", + "
    ", "Add a numLegs property to the prototype of Dog" ], "challengeSeed": [ @@ -541,7 +541,7 @@ "
    function Bird(name) {
      this.name = name; //own property
    }

    Bird.prototype.numLegs = 2; // prototype property

    let duck = new Bird(\"Donald\");
    ", "Here is how you add duck’s own properties to the array ownProps and prototype properties to the array prototypeProps:", "
    let ownProps = [];
    let prototypeProps = [];

    for (let property in duck) {
      if(duck.hasOwnProperty(property)) {
        ownProps.push(property);
      } else {
        prototypeProps.push(property);
      }
    }

    console.log(ownProps); // prints [\"name\"]
    console.log(prototypeProps); // prints [\"numLegs\"]
    ", - "

    Instructions

    ", + "
    ", "Add all of the own properties of beagle to the array ownProps. Add all of the prototype properties of Dog to the array prototypeProps." ], "challengeSeed": [ @@ -598,7 +598,7 @@ "The advantage of the constructor 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:", "
    function joinBirdFraternity(candidate) {
      if (candidate.constructor === Bird) {
        return true;
      } else {
        return false;
      }
    }
    ", "Note
    Since the constructor property can be overwritten (which will be covered in the next two challenges) it’s generally better to use the instanceof method to check the type of an object.", - "

    Instructions

    ", + "
    ", "Write a joinDogFraternity function that takes a candidate parameter and returns true if the candidate is a Dog and returns false otherwise." ], "challengeSeed": [ @@ -649,7 +649,7 @@ "
    Bird.prototype.eat = function() {
      console.log(\"nom nom nom\");
    }

    Bird.prototype.describe = function() {
      console.log(\"My name is \" + this.name);
    }
    ", "A more efficient way is to set the prototype to a new object that already contains the properties. This way, the properties are added all at once:", "
    Bird.prototype = {
      numLegs: 2,
      eat: function() {
        console.log(\"nom nom nom\");
      },
      describe = function() {
        console.log(\"My name is \" + this.name);
      }
    };
    ", - "

    Instructions

    ", + "
    ", "Add three properties numLegs, eat, and describe to the prototype of Dog by setting the prototype to a new object. The properties can be set to any values." ], "challengeSeed": [ @@ -699,7 +699,7 @@ "
    console.log(duck.constructor)
    // prints ‘undefined’ - Oops!
    ", "To fix this, whenever a prototype is manually set to a new object, remember to define the constructor property:", "
    Bird.prototype = {
      constructor: Bird, // define the constructor property
      numLegs: 2,
      eat: function() {
        console.log(\"nom nom nom\");
      },
      describe: function() {
        console.log(\"My name is \" + this.name);
      }
    };
    ", - "

    Instructions

    ", + "
    ", "Define the constructor property on the Dog prototype." ], "challengeSeed": [ @@ -753,7 +753,7 @@ "
    function Bird(name) {
      this.name = name;
    }

    let duck = new Bird(\"Donald\");
    ", "duck inherits its prototype from the Bird constructor function. You can show this relationship with the isPrototypeOf method:", "
    Bird.prototype.isPrototypeOf(duck);
    // returns true
    ", - "

    Instructions

    ", + "
    ", "Use isPrototypeOf to check the prototype of beagle." ], "challengeSeed": [ @@ -806,7 +806,7 @@ "The hasOwnProperty method is defined in Object.prototype, which can be accessed by Bird.prototype, which can then be accessed by duck. This is an example of the prototype chain.", "In this prototype chain, Bird is the supertype for duck, while duck is the subtype. Object is a supertype for both Bird and duck.", "Object is a supertype for all objects in JavaScript. Therefore, any object can use the hasOwnProperty method.", - "

    Instructions

    ", + "
    ", "Modify the code to show the correct prototype chain." ], "challengeSeed": [ @@ -859,7 +859,7 @@ "
    function Animal() { };

    Animal.prototype = {
      constructor: Animal,
      describe: function() {
        console.log(\"My name is \" + this.name);
      }
    };
    ", "Since Animal includes the describe method, you can remove it from Bird and Dog:", "
    Bird.prototype = {
      constructor: Bird
    };

    Dog.prototype = {
      constructor: Dog
    };
    ", - "

    Instructions

    ", + "
    ", "The eat method is repeated in both Cat and Bear. Edit the code in the spirit of DRY by moving the eat method to the Animal supertype." ], "challengeSeed": [ @@ -934,7 +934,7 @@ "
    let animal = Object.create(Animal.prototype);
    ", "Object.create(obj) creates a new object, and sets obj as the new object's prototype. Recall that the prototype is like the \"recipe\" for creating an object. By setting the prototype of animal to be Animal's prototype, you are effectively giving the animal instance the same \"recipe\" as any other instance of Animal.", "
    animal.eat(); // prints \"nom nom nom\"
    animal instanceof Animal; // => true
    ", - "

    Instructions

    ", + "
    ", "Use Object.create to make two instances of Animal named duck and beagle." ], "challengeSeed": [ @@ -994,7 +994,7 @@ "Remember that the prototype is like the \"recipe\" for creating an object. In a way, the recipe for Bird now includes all the key \"ingredients\" from Animal.", "
    let duck = new Bird(\"Donald\");
    duck.eat(); // prints \"nom nom nom\"
    ", "duck inherits all of Animal's properties, including the eat method.", - "

    Instructions

    ", + "
    ", "Modify the code so that instances of Dog inherit from Animal." ], "challengeSeed": [ @@ -1050,7 +1050,7 @@ "
    function Bird() { }
    Bird.prototype = Object.create(Animal.prototype);
    let duck = new Bird();
    duck.constructor // function Animal(){...}
    ", "But duck and all instances of Bird should show that they were constructed by Bird and not Animal. To do so, you can manually set Bird's constructor property to the Bird object:", "
    Bird.prototype.constructor = Bird;
    duck.constructor // function Bird(){...}
    ", - "

    Instructions

    ", + "
    ", "Fix the code so duck.constructor and beagle.constructor return their respective constructors." ], "challengeSeed": [ @@ -1108,7 +1108,7 @@ "
    Bird.prototype.fly = function() {
      console.log(\"I'm flying!\");
    };
    ", "Now instances of Bird will have both eat() and fly() methods:", "
    let duck = new Bird();
    duck.eat(); // prints \"nom nom nom\"
    duck.fly(); // prints \"I'm flying!\"
    ", - "

    Instructions

    ", + "
    ", "Add all necessary code so the Dog object inherits from Animal and the Dog's prototype constructor is set to Dog. Then add a bark() method to the Dog object so that beagle can both eat() and bark(). The bark() 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.", - "

    Instructions

    ", + "
    ", "Override the fly() method for Penguin so that it returns \"Alas, this is a flightless bird.\"" ], "challengeSeed": [ @@ -1237,7 +1237,7 @@ "Here bird and plane are passed into flyMixin, which then assigns the fly function to each object. Now bird and plane can both fly:", "
    bird.fly(); // prints \"Flying, wooosh!\"
    plane.fly(); // prints \"Flying, wooosh!\"
    ", "Note how the mixin allows for the same fly method to be reused by unrelated objects bird and plane.", - "

    Instructions

    ", + "
    ", "Create a mixin named glideMixin that defines a method named glide. Then use the glideMixin to give both bird and boat 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.", "
    function Bird() {
      let hatchedEgg = 10; // private property

      this.getHatchedEggCount = function() { // publicly available method that a bird object can use
        return hatchedEgg;
      };
    }
    let ducky = new Bird();
    ducky.getHatchedEggCount(); // returns 10
    ", "Here getHachedEggCount is a privileged method, because it has access to the private variable hatchedEgg. This is possible because hatchedEgg is declared in the same context as getHachedEggCount. In JavaScript, a function always has access to the context in which it was created. This is called closure.", - "

    Instructions

    ", + "
    ", "Change how weight is declared in the Bird function so it is a private variable. Then, create a method getWeight that returns the value of weight." ], "challengeSeed": [ @@ -1342,7 +1342,7 @@ "A common pattern in JavaScript is to execute a function as soon as it is declared:", "
    (function () {
      console.log(\"Chirp, chirp!\")
    })(); // this is an anonymous function expression that executes right away
    // Outputs \"Chirp, chirp!\" immediately
    ", "Note that the function has no name and is not stored in a variable. The two parentheses () at the end of the function expression cause it to be immediately executed or invoked. This pattern is known as an immediately invoked function expression or IIFE.", - "

    Instructions

    ", + "
    ", "Rewrite the function makeNest and remove its call so instead it's an anonymous immediately invoked function expression (IIFE)." ], "challengeSeed": [ @@ -1390,7 +1390,7 @@ "Note that you have an immediately invoked function expression (IIFE) that returns an object motionModule. This returned object contains all of the mixin behaviors as properties of the object.", "The advantage of the module pattern is that all of the motion behaviors can be packaged into a single object that can then be used by other parts of your code. Here is a example using it:", "
    motionModule.glideMixin(duck);
    duck.glide();
    ", - "

    Instructions

    ", + "
    ", "Create a module named funModule to wrap the two mixins isCuteMixin and singMixin. funModule should return an object." ], "challengeSeed": [ diff --git a/challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json b/challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json index a1d1f074d1..0869b1c6b4 100644 --- a/challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json +++ b/challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json @@ -42,7 +42,7 @@ "If you want to find the word \"the\" in the string \"The dog chased the cat\", you could use the following regular expression: /the/. 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 .test() method. The .test() method takes the regex, applies it to a string (which is placed inside the parentheses), and returns true or false if your pattern finds something or not.", "
    let testStr = \"FreeCodeCamp\";
    let testRegex = /Code/;
    testRegex.test(testStr);
    // Returns true
    ", - "

    Instructions

    ", + "
    ", "Apply the regex myRegex on the string myString using the .test() method." ], "challengeSeed": [ @@ -93,7 +93,7 @@ "
    let testStr = \"Hello, my name is Kevin.\";
    let testRegex = /Kevin/;
    testRegex.test(testStr);
    // Returns true
    ", "Any other forms of \"the\" will not match. For example, the regex /the/ will not match \"The\" or \"THE\". A future challenge shows how to match these versions as well.", "
    let wrongRegex = /kevin/;
    wrongRegex.test(testStr);
    // Returns false
    ", - "

    Instructions

    ", + "
    ", "Complete the regex waldoRegex to find \"Waldo\" in the string waldoIsHiding 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 alternation or OR operator: |.", "This operator matches patterns either before or after it. For example, if you wanted to match \"yes\" or \"no\", the regex you want is /yes|no/.", "You can also search for more than just two patterns. You can do this by adding more patterns with more OR operators separating them, like /yes|no|maybe/.", - "

    Instructions

    ", + "
    ", "Complete the regex petRegex to match the pets \"dog\", \"cat\", \"bird\", or \"fish\"." ], "challengeSeed": [ @@ -201,7 +201,7 @@ "Case (or sometimes letter case) is the difference between uppercase letters and lowercase letters. Examples of uppercase are \"A\", \"B\", and \"C\". Examples of lowercase are \"a\", \"b\", and \"c\".", "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 i flag. You can use it by appending it to the regex. An example of using this flag is /ignorecase/i. This regex can match the strings \"ignorecase\", \"igNoreCase\", and \"IgnoreCase\".", - "

    Instructions

    ", + "
    ", "Write a regex fccRegex to match \"FreeCodeCamp\", 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 .match() method.", "To use the .match() method, apply the method on a string and pass in the regex inside the parentheses. Here's an example:", "
    \"Hello, World!\".match(/Hello/);
    // Returns [\"Hello\"]
    let ourStr = \"Regular expressions\";
    let ourRegex = /expressions/;
    ourStr.match(ourRegex);
    // Returns [\"expressions\"]
    ", - "

    Instructions

    ", + "
    ", "Apply the .match() method to extract the word coding." ], "challengeSeed": [ @@ -311,7 +311,7 @@ "
    let testStr = \"Repeat, Repeat, Repeat\";
    let ourRegex = /Repeat/;
    testStr.match(ourRegex);
    // Returns [\"Repeat\"]
    ", "To search or extract a pattern more than once, you can use the g flag.", "
    let repeatRegex = /Repeat/g;
    testStr.match(repeatRegex);
    // Returns [\"Repeat\", \"Repeat\", \"Repeat\"]
    ", - "

    Instructions

    ", + "
    ", "Using the regex starRegex, find and extract both \"Twinkle\" words from the string twinkleStar.", "Note
    You can have multiple flags on your regex like /search/gi" ], @@ -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: .", "The wildcard character . will match any one character. The wildcard is also called dot and period. You can use the wildcard character just like any other character in the regex. For example, if you wanted to match \"hug\", \"huh\", \"hut\", and \"hum\", you can use the regex /hu./ to match all four words.", "
    let humStr = \"I'll hum a song\";
    let hugStr = \"Bear hug\";
    let huRegex = /hu./;
    humStr.match(huRegex); // Returns [\"hum\"]
    hugStr.match(huRegex); // Returns [\"hug\"]
    ", - "

    Instructions

    ", + "
    ", "Complete the regex unRegex so that it matches the strings \"run\", \"sun\", \"fun\", \"pun\", \"nun\", and \"bun\". Your regex should use the wildcard character." ], "challengeSeed": [ @@ -423,7 +423,7 @@ "You can search for a literal pattern with some flexibility with character classes. Character classes allow you to define a group of characters you wish to match by placing them inside square ([ and ]) brackets.", "For example, you want to match \"bag\", \"big\", and \"bug\" but not \"bog\". You can create the regex /b[aiu]g/ to do this. The [aiu] is the character class that will only match the characters \"a\", \"i\", or \"u\".", "
    let bigStr = \"big\";
    let bagStr = \"bag\";
    let bugStr = \"bug\";
    let bogStr = \"bog\";
    let bgRegex = /b[aiu]g/;
    bigStr.match(bgRegex); // Returns [\"big\"]
    bagStr.match(bgRegex); // Returns [\"bag\"]
    bugStr.match(bgRegex); // Returns [\"bug\"]
    bogStr.match(bgRegex); // Returns null
    ", - "

    Instructions

    ", + "
    ", "Use a character class with vowels (a, e, i, o, u) in your regex vowelRegex to count the number of vowels in the string quoteSample.", "Note
    Be sure to match both upper- and lowercase vowels." ], @@ -478,7 +478,7 @@ "Inside a character set, you can define a range of characters to match using a hyphen character: -.", "For example, to match lowercase letters a through e you would use [a-e].", "
    let catStr = \"cat\";
    let batStr = \"bat\";
    let matStr = \"mat\";
    let bgRegex = /[a-e]at/;
    catStr.match(bgRegex); // Returns [\"cat\"]
    batStr.match(bgRegex); // Returns [\"bat\"]
    matStr.match(bgRegex); // Returns null
    ", - "

    Instructions

    ", + "
    ", "Match all the letters in the string quoteSample.", "Note
    Be sure to match both upper- and lowercase vowels." ], @@ -531,7 +531,7 @@ "For example, /[0-5]/ matches any number between 0 and 5, including the 0 and 5.", "Also, it is possible to combine a range of letters and numbers in a single character set.", "
    let jennyStr = \"Jenny8675309\";
    let myRegex = /[a-z0-9]/ig;
    jennyStr.match(myRegex); // matches all letters and numbers in jennyStr
    ", - "

    Instructions

    ", + "
    ", "Create a single regex that matches a range of letters between h and s, and a range of numbers between 2 and 6. 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 negated character sets.", "To create a negated character set, you place a caret character (^) after the opening bracket and before the characters you do not want to match.", "For example, /[^aeiou]/gi matches all characters that are not a vowel. Note that characters like ., !, [, @, / and white space are matched - the negated vowel character set only excludes the vowel characters.", - "

    Instructions

    ", + "
    ", "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 + 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, /a+/g would find one match in \"abc\" and return [\"a\"]. It would also find one match in \"aabc\" and return [\"aa\"]. If it were checking the string \"abab\", it would find two matches and return [\"a\", \"a\"] because the a characters are not in a row - there is a b between them. Finally, since there is no \"a\" in the string \"bcd\", it wouldn't find a match.", - "

    Instructions

    ", + "
    ", "You want to find matches when the letter s occurs one or more times in \"Mississippi\". Write a regex that uses the + sign." ], "challengeSeed": [ @@ -684,7 +684,7 @@ "The last challenge used the plus + 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 asterisk or star: *.", "
    let sWord1 = \"seed\";
    let sWord2 = \"saw\";
    let kWord = \"kite\";
    let sRegex = /s.*/; // Searches for words starting with s
    sRegex.test(sWord1); // Returns true
    sRegex.test(sWord2); // Returns true
    sRegex.test(kWord); // Returns false
    ", - "

    Instructions

    ", + "
    ", "Create a regex starWarsRegex that uses the * character to match all the movie titles that start with \"Star Wars\". Your regex does not need flags." ], "challengeSeed": [ @@ -741,7 +741,7 @@ "You can apply the regex /t[a-z]*i/ to the string \"titanic\". This regex is basically a pattern that starts with t, ends with i, and has some letters in between.", "Regular expressions are by default greedy, so the match would return [\"titani\"]. It finds the largest sub-string possible to fit the pattern.", "However, you can use the ? character to change it to lazy matching. \"titanic\" matched against the adjusted regex of /t[a-z]*?i/ returns [\"ti\"].", - "

    Instructions

    ", + "
    ", "Fix the regex /<.*>/ to return the HTML tag <h1> and not the text \"<h1>Winter is coming</h1>\". Remember the wildcard . in a regular expression matches any character." ], "challengeSeed": [ @@ -793,7 +793,7 @@ "
    \"z\"
    \"zzzzzz\"
    \"ABCzzzz\"
    \"zzzzABC\"
    \"abczzzzzzzzzzzzzzzzzzzzzabc\"
    ", "But it does not find matches in the following strings since there are no letter z characters:", "
    \"\"
    \"ABC\"
    \"abcabc\"
    ", - "

    Instructions

    ", + "
    ", "Write a greedy regex that finds one or more criminals within a group of other people. A criminal is represented by the capital letter C." ], "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 caret character (^) inside a character set to create a negated character set in the form [^thingsThatWillNotBeMatched]. Outside of a character set, the caret is used to search for patterns at the beginning of strings.", "
    let firstString = \"Ricky is first and can be found.\";
    let firstRegex = /^Ricky/;
    firstRegex.test(firstString);
    // Returns true
    let notFirst = \"You can't find Ricky now.\";
    firstRegex.test(notFirst);
    // Returns false
    ", - "

    Instructions

    ", + "
    ", "Use the caret character in a regex to find \"Cal\" only in the beginning of the string rickyAndCal." ], "challengeSeed": [ @@ -904,7 +904,7 @@ "In the last challenge, you learned to use the caret character to search for patterns at the beginning of strings. There is also a way to search for patterns at the end of strings.", "You can search the end of strings using the dollar sign character $ at the end of the regex.", "
    let theEnding = \"This is a never ending story\";
    let storyRegex = /story$/;
    storyRegex.test(theEnding);
    // Returns true
    let noEnding = \"Sometimes a story will have to end\";
    storyRegex.test(noEnding);
    // Returns false
    ", - "

    Instructions

    ", + "
    ", "Use the anchor character ($) to match the string \"caboose\" at the end of the string caboose." ], "challengeSeed": [ @@ -956,7 +956,7 @@ "The closest character class in JavaScript to match the alphabet is \\w. This shortcut is equal to [A-Za-z0-9_]. This character class matches upper and lowercase letters plus numbers. Note, this character class also includes the underscore character (_).", "
    let longHand = /[A-Za-z0-9_]+/;
    let shortHand = /\\w+/;
    let numbers = \"42\";
    let varNames = \"important_var\";
    longHand.test(numbers); // Returns true
    shortHand.test(numbers); // Returns true
    longHand.test(varNames); // Returns true
    shortHand.test(varNames); // Returns true
    ", "These shortcut character classes are also known as shorthand character classes.", - "

    Instructions

    ", + "
    ", "Use the shorthand character class \\w 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 [A-Za-z0-9_] using \\w. A natural pattern you might want to search for is the opposite of alphanumerics.", "You can search for the opposite of the \\w with \\W. Note, the opposite pattern uses a capital letter. This shortcut is the same as [^A-Za-z0-9_].", "
    let shortHand = /\\W/;
    let numbers = \"42%\";
    let sentence = \"Coding!\";
    numbers.match(shortHand); // Returns [\"%\"]
    sentence.match(shortHand); // Returns [\"!\"]
    ", - "

    Instructions

    ", + "
    ", "Use the shorthand character class \\W 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 \\d, with a lowercase d. This is equal to the character class [0-9], which looks for a single character of any number between zero and nine.", - "

    Instructions

    ", + "
    ", "Use the shorthand character class \\d 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 \\d with a lowercase d. You can also search for non-digits using a similar shortcut that uses an uppercase D instead.", "The shortcut to look for non-digit characters is \\D. This is equal to the character class [^0-9], which looks for a single character that is not a number between zero and nine.", - "

    Instructions

    ", + "
    ", "Use the shorthand character class for non-digits \\D 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.", - "

    Instructions

    ", + "
    ", "Change the regex userCheck 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 \\s, which is a lowercase s. 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 [ \\r\\t\\f\\n\\v].", "
    let whiteSpace = \"Whitespace. Whitespace everywhere!\"
    let spaceRegex = /\\s/g;
    whiteSpace.match(spaceRegex);
    // Returns [\" \", \" \"]
    ", - "

    Instructions

    ", + "
    ", "Change the regex countWhiteSpace to look for multiple whitespace characters in a string." ], "challengeSeed": [ @@ -1281,7 +1281,7 @@ "You learned about searching for whitespace using \\s, with a lowercase s. You can also search for everything except whitespace.", "Search for non-whitespace using \\S, which is an uppercase s. 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 [^ \\r\\t\\f\\n\\v].", "
    let whiteSpace = \"Whitespace. Whitespace everywhere!\"
    let nonSpaceRegex = /\\S/g;
    whiteSpace.match(nonSpaceRegex).length; // Returns 32
    ", - "

    Instructions

    ", + "
    ", "Change the regex countNonWhiteSpace 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 quantity specifiers. Quantity specifiers are used with curly brackets ({ and }). You put two numbers between the curly brackets - for the lower and upper number of patterns.", "For example, to match only the letter a appearing between 3 and 5 times in the string \"ah\", your regex would be /a{3,5}h/.", "
    let A4 = \"aaaah\";
    let A2 = \"aah\";
    let multipleA = /a{3,5}h/;
    multipleA.test(A4); // Returns true
    multipleA.test(A2); // Returns false
    ", - "

    Instructions

    ", + "
    ", "Change the regex ohRegex to match only 3 to 6 letter h's in the word \"Oh no\"." ], "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 \"hah\" with the letter a appearing at least 3 times, your regex would be /ha{3,}h/.", "
    let A4 = \"haaaah\";
    let A2 = \"haah\";
    let A100 = \"h\" + \"a\".repeat(100) + \"h\";
    let multipleA = /ha{3,}h/;
    multipleA.test(A4); // Returns true
    multipleA.test(A2); // Returns false
    multipleA.test(A100); // Returns true
    ", - "

    Instructions

    ", + "
    ", "Change the regex haRegex to match the word \"Hazzah\" only when it has four or more letter z'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 \"hah\" with the letter a 3 times, your regex would be /ha{3}h/.", "
    let A4 = \"haaaah\";
    let A3 = \"haaah\";
    let A100 = \"h\" + \"a\".repeat(100) + \"h\";
    let multipleHA = /a{3}h/;
    multipleHA.test(A4); // Returns false
    multipleHA.test(A3); // Returns true
    multipleHA.test(A100); // Returns false
    ", - "

    Instructions

    ", + "
    ", "Change the regex timRegex to match the word \"Timber\" only when it has four letter m's." ], "challengeSeed": [ @@ -1501,7 +1501,7 @@ "You can specify the possible existence of an element with a question mark, ?. 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.", "
    let american = \"color\";
    let british = \"colour\";
    let rainbowRegex= /colou?r/;
    rainbowRegex.test(american); // Returns true
    rainbowRegex.test(british); // Returns true
    ", - "

    Instructions

    ", + "
    ", "Change the regex favRegex to match both the American English (favorite) and the British English (favourite) version of the word." ], "challengeSeed": [ @@ -1558,7 +1558,7 @@ "
    let quit = \"qu\";
    let noquit = \"qt\";
    let quRegex= /q(?=u)/;
    let qRegex = /q(?!u)/;
    quit.match(quRegex); // Returns [\"q\"]
    noquit.match(qRegex); // Returns [\"q\"]
    ", "A more practical use of lookaheads is to check two or more patterns in one string. Here is a (naively) simple password checker that looks for between 3 and 6 characters and at least one number:", "
    let password = \"abc123\";
    let checkPass = /(?=\\w{3,6})(?=\\D*\\d)/;
    checkPass.test(password); // Returns true
    ", - "

    Instructions

    ", + "
    ", "Use lookaheads in the pwRegex 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:", "
    let repeatStr = \"regex regex\";
    let repeatRegex = /(\\w+)\\s\\1/;
    repeatRegex.test(repeatStr); // Returns true
    repeatStr.match(repeatRegex); // Returns [\"regex regex\", \"regex\"]
    ", "Using the .match() method on a string will return an array with the string it matches, along with its capture group.", - "

    Instructions

    ", + "
    ", "Use capture groups in reRegex to match numbers that appear three times in a string each separated by a space." ], "challengeSeed": [ @@ -1673,7 +1673,7 @@ "
    let wrongText = \"The sky is silver.\";
    let silverRegex = /silver/;
    wrongText.replace(silverRegex, \"blue\");
    // Returns \"The sky is blue.\"
    ", "You can also access capture groups in the replacement string with dollar signs ($).", "
    \"Code Camp\".replace(/(\\w+)\\s(\\w+)/, '$2 $1');
    // Returns \"Camp Code\"
    ", - "

    Instructions

    ", + "
    ", "Write a regex so that it will search for the string \"good\". Then update the replaceText variable to replace \"good\" with \"okey-dokey\"." ], "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.", - "

    Instructions

    ", + "
    ", "Write a regex and use the appropriate string methods to remove whitespace at the beginning and end of strings.", "Note
    The .trim() method would work here, but you'll need to complete this challenge using regular expressions." ], diff --git a/challenges/03-front-end-libraries/sass.json b/challenges/03-front-end-libraries/sass.json index 96b5d204f0..3d8be455f8 100644 --- a/challenges/03-front-end-libraries/sass.json +++ b/challenges/03-front-end-libraries/sass.json @@ -49,7 +49,7 @@ "Here are a couple examples:", "
    $main-fonts: Arial, sans-serif;
    $headings-color: green;

    //To use variables:
    h1 {
      font-family: $main-fonts;
      color: $headings-color;
    }
    ", "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.", - "

    Instructions

    ", + "
    ", "Create a variable $text-color and set it to red. Then change the value of the color property for the .blog-post and h2 to the $text-color variable." ], "challengeSeed": [ @@ -130,7 +130,7 @@ "
    nav {
      background-color: red;
    }

    nav ul {
      list-style: none;
    }

    li {
      display: inline-block;
    }
    ", "For a large project, the CSS file will have many lines and rules. This is where nesting can help organize your code by placing child style rules within the respective parent elements:", "
    nav {
      background-color: red;

      ul {
        list-style: none;

        li {
          display: inline-block;
        }
      }
    }
    ", - "

    Instructions

    ", + "
    ", "Use the nesting technique shown above to re-organize the CSS rules for both children of .blog-post element. For testing purposes, the h1 should come before the p element." ], "challengeSeed": [ @@ -205,7 +205,7 @@ "The definition starts with @mixin followed by a custom name. The parameters (the $x, $y, $blur, and $c in the example above) are optional.", "Now any time a box-shadow rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the @include directive:", "
    div {
      @include box-shadow(0px, 0px, 4px, #fff);
    }
    ", - "

    Instructions

    ", + "
    ", "Write a mixin for border-radius and give it a $radius parameter. It should use all the vendor prefixes from the example. Then use the border-radius mixin to give the #awesome element a border radius of 15px." ], "challengeSeed": [ @@ -277,7 +277,7 @@ "
    @mixin make-bold($bool) {
      @if $bool == bold { font-weight: bold; }
    }
    ", "And just like in JavaScript, @else if and @else test for more conditions:", "
    @mixin text-effect($val) {
      @if $val == danger {color: red;}
      @else if $val == alert {color: yellow;}
      @else if $val == success {color: green;}
      @else {color: black;}
    }
    ", - "

    Instructions

    ", + "
    ", "Create a mixin called border-stroke that takes a parameter $val. The mixin should check for the following conditions using @if, @else if, and @else:", "
    light - 1px solid black
    medium - 3px solid black
    heavy - 6px solid black
    none - no border
    " ], @@ -351,7 +351,7 @@ "The #{$i} part is the syntax to combine a variable (i) with text to make a string. When the Sass file is converted to CSS, it looks like this:", "
    .col-1 {
      width: 8.33333%;
    }

    .col-2 {
      width: 16.66667%;
    }

    ...

    .col-12 {
      width: 100%;
    }
    ", "This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.", - "

    Instructions

    ", + "
    ", "Write a @for directive that takes a variable $j that goes from 1 to 6.", "It should create 5 classes called .text-1 to .text-5 where each has a font-size set to 10px multiplied by the index." ], @@ -425,7 +425,7 @@ "Note that the $key variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have color1, color2... in it.", "Both of the above code examples are converted into the following CSS:", "
    .blue-text {
      color: blue;
    }

    .red-text {
      color: red;
    }

    .green-text {
      color: green;
    }
    ", - "

    Instructions

    ", + "
    ", "Write an @each directive that goes through a list: blue, black, red and assigns each variable to a .color-bg class, where the \"color\" part changes for each item.", "Each class should set the background-color the respective color." ], @@ -496,7 +496,7 @@ "
    $x: 1;
    @while $x < 13 {
      .col-#{$x} { width: 100%/12 * $x;}
      $x: $x + 1;
    }
    ", "First, define a variable $x and set it to 1. Next, use the @while directive to create the grid system while $x is less than 13.", "After setting the CSS rule for width, $x is incremented by 1 to avoid an infinite loop.", - "

    Instructions

    ", + "
    ", "Use @while to create a series of classes with different font-sizes.", "There should be 10 different classes from text-1 to text-10. Then set font-size to 5px multiplied by the current index number. Make sure to avoid an infinite loop!" ], @@ -579,7 +579,7 @@ "For example, if all your mixins are saved in a partial named \"_mixins.scss\", and they are needed in the \"main.scss\" file, this is how to use them in the main file:", "
    // In the main.scss file

    @import 'mixins'
    ", "Note that the underscore is not needed in the import statement - Sass understands it is a partial. Once a partial is imported into a file, all variables, mixins, and other code are available to use.", - "

    Instructions

    ", + "
    ", "Write an @import statement to import a partial named _variables.scss into the main.scss file." ], "challengeSeed": [ @@ -641,7 +641,7 @@ "The extend directive is a simple way to reuse the rules written for one element, then add more for another:", "
    .big-panel{
      @extend .panel;
      width: 150px;
      font-size: 2em;
    }
    ", "The .big-panel will have the same properties as .panel in addition to the new styles.", - "

    Instructions

    ", + "
    ", "Make a class .info-important that extends .info and also has a background-color set to magenta." ], "challengeSeed": [ diff --git a/challenges/04-data-visualization/data-visualization-with-d3.json b/challenges/04-data-visualization/data-visualization-with-d3.json index 623a3f0f75..9098a00163 100644 --- a/challenges/04-data-visualization/data-visualization-with-d3.json +++ b/challenges/04-data-visualization/data-visualization-with-d3.json @@ -53,7 +53,7 @@ "Here's an example that selects an unordered list, appends a list item, and adds text:", "
    d3.select(\"ul\")
    .append(\"li\")
    .text(\"Very important item\");
    ", "D3 allows you to chain several methods together with periods to perform a number of actions in a row.", - "

    Instructions

    ", + "
    ", "Use the select method to select the body tag in the document. Then append an h1 tag to it, and add the text \"Learning D3\" into the h1 element." ], "challengeSeed": [ @@ -110,7 +110,7 @@ "D3 also has the selectAll() 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:", "const anchors = d3.selectAll(\"a\");", "Like the select() method, selectAll() supports method chaining, and you can use it with other methods.", - "

    Instructions

    ", + "
    ", "Select all of the li tags in the document, and change their text to \"list item\"." ], "challengeSeed": [ @@ -173,7 +173,7 @@ "Here is an example that selects a ul element and creates a new list item based on the number of entries in the array:", "
    <body>
    <ul></ul>
    <script>
    const dataset = [\"a\", \"b\", \"c\"];
    d3.select(\"ul\").selectAll(\"li\")
    .data(dataset)
    .enter()
    .append(\"li\")
    .text(\"New item\");
    </script>
    </body>
    ", "It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the ul on the page. Next, select all list items, which returns an empty selection. Then the data() method reviews the dataset and runs the following code three times, once for each item in the array. The enter() method sees there are no li elements on the page, but it needs 3 (one for each piece of data in dataset). New li elements are appended to the ul and have the text \"New item\".", - "

    Instructions

    ", + "
    ", "Select the body node, then select all h2 elements. Have D3 create and append an h2 tag for each item in the dataset array. The text in the h2 should say \"New Title\". Your code should use the data() and enter() methods." ], "challengeSeed": [ @@ -231,7 +231,7 @@ "The last challenge created a new h2 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 text() method can take a string or a callback function as an argument. Since the data from the dataset array is attached to each element, the callback function has access to it. The parameter used in the callback function (d 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:", "selection.text((d) => d)", - "

    Instructions

    ", + "
    ", "Change the text() 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 style() method.", "The style() method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue:", "selection.style(\"color\",\"blue\");", - "

    Instructions

    ", + "
    ", "Add the style() method to the code in the editor to make all the displayed text have a font-family of verdana." ], "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 style() method and include the conditional logic. The callback function uses the d parameter to represent the data point:", "
    selection.style(\"color\", (d) => {
    /* Logic that returns the color based on a condition */
    });
    ", "The style() method is not limited to setting the color - it can be used with other CSS properties as well.", - "

    Instructions

    ", + "
    ", "Add the style() method to the code in the editor to set the color of the h2 elements conditionally. Write the callback function so if the data value is less than 20, it returns \"red\", otherwise it returns \"green\".", "Note
    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 attr() method to add any HTML attribute to an element, including a class name.", "The attr() method works the same way that style() 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:", "selection.attr(\"class\", \"container\");", - "

    Instructions

    ", + "
    ", "Add the attr() method to the code in the editor and put a class of bar on the div elements." ], "challengeSeed": [ @@ -495,7 +495,7 @@ "2) Give each div a dynamic height, using a callback function in the style() method that sets height equal to the data value", "Recall the format to set a style using a callback function:", "selection.style(\"cssProperty\", (d) => d)", - "

    Instructions

    ", + "
    ", "Add the style() method to the code in the editor to set the height 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 bar 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", - "

    Instructions

    ", + "
    ", "First, add a margin of 2px to the bar class in the style tag. Next, change the callback function in the style() method so it returns a value 10 times the original data value (plus the \"px\").", "Note
    Multiplying each data point by the same 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 svg tag.", "CSS can be scalable when styles use relative units (such as vh, vw, or percentages), but using SVG is more flexible to build data visualizations.", - "

    Instructions

    ", + "
    ", "Add an svg node to the body using append(). Give it a width attribute of 500 and a height attribute of 100 using the attr() method for each. You'll see it in the output because there's a background-color of pink applied to it in the style tag.", "Note
    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 svg area, you can specify where it goes with x and y coordinates. The origin point of (0, 0) is in the upper-left corner. Positive vales for x push the shape to the right, and positive values for y push the shape down from the origin point.", "To place a shape in the middle of the 500 (width) x 100 (height) svg from last challenge, the x coordinate would be 250 and the y coordinate would be 50.", "An SVG rect has four attributes. There are the x and y coordinates for where it is placed in the svg area. It also has a height and width to specify the size.", - "

    Instructions

    ", + "
    ", "Add a rect shape to the svg using append(), and give it a width attribute of 25 and height attribute of 100. Also, give the rect x and y attributes each set to 0." ], "challengeSeed": [ @@ -783,7 +783,7 @@ "A previous challenge showed the format for how to create and append a div for each item in dataset:", "
    d3.select(\"body\").selectAll(\"div\")
    .data(dataset)
    .enter()
    .append(\"div\")
    ", "There are a few differences working with rect elements instead of divs. The rects must be appended to an svg element, not directly to the body. Also, you need to tell D3 where to place each rect within the svg area. The bar placement will be covered in the next challenge.", - "

    Instructions

    ", + "
    ", "Use the data(), enter(), and append() methods to create and append a rect for each item in dataset. The bars should display all on top of each other, this will be fixed in the next challenge." ], "challengeSeed": [ @@ -856,7 +856,7 @@ "The attr() 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 d) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format:", "
    selection.attr(\"property\", (d, i) => {
    /*
    * d is the data point value
    * i is the index of the data point in the array
    */
    })
    ", "It's important to note that you do NOT need to write a for loop or use forEach() to iterate over the items in the data set. Recall that the data() method parses the data set, and any method that's chained after data() is run once for each item in the data set.", - "

    Instructions

    ", + "
    ", "Change the x attribute callback function so it returns the index times 30.", "Note
    Each bar has a width of 25, so increasing each x 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 x value was set dynamically.", "
    selection.attr(\"property\", (d, i) => {
    /*
    * d is the data point value
    * i is the index of the data point in the array
    */
    })
    ", - "

    Instructions

    ", + "
    ", "Change the callback function for the height attribute to return the data value times 3.", "Note
    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 y 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 y coordinate needs a value of 100. If the data point value were 1, you would start with a y 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 y coordinate would be 99.", "The y coordinate that is y = heightOfSVG - heightOfBar would place the bars right-side-up.", - "

    Instructions

    ", + "
    ", "Change the callback function for the y attribute to set the bars right-side-up. Remember that the height of the bar is 3 times the data value d.", "Note
    In general, the relationship is y = h - m * d, where m 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 rect shape is colored with the fill attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.", - "

    Instructions

    ", + "
    ", "Add an attr() 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 text element.", "Like the rect element, a text element needs to have x and y 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.", - "

    Instructions

    ", + "
    ", "The code in the editor already binds the data to each new text element. First, append text nodes to the svg. Next, add attributes for the x and y coordinates. They should be calculated the same way as the rect ones, except the y value for the text should make the label sit 3 units higher than the bar. Finally, use the D3 text() method to set the label equal to the data point value.", "Note
    For the label to sit higher than the bar, decide if the y value for the text should be 3 greater or 3 less than the y value for the bar." ], @@ -1249,7 +1249,7 @@ ], "description": [ "D3 methods can add styles to the bar labels. The fill attribute sets the color of the text for a text node. The style() method sets CSS rules for other styles, such as \"font-family\" or \"font-size\".", - "

    Instructions

    ", + "
    ", "Set the font-size of the text 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 attr() method. Then the :hover pseudo-class for your new class holds the style rules for any hover effects.", - "

    Instructions

    ", + "
    ", "Use the attr() method to add a class of bar to all the rect elements. This changes the fill 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 title element.", "title pairs with the text() method to dynamically add data to the bars.", - "

    Instructions

    ", + "
    ", "Append a title element under each rect node. Then call the text() 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 x and y axes, and are used to position the circle in the visualization.", "SVG has a circle tag to create the circle shape. It works a lot like the rect elements you used for the bar chart.", - "

    Instructions

    ", + "
    ", "Use the data(), enter(), and append() methods to bind dataset to new circle elements that are appended to the SVG canvas." ], "challengeSeed": [ @@ -1583,7 +1583,7 @@ "A circle in SVG has three main attributes. The cx and cy attributes are the coordinates. They tell D3 where to position the center of the shape on the SVG canvas. The radius (r attribute) gives the size of the circle.", "Just like the rect y coordinate, the cy attribute for a circle 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 data(dataset) run once per item in dataset. The d parameter in the callback function refers to the current item in dataset, which is an array for each point. You use bracket notation, like d[0], to access the values in that array.", - "

    Instructions

    ", + "
    ", "Add cx, cy, and r attributes to the circle elements. The cx value should be the first number in the array for each item in dataset. The cy 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 r 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 (x) and second (y) fields of each item in dataset.", "The text nodes need x and y attributes to position it on the SVG canvas. In this challenge, the y value (which determines height) can use the same value that the circle uses for its cy attribute. The x value can be slightly larger than the cx value of the circle, so the label is visible. This will push the label to the right of the plotted point.", - "

    Instructions

    ", + "
    ", "Label each point on the scatter plot using the text 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 x attribute so it's 5 units more than the value you used for the cx attribute on the circle. Set the y attribute the same way that's used for the cy value on the circle." ], "challengeSeed": [ @@ -1774,7 +1774,7 @@ "D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method scaleLinear():", " const scale = d3.scaleLinear()", "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.", - "

    Instructions

    ", + "
    ", "Change the scale variable to create a linear scale. Then set the output variable to the scale called with an input argument of 50." ], "challengeSeed": [ @@ -1837,7 +1837,7 @@ "The domain() and range() methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example:", "
    // Set a domain
    // The domain covers the set of input values
    scale.domain([50, 480]);
    // Set a range
    // The range covers the set of output values
    scale.range([10, 500]);
    scale(50) // Returns 10
    scale(480) // Returns 500
    scale(325) // Returns 323.37
    scale(750) // Returns 807.67
    d3.scaleLinear()
    ", "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.", - "

    Instructions

    ", + "
    ", "Create a scale and set its domain to [250, 500] and range to [10, 150].", "Note
    You can chain the domain() and range() methods onto the scale variable." ], @@ -1904,7 +1904,7 @@ "Fortunately, both the min() and max() methods take a callback function.", "In this example, the callback function's argument d 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:", "
    const locationData = [[1, 7],[6, 3],[8, 3]];
    // Returns the smallest number out of the first elements
    const minX = d3.min(locationData, (d) => d[0]);
    // minX compared 1, 6, and 8 and is set to 1
    ", - "

    Instructions

    ", + "
    ", "The positionData 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 output variable.", "Note
    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 max() method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (w), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas.", "
    const dataset = [
    [ 34, 78 ],
    [ 109, 280 ],
    [ 310, 120 ],
    [ 79, 411 ],
    [ 420, 220 ],
    [ 233, 145 ],
    [ 333, 96 ],
    [ 222, 333 ],
    [ 78, 320 ],
    [ 21, 123 ]
    ];
    const w = 500;
    const h = 500;

    // Padding between the SVG canvas boundary and the plot
    const padding = 30;
    const xScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, (d) => d[0])])
    .range([padding, w - padding]);
    ", "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 range() method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500).", - "

    Instructions

    ", + "
    ", "Use the yScale 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 (h) and include padding.", "Note
    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 x and y attributes for rect or text elements, or cx and cy for circles. Here's an example:", "
    shape
    .attr(\"x\", (d) => xScale(d[0]))
    ", "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 text() method for a tooltip or label.", - "

    Instructions

    ", + "
    ", "Use xScale and yScale to position both the circle and text shapes onto the SVG canvas. For the circles, apply the scales to set the cx and cy attributes. Give them a radius of 5 units, too.", "For the text elements, apply the scales to set the x and y 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 xScale." ], @@ -2180,7 +2180,7 @@ "
    const xAxis = d3.axisBottom(xScale);

    svg.append(\"g\")
    .attr(\"transform\", \"translate(0, \" + (h - padding) + \")\")
    .call(xAxis);
    ", "The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the call() method.", "The y-axis works is the same way, except the translate argument is in the form (x, 0). Because translate is a string in the attr() method above, you can use concatenation to include variable values for its arguments.", - "

    Instructions

    ", + "
    ", "The scatter plot now has an x-axis. Create a y-axis in a variable named yAxis using the axisLeft() method. Then render the axis using a g element. Make sure to use a transform attribute to translate the axis by the amount of padding units right, and 0 units down. Remember to call() the axis." ], "challengeSeed": [ diff --git a/challenges/04-data-visualization/json-apis-and-ajax.json b/challenges/04-data-visualization/json-apis-and-ajax.json index 1097d10799..90df2296bf 100644 --- a/challenges/04-data-visualization/json-apis-and-ajax.json +++ b/challenges/04-data-visualization/json-apis-and-ajax.json @@ -49,7 +49,7 @@ "
    document.addEventListener('DOMContentLoaded',function() {

    });
    ", "Next, you can implement a click event handler that goes inside of the DOMContentLoaded function by adding the following code:", "document.getElementById('getMessage').onclick=function(){};", - "

    Instructions

    ", + "
    ", "Add a click event handler inside of the DOMContentLoaded function for the element with id of getMessage." ], "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 message to say \"Here is the message\".", "This works by adding the following code within the click event:", "document.getElementsByClassName('message')[0].innerHTML=\"Here is the message\";", - "

    Instructions

    ", + "
    ", "Add code inside the onclick event handler to change the text inside the message element to say \"Here is the message\"." ], "challengeSeed": [ @@ -223,7 +223,7 @@ "Here's a review of what each piece is doing. The JavaScript XMLHttpRequest object has a number of properties and methods that are used to transfer data. First, an instance of the XMLHttpRequest object is created and saved in the req variable.", "Next, the open method initializes a request - this example is requesting data from an API, therefore is a \"GET\" request. The second argument for open is the URL of the API you are requesting data from. The third argument is a Boolean value where true makes it an asynchronous request.", "The send method sends the request. Finally, the onload event handler parses the returned data and applies the JSON.stringify method to convert the JavaScript object into a string. This string is then inserted as the message text.", - "

    Instructions

    ", + "
    ", "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 \"codeNames\":[\"Juggernaut\",\"Mrs. Wallace\",\"ButterCup\"]. 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 json:", "
    console.log(json[0].altText);
    // Prints \"A white cat wearing a green helmet shaped melon on it's head.\"
    ", - "

    Instructions

    ", + "
    ", "For the cat with the \"id\" of 2, print to the console the second value in the codeNames array. You should use bracket and dot notation on the object (which is saved in the variable json) 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 strong tags, followed by the value. When the loop is finished, you render it.", "Here's the code that does this:", "
    json.forEach(function(val) {
    var keys = Object.keys(val);
    html += \"<div class = 'cat'>\";
    keys.forEach(function(key) {
    html += \"<strong>\" + key + \"</strong>: \" + val[key] + \"<br>\";
    });
    html += \"</div><br>\";
    });
    ", - "

    Instructions

    ", + "
    ", "Add a forEach 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 imageLink property to display this image in an img element.", "Here's the code that does this:", "html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";", - "

    Instructions

    ", + "
    ", "Add code to use the imageLink and altText properties in an img tag." ], "challengeSeed": [ @@ -602,7 +602,7 @@ "Given that the JSON data is stored in an array, you can use the filter method to filter out the cat whose \"id\" key has a value of 1.", "Here's the code to do this:", "
    json = json.filter(function(val) {
    return (val.id !== 1);
    });
    ", - "

    Instructions

    ", + "
    ", "Add code to filter the json data to remove the cat with the \"id\" value of 1." ], "challengeSeed": [ @@ -704,7 +704,7 @@ "Here's code that does this:", "
    if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position) {
    document.getElementById('data').innerHTML=\"latitude: \"+ position.coords.latitude + \"<br>longitude: \" + position.coords.longitude;
    });
    }
    ", "First, it checks if the navigator.geolocation object exists. If it does, the getCurrentPosition 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 position object's values for latitude and longitude using dot notation and updates the HTML.", - "

    Instructions

    ", + "
    ", "Add the example code inside the script tags to check a user's current location and insert it into the HTML." ], "challengeSeed": [ @@ -759,7 +759,7 @@ "The setRequestHeader method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the open method, but before the send method. The two parameters are the name of the header and the value to set as the body of that header.", "Next, the onreadystatechange event listener handles a change in the state of the request. A readyState of 4 means the operation is complete, and a status of 200 means it was a successful request. The document's HTML can be updated.", "Finally, the send method sends the request with the userName value, which was given by the user in the input field.", - "

    Instructions

    ", + "
    ", "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": [