From 4c5ac6e241caad2ddb040d4ff0bafd1d8f1512ec Mon Sep 17 00:00:00 2001 From: a2937 Date: Thu, 26 Oct 2023 12:55:40 -0400 Subject: [PATCH] fix(curriculum): split registration form step 64 into two steps. (#52076) Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com> Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> --- .../meta.json | 6 +- .../60ffefd6479a3d084fb77cbc.md | 145 +-------- .../6537e0be715fcb57d31ba8c3.md | 293 ++++++++++++++++++ 3 files changed, 299 insertions(+), 145 deletions(-) create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md diff --git a/curriculum/challenges/_meta/learn-html-forms-by-building-a-registration-form/meta.json b/curriculum/challenges/_meta/learn-html-forms-by-building-a-registration-form/meta.json index 4ed20f66778..1bd5f202100 100644 --- a/curriculum/challenges/_meta/learn-html-forms-by-building-a-registration-form/meta.json +++ b/curriculum/challenges/_meta/learn-html-forms-by-building-a-registration-form/meta.json @@ -266,6 +266,10 @@ { "id": "60ffefd6479a3d084fb77cbc", "title": "Step 64" + }, + { + "id": "6537e0be715fcb57d31ba8c3", + "title": "Step 65" } ] -} \ No newline at end of file +} diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md index d3b034d0096..a298600c7c9 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md @@ -7,9 +7,8 @@ dashedName: step-64 # --description-- -Last, but not least, make the `input` for the terms and condition `inline`, then change the text color of the `terms and conditions` link element to `#dfdfe2`. +Make the `input` for the terms and conditions `inline` by adding the appropriate class in the HTML. -Well done! You have completed the final part of the _Registration Form_ practice project. # --hints-- @@ -19,18 +18,6 @@ You should give the `input` a class of `inline`. assert(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline')); ``` -You should use an `a` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('a')); -``` - -You should give the `a` element a `color` of `#dfdfe2`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)'); -``` - # --seed-- ## --seed-contents-- @@ -164,133 +151,3 @@ input[type="file"] { --fcc-editable-region-- ``` - -# --solutions-- - -```html - - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- Account type (required) - - -
-
- - - - -
- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; - padding-bottom: 2em; -} - -fieldset { - border: none; - padding: 2rem 0; - border-bottom: 3px solid #3b3b4f; -} - -fieldset:last-of-type { - border-bottom: none; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; - min-height: 2em; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - -input[type="submit"] { - display: block; - width: 60%; - margin: 1em auto; - height: 2em; - font-size: 1.1rem; - background-color: #3b3b4f; - border-color: white; - min-width: 300px; -} - -input[type="file"] { - padding: 1px 2px; -} - -a { - color: #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md new file mode 100644 index 00000000000..30fa1c56ba7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md @@ -0,0 +1,293 @@ +--- +id: 6537e0be715fcb57d31ba8c3 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Lastly change the text color of the `terms and conditions` link element to `#dfdfe2` by adding +a new selector in the CSS. + +Well done! You have completed the final part of the _Registration Form_ practice project. + +# --hints-- + +You should use an `a` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('a')); +``` + +You should give the `a` element a `color` of `#dfdfe2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ Account type (required) + + +
+
+ + + + +
+ + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + +fieldset { + border: none; + padding: 2rem 0; + border-bottom: 3px solid #3b3b4f; +} + +fieldset:last-of-type { + border-bottom: none; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +.inline{ + display: inline; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +# --solutions-- + +```html + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ Account type (required) + + +
+
+ + + + +
+ + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + +fieldset { + border: none; + padding: 2rem 0; + border-bottom: 3px solid #3b3b4f; +} + +fieldset:last-of-type { + border-bottom: none; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +a { + color: #dfdfe2; +} + +```