fix: new practice project tests (#44554)
* fix accessibility-quiz and reg-form tests (cherry picked from commit467f0b3e78) * fix: registration-form tests * fix: ferris wheel tests * fix: photo-gallery tests * fix: magazine tests (cherry picked from commit5831c2345d) * fix: picasso tests * fix: piano tests * fix: magazine and nutrition tests * fix: again magazine...I am doing this in sill order * chore: resolve discrepancies with tests (cherry picked from commita7b5e031df) * fix: the stuffs...I am tired * fix: oops (cherry picked from commit05ff55a036) * fix: add missing solutions (cherry picked from commit61fa23fc70) Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
Shaun Hamilton
GitHub
@ -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--
|
||||
|
||||
@ -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--
|
||||
|
||||
@ -61,6 +61,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxWidth === '500px')
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
}
|
||||
|
||||
@ -14,7 +14,10 @@ Give your `#gallery` selector a `padding` property set to `0 4px`.
|
||||
Your `#gallery` selector should have a `padding` property set to `0 4px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.padding === '0px 4px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingTop, '0px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingBottom, '0px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingLeft, '4px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight, '4px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -75,6 +75,7 @@ body {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -81,6 +81,7 @@ body {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -73,6 +73,7 @@ body {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -94,6 +94,7 @@ body {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
#gallery img {
|
||||
|
||||
@ -104,6 +104,7 @@ body {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
#gallery img {
|
||||
@ -126,7 +127,7 @@ body {
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -180,6 +181,7 @@ body {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#gallery img {
|
||||
|
||||
@ -56,7 +56,7 @@ assert(document.querySelector('p')?.className === 'hero-subtitle');
|
||||
Your `p` element should have the text set to `Our efforts to restructure our curriculum with a more project-based focus`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('p')?.textContent === 'Our efforts to restructure our curriculum with a more project-based focus');
|
||||
assert.equal(document.querySelector('p')?.textContent?.trim()?.replace(/\s{2,}/, ' '), 'Our efforts to restructure our curriculum with a more project-based focus');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -52,25 +52,25 @@ assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[0]?.getA
|
||||
Your second `a` element should have an `href` set to `https://twitter.com/freecodecamp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[1]?.getAttribute('href') === 'https://twitter.com/freecodecamp');
|
||||
assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[1]?.getAttribute('href'), 'https://twitter.com/freecodecamp');
|
||||
```
|
||||
|
||||
Your third `a` element should have an `href` set to `https://instagram.com/freecodecamp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[2]?.getAttribute('href') === 'https://instagram.com/freecodecamp');
|
||||
assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[2]?.getAttribute('href'), 'https://instagram.com/freecodecamp');
|
||||
```
|
||||
|
||||
Your fourth `a` element should have an `href` set to `https://www.linkedin.com/school/free-code-camp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[3]?.getAttribute('href') === 'https://www.linkedin.com/school/free-code-camp');
|
||||
assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[3]?.getAttribute('href'), 'https://www.linkedin.com/school/free-code-camp');
|
||||
```
|
||||
|
||||
Your fifth `a` element should have an `href` set to `https://www.youtube.com/freecodecamp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[4]?.getAttribute('href') === 'https://www.youtube.com/freecodecamp');
|
||||
assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[4]?.getAttribute('href'), 'https://www.youtube.com/freecodecamp');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-23
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `.image-wrapper` element, give the second `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, an `alt` of `image of the calculator project`, a `loading` attribute set to `lazy`, a `class` set to `image-2`, a `width` attribute set to `400`, and a `height` attribute set to `400`.
|
||||
Within your `.image-wrapper` element, give the second `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, an `alt` of `image of a calculator project`, a `loading` attribute set to `lazy`, a `class` set to `image-2`, a `width` attribute set to `400`, and a `height` attribute set to `400`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -17,10 +17,10 @@ Your second `img` element should have a `src` set to `https://cdn.freecodecamp.o
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png');
|
||||
```
|
||||
|
||||
Your second `img` element should have an `alt` set to `image of the calculator project`.
|
||||
Your second `img` element should have an `alt` set to `image of a calculator project`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('alt') === 'image of the calculator project');
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('alt') === 'image of a calculator project');
|
||||
```
|
||||
|
||||
Your second `img` element should have a `loading` attribute set to `lazy`.
|
||||
|
||||
@ -251,5 +251,6 @@ main {
|
||||
|
||||
.hero {
|
||||
grid-column: 1 / -1;
|
||||
position: relative;
|
||||
}
|
||||
```
|
||||
|
||||
@ -14,7 +14,9 @@ To give the `hr` a color, you need to adjust the `border` property. Give the `hr
|
||||
Your `hr` should have a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('hr')?.border === '1px solid rgba(120, 120, 120, 0.6)');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderWidth, '1px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderStyle, 'solid');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderColor, 'rgba(120, 120, 120, 0.6)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -260,6 +260,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -243,6 +243,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -264,6 +264,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -250,6 +250,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -248,6 +248,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -242,6 +242,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -248,6 +248,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -242,6 +242,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -248,6 +248,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -248,6 +248,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -250,6 +250,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -250,6 +250,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -244,6 +244,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -244,6 +244,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -248,6 +248,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -258,6 +258,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -256,6 +256,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -275,6 +275,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
@ -16,7 +16,7 @@ Congratulations! Your magazine is now complete.
|
||||
You should have a new `@media` query for `only screen and (max-width: 420px)`. This should be the last query in the `@media` query list.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.media?.mediaText === 'only screen and (max-width: 420px)');
|
||||
assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.media?.mediaText, 'only screen and (max-width: 420px)');
|
||||
```
|
||||
|
||||
Your new `@media` query should have a `.hero-title` selector.
|
||||
@ -256,6 +256,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
@ -404,7 +405,7 @@ hr {
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -627,6 +628,7 @@ img {
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
.heading {
|
||||
@ -770,9 +772,8 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 420px) {
|
||||
@media only screen (max-width: 420px) {
|
||||
.hero-title {
|
||||
max-width: 420px;
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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`.
|
||||
|
||||
@ -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`.
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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--
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
@ -155,7 +155,7 @@ input[type="file"] {
|
||||
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -247,13 +247,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 {
|
||||
@ -267,7 +267,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;
|
||||
|
||||
@ -14,7 +14,10 @@ These dots are just a little too square. Give the `black-dot` class a `border-ra
|
||||
Your `.black-dot` selector should have a `border-radius` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderRadius === '50%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -127,6 +127,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -133,6 +133,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -127,6 +127,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -115,6 +115,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -124,6 +124,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -138,6 +138,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -140,6 +140,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -143,6 +143,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -146,6 +146,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -140,6 +140,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -146,6 +146,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -128,6 +128,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -146,6 +146,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -140,6 +140,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -146,6 +146,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -140,6 +140,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -146,6 +146,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -140,6 +140,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -128,6 +128,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -146,6 +146,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -151,6 +151,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -136,6 +136,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -142,6 +142,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -142,6 +142,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -142,6 +142,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -142,6 +142,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -139,6 +139,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -159,6 +159,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -154,6 +154,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -152,6 +152,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -212,6 +212,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -195,6 +195,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -196,6 +196,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -190,6 +190,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -196,6 +196,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -178,6 +178,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -190,6 +190,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -178,6 +178,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -190,6 +190,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -190,6 +190,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -178,6 +178,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -190,6 +190,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
@ -299,6 +300,7 @@ body {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -190,6 +190,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
@ -299,6 +300,7 @@ body {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
|
||||
@ -184,6 +184,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
@ -293,6 +294,7 @@ body {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
|
||||
@ -196,6 +196,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
@ -305,6 +306,7 @@ body {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
|
||||
@ -178,6 +178,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
@ -287,6 +288,7 @@ body {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
|
||||
@ -190,6 +190,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
@ -299,6 +300,7 @@ body {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
|
||||
@ -190,6 +190,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
@ -299,6 +300,7 @@ body {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
|
||||
@ -178,6 +178,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
@ -287,6 +288,7 @@ body {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
|
||||
@ -202,6 +202,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -184,6 +184,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -190,6 +190,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -196,6 +196,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -196,6 +196,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -190,6 +190,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
@ -178,6 +178,7 @@ body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user