diff --git a/curriculum/challenges/english/25-front-end-development/lab-stylized-to-do-list/66c051d13a6a20255a963695.md b/curriculum/challenges/english/25-front-end-development/lab-stylized-to-do-list/66c051d13a6a20255a963695.md index 7043f881272..25884f84858 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-stylized-to-do-list/66c051d13a6a20255a963695.md +++ b/curriculum/challenges/english/25-front-end-development/lab-stylized-to-do-list/66c051d13a6a20255a963695.md @@ -14,7 +14,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab **User Stories:** -1. You should have an unordered list with the class `todo-list`. +1. You should have one unordered list with the class `todo-list`. 2. Inside the unordered list, you should have four list items. 3. Inside each list item, there should be: @@ -34,29 +34,39 @@ Fulfill the user stories below and get all the tests to pass to complete the lab # --hints-- -You should have an unordered list with the class `todo-list`. +You should have one unordered list with the class `todo-list`. ```js -assert.exists(document.querySelector('.todo-list')); +assert.exists(document.querySelector('ul.todo-list')); +assert.lengthOf(document.querySelectorAll('ul.todo-list'), 1); ``` You should have four list items inside the unordered list. ```js -const li = document.querySelectorAll('.todo-list > li'); +const li = document.querySelectorAll('ul.todo-list > li'); assert.lengthOf(li, 4); ``` -Each list item should contain an `input` element with the type `checkbox`. +The `li` inside the `ul` with the class `todo-list` should contain an `input` element with the `type` of `checkbox`. ```js const checkboxes = document.querySelectorAll( - '.todo-list li input[type="checkbox"]' + 'ul.todo-list li input[type="checkbox"]' ); assert.lengthOf(checkboxes, 4); ``` -All of the `input` elements should have an `id`. +The `li` inside the `ul` with the class `todo-list` should contain a `label` element. + +```js +const labels = document.querySelectorAll( + 'ul.todo-list li label' +); +assert.lengthOf(labels, 4); +``` + +All `input` elements should have an `id`. ```js const inputs = document.querySelectorAll('input'); @@ -66,43 +76,7 @@ for (let input of inputs) { } ``` -After the `label` elements, there should be an unordered list with the class `sub-item`. - -```js -const labelSbItems = document.querySelectorAll('label+ul.sub-item'); -assert.lengthOf(labelSbItems, 4); -``` - -The `li` inside the `ul` with the class `sub-item` should have an anchor element with the class `sub-item-link`. - -```js -const allItems = document.querySelectorAll( - 'label + ul.sub-item li a.sub-item-link' -); -assert.lengthOf(allItems, 4); -``` - -All of the anchor elements should have a valid `href`. - -```js -const links = document.querySelectorAll('a'); -assert.isAbove(links.length, 0); -for (let link of links) { - assert.isAbove(link.href.length, 0); -} -``` - -All of the `anchor` elements should have a text. - -```js -const links = document.querySelectorAll('a'); -assert.isAbove(links.length, 0); -for (let link of links) { - assert.isAbove(link.innerText.length, 0); -} -``` - -All of the `label` elements should have a `for` attribute. +All `label` elements should have a `for` attribute. ```js const labels = document.querySelectorAll('label'); @@ -112,7 +86,7 @@ for (let label of labels) { } ``` -All of the `label` elements should have some text. +All `label` elements should have some text. ```js const labels = document.querySelectorAll('label'); @@ -122,6 +96,52 @@ for (let label of labels) { } ``` +The `id` and `for` attributes of the `input` and `label` elements pairs, should have corresponding values. + +```js +const labels = document.querySelectorAll("label"); + +document.querySelectorAll("input").forEach((input, index) => { + assert.equal(input.id, labels[index].htmlFor); +}); +``` + +After the `label` elements, there should be an unordered list with the class `sub-item`. + +```js +const labelSbItems = document.querySelectorAll('ul.todo-list li label + ul.sub-item'); +assert.lengthOf(labelSbItems, 4); +``` + +The `li` inside the `ul` with the class `sub-item` should have an anchor element with the class `sub-item-link`. + +```js +const allItems = document.querySelectorAll( + 'ul.todo-list li label + ul.sub-item li a.sub-item-link' +); +assert.lengthOf(allItems, 4); +``` + +All anchor elements should have a valid `href` attribute. + +```js +const links = document.querySelectorAll('a'); +assert.isAbove(links.length, 0); +for (let link of links) { + assert.isAbove(link.href.length, 0); +} +``` + +All anchor elements should have text. + +```js +const links = document.querySelectorAll('a'); +assert.isAbove(links.length, 0); +for (let link of links) { + assert.isAbove(link.innerText.length, 0); +} +``` + Each `a` element should have a `target` attribute with the value of `_blank`. ```js