diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-accessibility-by-building-a-quiz/step-003.md b/curriculum/challenges/english/01-responsive-web-design/learn-accessibility-by-building-a-quiz/step-003.md index 1ad7d530fa..f22fb82bee 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-accessibility-by-building-a-quiz/step-003.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-accessibility-by-building-a-quiz/step-003.md @@ -29,7 +29,7 @@ You should give the `meta` a `content` attribute of `width=device-width, initial ```js // TODO: Double-check this is the only correct answer -assert.equal(document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1); +assert.equal(document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1.0"]')?.length || document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-accessibility-by-building-a-quiz/step-064.md b/curriculum/challenges/english/01-responsive-web-design/learn-accessibility-by-building-a-quiz/step-064.md index bfc6c2a98f..36d697eb6f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-accessibility-by-building-a-quiz/step-064.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-accessibility-by-building-a-quiz/step-064.md @@ -26,25 +26,25 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('address')?.textAlign, 'ce You should give `address` a `padding-top` of at least `1px`. ```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingTop?.replace(/\D+/, '')), 1); +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-top')?.replace(/\D\D+/, '')), 1); ``` You should give `address` a `padding-right` of at least `1px`. ```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingRight?.replace(/\D+/, '')), 1); +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-right')?.replace(/\D\D+/, '')), 1); ``` You should give `address` a `padding-bottom` of at least `1px`. ```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingBottom?.replace(/\D+/, '')), 1); +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-bottom')?.replace(/\D\D+/, '')), 1); ``` You should give `address` a `padding-left` of at least `1px`. ```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingLeft?.replace(/\D+/, '')), 1); +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-left')?.replace(/\D\D+/, '')), 1); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-028.md b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-028.md index d874c530f7..426966289c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-028.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-028.md @@ -24,7 +24,7 @@ assert.exists(document.querySelector('fieldset:nth-child(3) > label + label')); You should give the `label` the text `Input your age (years): `. ```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent, 'Input your age (years): '); +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent?.trim(), 'Input your age (years):'); ``` You should give the `label` an `input` with `type` of `number`. diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-031.md b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-031.md index a58e285f14..e7aabb92d4 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-031.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-031.md @@ -31,10 +31,10 @@ You should give the second `option` element the text `freeCodeCamp News`. assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.textContent, 'freeCodeCamp News'); ``` -You should give the third `option` element the text `freeCodeCamp YouTube`. +You should give the third `option` element the text `freeCodeCamp YouTube Channel`. ```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube'); +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube Channel'); ``` You should give the fourth `option` element the text `freeCodeCamp Forum`. diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-050.md b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-050.md index b888e68877..d894d9a66c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-050.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-050.md @@ -130,13 +130,13 @@ textarea, select { margin: 10px 0 0 0; width: 100%; + min-height: 2em; } input, textarea { background-color: #0a0a23; border: 1px solid #0a0a23; color: #ffffff; - min-height: 2em; } .inline { diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-051.md b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-051.md index 35125e293f..7fc81039d2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-051.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-051.md @@ -119,13 +119,13 @@ textarea, select { margin: 10px 0 0 0; width: 100%; + min-height: 2em; } input, textarea { background-color: #0a0a23; border: 1px solid #0a0a23; color: #ffffff; - min-height: 2em; } .inline { diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-052.md b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-052.md index 1d0db5f3d4..5638236c1a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-052.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-052.md @@ -116,13 +116,13 @@ textarea, select { margin: 10px 0 0 0; width: 100%; + min-height: 2em; } input, textarea { background-color: #0a0a23; border: 1px solid #0a0a23; color: #ffffff; - min-height: 2em; } .inline { diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-053.md b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-053.md index 2f9715f92c..dbc33628b4 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-053.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-053.md @@ -116,13 +116,13 @@ textarea, select { margin: 10px 0 0 0; width: 100%; + min-height: 2em; } input, textarea { background-color: #0a0a23; border: 1px solid #0a0a23; color: #ffffff; - min-height: 2em; } .inline { @@ -137,7 +137,7 @@ input[type="submit"] { width: 60%; margin: 0 auto; height: 2em; - font-size: 1.1em; + font-size: 1.1rem; } --fcc-editable-region-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-054.md b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-054.md index 9b2a40dabc..3fcb156ccb 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-054.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-054.md @@ -119,13 +119,13 @@ textarea, select { margin: 10px 0 0 0; width: 100%; + min-height: 2em; } input, textarea { background-color: #0a0a23; border: 1px solid #0a0a23; color: #ffffff; - min-height: 2em; } .inline { @@ -140,7 +140,7 @@ input[type="submit"] { width: 60%; margin: 0 auto; height: 2em; - font-size: 1.1em; + font-size: 1.1rem; background-color: #3b3b4f; border-color: white; diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-055.md b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-055.md index 524992057c..e79bd5a317 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-055.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-055.md @@ -118,13 +118,13 @@ textarea, select { margin: 10px 0 0 0; width: 100%; + min-height: 2em; } input, textarea { background-color: #0a0a23; border: 1px solid #0a0a23; color: #ffffff; - min-height: 2em; } .inline { @@ -138,7 +138,7 @@ input[type="submit"] { width: 60%; margin: 1em auto; height: 2em; - font-size: 1.1em; + font-size: 1.1rem; background-color: #3b3b4f; border-color: white; min-width: 300px; diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-056.md b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-056.md index 68830ca73d..7363f0692d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-056.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-056.md @@ -119,13 +119,13 @@ textarea, select { margin: 10px 0 0 0; width: 100%; + min-height: 2em; } input, textarea { background-color: #0a0a23; border: 1px solid #0a0a23; color: #ffffff; - min-height: 2em; } .inline { @@ -139,7 +139,7 @@ input[type="submit"] { width: 60%; margin: 1em auto; height: 2em; - font-size: 1.1em; + font-size: 1.1rem; background-color: #3b3b4f; border-color: white; min-width: 300px; diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-057.md b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-057.md index addda59d65..46618f0e22 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-057.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-html-forms-by-building-a-registration-form/step-057.md @@ -119,13 +119,13 @@ textarea, select { margin: 10px 0 0 0; width: 100%; + min-height: 2em; } input, textarea { background-color: #0a0a23; border: 1px solid #0a0a23; color: #ffffff; - min-height: 2em; } .inline { @@ -139,7 +139,7 @@ input[type="submit"] { width: 60%; margin: 1em auto; height: 2em; - font-size: 1.1em; + font-size: 1.1rem; background-color: #3b3b4f; border-color: white; min-width: 300px; @@ -154,3 +154,131 @@ input[type="file"] { --fcc-editable-region-- ``` + +# --solutions-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```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; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +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; +} + +```