diff --git a/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590c9.md b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590c9.md index 1389744b350..1023823e83e 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590c9.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590c9.md @@ -19,51 +19,60 @@ Inside your `select` element, you need to create options for the user to choose | `Ancient artifact discovery` | | `Other` | +The first option (`Select one`) should have an empty string as its `value` attribute (i.e., `value=''`). This acts as a placeholder in the UI. + # --hints-- -Your should create the first `option` element with the text `Select one` inside your `select` element. +You should create the first `option` element with the text `Select one` inside your `select` element. ```js const optionEls = document?.querySelectorAll("select > option"); assert.equal(optionEls[0]?.textContent, "Select one"); ``` -Your should create a second `option` element with the text `Bitten by a strange creature` inside your `select` element. +You should give the first `option` element a `value` attribute with an empty string. + +```js +const optionEls = document?.querySelectorAll("select > option"); +assert.equal(optionEls[0]?.getAttribute('value'), ''); +``` + +You should create a second `option` element with the text `Bitten by a strange creature` inside your `select` element. ```js const optionEls = document?.querySelectorAll("select > option"); assert.equal(optionEls[1]?.textContent, "Bitten by a strange creature"); ``` -Your should create a third `option` element with the text `Radioactive exposure` inside your `select` element. +You should create a third `option` element with the text `Radioactive exposure` inside your `select` element. ```js const optionEls = document?.querySelectorAll("select > option"); assert.equal(optionEls[2]?.textContent, "Radioactive exposure"); ``` -Your should create a fourth `option` element with the text `Science experiment` inside your `select` element. +You should create a fourth `option` element with the text `Science experiment` inside your `select` element. ```js const optionEls = document?.querySelectorAll("select > option"); assert.equal(optionEls[3]?.textContent, "Science experiment"); ``` -Your should create a fifth `option` element with the text `Alien heritage` inside your `select` element. +You should create a fifth `option` element with the text `Alien heritage` inside your `select` element. ```js const optionEls = document?.querySelectorAll("select > option"); assert.equal(optionEls[4]?.textContent, "Alien heritage"); ``` -Your should create a sixth `option` element with the text `Ancient artifact discovery` inside your `select` element. +You should create a sixth `option` element with the text `Ancient artifact discovery` inside your `select` element. ```js const optionEls = document?.querySelectorAll("select > option"); assert.equal(optionEls[5]?.textContent, "Ancient artifact discovery"); ``` -Your should create a seventh `option` element with the text `Other` inside your `select` element. +You should create a seventh `option` element with the text `Other` inside your `select` element. ```js const optionEls = document?.querySelectorAll("select > option"); diff --git a/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590cb.md b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590cb.md index f38151a8aee..e29fadf283c 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590cb.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590cb.md @@ -219,7 +219,7 @@ export const SuperheroForm = () => {