CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-22 21:08:12 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

chore(curriculum): update tests lab product page (#57225)

Browse Source 
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
This commit is contained in:
Anna 2024-11-21 00:32:40 -05:00 committed by GitHub
parent b1d0ad0193
commit f5288c0336
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 61 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
curriculum/challenges/english/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
View File

@ -35,57 +35,63 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
You should have a `header` element with an `id` of `header`.
```js
const el = document.getElementById('header')
assert(!!el && el.tagName === 'HEADER')
const el = document.getElementById('header');
assert.exists(el);
assert.strictEqual(el.tagName, 'HEADER');
```
You should have an `img` element with an `id` of `header-img`.
```js
const el = document.getElementById('header-img')
assert(!!el && el.tagName === 'IMG')
const el = document.getElementById('header-img');
assert.exists(el);
assert.strictEqual(el.tagName, 'IMG');
```
Your `#header-img` should be a descendant of the `#header`.
```js
const els = document.querySelectorAll('#header #header-img')
assert(els.length > 0)
const els = document.querySelectorAll('#header #header-img');
assert.isNotEmpty(els);
```
Your `#header-img` should have a `src` attribute.
```js
const el = document.getElementById('header-img')
assert(!!el && !!el.src)
const el = document.getElementById('header-img');
assert.exists(el);
assert.exists(el.src);
```
Your `#header-img`’s `src` value should be a valid URL (starts with `http`).
```js
const el = document.getElementById('header-img');
assert(!!el && el.getAttribute('src') !== "" && /^http/.test(el.src));
assert.exists(el);
assert.isNotEmpty(el.getAttribute('src'));
assert.match(el.src, /^http/);
```
You should have a `nav` element with an `id` of `nav-bar`.
```js
const el = document.getElementById('nav-bar')
assert(!!el && el.tagName === 'NAV')
const el = document.getElementById('nav-bar');
assert.exists(el);
assert.strictEqual(el.tagName, "NAV");
```
Your `#nav-bar` should be a descendant of the `#header`.
```js
const els = document.querySelectorAll('#header #nav-bar')
assert(els.length > 0)
const els = document.querySelectorAll('#header #nav-bar');
assert.isNotEmpty(els);
```
You should have at least 3 `.nav-link` elements within the `#nav-bar`.
```js
const els = document.querySelectorAll('#nav-bar .nav-link')
assert(els.length >= 3)
const els = document.querySelectorAll('#nav-bar .nav-link');
assert.isAtLeast(els.length, 3);
```
Each `.nav-link` element should have an `href` attribute.
@ -93,9 +99,10 @@ Each `.nav-link` element should have an `href` attribute.
```js
const els = document.querySelectorAll('.nav-link')
els.forEach(el => {
if (!el.href) assert(false)
assert.exists(el.href);
assert.isNotEmpty(el.href);
})
assert(els.length > 0)
assert.isNotEmpty(els);
```
Each `.nav-link` element should link to a corresponding element on the landing page (has an `href` with a value of another element's id. e.g. `#footer`).
@ -104,16 +111,17 @@ Each `.nav-link` element should link to a corresponding element on the landing p
const els = document.querySelectorAll('.nav-link')
els.forEach(el => {
const linkDestination = el.getAttribute('href').slice(1)
if (!document.getElementById(linkDestination)) assert(false)
assert.exists(document.getElementById(linkDestination));
})
assert(els.length > 0)
assert.isNotEmpty(els);
```
You should have a `video` or `iframe` element with an `id` of `video`.
```js
const el = document.getElementById('video')
assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME'))
const el = document.getElementById('video');
assert.exists(el);
assert.oneOf(el.tagName, ['VIDEO','IFRAME']);
```
Your `#video` should have a `src` attribute.
@ -128,77 +136,86 @@ if (sourceNode.length) {
if (sourceElement) {
el = sourceElement;
}
assert(el.hasAttribute('src'));
assert.isTrue(el.hasAttribute('src'));
```
You should have a `form` element with an `id` of `form`.
```js
const el = document.getElementById('form')
assert(!!el && el.tagName === 'FORM')
const el = document.getElementById('form');
assert.exists(el);
assert.strictEqual(el.tagName, "FORM");
```
You should have an `input` element with an `id` of `email`.
```js
const el = document.getElementById('email')
assert(!!el && el.tagName === 'INPUT')
const el = document.getElementById('email');
assert.exists(el);
assert.strictEqual(el.tagName, "INPUT");
```
Your `#email` should be a descendant of the `#form`.
```js
const els = document.querySelectorAll('#form #email')
assert(els.length > 0)
assert.isNotEmpty(els);
```
Your `#email` should have the `placeholder` attribute with placeholder text.
```js
const el = document.getElementById('email')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
const el = document.getElementById('email');
assert.exists(el);
assert.exists(el.placeholder);
assert.isNotEmpty(el.placeholder);
```
Your `#email` should use HTML5 validation by setting its `type` to `email`.
```js
const el = document.getElementById('email')
assert(!!el && el.type === 'email')
const el = document.getElementById('email');
assert.exists(el);
assert.strictEqual(el.type, "email");
```
You should have an `input` element with an `id` of `submit`.
```js
const el = document.getElementById('submit')
assert(!!el && el.tagName === 'INPUT')
const el = document.getElementById('submit');
assert.exists(el);
assert.strictEqual(el.tagName, "INPUT");
```
Your `#submit` should be a descendant of the `#form`.
```js
const els = document.querySelectorAll('#form #submit')
assert(els.length > 0)
const els = document.querySelectorAll('#form #submit');
assert.isNotEmpty(els);
```
Your `#submit` should have a `type` of `submit`.
```js
const el = document.getElementById('submit')
assert(!!el && el.type === 'submit')
const el = document.getElementById('submit');
assert.exists(el);
assert.strictEqual(el.type, 'submit');
```
Your `#form` should have an `action` attribute of `https://www.freecodecamp.org/email-submit`.
```js
const el = document.getElementById('form')
assert(!!el && el.action === 'https://www.freecodecamp.org/email-submit')
const el = document.getElementById('form');
assert.exists(el);
assert.strictEqual(el.action, 'https://www.freecodecamp.org/email-submit');
```
Your `#email` should have a `name` attribute of `email`.
```js
const el = document.getElementById('email')
assert(!!el && el.name === 'email')
const el = document.getElementById('email');
assert.exists(el);
assert.strictEqual(el.name, 'email');
```
Your `#nav-bar` should always be at the top of the viewport.
@ -245,8 +262,8 @@ Your Product Landing Page should use at least one media query.
```js
const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media');
assert.isTrue(cssCheck.length > 0 || htmlSourceAttr.length > 0);
```
Your Product Landing Page should use CSS Flexbox at least once.
@ -260,7 +277,7 @@ const usesFlex = cssRules.find(rule => hasFlex(rule))
const usesFlexMedia = mediaRules.find(mediaRule => {
return [...mediaRule.cssRules].find(rule => hasFlex(rule))
})
assert(usesFlex || usesFlexMedia)
assert.exists(usesFlex || usesFlexMedia);
```
# --seed--