3.1 KiB
3.1 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
bad87eee1348bd9aede07836 | Set the id of an Element | 0 | Establecer la id de un elemento |
Descripción
id
. El uso de atributos de id
tiene varios beneficios: puede usar una id
para diseñar un solo elemento y más adelante aprenderá que puede usarlos para seleccionar y modificar elementos específicos con JavaScript. id
atributos de id
deben ser únicos. Los navegadores no harán cumplir esto, pero es una buena práctica ampliamente aceptada. Entonces, por favor, no le dé a más de un elemento el mismo atributo de id
. Aquí hay un ejemplo de cómo le das a tu elemento h2
el ID de cat-photo-app
: <h2 id="cat-photo-app">
Instrucciones
form
la identificación cat-photo-form
. Pruebas
tests:
- text: Dale a tu elemento de <code>form</code> la identificación de <code>cat-photo-form</code> .
testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your <code>form</code> element the id of <code>cat-photo-form</code>.");'
Challenge Seed
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
.silver-background {
background-color: silver;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div class="silver-background">
<p>Cosas que los gatos aman:</p>
<ul>
<li>pellizco de gato</li>
<li>punteros laser</li>
<li>lasaña</li>
</ul>
<p>3 cosas que odian los gatos:</p>
<ol>
<li>tratamiento de pulgas</li>
<li>trueno</li>
<li>otros gatos</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
<label><input type="checkbox" name="personality" checked> Amoroso</label>
<label><input type="checkbox" name="personality"> Perezoso</label>
<label><input type="checkbox" name="personality"> Energético</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Enviar</button>
</form>
</main>
Solución
// solution required