Feat: add new Markdown parser (#39800)
and change all the challenges to new `md` format.
This commit is contained in:
Oliver Eyton-Williams
committed by
GitHub
GitHub
parent
a07f84c8ec
commit
0bd52f8bd1
@ -6,40 +6,55 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
|
||||
forumTopicId: 16627
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Let's add a <code>submit</code> button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.
|
||||
# --description--
|
||||
|
||||
Let's add a `submit` button to your form. Clicking this button will send the data from your form to the URL you specified with your form's `action` attribute.
|
||||
|
||||
Here's an example submit button:
|
||||
<code><button type="submit">this button submits the form</button></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add a button as the last element of your <code>form</code> element with a type of <code>submit</code>, and "Submit" as its text.
|
||||
</section>
|
||||
`<button type="submit">this button submits the form</button>`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your form should have a button inside it.
|
||||
testString: assert($("form").children("button").length > 0);
|
||||
- text: Your submit button should have the attribute <code>type</code> set to <code>submit</code>.
|
||||
testString: assert($("button").attr("type") === "submit");
|
||||
- text: Your submit button should only have the text <code>Submit</code>.
|
||||
testString: assert($("button").text().match(/^\s*submit\s*$/gi));
|
||||
- text: Your <code>button</code> element should have a closing tag.
|
||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
||||
Add a button as the last element of your `form` element with a type of `submit`, and "Submit" as its text.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your form should have a button inside it.
|
||||
|
||||
```js
|
||||
assert($('form').children('button').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
Your submit button should have the attribute `type` set to `submit`.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert($('button').attr('type') === 'submit');
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Your submit button should only have the text `Submit`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('button')
|
||||
.text()
|
||||
.match(/^\s*submit\s*$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Your `button` element 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
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -66,11 +81,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -97,5 +108,3 @@ tests:
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,48 +6,67 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2'
|
||||
forumTopicId: 16640
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.
|
||||
# --description--
|
||||
|
||||
You can add images to your website by using the `img` element, and point to a specific image's URL using the `src` attribute.
|
||||
|
||||
An example of this would be:
|
||||
<code><img src="https://www.freecatphotoapp.com/your-image.jpg"></code>
|
||||
Note that <code>img</code> elements are self-closing.
|
||||
All <code>img</code> elements <strong>must</strong> have an <code>alt</code> attribute. The text inside an <code>alt</code> attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
|
||||
<strong>Note:</strong> If the image is purely decorative, using an empty <code>alt</code> attribute is a best practice.
|
||||
Ideally the <code>alt</code> attribute should not contain special characters unless needed.
|
||||
Let's add an <code>alt</code> attribute to our <code>img</code> example above:
|
||||
<code><img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie."></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg">`
|
||||
|
||||
Note that `img` elements are self-closing.
|
||||
|
||||
All `img` elements **must** have an `alt` attribute. The text inside an `alt` attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
|
||||
|
||||
**Note:** If the image is purely decorative, using an empty `alt` attribute is a best practice.
|
||||
|
||||
Ideally the `alt` attribute should not contain special characters unless needed.
|
||||
|
||||
Let's add an `alt` attribute to our `img` example above:
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Let's try to add an image to our website:
|
||||
Within the existing <code>main</code> element, insert an <code>img</code> element before the existing <code>p</code> elements.
|
||||
Now set the <code>src</code> attribute so that it points to this url:
|
||||
<code>https://bit.ly/fcc-relaxing-cat</code>
|
||||
Finally, don't forget to give your <code>img</code> element an <code>alt</code> attribute with applicable text.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
Within the existing `main` element, insert an `img` element before the existing `p` elements.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your page should have an image element.
|
||||
testString: assert($("img").length);
|
||||
- text: Your image should have a <code>src</code> attribute that points to the kitten image.
|
||||
testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src")));
|
||||
- text: Your image element's <code>alt</code> attribute should not be empty.
|
||||
testString: assert($("img").attr("alt") && $("img").attr("alt").length && /<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(__helpers.removeWhiteSpace(code)));
|
||||
Now set the `src` attribute so that it points to this url:
|
||||
|
||||
`https://bit.ly/fcc-relaxing-cat`
|
||||
|
||||
Finally, don't forget to give your `img` element an `alt` attribute with applicable text.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your page should have an image element.
|
||||
|
||||
```js
|
||||
assert($('img').length);
|
||||
```
|
||||
|
||||
</section>
|
||||
Your image should have a `src` attribute that points to the kitten image.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($('img').attr('src')));
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Your image element's `alt` attribute should not be empty.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').attr('alt') &&
|
||||
$('img').attr('alt').length &&
|
||||
/<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(
|
||||
__helpers.removeWhiteSpace(code)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -59,14 +78,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -76,5 +88,3 @@ tests:
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,40 +6,55 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
|
||||
forumTopicId: 16647
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Placeholder text is what is displayed in your <code>input</code> element before your user has inputted anything.
|
||||
# --description--
|
||||
|
||||
Placeholder text is what is displayed in your `input` element before your user has inputted anything.
|
||||
|
||||
You can create placeholder text like so:
|
||||
<code><input type="text" placeholder="this is placeholder text"></code><br>
|
||||
<strong>Note:</strong> Remember that <code>input</code> elements are self-closing.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Set the <code>placeholder</code> value of your text <code>input</code> to "cat photo URL".
|
||||
</section>
|
||||
`<input type="text" placeholder="this is placeholder text">`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
**Note:** Remember that `input` elements are self-closing.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should add a <code>placeholder</code> attribute to the existing text <code>input</code> element.
|
||||
testString: assert($("input[placeholder]").length > 0);
|
||||
- text: You should set the value of your placeholder attribute to <code>cat photo URL</code>.
|
||||
testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi));
|
||||
- text: The finished <code>input</code> element should not have a closing tag.
|
||||
testString: assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
||||
- text: The finished <code>input</code> element should have valid syntax.
|
||||
testString: assert($("input[type=text]").length > 0);
|
||||
# --instructions--
|
||||
|
||||
Set the `placeholder` value of your text `input` to "cat photo URL".
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `placeholder` attribute to the existing text `input` element.
|
||||
|
||||
```js
|
||||
assert($('input[placeholder]').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
You should set the value of your placeholder attribute to `cat photo URL`.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert(
|
||||
$('input') &&
|
||||
$('input').attr('placeholder') &&
|
||||
$('input')
|
||||
.attr('placeholder')
|
||||
.match(/cat\s+photo\s+URL/gi)
|
||||
);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
The finished `input` element should not have a closing tag.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
||||
```
|
||||
|
||||
The finished `input` element should have valid syntax.
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -64,14 +79,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -95,5 +103,3 @@ tests:
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,36 +6,35 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
|
||||
forumTopicId: 301094
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.
|
||||
# --description--
|
||||
|
||||
You can set a checkbox or radio button to be checked by default using the `checked` attribute.
|
||||
|
||||
To do this, just add the word "checked" to the inside of an input element. For example:
|
||||
<code><input type="radio" name="test-name" checked></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
`<input type="radio" name="test-name" checked>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Set the first of your radio buttons and the first of your checkboxes to both be checked by default.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your first radio button on your form should be checked by default.
|
||||
testString: assert($('input[type="radio"]').prop("checked"));
|
||||
- text: Your first checkbox on your form should be checked by default.
|
||||
testString: assert($('input[type="checkbox"]').prop("checked"));
|
||||
Your first radio button on your form should be checked by default.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').prop('checked'));
|
||||
```
|
||||
|
||||
</section>
|
||||
Your first checkbox on your form should be checked by default.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert($('input[type="checkbox"]').prop('checked'));
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -68,14 +67,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -107,5 +99,3 @@ tests:
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,41 +6,55 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
|
||||
forumTopicId: 16782
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Remember that in order to start a comment, you need to use <code><!--</code> and to end a comment, you need to use <code>--></code>
|
||||
Here you'll need to end the comment before your <code>h2</code> element begins.
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Comment out your <code>h1</code> element and your <code>p</code> element, but not your <code>h2</code> element.
|
||||
</section>
|
||||
Remember that in order to start a comment, you need to use `<!--` and to end a comment, you need to use `-->`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
Here you'll need to end the comment before your `h2` element begins.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>h1</code> element should be commented out so that it is not visible on the page.
|
||||
testString: assert(($("h1").length === 0));
|
||||
- text: Your <code>h2</code> element should not be commented out so that it is visible on the page.
|
||||
testString: assert(($("h2").length > 0));
|
||||
- text: Your <code>p</code> element should be commented out so that it is not visible on the page.
|
||||
testString: assert(($("p").length === 0));
|
||||
- text: Each of your comments should be closed with <code>--></code>.
|
||||
testString: assert(code.match(/[^fc]-->/g).length > 1);
|
||||
- text: You should not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.
|
||||
testString: assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") );
|
||||
# --instructions--
|
||||
|
||||
Comment out your `h1` element and your `p` element, but not your `h2` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should be commented out so that it is not visible on the page.
|
||||
|
||||
```js
|
||||
assert($('h1').length === 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
Your `h2` element should not be commented out so that it is visible on the page.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Your `p` element should be commented out so that it is not visible on the page.
|
||||
|
||||
```js
|
||||
assert($('p').length === 0);
|
||||
```
|
||||
|
||||
Each of your comments should be closed with `-->`.
|
||||
|
||||
```js
|
||||
assert(code.match(/[^fc]-->/g).length > 1);
|
||||
```
|
||||
|
||||
You should not change the order of the `h1` `h2` or `p` in the code.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[0] === '<h1>' &&
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[1] === '<h2>' &&
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[2] === '<p>'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!--
|
||||
@ -52,19 +66,10 @@ tests:
|
||||
-->
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!--<h1>Hello World</h1>-->
|
||||
<h2>CatPhotoApp</h2>
|
||||
<!--<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> -->
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
|
||||
forumTopicId: 16814
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
HTML has a special element for creating <dfn>unordered lists</dfn>, or bullet point style lists.
|
||||
Unordered lists start with an opening <code><ul></code> element, followed by any number of <code><li></code> elements. Finally, unordered lists close with a <code></ul></code>
|
||||
|
||||
Unordered lists start with an opening `<ul>` element, followed by any number of `<li>` elements. Finally, unordered lists close with a `</ul>`
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
@ -20,36 +22,54 @@ For example:
|
||||
```
|
||||
|
||||
would create a bullet point style list of "milk" and "cheese".
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Remove the last two <code>p</code> elements and create an unordered list of three things that cats love at the bottom of the page.
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
Remove the last two `p` elements and create an unordered list of three things that cats love at the bottom of the page.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Create a <code>ul</code> element.
|
||||
testString: assert($("ul").length > 0);
|
||||
- text: You should have three <code>li</code> elements within your <code>ul</code> element.
|
||||
testString: assert($("ul li").length > 2);
|
||||
- text: Your <code>ul</code> element should have a closing tag.
|
||||
testString: assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length);
|
||||
- text: Your <code>li</code> elements should have closing tags.
|
||||
testString: assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length);
|
||||
- text: Your <code>li</code> elements should not contain an empty string or only white-space.
|
||||
testString: assert($("ul li").filter((_, item) => !$(item).text().trim()).length === 0);
|
||||
# --hints--
|
||||
|
||||
Create a `ul` element.
|
||||
|
||||
```js
|
||||
assert($('ul').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
You should have three `li` elements within your `ul` element.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert($('ul li').length > 2);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Your `ul` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/gi) &&
|
||||
code.match(/<ul/gi) &&
|
||||
code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
Your `li` elements should have closing tags.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/gi) &&
|
||||
code.match(/<li[\s>]/gi) &&
|
||||
code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
Your `li` elements should not contain an empty string or only white-space.
|
||||
|
||||
```js
|
||||
assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -63,14 +83,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -86,5 +99,3 @@ tests:
|
||||
</ul>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -5,40 +5,51 @@ challengeType: 0
|
||||
forumTopicId: 16817
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.
|
||||
# --description--
|
||||
|
||||
You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your `form` element.
|
||||
|
||||
For example:
|
||||
<code><form action="/url-where-you-want-to-submit-form-data"></form></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
`<form action="/url-where-you-want-to-submit-form-data"></form>`
|
||||
|
||||
Nest the existing input element inside a <code>form</code> element and assign `"https://freecatphotoapp.com/submit-cat-photo"` to the <code>action</code> attribute of the <code>form</code> element.
|
||||
# --instructions--
|
||||
|
||||
</section>
|
||||
Nest the existing input element inside a `form` element and assign `"https://freecatphotoapp.com/submit-cat-photo"` to the `action` attribute of the `form` element.
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: The existing <code>input</code> element should be nested within a <code>form</code> element.
|
||||
testString: const inputElem = document.querySelector('form input'); assert(inputElem.getAttribute('type') === 'text' && inputElem.getAttribute('placeholder') === 'cat photo URL');
|
||||
- text: Your <code>form</code> should have an <code>action</code> attribute which is set to <code>https://freecatphotoapp.com/submit-cat-photo</code>
|
||||
testString: assert($("form").attr("action") === "https://freecatphotoapp.com/submit-cat-photo");
|
||||
- text: Your <code>form</code> element should have well-formed open and close tags.
|
||||
testString: assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length);
|
||||
The existing `input` element should be nested within a `form` element.
|
||||
|
||||
```js
|
||||
const inputElem = document.querySelector('form input');
|
||||
assert(
|
||||
inputElem.getAttribute('type') === 'text' &&
|
||||
inputElem.getAttribute('placeholder') === 'cat photo URL'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
Your `form` should have an `action` attribute which is set to `https://freecatphotoapp.com/submit-cat-photo`
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert(
|
||||
$('form').attr('action') === 'https://freecatphotoapp.com/submit-cat-photo'
|
||||
);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Your `form` element should have well-formed open and close tags.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/form>/g) &&
|
||||
code.match(/<form [^<]*>/g) &&
|
||||
code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -63,14 +74,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -96,5 +100,3 @@ tests:
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,46 +6,67 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
|
||||
forumTopicId: 16821
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Forms commonly use <dfn>checkboxes</dfn> for questions that may have more than one answer.
|
||||
Checkboxes are a type of <code>input</code>.
|
||||
Each of your checkboxes can be nested within its own <code>label</code> element. By wrapping an <code>input</code> element inside of a <code>label</code> element it will automatically associate the checkbox input with the label element surrounding it.
|
||||
All related checkbox inputs should have the same <code>name</code> attribute.
|
||||
It is considered best practice to explicitly define the relationship between a checkbox <code>input</code> and its corresponding <code>label</code> by setting the <code>for</code> attribute on the <code>label</code> element to match the <code>id</code> attribute of the associated <code>input</code> element.
|
||||
|
||||
Checkboxes are a type of `input`.
|
||||
|
||||
Each of your checkboxes can be nested within its own `label` element. By wrapping an `input` element inside of a `label` element it will automatically associate the checkbox input with the label element surrounding it.
|
||||
|
||||
All related checkbox inputs should have the same `name` attribute.
|
||||
|
||||
It is considered best practice to explicitly define the relationship between a checkbox `input` and its corresponding `label` by setting the `for` attribute on the `label` element to match the `id` attribute of the associated `input` element.
|
||||
|
||||
Here's an example of a checkbox:
|
||||
<code><label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of <code>personality</code>.
|
||||
</section>
|
||||
`<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your page should have three checkbox elements.
|
||||
testString: assert($('input[type="checkbox"]').length > 2);
|
||||
- text: Each of your three checkbox elements should be nested in its own <code>label</code> element.
|
||||
testString: assert($('label > input[type="checkbox"]:only-child').length > 2);
|
||||
- text: Make sure each of your <code>label</code> elements has a closing tag.
|
||||
testString: assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length);
|
||||
- text: Your checkboxes should be given the <code>name</code> attribute of <code>personality</code>.
|
||||
testString: assert($('label > input[type="checkbox"]').filter('[name="personality"]').length > 2);
|
||||
- text: Each of your checkboxes should be added within the <code>form</code> tag.
|
||||
testString: assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
|
||||
Add to your form a set of three checkboxes. Each checkbox should be nested within its own `label` element. All three should share the `name` attribute of `personality`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your page should have three checkbox elements.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').length > 2);
|
||||
```
|
||||
|
||||
</section>
|
||||
Each of your three checkbox elements should be nested in its own `label` element.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert($('label > input[type="checkbox"]:only-child').length > 2);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Make sure each of your `label` elements has a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Your checkboxes should be given the `name` attribute of `personality`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
|
||||
);
|
||||
```
|
||||
|
||||
Each of your checkboxes should be added within the `form` tag.
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -75,14 +96,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -116,5 +130,3 @@ name="personality">Evil</label><br>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -5,12 +5,16 @@ challengeType: 0
|
||||
forumTopicId: 16822
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
You can use <dfn>radio buttons</dfn> for questions where you want the user to only give you one answer out of multiple options.
|
||||
Radio buttons are a type of <code>input</code>.
|
||||
Each of your radio buttons can be nested within its own <code>label</code> element. By wrapping an <code>input</code> element inside of a <code>label</code> element it will automatically associate the radio button input with the label element surrounding it.
|
||||
All related radio buttons should have the same <code>name</code> attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
|
||||
|
||||
Radio buttons are a type of `input`.
|
||||
|
||||
Each of your radio buttons can be nested within its own `label` element. By wrapping an `input` element inside of a `label` element it will automatically associate the radio button input with the label element surrounding it.
|
||||
|
||||
All related radio buttons should have the same `name` attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
|
||||
|
||||
Here's an example of a radio button:
|
||||
|
||||
```html
|
||||
@ -19,7 +23,7 @@ Here's an example of a radio button:
|
||||
</label>
|
||||
```
|
||||
|
||||
It is considered best practice to set a <code>for</code> attribute on the <code>label</code> element, with a value that matches the value of the <code>id</code> attribute of the <code>input</code> element. This allows assistive technologies to create a linked relationship between the label and the child <code>input</code> element. For example:
|
||||
It is considered best practice to set a `for` attribute on the `label` element, with a value that matches the value of the `id` attribute of the `input` element. This allows assistive technologies to create a linked relationship between the label and the child `input` element. For example:
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
@ -27,41 +31,69 @@ It is considered best practice to set a <code>for</code> attribute on the <code>
|
||||
</label>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add a pair of radio buttons to your form, each nested in its own <code>label</code> element. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>. Both should share the <code>name</code> attribute of <code>indoor-outdoor</code> to create a radio group.
|
||||
</section>
|
||||
Add a pair of radio buttons to your form, each nested in its own `label` element. One should have the option of `indoor` and the other should have the option of `outdoor`. Both should share the `name` attribute of `indoor-outdoor` to create a radio group.
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your page should have two radio button elements.
|
||||
testString: assert($('input[type="radio"]').length > 1);
|
||||
- text: Your radio buttons should be given the <code>name</code> attribute of <code>indoor-outdoor</code>.
|
||||
testString: assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
- text: Each of your two radio button elements should be nested in its own <code>label</code> element.
|
||||
testString: assert($('label > input[type="radio"]:only-child').length > 1);
|
||||
- text: Each of your <code>label</code> elements should have a closing tag.
|
||||
testString: assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length));
|
||||
- text: One of your radio buttons should have the label <code>indoor</code>.
|
||||
testString: assert($("label").text().match(/indoor/gi));
|
||||
- text: One of your radio buttons should have the label <code>outdoor</code>.
|
||||
testString: assert($("label").text().match(/outdoor/gi));
|
||||
- text: Each of your radio button elements should be added within the <code>form</code> tag.
|
||||
testString: assert($("label").parent().get(0).tagName.match('FORM'));
|
||||
Your page should have two radio button elements.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').length > 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
Your radio buttons should be given the `name` attribute of `indoor-outdoor`.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Each of your two radio button elements should be nested in its own `label` element.
|
||||
|
||||
```js
|
||||
assert($('label > input[type="radio"]:only-child').length > 1);
|
||||
```
|
||||
|
||||
Each of your `label` elements should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
One of your radio buttons should have the label `indoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/indoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
One of your radio buttons should have the label `outdoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/outdoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Each of your radio button elements should be added within the `form` tag.
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -89,14 +121,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -125,5 +150,3 @@ tests:
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,36 +6,33 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
|
||||
forumTopicId: 16823
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Now let's create a web form.
|
||||
<code>input</code> elements are a convenient way to get input from your user.
|
||||
|
||||
`input` elements are a convenient way to get input from your user.
|
||||
|
||||
You can create a text input like this:
|
||||
<code><input type="text"></code>
|
||||
Note that <code>input</code> elements are self-closing.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create an <code>input</code> element of type <code>text</code> below your lists.
|
||||
</section>
|
||||
`<input type="text">`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
Note that `input` elements are self-closing.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your app should have an <code>input</code> element of type <code>text</code>.
|
||||
testString: assert($("input[type=text]").length > 0);
|
||||
# --instructions--
|
||||
|
||||
Create an `input` element of type `text` below your lists.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your app should have an `input` element of type `text`.
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -61,14 +58,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -90,9 +80,7 @@ tests:
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form>
|
||||
<input type="text">
|
||||
<input type="text">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
|
||||
forumTopicId: 16824
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
HTML has another special element for creating <dfn>ordered lists</dfn>, or numbered lists.
|
||||
Ordered lists start with an opening <code><ol></code> element, followed by any number of <code><li></code> elements. Finally, ordered lists are closed with the <code></ol></code> tag.
|
||||
|
||||
Ordered lists start with an opening `<ol>` element, followed by any number of `<li>` elements. Finally, ordered lists are closed with the `</ol>` tag.
|
||||
|
||||
For example:
|
||||
|
||||
@ -21,49 +22,96 @@ For example:
|
||||
```
|
||||
|
||||
would create a numbered list of "Garfield" and "Sylvester".
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
# --instructions--
|
||||
|
||||
Create an ordered list of the top 3 things cats hate the most.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should have an ordered list for <code>Top 3 things cats hate:</code>
|
||||
testString: assert((/Top 3 things cats hate:/i).test($("ol").prev().text()));
|
||||
- text: You should have an unordered list for <code>Things cats love:</code>
|
||||
testString: assert((/Things cats love:/i).test($("ul").prev().text()));
|
||||
- text: You should have only one <code>ul</code> element.
|
||||
testString: assert.equal($("ul").length, 1);
|
||||
- text: You should have only one <code>ol</code> element.
|
||||
testString: assert.equal($("ol").length, 1);
|
||||
- text: You should have three <code>li</code> elements within your <code>ul</code> element.
|
||||
testString: assert.equal($("ul li").length, 3);
|
||||
- text: You should have three <code>li</code> elements within your <code>ol</code> element.
|
||||
testString: assert.equal($("ol li").length, 3);
|
||||
- text: Your <code>ul</code> element should have a closing tag.
|
||||
testString: assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length);
|
||||
- text: Your <code>ol</code> element should have a closing tag.
|
||||
testString: assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length);
|
||||
- text: Your <code>li</code> element should have a closing tag.
|
||||
testString: assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length);
|
||||
- text: The <code>li</code> elements in your unordered list should not be empty.
|
||||
testString: $('ul li').each((i, val) => assert(__helpers.removeWhiteSpace(val.textContent)));
|
||||
- text: The <code>li</code> elements in your ordered list should not be empty.
|
||||
testString: $('ol li').each((i, val) => assert(!!__helpers.removeWhiteSpace(val.textContent)));
|
||||
You should have an ordered list for `Top 3 things cats hate:`
|
||||
|
||||
```js
|
||||
assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
|
||||
```
|
||||
|
||||
</section>
|
||||
You should have an unordered list for `Things cats love:`
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert(/Things cats love:/i.test($('ul').prev().text()));
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
You should have only one `ul` element.
|
||||
|
||||
```js
|
||||
assert.equal($('ul').length, 1);
|
||||
```
|
||||
|
||||
You should have only one `ol` element.
|
||||
|
||||
```js
|
||||
assert.equal($('ol').length, 1);
|
||||
```
|
||||
|
||||
You should have three `li` elements within your `ul` element.
|
||||
|
||||
```js
|
||||
assert.equal($('ul li').length, 3);
|
||||
```
|
||||
|
||||
You should have three `li` elements within your `ol` element.
|
||||
|
||||
```js
|
||||
assert.equal($('ol li').length, 3);
|
||||
```
|
||||
|
||||
Your `ul` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/g) &&
|
||||
code.match(/<\/ul>/g).length === code.match(/<ul>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Your `ol` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ol>/g) &&
|
||||
code.match(/<\/ol>/g).length === code.match(/<ol>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Your `li` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/g) &&
|
||||
code.match(/<li>/g) &&
|
||||
code.match(/<\/li>/g).length === code.match(/<li>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
The `li` elements in your unordered list should not be empty.
|
||||
|
||||
```js
|
||||
$('ul li').each((i, val) =>
|
||||
assert(__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
The `li` elements in your ordered list should not be empty.
|
||||
|
||||
```js
|
||||
$('ol li').each((i, val) =>
|
||||
assert(!!__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -83,14 +131,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -113,5 +154,3 @@ tests:
|
||||
</ol>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,13 +6,18 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
|
||||
forumTopicId: 301095
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The challenges so far have covered specific HTML elements and their uses. However, there are a few elements that give overall structure to your page, and should be included in every HTML document.
|
||||
|
||||
At the top of your document, you need to tell the browser which version of HTML your page is using. HTML is an evolving language, and is updated regularly. Most major browsers support the latest specification, which is HTML5. However, older web pages may use previous versions of the language.
|
||||
You tell the browser this information by adding the <code><!DOCTYPE ...></code> tag on the first line, where the <code>...</code> part is the version of HTML. For HTML5, you use <code><!DOCTYPE html></code>.
|
||||
The <code>!</code> and uppercase <code>DOCTYPE</code> is important, especially for older browsers. The <code>html</code> is not case sensitive.
|
||||
Next, the rest of your HTML code needs to be wrapped in <code>html</code> tags. The opening <code><html></code> goes directly below the <code><!DOCTYPE html></code> line, and the closing <code></html></code> goes at the end of the page.
|
||||
|
||||
You tell the browser this information by adding the `<!DOCTYPE ...>` tag on the first line, where the `...` part is the version of HTML. For HTML5, you use `<!DOCTYPE html>`.
|
||||
|
||||
The `!` and uppercase `DOCTYPE` is important, especially for older browsers. The `html` is not case sensitive.
|
||||
|
||||
Next, the rest of your HTML code needs to be wrapped in `html` tags. The opening `<html>` goes directly below the `<!DOCTYPE html>` line, and the closing `</html>` goes at the end of the page.
|
||||
|
||||
Here's an example of the page structure:
|
||||
|
||||
```html
|
||||
@ -22,54 +27,42 @@ Here's an example of the page structure:
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add a <code>DOCTYPE</code> tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing <code>html</code> tags, which wrap around an <code>h1</code> element. The heading can include any text.
|
||||
</section>
|
||||
Add a `DOCTYPE` tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing `html` tags, which wrap around an `h1` element. The heading can include any text.
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your code should include a <code><!DOCTYPE html></code> tag.
|
||||
testString: assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
|
||||
- text: There should be one <code>html</code> element.
|
||||
testString: assert($('html').length == 1);
|
||||
- text: The <code>html</code> tags should wrap around one <code>h1</code> element.
|
||||
testString: assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
|
||||
Your code should include a `<!DOCTYPE html>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
There should be one `html` element.
|
||||
|
||||
```js
|
||||
assert($('html').length == 1);
|
||||
```
|
||||
|
||||
</div>
|
||||
The `html` tags should wrap around one `h1` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<h1> Hello world </h1>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
|
||||
forumTopicId: 301096
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can add another level of organization in your HTML document within the <code>html</code> tags with the <code>head</code> and <code>body</code> elements. Any markup with information about your page would go into the <code>head</code> tag. Then any markup with the content of the page (what displays for a user) would go into the <code>body</code> tag.
|
||||
Metadata elements, such as <code>link</code>, <code>meta</code>, <code>title</code>, and <code>style</code>, typically go inside the <code>head</code> element.
|
||||
# --description--
|
||||
|
||||
You can add another level of organization in your HTML document within the `html` tags with the `head` and `body` elements. Any markup with information about your page would go into the `head` tag. Then any markup with the content of the page (what displays for a user) would go into the `body` tag.
|
||||
|
||||
Metadata elements, such as `link`, `meta`, `title`, and `style`, typically go inside the `head` element.
|
||||
|
||||
Here's an example of a page's layout:
|
||||
|
||||
```html
|
||||
@ -24,75 +26,90 @@ Here's an example of a page's layout:
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Edit the markup so there's a <code>head</code> and a <code>body</code>. The <code>head</code> element should only include the <code>title</code>, and the <code>body</code> element should only include the <code>h1</code> and <code>p</code>.
|
||||
</section>
|
||||
Edit the markup so there's a `head` and a `body`. The `head` element should only include the `title`, and the `body` element should only include the `h1` and `p`.
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: There should be only one <code>head</code> element on the page.
|
||||
testString: |
|
||||
const headElems = code.replace(/\n/g,'').match(/\<head\s*>.*?\<\/head\s*>/g);
|
||||
assert(headElems && headElems.length === 1);
|
||||
- text: There should be only one <code>body</code> element on the page.
|
||||
testString: |
|
||||
const bodyElems = code.replace(/\n/g,'').match(/<body\s*>.*?<\/body\s*>/g);
|
||||
assert(bodyElems && bodyElems.length === 1);
|
||||
- text: The <code>head</code> element should be a child of the <code>html</code> element.
|
||||
testString: |
|
||||
const htmlChildren = code.replace(/\n/g,'').match(/<html\s*>(?<children>.*)<\/html\s*>/);
|
||||
let foundHead;
|
||||
if(htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
There should be only one `head` element on the page.
|
||||
|
||||
foundHead = children.match(/<head\s*>.*<\/head\s*>/);
|
||||
}
|
||||
assert(foundHead);
|
||||
- text: The <code>body</code> element should be a child of the <code>html</code> element.
|
||||
testString: |
|
||||
const htmlChildren = code.replace(/\n/g,'').match(/<html\s*>(?<children>.*?)<\/html\s*>/);
|
||||
let foundBody;
|
||||
if(htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
foundBody = children.match(/<body\s*>.*<\/body\s*>/);
|
||||
}
|
||||
assert(foundBody);
|
||||
- text: The <code>head</code> element should wrap around the <code>title</code> element.
|
||||
testString: |
|
||||
const headChildren = code.replace(/\n/g,'').match(/<head\s*>(?<children>.*?)<\/head\s*>/);
|
||||
let foundTitle;
|
||||
if(headChildren) {
|
||||
const { children } = headChildren.groups;
|
||||
foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
|
||||
}
|
||||
assert(foundTitle);
|
||||
- text: The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.
|
||||
testString: |
|
||||
const bodyChildren = code.replace(/\n/g,'').match(/<body\s*>(?<children>.*?)<\/body\s*>/);
|
||||
let foundElems;
|
||||
if(bodyChildren) {
|
||||
const { children } = bodyChildren.groups;
|
||||
const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
|
||||
const ps = children.match(/<p\s*>.*<\/p\s*>/g);
|
||||
const numH1s = h1s ? h1s.length : 0;
|
||||
const numPs = ps ? ps.length : 0;
|
||||
foundElems = numH1s === 1 && numPs === 1;
|
||||
}
|
||||
assert(foundElems);
|
||||
```js
|
||||
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
|
||||
assert(headElems && headElems.length === 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
There should be only one `body` element on the page.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
|
||||
assert(bodyElems && bodyElems.length === 1);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
The `head` element should be a child of the `html` element.
|
||||
|
||||
```js
|
||||
const htmlChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<html\s*>(?<children>.*)<\/html\s*>/);
|
||||
let foundHead;
|
||||
if (htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
|
||||
foundHead = children.match(/<head\s*>.*<\/head\s*>/);
|
||||
}
|
||||
assert(foundHead);
|
||||
```
|
||||
|
||||
The `body` element should be a child of the `html` element.
|
||||
|
||||
```js
|
||||
const htmlChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<html\s*>(?<children>.*?)<\/html\s*>/);
|
||||
let foundBody;
|
||||
if (htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
foundBody = children.match(/<body\s*>.*<\/body\s*>/);
|
||||
}
|
||||
assert(foundBody);
|
||||
```
|
||||
|
||||
The `head` element should wrap around the `title` element.
|
||||
|
||||
```js
|
||||
const headChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<head\s*>(?<children>.*?)<\/head\s*>/);
|
||||
let foundTitle;
|
||||
if (headChildren) {
|
||||
const { children } = headChildren.groups;
|
||||
foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
|
||||
}
|
||||
assert(foundTitle);
|
||||
```
|
||||
|
||||
The `body` element should wrap around both the `h1` and `p` elements.
|
||||
|
||||
```js
|
||||
const bodyChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<body\s*>(?<children>.*?)<\/body\s*>/);
|
||||
let foundElems;
|
||||
if (bodyChildren) {
|
||||
const { children } = bodyChildren.groups;
|
||||
const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
|
||||
const ps = children.match(/<p\s*>.*<\/p\s*>/g);
|
||||
const numH1s = h1s ? h1s.length : 0;
|
||||
const numPs = ps ? ps.length : 0;
|
||||
foundElems = numH1s === 1 && numPs === 1;
|
||||
}
|
||||
assert(foundElems);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -105,17 +122,9 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@ -127,5 +136,3 @@ tests:
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,37 +6,39 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/ckK73C9'
|
||||
forumTopicId: 17559
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Our phone doesn't have much vertical space.
|
||||
|
||||
Let's remove the unnecessary elements so we can start building our CatPhotoApp.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Delete your <code>h1</code> element so we can simplify our view.
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
Delete your `h1` element so we can simplify our view.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>h1</code> element should be deleted.
|
||||
testString: assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
|
||||
- text: Your <code>h2</code> element should be on the page.
|
||||
testString: assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
|
||||
- text: Your <code>p</code> element should be on the page.
|
||||
testString: assert(code.match(/<p>[\w\W]*<\/p>/gi));
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should be deleted.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
Your `h2` element should be on the page.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Your `p` element should be on the page.
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>[\w\W]*<\/p>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
@ -46,18 +48,8 @@ tests:
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,34 +6,29 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cgR7Dc7'
|
||||
forumTopicId: 18178
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Web developers traditionally use <dfn>lorem ipsum text</dfn> as placeholder text. The lorem ipsum text is randomly scraped from a famous passage by Cicero of Ancient Rome.
|
||||
|
||||
Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.
|
||||
|
||||
Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called "kitty ipsum text".
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Replace the text inside your <code>p</code> element with the first few words of this kitty ipsum text: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
Replace the text inside your `p` element with the first few words of this kitty ipsum text: `Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.`
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.
|
||||
testString: assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()));
|
||||
# --hints--
|
||||
|
||||
Your `p` element should contain the first few words of the provided `kitty ipsum text`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
@ -43,14 +38,7 @@ tests:
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
@ -59,5 +47,3 @@ tests:
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,62 +6,64 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
|
||||
forumTopicId: 18196
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Over the next few lessons, we'll build an HTML5 cat photo web app piece-by-piece.
|
||||
The <code>h2</code> element you will be adding in this step will add a level two heading to the web page.
|
||||
This element tells the browser about the structure of your website. <code>h1</code> elements are often used for main headings, while <code>h2</code> elements are generally used for subheadings. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements to indicate different levels of subheadings.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add an <code>h2</code> tag that says "CatPhotoApp" to create a second HTML element below your "Hello World" <code>h1</code> element.
|
||||
</section>
|
||||
The `h2` element you will be adding in this step will add a level two heading to the web page.
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
This element tells the browser about the structure of your website. `h1` elements are often used for main headings, while `h2` elements are generally used for subheadings. There are also `h3`, `h4`, `h5` and `h6` elements to indicate different levels of subheadings.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should create an <code>h2</code> element.
|
||||
testString: assert(($("h2").length > 0));
|
||||
- text: Your <code>h2</code> element should have a closing tag.
|
||||
testString: assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length);
|
||||
- text: Your <code>h2</code> element should have the text <code>CatPhotoApp</code>.
|
||||
testString: assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()));
|
||||
- text: Your <code>h1</code> element should have the text <code>Hello World</code>.
|
||||
testString: assert.isTrue((/hello(\s)+world/gi).test($("h1").text()));
|
||||
- text: Your <code>h1</code> element should be before your <code>h2</code> element.
|
||||
testString: assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
|
||||
# --instructions--
|
||||
|
||||
Add an `h2` tag that says "CatPhotoApp" to create a second HTML element below your "Hello World" `h1` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `h2` element.
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
Your `h2` element should have a closing tag.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h2>/g) &&
|
||||
code.match(/<\/h2>/g).length === code.match(/<h2>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Your `h2` element should have the text `CatPhotoApp`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
|
||||
```
|
||||
|
||||
Your `h1` element should have the text `Hello World`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
Your `h1` element should be before your `h2` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@ -6,58 +6,56 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/ceZ7DtN'
|
||||
forumTopicId: 18202
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>p</code> elements are the preferred element for paragraph text on websites. <code>p</code> is short for "paragraph".
|
||||
# --description--
|
||||
|
||||
`p` elements are the preferred element for paragraph text on websites. `p` is short for "paragraph".
|
||||
|
||||
You can create a paragraph element like this:
|
||||
<code><p>I'm a p tag!</p></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a <code>p</code> element below your <code>h2</code> element, and give it the text "Hello Paragraph".
|
||||
<strong>Note:</strong> As a convention, all HTML tags are written in lowercase, for example <code><p></p></code> and not <code><P></P></code>.
|
||||
</section>
|
||||
`<p>I'm a p tag!</p>`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your code should have a valid <code>p</code> element.
|
||||
testString: assert(($("p").length > 0));
|
||||
- text: Your <code>p</code> element should have the text <code>Hello Paragraph</code>.
|
||||
testString: assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()));
|
||||
- text: Your <code>p</code> element should have a closing tag.
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
|
||||
Create a `p` element below your `h2` element, and give it the text "Hello Paragraph".
|
||||
|
||||
**Note:** As a convention, all HTML tags are written in lowercase, for example `<p></p>` and not `<P></P>`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a valid `p` element.
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
Your `p` element should have the text `Hello Paragraph`.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Your `p` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,11 +6,13 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
|
||||
forumTopicId: 301097
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML5 introduces more descriptive HTML tags. These include <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>video</code>, <code>article</code>, <code>section</code> and others.
|
||||
These tags give a descriptive structure to your HTML, make your HTML easier to read, and help with Search Engine Optimization (SEO) and accessibility. The <code>main</code> HTML5 tag helps search engines and other developers find the main content of your page.
|
||||
Example usage, a <code>main</code> element with two child elements nested inside it:
|
||||
# --description--
|
||||
|
||||
HTML5 introduces more descriptive HTML tags. These include `main`, `header`, `footer`, `nav`, `video`, `article`, `section` and others.
|
||||
|
||||
These tags give a descriptive structure to your HTML, make your HTML easier to read, and help with Search Engine Optimization (SEO) and accessibility. The `main` HTML5 tag helps search engines and other developers find the main content of your page.
|
||||
|
||||
Example usage, a `main` element with two child elements nested inside it:
|
||||
|
||||
```html
|
||||
<main>
|
||||
@ -19,43 +21,64 @@ Example usage, a <code>main</code> element with two child elements nested inside
|
||||
</main>
|
||||
```
|
||||
|
||||
<strong>Note:</strong> Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
|
||||
</section>
|
||||
**Note:** Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a second <code>p</code> element after the existing <code>p</code> element with the following kitty ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>
|
||||
Then, create a <code>main</code> element and nest the two <code>p</code> elements inside the <code>main</code> element.
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
Create a second `p` element after the existing `p` element with the following kitty ipsum text: `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should have 2 <code>p</code> elements with Kitty Ipsum text.
|
||||
testString: assert($("p").length > 1);
|
||||
- text: Each of your <code>p</code> elements should have a closing tag.
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
|
||||
- text: Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.
|
||||
testString: assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()));
|
||||
- text: Your code should have one <code>main</code> element.
|
||||
testString: assert($('main').length === 1);
|
||||
- text: The <code>main</code> element should have two paragraph elements as children.
|
||||
testString: assert($("main").children("p").length === 2);
|
||||
- text: The opening <code>main</code> tag should come before the first paragraph tag.
|
||||
testString: assert(code.match(/<main>\s*?<p>/g));
|
||||
- text: The closing <code>main</code> tag should come after the second closing paragraph tag.
|
||||
testString: assert(code.match(/<\/p>\s*?<\/main>/g));
|
||||
Then, create a `main` element and nest the two `p` elements inside the `main` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have 2 `p` elements with Kitty Ipsum text.
|
||||
|
||||
```js
|
||||
assert($('p').length > 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
Each of your `p` elements should have a closing tag.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Your `p` element should contain the first few words of the provided additional `kitty ipsum text`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
Your code should have one `main` element.
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
The `main` element should have two paragraph elements as children.
|
||||
|
||||
```js
|
||||
assert($('main').children('p').length === 2);
|
||||
```
|
||||
|
||||
The opening `main` tag should come before the first paragraph tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>\s*?<p>/g));
|
||||
```
|
||||
|
||||
The closing `main` tag should come after the second closing paragraph tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p>\s*?<\/main>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -63,14 +86,7 @@ tests:
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -79,5 +95,3 @@ tests:
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,39 +6,46 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
|
||||
forumTopicId: 18226
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can use <code>a</code> (<i>anchor</i>) elements to link to content outside of your web page.
|
||||
<code>a</code> elements need a destination web address called an <code>href</code> attribute. They also need anchor text. Here's an example:
|
||||
<code><a href="https://freecodecamp.org">this links to freecodecamp.org</a></code>
|
||||
Then your browser will display the text <strong>"this links to freecodecamp.org"</strong> as a link you can click. And that link will take you to the web address <strong>https://www.freecodecamp.org</strong>.
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create an <code>a</code> element that links to <code>https://freecatphotoapp.com</code> and has "cat photos" as its anchor text.
|
||||
</section>
|
||||
You can use `a` (*anchor*) elements to link to content outside of your web page.
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`a` elements need a destination web address called an `href` attribute. They also need anchor text. Here's an example:
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>a</code> element should have the anchor text of "cat photos".
|
||||
testString: assert((/cat photos/gi).test($("a").text()));
|
||||
- text: You need an <code>a</code> element that links to <code>https://freecatphotoapp.com</code>
|
||||
testString: assert(/https:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")));
|
||||
- text: Your <code>a</code> element should have a closing tag.
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
|
||||
`<a href="https://freecodecamp.org">this links to freecodecamp.org</a>`
|
||||
|
||||
Then your browser will display the text **"this links to freecodecamp.org"** as a link you can click. And that link will take you to the web address **`https://www.freecodecamp.org`**.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create an `a` element that links to `https://freecatphotoapp.com` and has "cat photos" as its anchor text.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `a` element should have the anchor text of "cat photos".
|
||||
|
||||
```js
|
||||
assert(/cat photos/gi.test($('a').text()));
|
||||
```
|
||||
|
||||
</section>
|
||||
You need an `a` element that links to `https://freecatphotoapp.com`
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert(/https:\/\/(www\.)?freecatphotoapp\.com/gi.test($('a').attr('href')));
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Your `a` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -53,14 +60,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -73,5 +73,3 @@ tests:
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
|
||||
forumTopicId: 301098
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>a</code> (<i>anchor</i>) elements can also be used to create internal links to jump to different sections within a webpage.
|
||||
To create an internal link, you assign a link's <code>href</code> attribute to a hash symbol <code>#</code> plus the value of the <code>id</code> attribute for the element that you want to internally link to, usually further down the page. You then need to add the same <code>id</code> attribute to the element you are linking to. An <code>id</code> is an attribute that uniquely describes an element.
|
||||
# --description--
|
||||
|
||||
`a` (*anchor*) elements can also be used to create internal links to jump to different sections within a webpage.
|
||||
|
||||
To create an internal link, you assign a link's `href` attribute to a hash symbol `#` plus the value of the `id` attribute for the element that you want to internally link to, usually further down the page. You then need to add the same `id` attribute to the element you are linking to. An `id` is an attribute that uniquely describes an element.
|
||||
|
||||
Below is an example of an internal anchor link and its target element:
|
||||
|
||||
```html
|
||||
@ -18,42 +20,65 @@ Below is an example of an internal anchor link and its target element:
|
||||
<h2 id="contacts-header">Contacts</h2>
|
||||
```
|
||||
|
||||
When users click the Contacts link, they'll be taken to the section of the webpage with the <b>Contacts</b> header element.
|
||||
</section>
|
||||
When users click the Contacts link, they'll be taken to the section of the webpage with the **Contacts** header element.
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change your external link to an internal link by changing the <code>href</code> attribute to "#footer" and the text from "cat photos" to "Jump to Bottom".
|
||||
Remove the <code>target="_blank"</code> attribute from the anchor tag since this causes the linked document to open in a new window tab.
|
||||
Then add an <code>id</code> attribute with a value of "footer" to the <code><footer></code> element at the bottom of the page.
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
Change your external link to an internal link by changing the `href` attribute to "#footer" and the text from "cat photos" to "Jump to Bottom".
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: There should be only one anchor tag on your page.
|
||||
testString: assert($('a').length == 1);
|
||||
- text: There should be only one <code>footer</code> tag on your page.
|
||||
testString: assert($('footer').length == 1);
|
||||
- text: The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".
|
||||
testString: assert($('a').eq(0).attr('href') == "#footer");
|
||||
- text: The <code>a</code> tag should not have a <code>target</code> attribute
|
||||
testString: assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true);
|
||||
- text: The <code>a</code> text should be "Jump to Bottom".
|
||||
testString: assert($('a').eq(0).text().match(/Jump to Bottom/gi));
|
||||
- text: The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".
|
||||
testString: assert($('footer').eq(0).attr('id') == "footer");
|
||||
Remove the `target="_blank"` attribute from the anchor tag since this causes the linked document to open in a new window tab.
|
||||
|
||||
Then add an `id` attribute with a value of "footer" to the `<footer>` element at the bottom of the page.
|
||||
|
||||
# --hints--
|
||||
|
||||
There should be only one anchor tag on your page.
|
||||
|
||||
```js
|
||||
assert($('a').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
There should be only one `footer` tag on your page.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
The `a` tag should have an `href` attribute set to "#footer".
|
||||
|
||||
```js
|
||||
assert($('a').eq(0).attr('href') == '#footer');
|
||||
```
|
||||
|
||||
The `a` tag should not have a `target` attribute
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof $('a').eq(0).attr('target') == typeof undefined ||
|
||||
$('a').eq(0).attr('target') == true
|
||||
);
|
||||
```
|
||||
|
||||
The `a` text should be "Jump to Bottom".
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.eq(0)
|
||||
.text()
|
||||
.match(/Jump to Bottom/gi)
|
||||
);
|
||||
```
|
||||
|
||||
The `footer` tag should have an `id` attribute set to "footer".
|
||||
|
||||
```js
|
||||
assert($('footer').eq(0).attr('id') == 'footer');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -73,12 +98,7 @@ tests:
|
||||
<footer>Copyright Cat Photo App</footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -97,5 +117,3 @@ tests:
|
||||
|
||||
<footer id="footer">Copyright Cat Photo App</footer>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,34 +6,29 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cMdkytL'
|
||||
forumTopicId: 18230
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Sometimes you want to add <code>a</code> elements to your website before you know where they will link.
|
||||
This is also handy when you're changing the behavior of a link using <code>JavaScript</code>, which we'll learn about later.
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
The current value of the <code>href</code> attribute is a link that points to "https://freecatphotoapp.com". Replace the <code>href</code> attribute value with a <code>#</code>, also known as a hash symbol, to create a dead link.
|
||||
For example: <code>href="#"</code>
|
||||
</section>
|
||||
Sometimes you want to add `a` elements to your website before you know where they will link.
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
This is also handy when you're changing the behavior of a link using `JavaScript`, which we'll learn about later.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".
|
||||
testString: assert($("a").attr("href") === "#");
|
||||
# --instructions--
|
||||
|
||||
The current value of the `href` attribute is a link that points to "`https://freecatphotoapp.com`". Replace the `href` attribute value with a `#`, also known as a hash symbol, to create a dead link.
|
||||
|
||||
For example: `href="#"`
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `a` element should be a dead link with the value of the `href` attribute set to "#".
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '#');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -47,14 +42,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -67,5 +55,3 @@ tests:
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,8 +6,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb'
|
||||
forumTopicId: 18244
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
You can nest links within other text elements.
|
||||
|
||||
@ -17,51 +16,102 @@ You can nest links within other text elements.
|
||||
</p>
|
||||
```
|
||||
|
||||
Let's break down the example:
|
||||
Normal text is wrapped in the <code>p</code> element:<br> <code><p> Here's a ... for you to follow. </p></code>
|
||||
Next is the <i>anchor</i> element <code><a></code> (which requires a closing tag <code></a></code>):<br> <code><a> ... </a></code>
|
||||
<code>target</code> is an anchor tag attribute that specifies where to open the link and the value <code>"_blank"</code> specifies to open the link in a new tab
|
||||
<code>href</code> is an anchor tag attribute that contains the URL address of the link:<br> `<a href="http://freecodecamp.org"> ... </a>`
|
||||
The text, <strong>"link to freecodecamp.org"</strong>, within the <code>a</code> element called <code>anchor text</code>, will display a link to click:<br> <code><a href=" ... ">link to freecodecamp.org</a></code>
|
||||
The final output of the example will look like this:<br><p>Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.</p>
|
||||
</section>
|
||||
Let's break down the example: Normal text is wrapped in the `p` element:
|
||||
`<p> Here's a ... for you to follow. </p>` Next is the *anchor* element `<a>` (which requires a closing tag `</a>`):
|
||||
`<a> ... </a>` `target` is an anchor tag attribute that specifies where to open the link and the value `"_blank"` specifies to open the link in a new tab `href` is an anchor tag attribute that contains the URL address of the link:
|
||||
`<a href="http://freecodecamp.org"> ... </a>` The text, **"link to freecodecamp.org"**, within the `a` element called `anchor text`, will display a link to click:
|
||||
`<a href=" ... ">link to freecodecamp.org</a>` The final output of the example will look like this:
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Here's a [link to freecodecamp.org](http://freecodecamp.org) for you to follow.
|
||||
|
||||
Nest the existing <code>a</code> element within a new <code>p</code> element. The new paragraph should have text that says "View more cat photos", where "cat photos" is a link, and the rest is plain text.
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
Nest the existing `a` element within a new `p` element. The new paragraph should have text that says "View more cat photos", where "cat photos" is a link, and the rest is plain text.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should have an <code>a</code> element that links to "https://freecatphotoapp.com".
|
||||
testString: assert(($("a[href=\"https://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0));
|
||||
- text: Your <code>a</code> element should have the anchor text of "cat photos"
|
||||
testString: assert($("a").text().match(/cat\sphotos/gi));
|
||||
- text: You should create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.
|
||||
testString: assert($("p") && $("p").length > 2);
|
||||
- text: Your <code>a</code> element should be nested within your new <code>p</code> element.
|
||||
testString: assert(($("a[href=\"https://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")));
|
||||
- text: Your <code>p</code> element should have the text "View more " (with a space after it).
|
||||
testString: assert(($("a[href=\"https://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)));
|
||||
- text: Your <code>a</code> element should <em>not</em> have the text "View more".
|
||||
testString: assert(!$("a").text().match(/View\smore/gi));
|
||||
- text: Each of your <code>p</code> elements should have a closing tag.
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
|
||||
- text: Each of your <code>a</code> elements should have a closing tag.
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
|
||||
# --hints--
|
||||
|
||||
You should have an `a` element that links to "`https://freecatphotoapp.com`".
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]').length > 0 ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
Your `a` element should have the anchor text of "cat photos"
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.text()
|
||||
.match(/cat\sphotos/gi)
|
||||
);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
You should create a new `p` element around your `a` element. There should be at least 3 total `p` tags in your HTML code.
|
||||
|
||||
```js
|
||||
assert($('p') && $('p').length > 2);
|
||||
```
|
||||
|
||||
Your `a` element should be nested within your new `p` element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]').parent().is('p') ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]').parent().is('p')
|
||||
);
|
||||
```
|
||||
|
||||
Your `p` element should have the text "View more " (with a space after it).
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]')
|
||||
.parent()
|
||||
.text()
|
||||
.match(/View\smore\s/gi) ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]')
|
||||
.parent()
|
||||
.text()
|
||||
.match(/View\smore\s/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Your `a` element should <em>not</em> have the text "View more".
|
||||
|
||||
```js
|
||||
assert(
|
||||
!$('a')
|
||||
.text()
|
||||
.match(/View\smore/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Each of your `p` elements should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<p/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Each of your `a` elements should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<a/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -76,14 +126,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -96,5 +139,3 @@ tests:
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,41 +6,52 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
|
||||
forumTopicId: 18246
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>div</code> element, also known as a division element, is a general purpose container for other elements.
|
||||
The <code>div</code> element is probably the most commonly used HTML element of all.
|
||||
Just like any other non-self-closing element, you can open a <code>div</code> element with <code><div></code> and close it on another line with <code></div></code>.
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Nest your "Things cats love" and "Things cats hate" lists all within a single <code>div</code> element.
|
||||
Hint: Try putting your opening <code>div</code> tag above your "Things cats love" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>.
|
||||
</section>
|
||||
The `div` element, also known as a division element, is a general purpose container for other elements.
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
The `div` element is probably the most commonly used HTML element of all.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>p</code> elements should be nested inside your <code>div</code> element.
|
||||
testString: assert($("div").children("p").length > 1);
|
||||
- text: Your <code>ul</code> element should be nested inside your <code>div</code> element.
|
||||
testString: assert($("div").children("ul").length > 0);
|
||||
- text: Your <code>ol</code> element should be nested inside your <code>div</code> element.
|
||||
testString: assert($("div").children("ol").length > 0);
|
||||
- text: Your <code>div</code> element should have a closing tag.
|
||||
testString: assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length);
|
||||
Just like any other non-self-closing element, you can open a `div` element with `<div>` and close it on another line with `</div>`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nest your "Things cats love" and "Things cats hate" lists all within a single `div` element.
|
||||
|
||||
Hint: Try putting your opening `div` tag above your "Things cats love" `p` element and your closing `div` tag after your closing `ol` tag so that both of your lists are within one `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` elements should be nested inside your `div` element.
|
||||
|
||||
```js
|
||||
assert($('div').children('p').length > 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
Your `ul` element should be nested inside your `div` element.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert($('div').children('ul').length > 0);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Your `ol` element should be nested inside your `div` element.
|
||||
|
||||
```js
|
||||
assert($('div').children('ol').length > 0);
|
||||
```
|
||||
|
||||
Your `div` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -74,14 +85,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -114,5 +118,3 @@ tests:
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,57 +6,50 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gpt2'
|
||||
forumTopicId: 18276
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Welcome to freeCodeCamp's HTML coding challenges. These will walk you through web development step-by-step.
|
||||
|
||||
First, you'll start by building a simple web page using HTML. You can edit code in your code editor, which is embedded into this web page.
|
||||
Do you see the code in your code editor that says <code><h1>Hello</h1></code>? That's an HTML element.
|
||||
|
||||
Do you see the code in your code editor that says `<h1>Hello</h1>`? That's an HTML element.
|
||||
|
||||
Most HTML elements have an opening tag and a closing tag.
|
||||
|
||||
Opening tags look like this:
|
||||
<code><h1></code>
|
||||
|
||||
`<h1>`
|
||||
|
||||
Closing tags look like this:
|
||||
<code></h1></code>
|
||||
|
||||
`</h1>`
|
||||
|
||||
The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.
|
||||
|
||||
Each challenge has tests you can run at any time by clicking the "Run tests" button. When you pass all tests, you'll be prompted to submit your solution and go to the next coding challenge.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
To pass the test on this challenge, change your <code>h1</code> element's text to say "Hello World".
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
To pass the test on this challenge, change your `h1` element's text to say "Hello World".
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>h1</code> element should have the text "Hello World".
|
||||
testString: assert.isTrue((/hello(\s)+world/gi).test($('h1').text()));
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should have the text "Hello World".
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello</h1>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,40 +6,49 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
|
||||
forumTopicId: 18327
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can make elements into links by nesting them within an <code>a</code> element.
|
||||
Nest your image within an <code>a</code> element. Here's an example:
|
||||
<code><a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a></code>
|
||||
Remember to use <code>#</code> as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
You can make elements into links by nesting them within an `a` element.
|
||||
|
||||
Nest your image within an `a` element. Here's an example:
|
||||
|
||||
`<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>`
|
||||
|
||||
Remember to use `#` as your `a` element's `href` property in order to turn it into a dead link.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Place the existing image element within an `a` (*anchor*) element.
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Place the existing image element within an <code>a</code> (<i>anchor</i>) element.
|
||||
Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: The existing <code>img</code> element should be nested within an <code>a</code> element.
|
||||
testString: assert($("a").children("img").length > 0);
|
||||
- text: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.
|
||||
testString: assert(new RegExp("#").test($("a").children("img").parent().attr("href")));
|
||||
- text: Each of your <code>a</code> elements should have a closing tag.
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
|
||||
The existing `img` element should be nested within an `a` element.
|
||||
|
||||
```js
|
||||
assert($('a').children('img').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
Your `a` element should be a dead link with a `href` attribute set to `#`.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Each of your `a` elements should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<a/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -53,14 +62,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -73,5 +75,3 @@ tests:
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,40 +6,47 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cBmG9T7'
|
||||
forumTopicId: 18329
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed to the end user.
|
||||
|
||||
Commenting is also a convenient way to make code inactive without having to delete it entirely.
|
||||
Comments in HTML start with <code><!--</code> and end with a <code>--></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements.
|
||||
</section>
|
||||
Comments in HTML start with `<!--` and end with a `-->`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>h1</code> element should be visible on the page by uncommenting it.
|
||||
testString: assert($("h1").length > 0);
|
||||
- text: Your <code>h2</code> element should be visible on the page by uncommenting it.
|
||||
testString: assert($("h2").length > 0);
|
||||
- text: Your <code>p</code> element should be visible on the page by uncommenting it.
|
||||
testString: assert($("p").length > 0);
|
||||
- text: No trailing comment tags should be visible on the page (i.e. <code>--></code>).
|
||||
testString: assert(!$('*:contains("-->")')[1]);
|
||||
Uncomment your `h1`, `h2` and `p` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should be visible on the page by uncommenting it.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
Your `h2` element should be visible on the page by uncommenting it.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
Your `p` element should be visible on the page by uncommenting it.
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
No trailing comment tags should be visible on the page (i.e. `-->`).
|
||||
|
||||
```js
|
||||
assert(!$('*:contains("-->")')[1]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!--
|
||||
@ -51,14 +58,7 @@ tests:
|
||||
-->
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
@ -67,5 +67,3 @@ tests:
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,34 +6,29 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cMd4EcQ'
|
||||
forumTopicId: 18360
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.
|
||||
For example, if you wanted to make a text input field required, you can just add the attribute <code>required</code> within your <code>input</code> element, like this: <code><input type="text" required></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Make your text <code>input</code> a <code>required</code> field, so that your user can't submit the form without completing this field.
|
||||
For example, if you wanted to make a text input field required, you can just add the attribute `required` within your `input` element, like this: `<input type="text" required>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Make your text `input` a `required` field, so that your user can't submit the form without completing this field.
|
||||
|
||||
Then try to submit the form without inputting any text. See how your HTML5 form notifies you that the field is required?
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your text <code>input</code> element should have the <code>required</code> attribute.
|
||||
testString: assert($("input").prop("required"));
|
||||
Your text `input` element should have the `required` attribute.
|
||||
|
||||
```js
|
||||
assert($('input').prop('required'));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -61,14 +56,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -95,5 +83,3 @@ tests:
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -5,9 +5,9 @@ challengeType: 0
|
||||
forumTopicId: 301099
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type <code>radio</code> and <code>checkbox</code> report their values from the <code>value</code> attribute.
|
||||
# --description--
|
||||
|
||||
When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type `radio` and `checkbox` report their values from the `value` attribute.
|
||||
|
||||
For example:
|
||||
|
||||
@ -20,40 +20,67 @@ For example:
|
||||
</label>
|
||||
```
|
||||
|
||||
Here, you have two `radio` inputs. When the user submits the form with the `indoor` option selected, the form data will include the line: `indoor-outdoor=indoor`. This is from the `name` and `value` attributes of the "indoor" input.
|
||||
|
||||
Here, you have two <code>radio</code> inputs. When the user submits the form with the <code>indoor</code> option selected, the form data will include the line: <code>indoor-outdoor=indoor</code>. This is from the <code>name</code> and <code>value</code> attributes of the "indoor" input.
|
||||
If you omit the `value` attribute, the submitted form data uses the default value, which is `on`. In this scenario, if the user clicked the "indoor" option and submitted the form, the resulting form data would be `indoor-outdoor=on`, which is not useful. So the `value` attribute needs to be set to something to identify the option.
|
||||
|
||||
If you omit the <code>value</code> attribute, the submitted form data uses the default value, which is <code>on</code>. In this scenario, if the user clicked the "indoor" option and submitted the form, the resulting form data would be <code>indoor-outdoor=on</code>, which is not useful. So the <code>value</code> attribute needs to be set to something to identify the option.
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Give each of the <code>radio</code> and <code>checkbox</code> inputs the <code>value</code> attribute. Use the input label text, in lowercase, as the value for the attribute.
|
||||
</section>
|
||||
Give each of the `radio` and `checkbox` inputs the `value` attribute. Use the input label text, in lowercase, as the value for the attribute.
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: One of your radio buttons should have the <code>value</code> attribute of <code>indoor</code>.
|
||||
testString: assert($('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']").length > 0);
|
||||
- text: One of your radio buttons should have the <code>value</code> attribute of <code>outdoor</code>.
|
||||
testString: assert($('label:contains("Outdoor") > input[type="radio"]').filter("[value='outdoor']").length > 0);
|
||||
- text: One of your checkboxes should have the <code>value</code> attribute of <code>loving</code>.
|
||||
testString: assert($('label:contains("Loving") > input[type="checkbox"]').filter("[value='loving']").length > 0);
|
||||
- text: One of your checkboxes should have the <code>value</code> attribute of <code>lazy</code>.
|
||||
testString: assert($('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']").length > 0);
|
||||
- text: One of your checkboxes should have the <code>value</code> attribute of <code>energetic</code>.
|
||||
testString: assert($('label:contains("Energetic") > input[type="checkbox"]').filter("[value='energetic']").length > 0);
|
||||
One of your radio buttons should have the `value` attribute of `indoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
One of your radio buttons should have the `value` attribute of `outdoor`.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Outdoor") > input[type="radio"]').filter(
|
||||
"[value='outdoor']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
<div id='html-seed'>
|
||||
One of your checkboxes should have the `value` attribute of `loving`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Loving") > input[type="checkbox"]').filter(
|
||||
"[value='loving']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
One of your checkboxes should have the `value` attribute of `lazy`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
One of your checkboxes should have the `value` attribute of `energetic`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Energetic") > input[type="checkbox"]').filter(
|
||||
"[value='energetic']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -86,14 +113,7 @@ tests:
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
@ -125,5 +145,3 @@ tests:
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user