4.4 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
| id | title | challengeType | videoUrl | forumTopicId | dashedName |
|---|---|---|---|---|---|
| 587d778c367417b2b2512aa9 | Estandariza horas con el atributo HTML5 datetime | 0 | https://scrimba.com/c/cmzMgtz | 301025 | standardize-times-with-the-html5-datetime-attribute |
--description--
Continuando con el tema de fechas, HTML5 también introdujo el elemento time junto con un atributo datetime para estandarizar las horas. El elemento time es un elemento en línea que puede ajustar una fecha u hora en una página. Un atributo datetime contiene un formato válido para esa fecha. Este es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar la confusión al declarar una versión estandarizada de un tiempo, incluso si está escrita informal o coloquialmente en el texto.
Aquí hay un ejemplo:
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
--instructions--
¡Ya tenemos los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelve una etiqueta time alrededor del texto Thursday, September 15<sup>th</sup> y agregua un atributo datetime establecido en 2016-09-15.
--hints--
Tu código debe tener un elemento p que incluya el texto Thank you to everyone for responding to Master Camper Cat's survey. e incluya un elemento time.
assert(timeElement);
Las etiquetas time añadidas deben envolver el texto Thursday, September 15<sup>th</sup>.
assert(
timeElement &&
timeElement?.innerHTML?.trim() === 'Thursday, September 15<sup>th</sup>'
);
Tu etiqueta time agregada debe tener un atributo datetime que no esté vacío.
assert(datetimeAttr && datetimeAttr?.length);
Tu atributo datetime agregado debe establecerse en un valor de 2016-09-15.
assert(datetimeAttr === '2016-09-15');
--seed--
--after-user-code--
<script>
const pElement = [...document.querySelectorAll("article > p")]
.filter(x => x?.textContent?.includes("Thank you to everyone for responding to Master Camper Cat's survey."));
const timeElement = pElement[0] ? pElement[0].querySelector("time") : null;
const datetimeAttr = timeElement?.getAttribute("datetime");
</script>
--seed-contents--
<body>
<header>
<h1>Tournaments</h1>
</header>
<article>
<h2>Mortal Kombat Tournament Survey Results</h2>
<!-- Only change code below this line -->
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
<!-- Only change code above this line -->
<section>
<h3>Comments:</h3>
<article>
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
<p>Johnny Cage better be there, I'll finish him!</p>
</article>
<article>
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
<p>Wow, much combat, so mortal.</p>
</article>
<article>
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
<p>Looks like I'll be busy that day.</p>
</article>
</section>
</article>
<footer>© 2018 Camper Cat</footer>
</body>
--solutions--
<body>
<header>
<h1>Tournaments</h1>
</header>
<article>
<h2>Mortal Kombat Tournament Survey Results</h2>
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
<section>
<h3>Comments:</h3>
<article>
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
<p>Johnny Cage better be there, I'll finish him!</p>
</article>
<article>
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
<p>Wow, much combat, so mortal.</p>
</article>
<article>
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
<p>Looks like I'll be busy that day.</p>
</article>
</section>
</article>
<footer>© 2018 Camper Cat</footer>
</body>