gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
freeCodeCamp/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md

177 lines
4.3 KiB
Markdown
Raw Normal View History

feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
---
id: bad87fee1348cd8acdf08812
title: Create a Bootstrap Button
challengeType: 0
feat: add forumTopicId to challenge frontmatter [pre-existing] This commit adds the pre-existing challenge guide topics in the forum to the forntmatter of their challenge markdown files.
2019-07-31 11:32:23 -07:00
forumTopicId: 16811
feat(curriculum): restore seed + solution to Chinese (#40683) * feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
2021-01-13 03:31:00 +01:00
dashedName: create-a-bootstrap-button
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
---
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 19:02:05 +01:00
# --description--
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 19:02:05 +01:00
Bootstrap has its own styles for `button` elements, which look much better than the plain HTML ones.
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 19:02:05 +01:00
Create a new `button` element below your large kitten photo. Give it the `btn` and `btn-default` classes, as well as the text of "Like".
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 19:02:05 +01:00
# --hints--
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 19:02:05 +01:00
You should create a new `button` element with the text "Like".
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 19:02:05 +01:00
```js
assert(
new RegExp('like', 'gi').test($('button').text()) &&
$('img.img-responsive + button.btn').length > 0
);
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
```
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 19:02:05 +01:00
Your new button should have two classes: `btn` and `btn-default`.
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 19:02:05 +01:00
```js
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
```
All of your `button` elements should have closing tags.
```js
assert(
code.match(/<\/button>/g) &&
code.match(/<button/g) &&
code.match(/<\/button>/g).length === code.match(/<button/g).length
);
```
# --seed--
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 19:02:05 +01:00
## --seed-contents--
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<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.">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
fix(learn): updated catphotoapp links (#39215)
2020-07-15 02:56:49 -07:00
<form action="https://freecatphotoapp.com/submit-cat-photo">
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 19:02:05 +01:00
# --solutions--
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
Added Bootstrap Styled Button (#32140) fix(curriculum): added Bootstrap Styled Button solution
2018-11-06 07:24:48 -05:00
```html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
</head>
<body>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<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.">
<!-- ADD Bootstrap Styled Button -->
<button class="btn btn-default">Like</button>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
fix(learn): updated catphotoapp links (#39215)
2020-07-15 02:56:49 -07:00
<form action="https://freecatphotoapp.com/submit-cat-photo">
Added Bootstrap Styled Button (#32140) fix(curriculum): added Bootstrap Styled Button solution
2018-11-06 07:24:48 -05:00
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
</html>
feat(challenge-md): Add initial markdown challenge files
2018-09-30 23:01:58 +01:00
```
Reference in New Issue Copy Permalink