diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md index 87371294267..24877044d28 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md @@ -21,45 +21,50 @@ Here's an example: Camper Cat's Mortal Kombat survey results are in! Wrap a `time` tag around the text `Thursday, September 15th` and add a `datetime` attribute to it set to `2016-09-15`. +# --before-all-- + +```js +const getTimeElement = () => { + const pElement = [...document.querySelectorAll("article > p")] + .filter(x => x?.textContent?.includes("Thank you to everyone for responding to Master Camper Cat's survey.")); + + return pElement[0] ? pElement[0].querySelector("time") : null; +}; + +const getDatetimeAttr = () => { + const timeElement = getTimeElement(); + return timeElement?.getAttribute("datetime"); +}; +``` + # --hints-- Your code should have a `p` element which includes the text `Thank you to everyone for responding to Master Camper Cat's survey.` and include a `time` element. ```js -assert.exists(timeElement); +assert.exists(getTimeElement()); ``` Your added `time` tags should wrap around the text `Thursday, September 15th`. ```js -assert.strictEqual(timeElement?.innerHTML?.trim(), 'Thursday, September 15th'); +assert.strictEqual(getTimeElement()?.innerHTML?.trim(), 'Thursday, September 15th'); ``` Your added `time` tag should have a `datetime` attribute that is not empty. ```js -assert(datetimeAttr?.length != 0); +assert(getDatetimeAttr()?.length != 0); ``` Your added `datetime` attribute should be set to a value of `2016-09-15`. ```js -assert.equal(datetimeAttr , '2016-09-15'); +assert.equal(getDatetimeAttr() , '2016-09-15'); ``` # --seed-- -## --after-user-code-- - -```html - -``` - ## --seed-contents-- ```html