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

fix(seed): Bootstrap default button fix (#17082)

Browse Source 
added btn-default class to lessons with basic Bootstrap buttons, which
add proper styles for default button

Closes #17075
This commit is contained in:
Marcin Procyk
2018-05-03 16:07:00 +02:00
committed by mstellaluna
parent 23ff6cc16f
commit 2b5e39e1f8
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
challenges/03-front-end-libraries/bootstrap.json
View File

@ -329,7 +329,7 @@
"title": "Create a Bootstrap Button",
"description": [
"Bootstrap has its own styles for <code>button</code> elements, which look much better than the plain HTML ones.",
"Create a new <code>button</code> element below your large kitten photo. Give it the class <code>btn</code> and the text of \"Like\"."
"Create a new <code>button</code> element below your large kitten photo. Give it the <code>btn</code> and <code>btn-default</code> classes, as well as the text of \"Like\"."
],
"challengeSeed": [
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
@ -393,7 +393,7 @@
],
"tests": [
"assert(new RegExp(\"like\",\"gi\").test($(\"button\").text()) && ($(\"img.img-responsive + button.btn\").length > 0), 'message: Create a new <code>button</code> element with the text \"Like\".');",
"assert($(\"button\").hasClass(\"btn\"), 'message: Your new button should have the class <code>btn</code>.');",
"assert($(\"button\").hasClass(\"btn\") && $(\"button\").hasClass(\"btn-default\"), 'message: Your new button should have two classes: <code>btn</code> and <code>btn-default</code>.');",
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.');"
],
"type": "waypoint",
@ -419,14 +419,14 @@
"id": "bad87fee1348cd8acef08812",
"title": "Create a Block Element Bootstrap Button",
"description": [
"Normally, your <code>button</code> elements with a class of <code>btn</code> are only as wide as the text that they contain. For example:",
"<code>&lt;button class=\"btn\"&gt;Submit&lt;/button&gt;</code>",
"Normally, your <code>button</code> elements with the <code>btn</code> and <code>btn-default</code> classes are only as wide as the text that they contain. For example:",
"<code>&lt;button class=\"btn btn-default\"&gt;Submit&lt;/button&gt;</code>",
"This button would only be as wide as the word \"Submit\".",
"<button class='btn' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>Submit</button>",
"<button class='btn btn-default'>Submit</button>",
"By making them block elements with the additional class of <code>btn-block</code>, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a \"new line\" below the block.",
"<code>&lt;button class=\"btn btn-block\"&gt;Submit&lt;/button&gt;</code>",
"<code>&lt;button class=\"btn btn-default btn-block\"&gt;Submit&lt;/button&gt;</code>",
"This button would take up 100% of the available width.",
"<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>Submit</button>",
"<button class='btn btn-default btn-block'>Submit</button>",
"Note that these buttons still need the <code>btn</code> class.",
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button."
],
@ -466,7 +466,7 @@
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
"",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera.\">",
" <button class=\"btn\">Like</button>",
" <button class=\"btn btn-default\">Like</button>",
" <p>Things cats love:</p>",
" <ul>",
" <li>cat nip</li>",
@ -491,7 +491,7 @@
"</div>"
],
"tests": [
"assert($(\"button\").hasClass(\"btn\"), 'message: Your button should still have the class <code>btn</code>.');",
"assert($(\"button\").hasClass(\"btn\") && $(\"button\").hasClass(\"btn-default\"), 'message: Your button should still have the <code>btn</code> and <code>btn-default</code> classes.');",
"assert($(\"button\").hasClass(\"btn-block\"), 'message: Your button should have the class <code>btn-block</code>.');",
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.');"
],
@ -535,7 +535,7 @@
"title": "Taste the Bootstrap Button Color Rainbow",
"description": [
"The <code>btn-primary</code> class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.",
"Add Bootstrap's <code>btn-primary</code> class to your button.",
"Replace Bootstrap's <code>btn-default</code> class by <code>btn-primary</code> in your button.",
"Note that this button will still need the <code>btn</code> and <code>btn-block</code> classes."
],
"challengeSeed": [
@ -574,7 +574,7 @@
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
"",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera.\">",
" <button class=\"btn btn-block\">Like</button>",
" <button class=\"btn btn-default btn-block\">Like</button>",
" <p>Things cats love:</p>",
" <ul>",
" <li>cat nip</li>",