chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08830
|
||||
title: Agrega un botón de envío a un formulario
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
|
||||
forumTopicId: 16627
|
||||
dashedName: add-a-submit-button-to-a-form
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Agreguemos un botón `submit` a tu formulario. Al hacer clic en este botón se enviarán los datos de tu formulario a la URL especificada con el atributo `action` de tu formulario.
|
||||
|
||||
Aquí hay un ejemplo de botón de envío:
|
||||
|
||||
`<button type="submit">this button submits the form</button>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega un botón del tipo `submit` como último elemento de tu formulario `form`, y usa `Submit` como su texto.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu formulario `form` debe tener un botón `button` dentro de él.
|
||||
|
||||
```js
|
||||
assert($('form').children('button').length > 0);
|
||||
```
|
||||
|
||||
Tu botón de envío debe tener el atributo `type` establecido como `submit`.
|
||||
|
||||
```js
|
||||
assert($('button').attr('type') === 'submit');
|
||||
```
|
||||
|
||||
Tu botón de envío solo debe contener el texto `Submit`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('button')
|
||||
.text()
|
||||
.match(/^\s*submit\s*$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `button` debe tener una etiqueta de cierre.
|
||||
|
||||
```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>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08812
|
||||
title: Agrega imágenes a tu sitio web
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2'
|
||||
forumTopicId: 16640
|
||||
dashedName: add-images-to-your-website
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puedes agregar imágenes a tu sitio web utilizando el elemento `img`, y apuntar a la URL de una imagen específica usando el atributo `src`.
|
||||
|
||||
Un ejemplo de esto sería:
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg">`
|
||||
|
||||
Ten en cuenta que los elementos `img` se cierran automáticamente.
|
||||
|
||||
Todos los elementos `img` **deben** tener un atributo `alt`. El texto dentro de un atributo `alt` es utilizado por los lectores de pantalla para mejorar la accesibilidad y se muestra si la imagen falla en cargar.
|
||||
|
||||
**Note:** Si la imagen es puramente decorativa, usar un atributo `alt` vacío es una buena práctica.
|
||||
|
||||
Idealmente, el atributo `alt` no debe contener caracteres especiales a menos que sea necesario.
|
||||
|
||||
Agreguemos un atributo `alt` a nuestro ejemplo `img` anterior:
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Intentemos agregar una imagen a nuestro sitio web:
|
||||
|
||||
Dentro del elemento `main`, inserta un elemento `img` antes de los elementos `p` existentes.
|
||||
|
||||
Ahora establece el atributo `src` para que apunte a esta url:
|
||||
|
||||
`https://bit.ly/fcc-relaxing-cat`
|
||||
|
||||
Finalmente, no olvides darle a tu elemento `img` un atributo `alt` con texto descriptivo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu página debe tener un elemento imagen.
|
||||
|
||||
```js
|
||||
assert($('img').length);
|
||||
```
|
||||
|
||||
Tu imagen debe tener un atributo `src` que apunte a la imagen del gatito.
|
||||
|
||||
```js
|
||||
assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($('img').attr('src')));
|
||||
```
|
||||
|
||||
El atributo `alt` de tu elemento imagen no debe estar vacío.
|
||||
|
||||
```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>
|
||||
<main>
|
||||
|
||||
|
||||
<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>
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<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>
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,106 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08830
|
||||
title: Agrega texto provisional a un campo de texto
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
|
||||
forumTopicId: 16647
|
||||
dashedName: add-placeholder-text-to-a-text-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El texto provisional es lo que se muestra en tu elemento de entrada `input` antes de que el usuario haya ingresado nada.
|
||||
|
||||
Puedes crear texto provisional así:
|
||||
|
||||
`<input type="text" placeholder="this is placeholder text">`
|
||||
|
||||
**Note:** Recuerda que los elementos `input` se cierran automáticamente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Establece el valor provisional `placeholder` de tu entrada de texto `input` como "cat photo URL".
|
||||
|
||||
# --hints--
|
||||
|
||||
Debes agregar un atributo `placeholder` al elemento de entrada de texto `input` existente.
|
||||
|
||||
```js
|
||||
assert($('input[placeholder]').length > 0);
|
||||
```
|
||||
|
||||
Debes establecer el valor de tu atributo provisional `placeholder` como `cat photo URL`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input') &&
|
||||
$('input').attr('placeholder') &&
|
||||
$('input')
|
||||
.attr('placeholder')
|
||||
.match(/cat\s+photo\s+URL/gi)
|
||||
);
|
||||
```
|
||||
|
||||
El elemento `input` final no debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
||||
```
|
||||
|
||||
El elemento `input` final debe tener una sintaxis válida.
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text">
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08835
|
||||
title: Marca botones de radio y casillas de verificación por defecto
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
|
||||
forumTopicId: 301094
|
||||
dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puedes hacer que una casilla de verificación o botón de radio se marque por defecto usando el atributo `checked`.
|
||||
|
||||
Para hacer esto, simplemente agrega la palabra `checked` al interior de un elemento de entrada. Por ejemplo:
|
||||
|
||||
`<input type="radio" name="test-name" checked>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Establece el primero de tus botones de radio y la primera de tus casillas de verificación para que ambos sean marcados por defecto.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu primer botón de radio en tu formulario debe ser marcado por defecto.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').prop('checked'));
|
||||
```
|
||||
|
||||
Tu primera casilla de verificación en tu formulario debe ser marcado por defecto.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').prop('checked'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08804
|
||||
title: Comenta HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
|
||||
forumTopicId: 16782
|
||||
dashedName: comment-out-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Recuerda que para iniciar un comentario, necesitas usar `<!--` y para terminar un comentario, necesitas usar `-->`
|
||||
|
||||
Aquí tendrás que terminar el comentario antes de que tu elemento `h2` comience.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Comenta tu elemento `h1` y tu elemento `p`, pero no tu elemento `h2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu elemento `h1` debe ser comentado para que no sea visible en la página.
|
||||
|
||||
```js
|
||||
assert($('h1').length === 0);
|
||||
```
|
||||
|
||||
Tu elemento `h2` no debe ser comentado para que sea visible en la página.
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
Tu elemento `p` debe ser comentado para que no sea visible en la página.
|
||||
|
||||
```js
|
||||
assert($('p').length === 0);
|
||||
```
|
||||
|
||||
Cada uno de tus comentarios debe cerrarse con `-->`.
|
||||
|
||||
```js
|
||||
assert(code.match(/[^fc]-->/g).length > 1);
|
||||
```
|
||||
|
||||
No debes cambiar el orden de los elementos `h1` `h2` o `p` en el código.
|
||||
|
||||
```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
|
||||
<!--
|
||||
<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>
|
||||
-->
|
||||
```
|
||||
|
||||
# --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> -->
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08827
|
||||
title: Crea una lista no ordenada
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
|
||||
forumTopicId: 16814
|
||||
dashedName: create-a-bulleted-unordered-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML tiene un elemento especial para crear <dfn>listas no ordenadas</dfn>, o listas con estilo de viñetas.
|
||||
|
||||
Las listas no ordenadas comienzan con un elemento `<ul>` de apertura, seguido de cualquier número de elementos `<li>`. Por último, las listas no ordenadas cierran con un `</ul>`
|
||||
|
||||
Por ejemplo:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>cheese</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
crearía una lista con estilo de viñetas de `milk` y `cheese`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Elimina los últimos dos elementos `p` y crea una lista no ordenada con tres cosas que amen los gatos en la parte inferior de la página.
|
||||
|
||||
# --hints--
|
||||
|
||||
Crea un elemento `ul`.
|
||||
|
||||
```js
|
||||
assert($('ul').length > 0);
|
||||
```
|
||||
|
||||
Debes tener tres elementos `li` dentro de tu elemento `ul`.
|
||||
|
||||
```js
|
||||
assert($('ul li').length > 2);
|
||||
```
|
||||
|
||||
Tu elemento `ul` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/gi) &&
|
||||
code.match(/<ul/gi) &&
|
||||
code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
Tus elementos `li` deben tener etiquetas de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/gi) &&
|
||||
code.match(/<li[\s>]/gi) &&
|
||||
code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
Tus elementos `li` no deben contener una cadena vacía o solo espacios en blanco.
|
||||
|
||||
```js
|
||||
assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>mice</li>
|
||||
<li>catnip</li>
|
||||
</ul>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,107 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: Crea un elemento de formulario
|
||||
challengeType: 0
|
||||
forumTopicId: 16817
|
||||
dashedName: create-a-form-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puedes construir formularios web que realmente envíen datos a un servidor usando sólo HTML puro. Puedes hacer esto especificando un atributo `action` en tu elemento `form`.
|
||||
|
||||
Por ejemplo:
|
||||
|
||||
```html
|
||||
<form action="/url-where-you-want-to-submit-form-data">
|
||||
<input>
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Anida el elemento `input` existente dentro de un elemento `form` y asigna `"https://freecatphotoapp.com/submit-cat-photo"` al atributo `action` del elemento `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `input` existente debe anidarse dentro de un elemento `form`.
|
||||
|
||||
```js
|
||||
const inputElem = document.querySelector('form input');
|
||||
assert(
|
||||
inputElem.getAttribute('type') === 'text' &&
|
||||
inputElem.getAttribute('placeholder') === 'cat photo URL'
|
||||
);
|
||||
```
|
||||
|
||||
Tu formulario `form` debe tener un atributo `action` que esté establecido como `https://freecatphotoapp.com/submit-cat-photo`
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('form').attr('action') === 'https://freecatphotoapp.com/submit-cat-photo'
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `form` debe tener etiquetas correctamente abiertas y cerradas.
|
||||
|
||||
```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>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,133 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08835
|
||||
title: Crea un conjunto de casillas de verificación
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
|
||||
forumTopicId: 16821
|
||||
dashedName: create-a-set-of-checkboxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Los formularios suelen usar casillas de verificación (<dfn>checkboxes</dfn>) para preguntas que puedan tener más de una respuesta.
|
||||
|
||||
Las casillas de verificación son un tipo de `input` (entrada).
|
||||
|
||||
Cada una de tus casillas de verificación puede anidarse dentro de su propio elemento `label`. Envolver un elemento `input` dentro de un elemento `label` asociará automáticamente ese input de tipo checkbox con el elemento label que lo rodea.
|
||||
|
||||
Todos los inputs de tipo casilla de verificación que están relacionados entre sí deben tener el mismo atributo `name`.
|
||||
|
||||
Se considera buena práctica definir explícitamente la relación entre un `input` de tipo checkbox (casilla de verificación) y su correspondiente `label` (etiqueta), estableciendo el atributo `for` en el elemento `label` para que coincida con el atributo `id` del `input` asociado.
|
||||
|
||||
A continuación te presentamos un ejemplo de una casilla de verificación:
|
||||
|
||||
`<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe anidarse dentro de su propio elemento `label`. Las tres deben compartir el atributo `name` con el valor `personality` (personalidad).
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu página debe tener tres elementos de casilla de verificación.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').length > 2);
|
||||
```
|
||||
|
||||
Cada uno de tus tres elementos de casilla de verificación debe anidarse en su propio elemento `label`.
|
||||
|
||||
```js
|
||||
assert($('label > input[type="checkbox"]:only-child').length > 2);
|
||||
```
|
||||
|
||||
Asegúrate de que cada uno de tus elementos `label` tenga una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Tus casillas de verificación deben tener el atributo `name` establecido con el valor `personality`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
|
||||
);
|
||||
```
|
||||
|
||||
Debes agregar cada una de tus casillas de verificación dentro de la etiqueta `form`.
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label for="playful"><input id="playful" type="checkbox" name="personality">Playful</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox"
|
||||
name="personality">Lazy</label>
|
||||
<label for="evil"><input id="evil" type="checkbox"
|
||||
name="personality">Evil</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,153 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: Crea un conjunto de botones de radio
|
||||
challengeType: 0
|
||||
forumTopicId: 16822
|
||||
dashedName: create-a-set-of-radio-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puedes usar <dfn>botones de radio</dfn> para preguntas en las que quieres que el usuario solo te dé una respuesta a partir de múltiples opciones.
|
||||
|
||||
Los botones de radio son un tipo de entrada `input`.
|
||||
|
||||
Cada uno de tus botones de radio puede anidarse dentro de su propio elemento `label`. Envolver un elemento `input` dentro de un elemento `label` asociará automáticamente la entrada del botón de radio con el elemento label que lo rodea.
|
||||
|
||||
Todos los botones de radio relacionados deben tener el mismo atributo `name` para crear un grupo de botones de radio. Al crear un grupo de radio, si se selecciona cualquier botón de radio se deselecciona automáticamente los otros botones dentro del mismo grupo, asegurándose que el usuario proporcione solo una respuesta.
|
||||
|
||||
Aquí hay un ejemplo de un botón de radio:
|
||||
|
||||
```html
|
||||
<label>
|
||||
<input type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
Se considera buena práctica establecer un atributo `for` en el elemento `label`, con un valor que coincida con el valor del atributo `id` del elemento `input`. Esto permite a las tecnologías asistivas crear una relación vinculada entre la etiqueta y el elemento hijo `input`. Por ejemplo:
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega un par de botones de radio a tu formulario, cada uno anidado en su propio elemento `label`. Uno debe tener la opción `indoor` y el otro debe tener la opción `outdoor`. Ambos deben compartir el atributo `name` establecido como `indoor-outdoor` para crear un grupo de radio.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu página debe tener dos elementos de botón de `radio`.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').length > 1);
|
||||
```
|
||||
|
||||
Tus botones de radio deben recibir el atributo `name` establecido como `indoor-outdoor`.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
```
|
||||
|
||||
Cada uno de tus elementos de botón de radio debe anidarse en su propio elemento `label`.
|
||||
|
||||
```js
|
||||
assert($('label > input[type="radio"]:only-child').length > 1);
|
||||
```
|
||||
|
||||
Cada uno de tus elementos `label` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Uno de tus botones de radio debe tener la etiqueta `indoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/indoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Uno de tus botones de radio debe tener la etiqueta `outdoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/outdoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Cada uno de los elementos de botón de radio debe ser agregado dentro de la etiqueta `form`.
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08829
|
||||
title: Crea un campo de texto
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
|
||||
forumTopicId: 16823
|
||||
dashedName: create-a-text-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ahora crearemos un formulario web.
|
||||
|
||||
Los elementos de entrada `input` son una forma conveniente de obtener información de tu usuario.
|
||||
|
||||
Puedes crear una entrada de texto de esta manera:
|
||||
|
||||
`<input type="text">`
|
||||
|
||||
Ten en cuenta que los elementos `input` se cierran automáticamente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea un elemento `input` de tipo `text` debajo de tus listas.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu aplicación debe tener un elemento `input` de tipo `text`.
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form>
|
||||
<input type="text">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,157 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08828
|
||||
title: Crea una lista ordenada
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
|
||||
forumTopicId: 16824
|
||||
dashedName: create-an-ordered-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML tiene otro elemento especial para crear <dfn>listas ordenadas</dfn>, o listas numeradas.
|
||||
|
||||
Las listas ordenadas comienzan con un elemento de apertura `<ol>`, seguido de cualquier número de elementos `<li>`. Por último, las listas ordenadas se cierran con la etiqueta `</ol>`.
|
||||
|
||||
Por ejemplo:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Garfield</li>
|
||||
<li>Sylvester</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
crearía una lista numerada de `Garfield` y `Sylvester`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una lista ordenada de las 3 cosas que los gatos odian (Top 3 things cats hate) más.
|
||||
|
||||
# --hints--
|
||||
|
||||
Debes tener una lista ordenada para `Top 3 things cats hate:`
|
||||
|
||||
```js
|
||||
assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
|
||||
```
|
||||
|
||||
Debes tener una lista no ordenada para `Things cats love:`
|
||||
|
||||
```js
|
||||
assert(/Things cats love:/i.test($('ul').prev().text()));
|
||||
```
|
||||
|
||||
Solo debes tener un elemento `ul`.
|
||||
|
||||
```js
|
||||
assert.equal($('ul').length, 1);
|
||||
```
|
||||
|
||||
Solo debes tener un elemento `ol`.
|
||||
|
||||
```js
|
||||
assert.equal($('ol').length, 1);
|
||||
```
|
||||
|
||||
Debes tener tres elementos `li` dentro de tu elemento `ul`.
|
||||
|
||||
```js
|
||||
assert.equal($('ul li').length, 3);
|
||||
```
|
||||
|
||||
Debes tener tres elementos `li` dentro de tu elemento `ol`.
|
||||
|
||||
```js
|
||||
assert.equal($('ol li').length, 3);
|
||||
```
|
||||
|
||||
Tu elemento `ul` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/g) &&
|
||||
code.match(/<\/ul>/g).length === code.match(/<ul>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `ol` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ol>/g) &&
|
||||
code.match(/<\/ol>/g).length === code.match(/<ol>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `li` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/g) &&
|
||||
code.match(/<li>/g) &&
|
||||
code.match(/<\/li>/g).length === code.match(/<li>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Los elementos `li` de tu lista no ordenada no deben estar vacíos.
|
||||
|
||||
```js
|
||||
$('ul li').each((i, val) =>
|
||||
assert(__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
Los elementos `li` de tu lista ordenada no deben estar vacíos.
|
||||
|
||||
```js
|
||||
$('ol li').each((i, val) =>
|
||||
assert(!!__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>hate 1</li>
|
||||
<li>hate 2</li>
|
||||
<li>hate 3</li>
|
||||
</ol>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aed
|
||||
title: Declara el Doctype de un documento HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
|
||||
forumTopicId: 301095
|
||||
dashedName: declare-the-doctype-of-an-html-document
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Hasta el momento, los desafíos han cubierto elementos HTML específicos y sus usos. Sin embargo, hay algunos elementos que dan una estructura general a tu página, y deben incluirse en cada documento HTML.
|
||||
|
||||
En la parte superior de tu documento, necesitas decirle al navegador qué versión de HTML está utilizando tu página. HTML es un lenguaje en evolución, y se actualiza regularmente. La mayoría de los navegadores principales soportan la última especificación, que es HTML5. Sin embargo, páginas web más antiguas puede que hagan uso de versiones anteriores del lenguaje.
|
||||
|
||||
Proporcionas al navegador esta información agregando la etiqueta `<!DOCTYPE ...>` en la primera línea, donde la parte `...` es la versión de HTML. Para HTML5, utilizas `<!DOCTYPE html>`.
|
||||
|
||||
El `!` y `DOCTYPE` en mayúsculas es importante, especialmente para los navegadores más antiguos. El `html` no es sensible a mayúsculas y minúsculas.
|
||||
|
||||
A continuación, el resto de tu código HTML necesita ser envuelto en etiquetas `html`. La apertura `<html>` va directamente debajo de la línea `<!DOCTYPE html>`, y el cierre `</html>` va en el final de la página.
|
||||
|
||||
Aquí hay un ejemplo de estructura de página:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Your HTML code goes here -->
|
||||
</html>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega una etiqueta `DOCTYPE` para HTML5 a la parte superior del documento en el editor de código. Debajo de el, agrega etiquetas de apertura y cierre de `html`, que envuelvan alrededor un elemento `h1`. El título puede incluir cualquier texto.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe incluir una etiqueta `<!DOCTYPE html>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
|
||||
```
|
||||
|
||||
Debe haber un elemento `html`.
|
||||
|
||||
```js
|
||||
assert($('html').length == 1);
|
||||
```
|
||||
|
||||
Las etiquetas `html` deben envolver alrededor un elemento `h1`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<h1> Hello world </h1>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aec
|
||||
title: Define el encabezado y el cuerpo de un Documento HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
|
||||
forumTopicId: 301096
|
||||
dashedName: define-the-head-and-body-of-an-html-document
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puedes agregar otro nivel de organización en tu documento HTML dentro de las etiquetas `html` con los elementos `head` y `body`. Cualquier código con información sobre tu página iría dentro de la etiqueta `head`. Entonces, cualquier código con el contenido de la página (lo que se muestra para un usuario) iría dentro de la etiqueta `body`.
|
||||
|
||||
Elementos de metadatos, tales como `link`, `meta`, `title`, y `style`, típicamente van dentro del elemento `head`.
|
||||
|
||||
Aquí hay un ejemplo de la disposición de una página:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- metadata elements -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- page contents -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Edita el código para que haya un `head` y un `body`. El elemento `head` solo debe incluir `title`, y el elemento `body` solo debe incluir `h1` y `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Solo debe haber un elemento `head` en la página.
|
||||
|
||||
```js
|
||||
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
|
||||
assert(headElems && headElems.length === 1);
|
||||
```
|
||||
|
||||
Solo debe haber un elemento `body` en la página.
|
||||
|
||||
```js
|
||||
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
|
||||
assert(bodyElems && bodyElems.length === 1);
|
||||
```
|
||||
|
||||
El elemento `head` debe ser hijo del elemento `html`.
|
||||
|
||||
```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);
|
||||
```
|
||||
|
||||
El elemento `body` debe ser hijo del elemento `html`.
|
||||
|
||||
```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);
|
||||
```
|
||||
|
||||
El elemento `head` debe envolver alrededor un elemento `title`.
|
||||
|
||||
```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);
|
||||
```
|
||||
|
||||
El elemento `body` debe envolver ambos elementos `h1` y `p`.
|
||||
|
||||
```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>
|
||||
<html>
|
||||
<title>The best page ever</title>
|
||||
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up 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>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>The best page ever</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up 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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: bad87fed1348bd9aedf08833
|
||||
title: Elimina elementos HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ckK73C9'
|
||||
forumTopicId: 17559
|
||||
dashedName: delete-html-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nuestro teléfono no tiene mucho espacio vertical.
|
||||
|
||||
Eliminemos los elementos innecesarios para que podamos empezar a construir nuestra CatPhotoApp.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Elimina tu elemento `h1` para que podamos simplificar nuestra vista.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu elemento `h1` debe ser eliminado.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
|
||||
```
|
||||
|
||||
Tu elemento `h2` debe estar en la página.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
|
||||
```
|
||||
|
||||
Tu elemento `p` debe estar en la página.
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>[\w\W]*<\/p>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --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>
|
||||
```
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08833
|
||||
title: Rellena el espacio en blanco con texto provisional
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cgR7Dc7'
|
||||
forumTopicId: 18178
|
||||
dashedName: fill-in-the-blank-with-placeholder-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Los desarrolladores web tradicionalmente usan <dfn>texto lorem ipsum</dfn> como texto provisional. El texto lorem ipsum se extrajo aleatoriamente de un famoso pasaje de Cicerón de la Antigua Roma.
|
||||
|
||||
El texto lorem ipsum ha sido utilizado como texto provisional por los tipógrafos desde el siglo XVI, y esta tradición continúa en la web.
|
||||
|
||||
Pues bien, 5 siglos es suficiente. Puesto que estamos construyendo una aplicación de fotos de gatos, utilicemos algo llamado "kitty ipsum text".
|
||||
|
||||
# --instructions--
|
||||
|
||||
Reemplaza el texto dentro de tu elemento `p` con las primeras palabras de este 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.`
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu elemento `p` debe contener las primeras palabras del "kitty ipsum text" que te proporcionamos aquí.
|
||||
|
||||
```js
|
||||
assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
|
||||
# --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>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf0887a
|
||||
title: Título con el elemento h2
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
|
||||
forumTopicId: 18196
|
||||
dashedName: headline-with-the-h2-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Durante las próximas lecciones, construiremos pieza a pieza una aplicación web en HTML5 de fotos de gatos.
|
||||
|
||||
El elemento `h2` que añadirás en este paso agregará un título nivel dos a la página web.
|
||||
|
||||
Este elemento le informa al navegador sobre la estructura de tu sitio web. Los elementos `h1` se utilizan a menudo para títulos principales, mientras que los elementos `h2` se utilizan generalmente para subtítulos. También hay elementos `h3`, `h4`, `h5` y `h6` para indicar diferentes niveles de subtítulos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Añade una etiqueta `h2` que diga "CatPhotoApp" para crear un segundo elemento HTML debajo de tu elemento `h1` "Hello World".
|
||||
|
||||
# --hints--
|
||||
|
||||
Debes crear un elemento `h2`.
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
Tu elemento `h2` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h2>/g) &&
|
||||
code.match(/<\/h2>/g).length === code.match(/<h2>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `h2` debe contener el texto `CatPhotoApp`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
|
||||
```
|
||||
|
||||
Tu elemento `h1` debe contener el texto `Hello World`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
Tu elemento `h1` debe estar antes que tu elemento `h2`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
```
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08801
|
||||
title: Informa con el elemento párrafo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ceZ7DtN'
|
||||
forumTopicId: 18202
|
||||
dashedName: inform-with-the-paragraph-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Los elementos `p` son el elemento preferido para el texto de los párrafos en los sitios web. `p` es la abreviatura de "párrafo" (paragraph).
|
||||
|
||||
Puedes crear un elemento párrafo de esta manera:
|
||||
|
||||
`<p>I'm a p tag!</p>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea un elemento `p` debajo de tu elemento `h2` y dale como texto `Hello Paragraph`.
|
||||
|
||||
**Note:** Por convención, todas las etiquetas HTML son escritas en minúsculas, por ejemplo `<p></p>` y no `<P></P>`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener un elemento `p` válido.
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
Tu elemento `p` debe contener el texto `Hello Paragraph`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
Tu elemento `p` debe tener una etiqueta de cierre.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
@ -0,0 +1,98 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08801
|
||||
title: Introducción a los elementos HTML5
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
|
||||
forumTopicId: 301097
|
||||
dashedName: introduction-to-html5-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 introduce etiquetas HTML más descriptivas. Estas incluyen `main`, `header`, `footer`, `nav`, `video`, `article`, `section`, entre otras.
|
||||
|
||||
Estas etiquetas dan una estructura descriptiva a tu HTML, hacen que tu HTML sea más fácil de leer, ayudan con la Optimización de Motores de Búsqueda (SEO) y mejoran la accesibilidad. La etiqueta HTML5 `main` ayuda a los motores de búsqueda y otros desarrolladores a encontrar el contenido principal de tu página.
|
||||
|
||||
Por ejemplo, un elemento `main` con dos elementos hijos anidados en su interior:
|
||||
|
||||
```html
|
||||
<main>
|
||||
<h1>Hello World</h1>
|
||||
<p>Hello Paragraph</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
**Note:** Muchas de las nuevas etiquetas HTML5 y sus beneficios están cubiertos en la sección Accesibilidad Aplicada.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea un segundo elemento `p` después del elemento `p` existente con el siguiente texto ipsum gatuno: `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`
|
||||
|
||||
Luego, crea un elemento `main` y anida los dos elementos `p` dentro del elemento `main`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Debes tener 2 elementos `p` con texto Ipsum Gatuno.
|
||||
|
||||
```js
|
||||
assert($('p').length > 1);
|
||||
```
|
||||
|
||||
Cada uno de tus elementos `p` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `p` debe contener las primeras palabras del `texto ipsum gatuno` adicional proporcionado.
|
||||
|
||||
```js
|
||||
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
Tu código debe tener un elemento `main`.
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
El elemento `main` debe tener dos elementos párrafo como hijos.
|
||||
|
||||
```js
|
||||
assert($('main').children('p').length === 2);
|
||||
```
|
||||
|
||||
La etiqueta de apertura `main` debe aparecer antes de la primera etiqueta párrafo.
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>\s*?<p>/g));
|
||||
```
|
||||
|
||||
La etiquete de cierre `main` debe aparecer después de la segunda etiqueta de cierre párrafo.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p>\s*?<\/main>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<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>
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08816
|
||||
title: Enlaza hacia páginas externas con los elementos "anchor"
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
|
||||
forumTopicId: 18226
|
||||
dashedName: link-to-external-pages-with-anchor-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puedes usar los elementos `a` (*anchor*) para enlazar a contenido fuera de tu página web.
|
||||
|
||||
Los elementos `a` requieren un atributo `href` con la dirección web de destino. También necesitan un texto anchor. Por ejemplo:
|
||||
|
||||
`<a href="https://freecodecamp.org">this links to freecodecamp.org</a>`
|
||||
|
||||
Entonces tu navegador mostrará el texto `this links to freecodecamp.org` como un enlace que puedes hacer clic. Y ese enlace te llevará a la dirección web `https://www.freecodecamp.org`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea un elemento `a` que enlace a `https://freecatphotoapp.com` y tenga "cat photos" como su texto anchor.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu elemento `a` debe contener el texto anchor: `cat photos`.
|
||||
|
||||
```js
|
||||
assert(/cat photos/gi.test($('a').text()));
|
||||
```
|
||||
|
||||
Necesitas un elemento `a` que enlace `https://freecatphotoapp.com`
|
||||
|
||||
```js
|
||||
assert(/https:\/\/(www\.)?freecatphotoapp\.com/gi.test($('a').attr('href')));
|
||||
```
|
||||
|
||||
Tu elemento `a` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<a href="https://freecatphotoapp.com">cat photos</a>
|
||||
<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>
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08816
|
||||
title: Enlaza hacia secciones internas de una página con los elementos anchor
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
|
||||
forumTopicId: 301098
|
||||
dashedName: link-to-internal-sections-of-a-page-with-anchor-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Los elementos `a` (*anchor*) también pueden utilizarse para crear enlaces internos para saltar a diferentes secciones dentro de una página web.
|
||||
|
||||
Para crear un enlace interno, asignas el atributo `href` de un enlace con un símbolo hash `#` más el valor del atributo `id` para el elemento al que deseas enlazar internamente, normalmente más abajo de la página. Luego necesitas agregar el mismo atributo `id` al elemento que estás enlazando. Un `id` es un atributo que describe un elemento de forma única.
|
||||
|
||||
A continuación hay un ejemplo de un enlace interno y su elemento destino:
|
||||
|
||||
```html
|
||||
<a href="#contacts-header">Contacts</a>
|
||||
...
|
||||
<h2 id="contacts-header">Contacts</h2>
|
||||
```
|
||||
|
||||
Cuando los usuarios hagan clic en el enlace `Contacts`, serán llevados a la sección de la página con el elemento título **Contacts**.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia tu enlace externo a un enlace interno cambiando el atributo `href` a `"#footer"` y el texto de `cat photos` a `Jump to Bottom`.
|
||||
|
||||
Elimina el atributo `target="_blank"` de la etiqueta anchor ya que esto provoca que el documento enlazado se abra en una nueva pestaña.
|
||||
|
||||
Luego agrega un atributo `id` con un valor de `footer` al elemento `<footer>` en la parte inferior de la página.
|
||||
|
||||
# --hints--
|
||||
|
||||
Solo debe haber una etiqueta anchor en tu página.
|
||||
|
||||
```js
|
||||
assert($('a').length == 1);
|
||||
```
|
||||
|
||||
Solo debe haber una etiqueta `footer` en tu página.
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
La etiqueta `a` debe tener un atributo `href` establecido como "#footer".
|
||||
|
||||
```js
|
||||
assert($('a').eq(0).attr('href') == '#footer');
|
||||
```
|
||||
|
||||
La etiqueta `a` no debe tener un atributo `target`
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof $('a').eq(0).attr('target') == typeof undefined ||
|
||||
$('a').eq(0).attr('target') == true
|
||||
);
|
||||
```
|
||||
|
||||
El texto de `a` debe ser "Jump to Bottom".
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.eq(0)
|
||||
.text()
|
||||
.match(/Jump to Bottom/gi)
|
||||
);
|
||||
```
|
||||
|
||||
La etiqueta `footer` debe tener un atributo `id` establecido como "footer".
|
||||
|
||||
```js
|
||||
assert($('footer').eq(0).attr('id') == 'footer');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="https://freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<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. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. 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>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>Copyright Cat Photo App</footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="#footer">Jump to Bottom</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<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. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. 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>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer id="footer">Copyright Cat Photo App</footer>
|
||||
```
|
||||
@ -0,0 +1,58 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08817
|
||||
title: Crea enlaces muertos utilizando el símbolo hash
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMdkytL'
|
||||
forumTopicId: 18230
|
||||
dashedName: make-dead-links-using-the-hash-symbol
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A veces quieres agregar elementos `a` en tu sitio web antes de saber dónde se enlazarán.
|
||||
|
||||
Esto también es útil cuando estás cambiando el comportamiento de un enlace usando `JavaScript`, sobre el cual aprenderemos más adelante.
|
||||
|
||||
# --instructions--
|
||||
|
||||
El valor actual del atributo `href` es un enlace que apunta a "`https://freecatphotoapp.com`". Reemplaza el valor del atributo `href` por un `#` (también conocido como símbolo hash, numeral o almohadilla) para crear un enlace muerto.
|
||||
|
||||
Por ejemplo: `href="#"`
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu elemento `a` debe ser un enlace muerto con el valor del atributo `href` establecido como "#".
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '#');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,142 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08817
|
||||
title: Anida un elemento anchor dentro de un párrafo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb'
|
||||
forumTopicId: 18244
|
||||
dashedName: nest-an-anchor-element-within-a-paragraph
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puedes anidar enlaces dentro de otros elementos de texto.
|
||||
|
||||
```html
|
||||
<p>
|
||||
Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
|
||||
</p>
|
||||
```
|
||||
|
||||
Vamos a desglosar el ejemplo: El texto regular está envuelto en el elemento `p`:
|
||||
`<p> Here's a ... for you to follow. </p>` Le sigue el elemento *anchor* `<a>` (el cual requiere una etiqueta de cierre `</a>`):
|
||||
`<a> ... </a>`. `target` es un atributo de la etiqueta anchor que especifica donde abrir el enlace y el valor `_blank` especifica abrir el enlace en una nueva pestaña, `href` es un atributo de la etiqueta anchor que contiene la dirección URL del enlace:
|
||||
`<a href="http://freecodecamp.org"> ... </a>`. El texto, **"link to freecodecamp.org"**, dentro del elemento `a` llamado `anchor text`, mostrará un enlace para hacer click:
|
||||
`<a href=" ... ">link to freecodecamp.org</a>`. El resultado final del ejemplo se verá así:
|
||||
|
||||
Aquí hay un enlace [a freecodecamp.org](http://freecodecamp.org) para que lo sigas.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Anida el elemento `a` existente dentro de un nuevo elemento `p`. El nuevo párrafo debe tener un texto que diga `View more cat photos`, donde `cat photos` es un enlace, y el resto es texto regular.
|
||||
|
||||
# --hints--
|
||||
|
||||
Debes tener un elemento `a` que enlace a "`https://freecatphotoapp.com`".
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]').length > 0 ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `a` debe contener el texto anchor de `cat photos`
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.text()
|
||||
.match(/cat\sphotos/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Debes crear un nuevo elemento `p` alrededor de tu elemento `a`. Debe haber al menos 3 etiquetas `p` en tu código HTML.
|
||||
|
||||
```js
|
||||
assert($('p') && $('p').length > 2);
|
||||
```
|
||||
|
||||
Tu elemento `a` debe ser anidado dentro de tu nuevo elemento `p`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]').parent().is('p') ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]').parent().is('p')
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `p` debe contener el texto `View more` (con un espacio después de él).
|
||||
|
||||
```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)
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `a` <em>no</em> debe tener el texto `View more`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!$('a')
|
||||
.text()
|
||||
.match(/View\smore/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Cada uno de tus elementos `p` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<p/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Cada uno de tus elementos `a` debe tener una etiqueta de cierre.
|
||||
|
||||
```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>
|
||||
<main>
|
||||
|
||||
<a href="https://freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>View more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a></p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08835
|
||||
title: Anida muchos elementos dentro de un solo elemento div
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
|
||||
forumTopicId: 18246
|
||||
dashedName: nest-many-elements-within-a-single-div-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El elemento `div`, también conocido como elemento de división, es un contenedor de propósito general para otros elementos.
|
||||
|
||||
El elemento `div` es probablemente el elemento HTML más utilizado de todos.
|
||||
|
||||
Al igual que cualquier otro elemento sin cierre automático, puedes abrir un elemento `div` con `<div>` y cerrarlo en otra línea con `</div>`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Anida "Things cats love"" y "Top 3 Things cats hate" moviendo todo dentro de un solo elemento `div`.
|
||||
|
||||
Sugerencia: Intenta poner tu etiqueta de apertura `div` por encima de tu elemento `p` "Things cats love" y tu etiqueta de cierre de `div` después de cerrar `ol` para que ambas listas estén dentro de un `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tus elementos `p` deben anidarse dentro de tu elemento `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('p').length > 1);
|
||||
```
|
||||
|
||||
Tu elemento `ul` debe anidarse dentro de tu elemento `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('ul').length > 0);
|
||||
```
|
||||
|
||||
Tu elemento `ol` debe anidarse dentro de tu elemento `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('ol').length > 0);
|
||||
```
|
||||
|
||||
Tu elemento `div` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: bd7123c8c441eddfaeb5bdef
|
||||
title: Di hola a los elementos HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gpt2'
|
||||
forumTopicId: 18276
|
||||
dashedName: say-hello-to-html-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bienvenido a los desafíos de programación HTML de freeCodeCamp. Estos te guiarán paso a paso a través del mundo del desarrollo web.
|
||||
|
||||
Primero, comenzarás construyendo una página web simple usando HTML. Puedes editar el código desde tu editor de código, el cual está incrustado en esta página web.
|
||||
|
||||
¿Ves el código en tu editor de código que dice `<h1>Hello</h1>`? Ese es un elemento HTML.
|
||||
|
||||
La mayoría de elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre.
|
||||
|
||||
Las etiquetas de apertura se ven así:
|
||||
|
||||
`<h1>`
|
||||
|
||||
Las etiquetas de cierre se ven así:
|
||||
|
||||
`</h1>`
|
||||
|
||||
La única diferencia entre las etiquetas de apertura y cierre es la barra frontal después del corchete de ángulo abierto.
|
||||
|
||||
Cada desafío tiene pruebas que puedes ejecutar en cualquier momento haciendo clic en el botón "Ejecutar pruebas". Cuando pases todas las pruebas, te pedirán que envíes tu solución e ir al siguiente desafío de programación.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Para pasar la prueba en este desafío, cambia el texto de tu elemento `h1` para que diga `Hello World`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu elemento `h1` debe contener el texto `Hello World`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08820
|
||||
title: Convierte una imagen en un enlace
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
|
||||
forumTopicId: 18327
|
||||
dashedName: turn-an-image-into-a-link
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puedes convertir elementos en enlaces, anidándolos dentro de un elemento `a`.
|
||||
|
||||
Anida tu imagen dentro de un elemento `a`. A continuación, te presentamos un ejemplo:
|
||||
|
||||
`<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>`
|
||||
|
||||
Recuerda usar `#` como propiedad `href` de tu elemento `a` para convertirlo en un enlace muerto.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Coloca el elemento de imagen existente dentro de un elemento `a` (*anchor*).
|
||||
|
||||
Una vez que hayas hecho esto, pasa el cursor sobre tu imagen. El puntero habitual de tu cursor debería convertirse en un puntero de click de enlace. Ahora la foto es un enlace.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `img` existente debe estar anidado dentro de un elemento `a`.
|
||||
|
||||
```js
|
||||
assert($('a').children('img').length > 0);
|
||||
```
|
||||
|
||||
Tu elemento `a` debe ser un enlace muerto con un atributo `href` establecido como `#`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
|
||||
```
|
||||
|
||||
Cada uno de tus elementos `a` debe tener una etiqueta de cierre.
|
||||
|
||||
```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>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08802
|
||||
title: Descomenta código HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBmG9T7'
|
||||
forumTopicId: 18329
|
||||
dashedName: uncomment-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Comentar es una forma en la que puedes dejar comentarios dentro de tu código para otros desarrolladores, sin que eso afecte el resultado que se muestra al usuario final.
|
||||
|
||||
Comentar es también una forma conveniente de desactivar código sin tener que borrarlo por completo.
|
||||
|
||||
Los comentarios en HTML comienzan con `<!--` y terminan con `-->`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Descomenta tus elementos `h1`, `h2` y `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu elemento `h1` debe ser visible en la página al descomentarlo.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
Tu elemento `h2` debe ser visible en la página al descomentarlo.
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
Tu elemento `p` debe ser visible en la página al descomentarlo.
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
Ninguna etiqueta de cierre de comentario debe ser visible en la página (por ejemplo, `-->`).
|
||||
|
||||
```js
|
||||
assert(!$('*:contains("-->")')[1]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
-->
|
||||
```
|
||||
|
||||
# --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>
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08830
|
||||
title: Usa HTML5 para requerir un campo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMd4EcQ'
|
||||
forumTopicId: 18360
|
||||
dashedName: use-html5-to-require-a-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puedes requerir campos específicos de un formulario para que tu usuario no pueda enviarlo hasta que no los haya rellenado.
|
||||
|
||||
Por ejemplo, si deseas hacer obligatorio un campo de entrada de texto, puedes agregar el atributo `required` dentro de tu elemento `input`, de esta forma: `<input type="text" required>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Convierte tu entrada de texto `input` en un campo obligatorio `required` para que tu usuario no pueda enviar el formulario sin completar este campo.
|
||||
|
||||
Luego intenta enviar el formulario sin introducir ningún texto. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu elemento de entrada de texto `input` debe tener el atributo `required`.
|
||||
|
||||
```js
|
||||
assert($('input').prop('required'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" required placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 5c6c06847491271903d37cfd
|
||||
title: Usa el atributo value con botones de radio y casillas de verificación
|
||||
challengeType: 0
|
||||
forumTopicId: 301099
|
||||
dashedName: use-the-value-attribute-with-radio-buttons-and-checkboxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Cuando se envía un formulario, los datos se envían al servidor e incluyen entradas para las opciones seleccionadas. Los inputs de tipo `radio` y `checkbox` reportan sus valores desde el atributo `value`.
|
||||
|
||||
Por ejemplo:
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
<label for="outdoor">
|
||||
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
|
||||
</label>
|
||||
```
|
||||
|
||||
Aquí tienes dos inputs de tipo `radio`. Cuando el usuario envía el formulario con la opción `indoor` seleccionada, los datos del formulario incluirán la línea: `indoor-outdoor=indoor`. Esto proviene de los atributos `name` y `value` del input "indoor".
|
||||
|
||||
Si omites el atributo `value`, los datos del formulario enviado utilizarán el valor por defecto, que es `on`. En este escenario, si el usuario hizo click en la opción "indoor" y envió el formulario, el dato resultante del formulario sería `indoor-outdoor=on`, lo cual no resulta útil. Por lo que el atributo `value` debe establecerse a un valor que identifique la opción claramente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega a cada una de los inputs de tipo `radio` y de tipo `checkbox` el atributo `value`. Usa el texto de input label (etiqueta), en minúsculas, como valor del atributo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Uno de tus botones de radio debe tener el atributo `value` establecido con el valor `indoor` (de interior).
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Uno de tus botones de radio debe tener el atributo `value` establecido con el valor `outdoor` (de exterior).
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Outdoor") > input[type="radio"]').filter(
|
||||
"[value='outdoor']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Una de tus casillas de verificación debe tener el atributo `value` establecido con el valor `loving` (cariñoso).
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Loving") > input[type="checkbox"]').filter(
|
||||
"[value='loving']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Una de tus casillas de verificación debe tener el atributo `value` establecido con el valor `lazy` (perezoso).
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Una de tus casillas de verificación debe tener el atributo `value` establecido con el valor `energetic` (energético).
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Energetic") > input[type="checkbox"]').filter(
|
||||
"[value='energetic']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
Reference in New Issue
Block a user