additional refactor of HTML challenges
Quincy Larson
parent
efa5d769c2
commit
890bd8cd9c
|
|
@ -732,7 +732,6 @@
|
|||
"dashedName": "waypoint-add-images-to-your-website",
|
||||
"difficulty": 0.017,
|
||||
"description": [
|
||||
"Use an <code>img</code> element to add the image <code>http://bit.ly/fcc-kittens</code> to your website.",
|
||||
"You can add images to your website by using the <code>img</code> element, and point to an specific image's URL using the <code>src</code> attribute.",
|
||||
"An example of this would be <code><img src=\"www.your-image-source.com/your-image.jpg\"/></code>. Note that in most cases, <code>img</code> elements are self-closing.",
|
||||
"Try it with this image: <code>http://bit.ly/fcc-kittens</code>."
|
||||
|
|
@ -788,9 +787,9 @@
|
|||
"dashedName": "waypoint-size-your-images",
|
||||
"difficulty": 0.018,
|
||||
"description": [
|
||||
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.",
|
||||
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the image's width.",
|
||||
"For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <code><style> .larger-image { width: 500px; } </style></code>."
|
||||
"For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <code><style> .larger-image { width: 500px; } </style></code>.",
|
||||
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')",
|
||||
|
|
@ -844,9 +843,9 @@
|
|||
"dashedName": "waypoint-add-borders-around-your-elements",
|
||||
"difficulty": 0.019,
|
||||
"description": [
|
||||
"Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo.",
|
||||
"CSS borders have attributes like style, color and width.",
|
||||
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code><style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style></code>."
|
||||
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code><style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style></code>.",
|
||||
"Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')",
|
||||
|
|
@ -907,9 +906,9 @@
|
|||
"dashedName": "waypoint-add-rounded-corners-with-a-border-radius",
|
||||
"difficulty": 0.020,
|
||||
"description": [
|
||||
"Give your cat photo a <code>border-radius</code> of 10 pixels.",
|
||||
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.",
|
||||
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels."
|
||||
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels.",
|
||||
"Give your cat photo a <code>border-radius</code> of 10 pixels."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('img').hasClass('thick-green-border'), 'Your image element should have the class \"thick-green-border\".')",
|
||||
|
|
@ -973,8 +972,8 @@
|
|||
"dashedName": "waypoint-make-circular-images-with-a-border-radius",
|
||||
"difficulty": 0.021,
|
||||
"description": [
|
||||
"Give your cat photo a <code>border-radius</code> of 50%.",
|
||||
"In addition to pixels, you can also specify a <code>border-radius</code> using a percentage."
|
||||
"In addition to pixels, you can also specify a <code>border-radius</code> using a percentage.",
|
||||
"Give your cat photo a <code>border-radius</code> of 50%."
|
||||
],
|
||||
"tests": [
|
||||
"assert(parseInt($('img').css('border-top-left-radius')) > 48, 'Your image should have a border radius of 50 percent, making it perfectly circular.')",
|
||||
|
|
@ -1038,10 +1037,11 @@
|
|||
"dashedName": "waypoint-link-to-external-pages-with-anchor-elements",
|
||||
"difficulty": 0.022,
|
||||
"description": [
|
||||
"Create an <code>a</code> element, or \"anchor element\", that links to http://catphotoapp.com and has \"cat photos\" as its link text, or \"anchor text\".",
|
||||
"Here's a diagram of an <code>a</code> element. In this case, it's used in the middle of a paragraph element, which means your link will appear in the middle of your sentence.",
|
||||
"<code>a</code> elements or \"anchor\" elements, are used to link to content outside of the current page.",
|
||||
"Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
|
||||
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
|
||||
"Here's an example: <code><p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p></code>."
|
||||
"Here's an example: <code><p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p></code>.",
|
||||
"Create an <code>a</code> element that links to <code>http://catphotoapp.com</code> and has \"cat photos\" as its \"anchor text\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert((/cat photos/gi).test($('a').text()), 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
|
||||
|
|
@ -1108,10 +1108,10 @@
|
|||
"dashedName": "waypoint-wrap-an-anchor-element-within-a-paragraph",
|
||||
"difficulty": 0.023,
|
||||
"description": [
|
||||
"Now wrap your <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text.",
|
||||
"Again, here's a diagram of an <code>a</code> element for your reference:",
|
||||
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
|
||||
"Here's an example: <code><p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p></code>."
|
||||
"Here's an example: <code><p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p></code>.",
|
||||
"Now wrap your <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"catphotoapp.com\".')",
|
||||
|
|
@ -1183,10 +1183,9 @@
|
|||
"dashedName": "waypoint-make-dead-links-using-the-hash-symbol",
|
||||
"difficulty": 0.024,
|
||||
"description": [
|
||||
"Use the hash symbol (#) to turn your <code>a</code> element's link into a dead link.",
|
||||
"Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
|
||||
"This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
|
||||
"Replace your <code>a</code> element's <code>href</code> attribute with a hash symbol to turn it into a dead link."
|
||||
"Replace your <code>a</code> element's <code>href</code> attribute with a hash symbol (#) to turn it into a dead link."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('a').attr('href') === '#', 'Your <code>anchor</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')"
|
||||
|
|
@ -1253,7 +1252,6 @@
|
|||
"dashedName": "waypoint-turn-an-image-into-a-link",
|
||||
"difficulty": 0.025,
|
||||
"description": [
|
||||
"Wrap your <code>img</code> element inside an <code>a</code> element with a dead link.",
|
||||
"You can make elements into links by wrapping them within an <code>a</code> element.",
|
||||
"Wrap your image within an <code>a</code> element. Here's an example: <code><a href='#'><img src='http://bit.ly/fcc-kittens2'/></a></code>.",
|
||||
"Remember to use the hash symbol (#) as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
|
||||
|
|
@ -1327,11 +1325,11 @@
|
|||
"dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility",
|
||||
"difficulty": 0.026,
|
||||
"description": [
|
||||
"Add an <code>alt</code> attribute with the text \"A cute orange cat lying on its back\" to our cat photo.",
|
||||
"<code>alt</code> attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. Search engines also look at <code>alt</code> attributes.",
|
||||
"In short, every image should have an <code>alt</code> attribute!",
|
||||
"<code>alt</code> attributes are a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.",
|
||||
"You can add an <code>alt</code> attribute right in the img element like this: <code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/></code>."
|
||||
"You can add an <code>alt</code> attribute right in the img element like this: <code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/></code>.",
|
||||
"Add an <code>alt</code> attribute with the text \"A cute orange cat lying on its back\" to our cat photo."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('img').filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an <code>alt</code> attribute set to \"A cute orange cat lying on its back\".')"
|
||||
|
|
@ -1399,10 +1397,10 @@
|
|||
"dashedName": "waypoint-create-a-bulleted-unordered-list",
|
||||
"difficulty": 0.027,
|
||||
"description": [
|
||||
"Replace your <code>p</code> elements with an unordered list of three things that cats love.",
|
||||
"HTML has a special element for creating unordered lists, or bullet point-style lists.",
|
||||
"Unordered lists start with a <code><ul></code> element. Then they contain some number of <code><li></code> elements.",
|
||||
"For example: <code><ul><li>milk</li><li>cheese</li></ul></code> would create a bulleted list of \"milk\" and \"cheese\"."
|
||||
"For example: <code><ul><li>milk</li><li>cheese</li></ul></code> would create a bulleted list of \"milk\" and \"cheese\".",
|
||||
"Replace your <code>p</code> elements with an unordered list of three things that cats love."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('ul').length > 0, 'Create a <code>ul</code> element.')",
|
||||
|
|
@ -1472,10 +1470,10 @@
|
|||
"dashedName": "waypoint-create-an-ordered-list",
|
||||
"difficulty": 0.028,
|
||||
"description": [
|
||||
"Create an ordered list of the top 3 things cats hate the most.",
|
||||
"HTML has a special element for creating ordered lists, or numbered-style lists.",
|
||||
"Ordered lists start with a <code><ol></code> element. Then they contain some number of <code><li></code> elements.",
|
||||
"For example: <code><ol><li>hydrogen</li><li>helium</li></ol></code> would create a numbered list of \"hydrogen\" and \"helium\"."
|
||||
"For example: <code><ol><li>hydrogen</li><li>helium</li></ol></code> would create a numbered list of \"hydrogen\" and \"helium\".",
|
||||
"Create an ordered list of the top 3 things cats hate the most."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('ul').length > 0, 'You should have an <code>ul</code> element on your page.')",
|
||||
|
|
@ -1552,9 +1550,10 @@
|
|||
"dashedName": "waypoint-create-a-text-field",
|
||||
"difficulty": 0.029,
|
||||
"description": [
|
||||
"Now we'll create a web form. Create a text input under your lists.",
|
||||
"Now let's create a web form.",
|
||||
"Text inputs are a convenient way to get input from your user.",
|
||||
"You can create one like this: <code><input type='text'></code>. Note that <code>input</code> elements are self-closing."
|
||||
"You can create one like this: <code><input type=\"text\"></code>. Note that <code>input</code> elements are self-closing.",
|
||||
"Create an <code>input</code> element of type \"text\" below your lists."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input').length > 0, 'Your app should have a text field input element.')"
|
||||
|
|
@ -1630,9 +1629,9 @@
|
|||
"dashedName": "waypoint-add-placeholder-text-to-a-text-field",
|
||||
"difficulty": 0.030,
|
||||
"description": [
|
||||
"Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\".",
|
||||
"Your placeholder text is what appears in your text <code>input</code> before your user has inputed anything.",
|
||||
"You can create placeholder text like so: <code><input type='text' placeholder='this is placeholder text'></code>."
|
||||
"You can create placeholder text like so: <code><input type='text' placeholder='this is placeholder text'></code>.",
|
||||
"Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[placeholder]').length > 0, 'Add a <code>placeholder</code> attribute text <code>input</code> element.')",
|
||||
|
|
@ -1710,9 +1709,9 @@
|
|||
"dashedName": "waypoint-create-a-form-element",
|
||||
"difficulty": 0.031,
|
||||
"description": [
|
||||
"Wrap your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element.",
|
||||
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
|
||||
"For example: <code><form action=\"/url-where-you-want-to-submit-form-data\"></form></code>."
|
||||
"For example: <code><form action=\"/url-where-you-want-to-submit-form-data\"></form></code>.",
|
||||
"Wrap your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('form') && $('form').children('input') && $('form').children('input').length > 0, 'Wrap your text input element within a <code>form</code> element.')",
|
||||
|
|
@ -1792,9 +1791,9 @@
|
|||
"dashedName": "waypoint-add-a-submit-button-to-a-form",
|
||||
"difficulty": 0.032,
|
||||
"description": [
|
||||
"Add a submit button to your <code>form</code> element with type \"submit\" and \"Submit\" as its text.",
|
||||
"Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
|
||||
"Here's an example submit button: <code><button type='submit'>this button submits the form</button></code>."
|
||||
"Here's an example submit button: <code><button type='submit'>this button submits the form</button></code>.",
|
||||
"Add a submit button to your <code>form</code> element with type \"submit\" and \"Submit\" as its text."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('form').children('button').length > 0, 'Your form should have a button inside it.')",
|
||||
|
|
@ -1876,9 +1875,9 @@
|
|||
"dashedName": "waypoint-use-html5-to-require-a-field",
|
||||
"difficulty": 0.033,
|
||||
"description": [
|
||||
"Make your text <code>input</code> a \"required\" field, so that your user can't submit the form without completing this field.",
|
||||
"You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.",
|
||||
"For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element, you would use: <code><input type='text' required></code>."
|
||||
"For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element, you would use: <code><input type='text' required></code>.",
|
||||
"Make your text <code>input</code> a \"required\" field, so that your user can't submit the form without completing this field."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input').prop('required'), 'Your text <code>input</code> element should have the \"required\" attribute.')"
|
||||
|
|
@ -1958,12 +1957,12 @@
|
|||
"dashedName": "waypoint-create-a-set-of-radio-buttons",
|
||||
"difficulty": 0.034,
|
||||
"description": [
|
||||
"Add to your form a pair of radio buttons. Each radio button should be wrapped within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\".",
|
||||
"You can use radio buttons for questions where you want the user to only give you one answer.",
|
||||
"Radio buttons are a type of <code>input</code>.",
|
||||
"Each of your radio buttons should be wrapped within its own <code>label</code> elements.",
|
||||
"All related radio buttons should have the same <code>name</code> attribute.",
|
||||
"Here's an example of a radio button: <code><label><input type='radio' name='indoor-outdoor'> Indoor</label></code>."
|
||||
"Here's an example of a radio button: <code><label><input type='radio' name='indoor-outdoor'> Indoor</label></code>.",
|
||||
"Add to your form a pair of radio buttons. Each radio button should be wrapped within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')",
|
||||
|
|
@ -2051,9 +2050,9 @@
|
|||
"dashedName": "waypoint-create-a-set-of-checkboxes",
|
||||
"difficulty": 0.035,
|
||||
"description": [
|
||||
"Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\".",
|
||||
"Forms commonly use checkbox inputs for questions that may have more than one answer.",
|
||||
"For example: <code><label><input type='checkbox' name='personality'> Loving</label></code>."
|
||||
"For example: <code><label><input type='checkbox' name='personality'> Loving</label></code>.",
|
||||
"Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')",
|
||||
|
|
@ -2138,9 +2137,9 @@
|
|||
"dashedName": "waypoint-check-radio-buttons-and-checkboxes-by-default",
|
||||
"difficulty": 0.037,
|
||||
"description": [
|
||||
"Set the first of your radio buttons and the first of your checkboxes to both be checked by default.",
|
||||
"You set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
|
||||
"To do this, just add the word \"checked\" to the inside of an input element. For example, <code><input type='radio' name='test-name' checked></code>."
|
||||
"You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
|
||||
"To do this, just add the word \"checked\" to the inside of an input element. For example, <code><input type='radio' name='test-name' checked></code>.",
|
||||
"Set the first of your radio buttons and the first of your checkboxes to both be checked by default."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[type=\"radio\"]').prop('checked'), 'Your first radio button on your form should be checked by default.');",
|
||||
|
|
@ -2226,11 +2225,11 @@
|
|||
"dashedName": "waypoint-wrap-many-elements-within-a-single-div-element",
|
||||
"difficulty": 0.038,
|
||||
"description": [
|
||||
"Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element.",
|
||||
"The <code>div</code> element, or \"Division\" element, is a general purpose container for other elements.",
|
||||
"The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
|
||||
"Just like any other non-self-closing element, you can open a <code>div</code> element with <code><div></code> and close it on another line with <code></div></code>.",
|
||||
"Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>."
|
||||
"Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>.",
|
||||
"Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')",
|
||||
|
|
|
|||
Loading…
Reference in New Issue