mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(curriculum): correct placeholder text example (#62533)
This commit is contained in:
Yusuf Can Aşur
+4
-4
@@ -10,10 +10,10 @@ dashedName: step-12
|
||||
In previous lessons, you learned how to work with the `placeholder` and `required` attributes like this:
|
||||
|
||||
```html
|
||||
<input type="text" placeholder="Ex. John Doe" required>
|
||||
<input type="text" placeholder="e.g., John Doe" required>
|
||||
```
|
||||
|
||||
For your existing `input` element, add a `placeholder` attribute with the value of `"Ex. John Doe"`.
|
||||
For your existing `input` element, add a `placeholder` attribute with the value of `"e.g., John Doe"`.
|
||||
|
||||
Also, add the `required` attribute to the `input` element.
|
||||
|
||||
@@ -25,10 +25,10 @@ You should not remove the existing `input` element.
|
||||
assert.isNotNull(document.querySelector('fieldset input'));
|
||||
```
|
||||
|
||||
Your `input` should have a `placeholder` attribute with the value of `"Ex. John Doe"`.
|
||||
Your `input` should have a `placeholder` attribute with the value of `"e.g., John Doe"`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector('fieldset input')?.getAttribute('placeholder'), 'Ex. John Doe');
|
||||
assert.strictEqual(document.querySelector('fieldset input')?.getAttribute('placeholder'), 'e.g., John Doe');
|
||||
```
|
||||
|
||||
Your `input` should have a `required` attribute.
|
||||
|
||||
+1
-1
@@ -55,7 +55,7 @@ assert.strictEqual(document.querySelector('fieldset label[for="email"]')?.getAtt
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required>
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
+1
-1
@@ -75,7 +75,7 @@ assert.strictEqual(document.querySelector('input#email')?.getAttribute('placehol
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required>
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required>
|
||||
--fcc-editable-region--
|
||||
<label for="email">Email address (required):</label>
|
||||
|
||||
|
||||
+1
-1
@@ -57,7 +57,7 @@ assert.strictEqual(document.querySelector('label[for="age"]')?.textContent.trim(
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -77,7 +77,7 @@ assert.isNotNull(document.querySelector('label + input[max="100"]'));
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -57,7 +57,7 @@ assert.strictEqual(document.querySelectorAll('fieldset legend')[1]?.textContent.
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -86,7 +86,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="r
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -81,7 +81,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input:nth-of-
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -57,7 +57,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) legend')?.inn
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -95,7 +95,7 @@ assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='c
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -79,7 +79,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[type="c
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -113,7 +113,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -75,7 +75,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -75,7 +75,7 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + l
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -67,7 +67,7 @@ assert.exists(document.querySelector('select[id="service"]'));
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -112,7 +112,7 @@ assert.strictEqual(document.querySelector('option[value="excellent"]')?.textCont
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -49,7 +49,7 @@ assert.exists(document.querySelector('option[value="excellent"][selected]'));
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -63,7 +63,7 @@ assert.exists(document.querySelector('label + select[name="food"]'));
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -121,7 +121,7 @@ assert.exists(document.querySelector('fieldset:nth-of-type(4) select#food option
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -49,7 +49,7 @@ assert.strictEqual(document.querySelector('label[for="comments"]')?.textContent.
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -53,7 +53,7 @@ assert.exists(document.querySelector('label + textarea'));
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -61,7 +61,7 @@ assert.exists(document.querySelector('textarea[rows="10"]'));
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+2
-2
@@ -59,7 +59,7 @@ assert.strictEqual(document.querySelector('button')?.textContent.trim(), 'Submit
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
@@ -172,7 +172,7 @@ assert.strictEqual(document.querySelector('button')?.textContent.trim(), 'Submit
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required>
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required>
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -49,7 +49,7 @@ assert.exists(document.querySelector("input#reputation[checked]"));
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">
|
||||
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
|
||||
+1
-1
@@ -57,7 +57,7 @@ assert.strictEqual(label2?.getAttribute('size'), '20');
|
||||
<legend>Personal Information</legend>
|
||||
<label for="full-name">Name (required):</label>
|
||||
--fcc-editable-region--
|
||||
<input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required>
|
||||
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required>
|
||||
<label for="email">Email address (required):</label>
|
||||
<input
|
||||
placeholder="example@email.com"
|
||||
|
||||
Reference in New Issue
Block a user