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

fix: Moved instruction to proper place and removed assert text in Font Awesome challenges (#35928)

Browse Source 
* fix: Moved instruction to proper place and removed assert text

* Add suggestion about making note strong

Co-Authored-By: thecodingaviator <34807532+thecodingaviator@users.noreply.github.com>
This commit is contained in:
The Coding Aviator
2019-04-29 19:21:03 +05:30
committed by Oliver Eyton-Williams
parent ff15832ccd
commit a2a278e937
2 changed files with 10 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.english.md
View File

@ -10,13 +10,13 @@ challengeType: 0
## Description
<section id='description'>
Font Awesome is a convenient library of icons. These icons can be web fonts or vector graphics. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.
Use Font Awesome to add an <code>info-circle</code> icon to your info button and a <code>trash</code> icon to your delete button.
Note: The <code>span</code> element is an acceptable alternative to the <code>i</code> element for the directions below.
</section>
## Instructions
<section id='instructions'>
Use Font Awesome to add an <code>info-circle</code> icon to your info button and a <code>trash</code> icon to your delete button.
<strong>Note:</strong> The <code>span</code> element is an acceptable alternative to the <code>i</code> element for the directions below.
</section>
## Tests
@ -25,11 +25,11 @@ Note: The <code>span</code> element is an acceptable alternative to the <code>i<
```yml
tests:
- text: You should add a <code>&#60;i class="fas fa-info-circle"&#62;&#60;/i&#62;</code> within your info button element.
testString: assert($(".btn-info > i").is(".fas.fa-info-circle") || $(".btn-info > span").is(".fas.fa-info-circle"), 'You should add a <code>&#60;i class="fas fa-info-circle"&#62;&#60;/i&#62;</code> within your info button element.');
testString: assert($(".btn-info > i").is(".fas.fa-info-circle") || $(".btn-info > span").is(".fas.fa-info-circle"));
- text: You should add a <code>&#60;i class="fas fa-trash"&#62;&#60;/i&#62;</code> within your delete button element.
testString: assert($(".btn-danger > i").is(".fas.fa-trash") || $(".btn-danger > span").is(".fas.fa-trash"), 'You should add a <code>&#60;i class="fas fa-trash"&#62;&#60;/i&#62;</code> within your delete button element.');
testString: assert($(".btn-danger > i").is(".fas.fa-trash") || $(".btn-danger > span").is(".fas.fa-trash"));
- text: Make sure each of your <code>i</code> elements has a closing tag and <code>&#60;i class="fas fa-thumbs-up"&#62;&#60;/i&#62;</code> is in your like button element.
testString: assert(code.match(/<\/i>|<\/span/g) && code.match(/<\/i|<\/span>/g).length > 2 && ($(".btn-primary > i").is(".fas.fa-thumbs-up") || $(".btn-primary > span").is(".fas.fa-thumbs-up")), 'Make sure each of your <code>i</code> elements has a closing tag and <code>&#60;i class="fas fa-thumbs-up"&#62;&#60;/i&#62;</code> is in your like button element.');
testString: assert(code.match(/<\/i>|<\/span/g) && code.match(/<\/i|<\/span>/g).length > 2 && ($(".btn-primary > i").is(".fas.fa-thumbs-up") || $(".btn-primary > span").is(".fas.fa-thumbs-up")));
```

12
curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.english.md
View File

@ -16,12 +16,11 @@ In this case, we've already added it for you to this page behind the scenes.
The <code>i</code> element was originally used to make other elements italic, but is now commonly used for icons. You can add the Font Awesome classes to the <code>i</code> element to turn it into an icon, for example:
<code>&lt;i class="fas fa-info-circle"&gt;&lt;/i&gt;</code>
Note that the <code>span</code> element is also acceptable for use with icons.
Use Font Awesome to add a <code>thumbs-up</code> icon to your like button by giving it an <code>i</code> element with the classes <code>fas</code> and <code>fa-thumbs-up</code>; make sure to keep the text "Like" next to the icon.
</section>
## Instructions
<section id='instructions'>
Use Font Awesome to add a <code>thumbs-up</code> icon to your like button by giving it an <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>. Make sure to keep the text "Like" next to the icon.
</section>
## Tests
@ -30,14 +29,13 @@ Use Font Awesome to add a <code>thumbs-up</code> icon to your like button by giv
```yml
tests:
- text: Add an <code>i</code> element with the classes <code>fas</code> and <code>fa-thumbs-up</code>.
testString: assert($("i").is(".fas.fa-thumbs-up") || $("span").is(".fas.fa-thumbs-up"), 'Add an <code>i</code> element with the classes <code>fas</code> and <code>fa-thumbs-up</code>.');
testString: assert($("i").is(".fas.fa-thumbs-up") || $("span").is(".fas.fa-thumbs-up"));
- text: Your <code>fa-thumbs-up</code> icon should be located within the Like button.
testString: assert(($("i.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > i").is(".fas.fa-thumbs-up")) || ($("span.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > span").is(".fas.fa-thumbs-up")), 'Your <code>fa-thumbs-up</code> icon should be located within the Like button.');
testString: assert(($("i.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > i").is(".fas.fa-thumbs-up")) || ($("span.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > span").is(".fas.fa-thumbs-up")));
- text: Nest your <code>i</code> element within your <code>button</code> element.
testString: assert($("button").children("i").length > 0 || $("button").children("span").length > 0, 'Nest your <code>i</code> element within your <code>button</code> element.');
testString: assert($("button").children("i").length > 0 || $("button").children("span").length > 0);
- text: Make sure your icon element has a closing tag.
testString: assert(code.match(/<\/i>|<\/span>/g), 'Make sure your icon element has a closing tag.');
testString: assert(code.match(/<\/i>|<\/span>/g));
```
</section>