feat: add 'back/front end' in curriculum (#42596)
* chore: rename APIs and Microservices to include "Backend" (#42515) * fix typo * fix typo * undo change * Corrected grammar mistake Corrected a grammar mistake by removing a comma. * change APIs and Microservices cert title * update title * Change APIs and Microservices certi title * Update translations.json * update title * feat(curriculum): rename apis and microservices cert * rename folder structure * rename certificate * rename learn Markdown * apis-and-microservices -> back-end-development-and-apis * update backend meta * update i18n langs and cypress test Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: add development to front-end libraries (#42512) * fix: added-the-word-Development-to-front-end-libraries * fix/added-the-word-Development-to-front-end-libraries * fix/added-word-development-to-front-end-libraries-in-other-related-files * fix/added-the-word-Development-to-front-end-and-all-related-files * fix/removed-typos-from-last-commit-in-index.md * fix/reverted-changes-that-i-made-to-dependecies * fix/removed xvfg * fix/reverted changes that i made to package.json * remove unwanted changes * front-end-development-libraries changes * rename backend certSlug and README * update i18n folder names and keys * test: add legacy path redirect tests This uses serve.json from the client-config repo, since we currently use that in production * fix: create public dir before moving serve.json * fix: add missing script * refactor: collect redirect tests * test: convert to cy.location for stricter tests * rename certificate folder to 00-certificates * change crowdin config to recognise new certificates location * allow translations to be used Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add forwards slashes to path redirects * fix cypress path tests again * plese cypress * fix: test different challenge Okay so I literally have no idea why this one particular challenge fails in Cypress Firefox ONLY. Tom and I paired and spun a full build instance and confirmed in Firefox the page loads and redirects as expected. Changing to another bootstrap challenge passes Cypress firefox locally. Absolutely boggled by this. AAAAAAAAAAAAAAA * fix: separate the test Okay apparently the test does not work unless we separate it into a different `it` statement. >:( >:( >:( >:( Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com> Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
Shaun Hamilton
GitHub
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908849
|
||||
title: Add Elements within Your Bootstrap Wells
|
||||
challengeType: 0
|
||||
forumTopicId: 16636
|
||||
dashedName: add-elements-within-your-bootstrap-wells
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now we're several `div` elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our `button` elements.
|
||||
|
||||
Nest three `button` elements within each of your `div` elements having the class name `well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Three `button` elements should be nested within each of your `div` elements with class `well`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div.well:eq(0)').children('button').length === 3 &&
|
||||
$('div.well:eq(1)').children('button').length === 3
|
||||
);
|
||||
```
|
||||
|
||||
You should have a total of 6 `button` elements.
|
||||
|
||||
```js
|
||||
assert($('button') && $('button').length > 5);
|
||||
```
|
||||
|
||||
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--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,177 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08845
|
||||
title: Add Font Awesome Icons to all of our Buttons
|
||||
challengeType: 0
|
||||
forumTopicId: 16637
|
||||
required:
|
||||
- link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
|
||||
raw: true
|
||||
dashedName: add-font-awesome-icons-to-all-of-our-buttons
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use Font Awesome to add an `info-circle` icon to your info button and a `trash` icon to your delete button.
|
||||
|
||||
**Note:** The `span` element is an acceptable alternative to the `i` element for the directions below.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `<i class="fas fa-info-circle"></i>` within your `info` button element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.btn-info > i').is('.fas.fa-info-circle') ||
|
||||
$('.btn-info > span').is('.fas.fa-info-circle')
|
||||
);
|
||||
```
|
||||
|
||||
You should add a `<i class="fas fa-trash"></i>` within your `delete` button element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.btn-danger > i').is('.fas.fa-trash') ||
|
||||
$('.btn-danger > span').is('.fas.fa-trash')
|
||||
);
|
||||
```
|
||||
|
||||
Each of your `i` elements should have a closing tag and `<i class="fas fa-thumbs-up"></i>` is in your `like` button element.
|
||||
|
||||
```js
|
||||
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'))
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fas fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fas fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,194 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08845
|
||||
title: Add Font Awesome Icons to our Buttons
|
||||
challengeType: 0
|
||||
forumTopicId: 16638
|
||||
required:
|
||||
- link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
|
||||
raw: true
|
||||
dashedName: add-font-awesome-icons-to-our-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Font Awesome is a convenient library of icons. These icons can be webfonts 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.
|
||||
|
||||
You can include Font Awesome in any app by adding the following code to the top of your HTML:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
```
|
||||
|
||||
In this case, we've already added it for you to this page behind the scenes.
|
||||
|
||||
The `i` 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 `i` element to turn it into an icon, for example:
|
||||
|
||||
```html
|
||||
<i class="fas fa-info-circle"></i>
|
||||
```
|
||||
|
||||
Note that the `span` element is also acceptable for use with icons.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use Font Awesome to add a `thumbs-up` icon to your like button by giving it an `i` element with the classes `fas` and `fa-thumbs-up`. Make sure to keep the text `Like` next to the icon.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `i` element with the classes `fas` and `fa-thumbs-up`.
|
||||
|
||||
```js
|
||||
assert($('i').is('.fas.fa-thumbs-up') || $('span').is('.fas.fa-thumbs-up'));
|
||||
```
|
||||
|
||||
Your `fa-thumbs-up` icon should be located within the Like button.
|
||||
|
||||
```js
|
||||
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 `i` element should be nested within your `button` element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('button').children('i').length > 0 ||
|
||||
$('button').children('span').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Your icon element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/i>|<\/span>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908853
|
||||
title: Add id Attributes to Bootstrap Elements
|
||||
challengeType: 0
|
||||
forumTopicId: 16639
|
||||
dashedName: add-id-attributes-to-bootstrap-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Recall that in addition to class attributes, you can give each of your elements an `id` attribute.
|
||||
|
||||
Each id must be unique to a specific element and used only once per page.
|
||||
|
||||
Let's give a unique id to each of our `div` elements of class `well`.
|
||||
|
||||
Remember that you can give an element an id like this:
|
||||
|
||||
```html
|
||||
<div class="well" id="center-well">
|
||||
```
|
||||
|
||||
Give the well on the left the id of `left-well`. Give the well on the right the id of `right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your left `well` should have the id of `left-well`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.col-xs-6').children('#left-well') &&
|
||||
$('.col-xs-6').children('#left-well').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Your right `well` should have the id of `right-well`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.col-xs-6').children('#right-well') &&
|
||||
$('.col-xs-6').children('#right-well').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908850
|
||||
title: Apply the Default Bootstrap Button Style
|
||||
challengeType: 0
|
||||
forumTopicId: 16657
|
||||
dashedName: apply-the-default-bootstrap-button-style
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap has another button class called `btn-default`.
|
||||
|
||||
Apply both the `btn` and `btn-default` classes to each of your `button` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should apply the `btn` class to each of your `button` elements.
|
||||
|
||||
```js
|
||||
assert($('.btn').length > 5);
|
||||
```
|
||||
|
||||
You should apply the `btn-default` class to each of your `button` elements.
|
||||
|
||||
```js
|
||||
assert($('.btn-default').length > 5);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,175 @@
|
||||
---
|
||||
id: bad87fee1348cd8acef08813
|
||||
title: Call out Optional Actions with btn-info
|
||||
challengeType: 0
|
||||
forumTopicId: 16770
|
||||
dashedName: call-out-optional-actions-with-btn-info
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap comes with several pre-defined colors for buttons. The `btn-info` class is used to call attention to optional actions that the user can take.
|
||||
|
||||
Create a new block-level Bootstrap button below your `Like` button with the text `Info`, and add Bootstrap's `btn-info` and `btn-block` classes to it.
|
||||
|
||||
Note that these buttons still need the `btn` and `btn-block` classes.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `button` element with the text `Info`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('info', 'gi').test($('button').text()));
|
||||
```
|
||||
|
||||
Both of your Bootstrap buttons should have the `btn` and `btn-block` classes.
|
||||
|
||||
```js
|
||||
assert($('button.btn-block.btn').length > 1);
|
||||
```
|
||||
|
||||
Your new button should have the class `btn-info`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-info'));
|
||||
```
|
||||
|
||||
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--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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.">
|
||||
<button class="btn btn-block btn-primary">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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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.">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
<button class="btn btn-block btn-info">Info</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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,157 @@
|
||||
---
|
||||
id: bad87fee1348bd8acde08812
|
||||
title: Center Text with Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16771
|
||||
dashedName: center-text-with-bootstrap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class `text-center` to our `h2` element.
|
||||
|
||||
Remember that you can add several classes to the same element by separating each of them with a space, like this:
|
||||
|
||||
```html
|
||||
<h2 class="red-text text-center">your text</h2>
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should be centered by applying the class `text-center`
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('text-center'));
|
||||
```
|
||||
|
||||
Your `h2` element should still have the class `red-text`
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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">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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,185 @@
|
||||
---
|
||||
id: bad87fee1348cd8acef08812
|
||||
title: Create a Block Element Bootstrap Button
|
||||
challengeType: 0
|
||||
forumTopicId: 16810
|
||||
dashedName: create-a-block-element-bootstrap-button
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Normally, your `button` elements with the `btn` and `btn-default` classes are only as wide as the text that they contain. For example:
|
||||
|
||||
```html
|
||||
<button class="btn btn-default">Submit</button>
|
||||
```
|
||||
|
||||
This button would only be as wide as the word `Submit`.
|
||||
|
||||
<button class='btn btn-default'>Submit</button>
|
||||
|
||||
By making them block elements with the additional class of `btn-block`, 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.
|
||||
|
||||
```html
|
||||
<button class="btn btn-default btn-block">Submit</button>
|
||||
```
|
||||
|
||||
This button would take up 100% of the available width.
|
||||
|
||||
<button class='btn btn-default btn-block'>Submit</button>
|
||||
|
||||
Note that these buttons still need the `btn` class.
|
||||
|
||||
Add Bootstrap's `btn-block` class to your Bootstrap button.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your button should still have the `btn` and `btn-default` classes.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
|
||||
```
|
||||
|
||||
Your button should have the class `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-block'));
|
||||
```
|
||||
|
||||
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--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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.">
|
||||
<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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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.">
|
||||
<button class="btn btn-block 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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: bad87fee1348cd8acdf08812
|
||||
title: Create a Bootstrap Button
|
||||
challengeType: 0
|
||||
forumTopicId: 16811
|
||||
dashedName: create-a-bootstrap-button
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap has its own styles for `button` elements, which look much better than the plain HTML ones.
|
||||
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `button` element with the text `Like`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
new RegExp('like', 'gi').test($('button').text()) &&
|
||||
$('img.img-responsive + button.btn').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Your new button should have two classes: `btn` and `btn-default`.
|
||||
|
||||
```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--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908846
|
||||
title: Create a Bootstrap Headline
|
||||
challengeType: 0
|
||||
forumTopicId: 16812
|
||||
dashedName: create-a-bootstrap-headline
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills.
|
||||
|
||||
We'll build a jQuery playground, which we'll soon put to use in our jQuery challenges.
|
||||
|
||||
To start with, create an `h3` element, with the text `jQuery Playground`.
|
||||
|
||||
Color your `h3` element with the `text-primary` Bootstrap class, and center it with the `text-center` Bootstrap class.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `h3` element to your page.
|
||||
|
||||
```js
|
||||
assert($('h3') && $('h3').length > 0);
|
||||
```
|
||||
|
||||
Your `h3` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h3>/g) &&
|
||||
code.match(/<h3/g) &&
|
||||
code.match(/<\/h3>/g).length === code.match(/<h3/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Your `h3` element should be colored by applying the class `text-primary`
|
||||
|
||||
```js
|
||||
assert($('h3').hasClass('text-primary'));
|
||||
```
|
||||
|
||||
Your `h3` element should be centered by applying the class `text-center`
|
||||
|
||||
```js
|
||||
assert($('h3').hasClass('text-center'));
|
||||
```
|
||||
|
||||
Your `h3` element should have the text `jQuery Playground`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
```
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: bad87fee1348bd9bec908846
|
||||
title: Create a Bootstrap Row
|
||||
challengeType: 0
|
||||
forumTopicId: 16813
|
||||
dashedName: create-a-bootstrap-row
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now we'll create a Bootstrap row for our inline elements.
|
||||
|
||||
Create a `div` element below the `h3` tag, with a class of `row`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `div` element below your `h3` element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').length > 1 &&
|
||||
$('div.row h3.text-primary').length == 0 &&
|
||||
$('div.row + h3.text-primary').length == 0 &&
|
||||
$('h3.text-primary + div.row').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Your `div` element should have the class `row`
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('row'));
|
||||
```
|
||||
|
||||
Your `row div` should be nested inside the `container-fluid div`
|
||||
|
||||
```js
|
||||
assert($('div.container-fluid div.row').length > 0);
|
||||
```
|
||||
|
||||
Your `div` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row"></div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908852
|
||||
title: Create a Class to Target with jQuery Selectors
|
||||
challengeType: 0
|
||||
forumTopicId: 16815
|
||||
dashedName: create-a-class-to-target-with-jquery-selectors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery.
|
||||
|
||||
Give each of your `button` elements the class `target`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should apply the `target` class to each of your `button` elements.
|
||||
|
||||
```js
|
||||
assert($('.target').length > 5);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="target btn btn-default"></button>
|
||||
<button class="target btn btn-default"></button>
|
||||
<button class="target btn btn-default"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="target btn btn-default"></button>
|
||||
<button class="target btn btn-default"></button>
|
||||
<button class="target btn btn-default"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,177 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08845
|
||||
title: Create a Custom Heading
|
||||
challengeType: 0
|
||||
forumTopicId: 16816
|
||||
dashedName: create-a-custom-heading
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
We will make a simple heading for our Cat Photo App by putting the title and relaxing cat image in the same row.
|
||||
|
||||
Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a `div` element.
|
||||
|
||||
Nest your first image and your `h2` element within a single `<div class="row">` element. Nest your `h2` element within a `<div class="col-xs-8">` and your image in a `<div class="col-xs-4">` so that they are on the same line.
|
||||
|
||||
Notice how the image is now just the right size to fit along the text?
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element and topmost `img` element should both be nested together within a `div` element with the class `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0);
|
||||
```
|
||||
|
||||
Your topmost `img` element should be nested within a `div` with the class `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div.col-xs-4:has(img)').length > 0 &&
|
||||
$('div.col-xs-4:has(div)').length === 0
|
||||
);
|
||||
```
|
||||
|
||||
Your `h2` element should be nested within a `div` with the class `col-xs-8`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div.col-xs-8:has(h2)').length > 0 &&
|
||||
$('div.col-xs-8:has(div)').length === 0
|
||||
);
|
||||
```
|
||||
|
||||
All of your `div` elements should have closing tags.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
|
||||
<a href="#"><img class="img-responsive 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.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908848
|
||||
title: Create Bootstrap Wells
|
||||
challengeType: 0
|
||||
forumTopicId: 16825
|
||||
dashedName: create-bootstrap-wells
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap has a class called `well` that can create a visual sense of depth for your columns.
|
||||
|
||||
Nest one `div` element with the class `well` within each of your `col-xs-6` `div` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `div` element with the class `well` inside each of your `div` elements with the class `col-xs-6`
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-6').not(':has(>div.well)').length < 1);
|
||||
```
|
||||
|
||||
Both of your `div` elements with the class `col-xs-6` should be nested within your `div` element with the class `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row > div.col-xs-6').length > 1);
|
||||
```
|
||||
|
||||
All your `div` elements should have closing tags.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well"></div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,188 @@
|
||||
---
|
||||
id: bad87fee1347bd9aedf08845
|
||||
title: Ditch Custom CSS for Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 17565
|
||||
dashedName: ditch-custom-css-for-bootstrap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.
|
||||
|
||||
Don't worry - there will be plenty of time to customize our CSS later.
|
||||
|
||||
Delete the `.red-text`, `p`, and `.smaller-image` CSS declarations from your `style` element so that the only declarations left in your `style` element are `h2` and `thick-green-border`.
|
||||
|
||||
Then delete the `p` element that contains a dead link. Then remove the `red-text` class from your `h2` element and replace it with the `text-primary` Bootstrap class.
|
||||
|
||||
Finally, remove the `smaller-image` class from your first `img` element and replace it with the `img-responsive` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should no longer have the class `red-text`.
|
||||
|
||||
```js
|
||||
assert(!$('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Your `h2` element should now have the class `text-primary`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('text-primary'));
|
||||
```
|
||||
|
||||
Your paragraph elements should no longer use the font `Monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!$('p')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
The `smaller-image` class should be removed from your top image.
|
||||
|
||||
```js
|
||||
assert(!$('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
You should add the `img-responsive` class to your top image.
|
||||
|
||||
```js
|
||||
assert($('.img-responsive').length > 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
|
||||
<a href="#"><img class="img-responsive 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.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908855
|
||||
title: Give Each Element a Unique id
|
||||
challengeType: 0
|
||||
forumTopicId: 18191
|
||||
dashedName: give-each-element-a-unique-id
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
We will also want to be able to use jQuery to target each button by its unique id.
|
||||
|
||||
Give each of your buttons a unique id, starting with `target1` and ending with `target6`.
|
||||
|
||||
Make sure that `target1` to `target3` are in `#left-well`, and `target4` to `target6` are in `#right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
One `button` element should have the id `target1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#left-well').children('#target1') &&
|
||||
$('#left-well').children('#target1').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
One `button` element should have the id `target2`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#left-well').children('#target2') &&
|
||||
$('#left-well').children('#target2').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
One `button` element should have the id `target3`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#left-well').children('#target3') &&
|
||||
$('#left-well').children('#target3').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
One `button` element should have the id `target4`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#right-well').children('#target4') &&
|
||||
$('#right-well').children('#target4').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
One `button` element should have the id `target5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#right-well').children('#target5') &&
|
||||
$('#right-well').children('#target5').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
One `button` element should have the id `target6`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#right-well').children('#target6') &&
|
||||
$('#right-well').children('#target6').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1"></button>
|
||||
<button class="btn btn-default target" id="target2"></button>
|
||||
<button class="btn btn-default target" id="target3"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4"></button>
|
||||
<button class="btn btn-default target" id="target5"></button>
|
||||
<button class="btn btn-default target" id="target6"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,53 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908746
|
||||
title: House our page within a Bootstrap container-fluid div
|
||||
challengeType: 0
|
||||
forumTopicId: 18198
|
||||
dashedName: house-our-page-within-a-bootstrap-container-fluid-div
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's make sure all the content on your page is mobile-responsive.
|
||||
|
||||
Let's nest your `h3` element within a `div` element with the class `container-fluid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element should have the class `container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('container-fluid'));
|
||||
```
|
||||
|
||||
Each of your `div` elements should have closing tags.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Your `h3` element should be nested inside a `div` element.
|
||||
|
||||
```js
|
||||
assert($('div').children('h3').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908856
|
||||
title: Label Bootstrap Buttons
|
||||
challengeType: 0
|
||||
forumTopicId: 18222
|
||||
dashedName: label-bootstrap-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Just like we labeled our wells, we want to label our buttons.
|
||||
|
||||
Give each of your `button` elements text that corresponds to its id selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `button` element with the id `target1` should have the text `#target1`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target1', 'gi').test($('#target1').text()));
|
||||
```
|
||||
|
||||
Your `button` element with the id `target2` should have the text `#target2`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target2', 'gi').test($('#target2').text()));
|
||||
```
|
||||
|
||||
Your `button` element with the id `target3` should have the text `#target3`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target3', 'gi').test($('#target3').text()));
|
||||
```
|
||||
|
||||
Your `button` element with the id `target4` should have the text `#target4`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target4', 'gi').test($('#target4').text()));
|
||||
```
|
||||
|
||||
Your `button` element with the id `target5` should have the text `#target5`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target5', 'gi').test($('#target5').text()));
|
||||
```
|
||||
|
||||
Your `button` element with the id `target6` should have the text `#target6`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target6', 'gi').test($('#target6').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1"></button>
|
||||
<button class="btn btn-default target" id="target2"></button>
|
||||
<button class="btn btn-default target" id="target3"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4"></button>
|
||||
<button class="btn btn-default target" id="target5"></button>
|
||||
<button class="btn btn-default target" id="target6"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,101 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908854
|
||||
title: Label Bootstrap Wells
|
||||
challengeType: 0
|
||||
forumTopicId: 18223
|
||||
dashedName: label-bootstrap-wells
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the sake of clarity, let's label both of our wells with their ids.
|
||||
|
||||
Above your left-well, inside its `col-xs-6` `div` element, add a `h4` element with the text `#left-well`.
|
||||
|
||||
Above your right-well, inside its `col-xs-6` `div` element, add a `h4` element with the text `#right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `h4` element to each of your `<div class="col-xs-6">` elements.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.col-xs-6').children('h4') && $('.col-xs-6').children('h4').length > 1
|
||||
);
|
||||
```
|
||||
|
||||
One `h4` element should have the text `#left-well`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#left-well', 'gi').test($('h4').text()));
|
||||
```
|
||||
|
||||
One `h4` element should have the text `#right-well`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#right-well', 'gi').test($('h4').text()));
|
||||
```
|
||||
|
||||
All of your `h4` elements should have closing tags.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h4>/g) &&
|
||||
code.match(/<h4/g) &&
|
||||
code.match(/<\/h4>/g).length === code.match(/<h4/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,214 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908845
|
||||
title: Line up Form Elements Responsively with Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18225
|
||||
required:
|
||||
- link: >-
|
||||
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
|
||||
raw: true
|
||||
dashedName: line-up-form-elements-responsively-with-bootstrap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's get your form `input` and your submission `button` on the same line. We'll do this the same way we have previously: by using a `div` element with the class `row`, and other `div` elements within it using the `col-xs-*` class.
|
||||
|
||||
Nest both your form's text `input` and submit `button` within a `div` with the class `row`. Nest your form's text `input` within a div with the class of `col-xs-7`. Nest your form's submit `button` in a `div` with the class `col-xs-5`.
|
||||
|
||||
This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!
|
||||
|
||||
# --hints--
|
||||
|
||||
Your form submission button and text input should be nested in a div with class `row`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div.row:has(input[type="text"])').length > 0 &&
|
||||
$('div.row:has(button[type="submit"])').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Your form text input should be nested in a div with the class `col-xs-7`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-7:has(input[type="text"])').length > 0);
|
||||
```
|
||||
|
||||
Your form submission button should be nested in a div with the class `col-xs-5`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-5:has(button[type="submit"])').length > 0);
|
||||
```
|
||||
|
||||
All of your `div` elements should have closing tags.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="cat photo URL" required>
|
||||
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-7">
|
||||
<input type="text" class="form-control" placeholder="cat photo URL" required>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08812
|
||||
title: Make Images Mobile Responsive
|
||||
challengeType: 0
|
||||
forumTopicId: 18232
|
||||
dashedName: make-images-mobile-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
First, add a new image below the existing one. Set its `src` attribute to `https://bit.ly/fcc-running-cats`.
|
||||
|
||||
It would be great if this image could be exactly the width of our phone's screen.
|
||||
|
||||
Fortunately, with Bootstrap, all we need to do is add the `img-responsive` class to your image. Do this, and the image should perfectly fit the width of your page.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a total of two images.
|
||||
|
||||
```js
|
||||
assert($('img').length === 2);
|
||||
```
|
||||
|
||||
Your new image should be below your old one and have the class `img-responsive`.
|
||||
|
||||
```js
|
||||
assert($('img:eq(1)').hasClass('img-responsive'));
|
||||
```
|
||||
|
||||
Your new image should not have the class `smaller-image`.
|
||||
|
||||
```js
|
||||
assert(!$('img:eq(1)').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Your new image should have a `src` of `https://bit.ly/fcc-running-cats`.
|
||||
|
||||
```js
|
||||
assert($('img:eq(1)').attr('src') === 'https://bit.ly/fcc-running-cats');
|
||||
```
|
||||
|
||||
Your new `img` element should have a closing angle bracket.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<img/g) &&
|
||||
code.match(/<img[^<]*>/g).length === 2 &&
|
||||
code.match(/<img/g).length === 2
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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">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>
|
||||
|
||||
<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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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">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">
|
||||
|
||||
<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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,191 @@
|
||||
---
|
||||
id: bad87fee1348bd9aeda08845
|
||||
title: Responsively Style Checkboxes
|
||||
challengeType: 0
|
||||
forumTopicId: 18269
|
||||
required:
|
||||
- link: >-
|
||||
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
|
||||
raw: true
|
||||
dashedName: responsively-style-checkboxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Since Bootstrap's `col-xs-*` classes are applicable to all `form` elements, you can use them on your checkboxes too! This way, the checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nest all three of your checkboxes in a `<div class="row">` element. Then nest each of them in a `<div class="col-xs-4">` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
All of your checkboxes should be nested inside one `div` with the class `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(input[type="checkbox"])').length > 0);
|
||||
```
|
||||
|
||||
Each of your checkboxes should be nested inside its own `div` with the class `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2);
|
||||
```
|
||||
|
||||
All of your `div` elements should have closing tags.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,175 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedb08845
|
||||
title: Responsively Style Radio Buttons
|
||||
challengeType: 0
|
||||
forumTopicId: 18270
|
||||
required:
|
||||
- link: >-
|
||||
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
|
||||
raw: true
|
||||
dashedName: responsively-style-radio-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can use Bootstrap's `col-xs-*` classes on `form` elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is.
|
||||
|
||||
Nest both your radio buttons within a `<div class="row">` element. Then nest each of them within a `<div class="col-xs-6">` element.
|
||||
|
||||
**Note:** As a reminder, radio buttons are `input` elements of type `radio`.
|
||||
|
||||
# --hints--
|
||||
|
||||
All of your radio buttons should be nested inside one `div` with the class `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(input[type="radio"])').length > 0);
|
||||
```
|
||||
|
||||
Each of your radio buttons should be nested inside its own `div` with the class `col-xs-6`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-6:has(input[type="radio"])').length > 1);
|
||||
```
|
||||
|
||||
All of your `div` elements should have closing tags.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908847
|
||||
title: Split Your Bootstrap Row
|
||||
challengeType: 0
|
||||
forumTopicId: 18306
|
||||
dashedName: split-your-bootstrap-row
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that we have a Bootstrap Row, let's split it into two columns to house our elements.
|
||||
|
||||
Create two `div` elements within your row, both with the class `col-xs-6`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Two `div class="col-xs-6"` elements should be nested within your `div class="row"` element.
|
||||
|
||||
```js
|
||||
assert($('div.row > div.col-xs-6').length > 1);
|
||||
```
|
||||
|
||||
All your `div` elements should have closing tags.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6"></div>
|
||||
<div class="col-xs-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,201 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed908845
|
||||
title: Style Text Inputs as Form Controls
|
||||
challengeType: 0
|
||||
forumTopicId: 18312
|
||||
required:
|
||||
- link: >-
|
||||
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
|
||||
raw: true
|
||||
dashedName: style-text-inputs-as-form-controls
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can add the `fa-paper-plane` Font Awesome icon by adding `<i class="fa fa-paper-plane"></i>` within your submit `button` element.
|
||||
|
||||
Give your form's text input field a class of `form-control`. Give your form's submit button the classes `btn btn-primary`. Also give this button the Font Awesome icon of `fa-paper-plane`.
|
||||
|
||||
All textual `<input>`, `<textarea>`, and `<select>` elements with the class `.form-control` have a width of 100%.
|
||||
|
||||
# --hints--
|
||||
|
||||
The submit button in your form should have the classes `btn btn-primary`.
|
||||
|
||||
```js
|
||||
assert($('button[type="submit"]').hasClass('btn btn-primary'));
|
||||
```
|
||||
|
||||
You should add a `<i class="fa fa-paper-plane"></i>` within your submit `button` element.
|
||||
|
||||
```js
|
||||
assert($('button[type="submit"]:has(i.fa.fa-paper-plane)').length > 0);
|
||||
```
|
||||
|
||||
The text `input` in your form should have the class `form-control`.
|
||||
|
||||
```js
|
||||
assert($('input[type="text"]').hasClass('form-control'));
|
||||
```
|
||||
|
||||
Each of your `i` elements should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="cat photo URL" required>
|
||||
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,167 @@
|
||||
---
|
||||
id: bad87fee1348cd8acef08811
|
||||
title: Taste the Bootstrap Button Color Rainbow
|
||||
challengeType: 0
|
||||
forumTopicId: 18323
|
||||
dashedName: taste-the-bootstrap-button-color-rainbow
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `btn-primary` class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.
|
||||
|
||||
Replace Bootstrap's `btn-default` class with `btn-primary` in your button.
|
||||
|
||||
Note that this button will still need the `btn` and `btn-block` classes.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your button should have the class `btn-primary`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-primary'));
|
||||
```
|
||||
|
||||
Your button should still have the `btn` and `btn-block` classes.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-block') && $('button').hasClass('btn'));
|
||||
```
|
||||
|
||||
All 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--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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.">
|
||||
<button class="btn btn-default btn-block">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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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.">
|
||||
<button class="btn btn-primary btn-block">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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,185 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08845
|
||||
title: Use a span to Target Inline Elements
|
||||
challengeType: 0
|
||||
forumTopicId: 18370
|
||||
dashedName: use-a-span-to-target-inline-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can use spans to create inline elements. Remember when we used the `btn-block` class to make the button fill the entire row?
|
||||
|
||||
<button class='btn' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>normal button</button>
|
||||
|
||||
<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>btn-block button</button>
|
||||
|
||||
That illustrates the difference between an "inline" element and a "block" element.
|
||||
|
||||
By using the inline `span` element, you can put several elements on the same line, and even style different parts of the same line differently.
|
||||
|
||||
Using a `span` element, nest the word `love` inside the `p` element that currently has the text `Things cats love`. Then give the `span` the class `text-danger` to make the text red.
|
||||
|
||||
Here's how you would do this for the `p` element that has the text `Top 3 things cats hate`:
|
||||
|
||||
```html
|
||||
<p>Top 3 things cats <span class="text-danger">hate:</span></p>
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `span` element should be inside your `p` element.
|
||||
|
||||
```js
|
||||
assert($('p span') && $('p span').length > 0);
|
||||
```
|
||||
|
||||
Your `span` element should have just the text `love`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p span') &&
|
||||
$('p span').text().match(/love/i) &&
|
||||
!$('p span')
|
||||
.text()
|
||||
.match(/Things cats/i)
|
||||
);
|
||||
```
|
||||
|
||||
Your `span` element should have class `text-danger`.
|
||||
|
||||
```js
|
||||
assert($('span').hasClass('text-danger'));
|
||||
```
|
||||
|
||||
Your `span` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/span>/g) &&
|
||||
code.match(/<span/g) &&
|
||||
code.match(/<\/span>/g).length === code.match(/<span/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
|
||||
<a href="#"><img class="img-responsive 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.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
|
||||
<a href="#"><img class="img-responsive 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.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love</span>:</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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,98 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908857
|
||||
title: Use Comments to Clarify Code
|
||||
challengeType: 0
|
||||
forumTopicId: 18347
|
||||
dashedName: use-comments-to-clarify-code
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When we start using jQuery, we will modify HTML elements without needing to actually change them in HTML.
|
||||
|
||||
Let's make sure that everyone knows they shouldn't actually modify any of this code directly.
|
||||
|
||||
Remember that you can start a comment with `<!--` and end a comment with `-->`
|
||||
|
||||
Add a comment at the top of your HTML that says `Code below this line should not be changed`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should start a comment with `<!--` at the top of your HTML.
|
||||
|
||||
```js
|
||||
assert(code.match(/^\s*<!--/));
|
||||
```
|
||||
|
||||
Your comment should have the text `Code below this line should not be changed`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
|
||||
```
|
||||
|
||||
You should close your comment with `-->`.
|
||||
|
||||
```js
|
||||
assert(code.match(/-->.*\n+.+/g));
|
||||
```
|
||||
|
||||
You should have the same number of comment openers and closers.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--/g).length === code.match(/-->/g).length);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!-- Code below this line should not be changed -->
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,170 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08712
|
||||
title: Use Responsive Design with Bootstrap Fluid Containers
|
||||
challengeType: 0
|
||||
forumTopicId: 18362
|
||||
dashedName: use-responsive-design-with-bootstrap-fluid-containers
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the HTML5 and CSS section of freeCodeCamp we built a Cat Photo App. Now let's go back to it. This time, we'll style it using the popular Bootstrap responsive CSS framework.
|
||||
|
||||
Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <dfn>responsive design</dfn>.
|
||||
|
||||
With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.
|
||||
|
||||
You can add Bootstrap to any app by adding the following code to the top of your HTML:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
|
||||
```
|
||||
|
||||
In this case, we've already added it for you to this page behind the scenes. Note that using either `>` or `/>` to close the `link` tag is acceptable.
|
||||
|
||||
To get started, we should nest all of our HTML (except the `link` tag and the `style` element) in a `div` element with the class `container-fluid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element should have the class `container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('container-fluid'));
|
||||
```
|
||||
|
||||
Your `div` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
All HTML elements after the closing `style` tag should be nested in `.container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('.container-fluid').children().length >= 8 && !$('.container-fluid').has("style").length && !$('.container-fluid').has("link").length);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
|
||||
<h2 class="red-text">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>
|
||||
|
||||
<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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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">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>
|
||||
|
||||
<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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,196 @@
|
||||
---
|
||||
id: bad88fee1348ce8acef08815
|
||||
title: Use the Bootstrap Grid to Put Elements Side By Side
|
||||
challengeType: 0
|
||||
forumTopicId: 18371
|
||||
dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap uses a responsive 12-column grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a `div` element.
|
||||
|
||||
Bootstrap has different column width attributes that it uses depending on how wide the user's screen is. For example, phones have narrow screens, and laptops have wider screens.
|
||||
|
||||
Take for example Bootstrap's `col-md-*` class. Here, `md` means medium, and `*` is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.
|
||||
|
||||
In the Cat Photo App that we're building, we'll use `col-xs-*`, where `xs` means extra small (like an extra-small mobile phone screen), and `*` is the number of columns specifying how many columns wide the element should be.
|
||||
|
||||
Put the `Like`, `Info` and `Delete` buttons side-by-side by nesting all three of them within one `<div class="row">` element, then each of them within a `<div class="col-xs-4">` element.
|
||||
|
||||
The `row` class is applied to a `div`, and the buttons themselves can be nested within it.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your buttons should all be nested within the same `div` element with the class `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(button)').length > 0);
|
||||
```
|
||||
|
||||
Each of your Bootstrap buttons should be nested within its own `div` element with the class `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-4:has(button)').length > 2);
|
||||
```
|
||||
|
||||
Each of your `button` elements should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Each of your `div` elements should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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.">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
<button class="btn btn-block btn-danger">Delete</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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: bad87fee1348ce8acef08814
|
||||
title: Warn Your Users of a Dangerous Action with btn-danger
|
||||
challengeType: 0
|
||||
forumTopicId: 18375
|
||||
dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap comes with several pre-defined colors for buttons. The `btn-danger` class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.
|
||||
|
||||
Create a button with the text `Delete` and give it the class `btn-danger`.
|
||||
|
||||
Note that these buttons still need the `btn` and `btn-block` classes.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `button` element with the text `Delete`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('Delete', 'gi').test($('button').text()));
|
||||
```
|
||||
|
||||
All of your Bootstrap buttons should have the `btn` and `btn-block` classes.
|
||||
|
||||
```js
|
||||
assert($('button.btn-block.btn').length > 2);
|
||||
```
|
||||
|
||||
Your new button should have the class `btn-danger`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-danger'));
|
||||
```
|
||||
|
||||
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--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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.">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
<button class="btn btn-block btn-info">Info</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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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.">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
<button class="btn btn-block btn-danger">Delete</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>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<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>
|
||||
```
|
||||
Reference in New Issue
Block a user