mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-30 16:01:14 -04:00
chore(i18n,learn): processed translations (#51537)
This commit is contained in:
camperbot
@@ -28,13 +28,17 @@ assert.match(code, /background:\s*linear-gradient\(/)
|
||||
Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`.
|
||||
|
||||
```js
|
||||
assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/)
|
||||
const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
|
||||
const firstGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[1];
|
||||
assert.equal(firstGradient,'(94,94,94)85%,');
|
||||
```
|
||||
|
||||
Your `linear-gradient` function should set the second color to be `#45454f` at `100%`.
|
||||
|
||||
```js
|
||||
assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+100%\);?/)
|
||||
const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
|
||||
const secondGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[2];
|
||||
assert.equal(secondGradient,'(69,69,79)100%)');
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -52,8 +52,22 @@ assert.equal(document.querySelector('form')?.id, 'calorie-counter');
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -81,8 +95,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -94,7 +125,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -109,11 +140,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -76,8 +76,22 @@ assert.equal(document.querySelector('form input')?.id, "budget");
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -105,8 +119,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -118,7 +149,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -133,11 +164,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -61,8 +61,22 @@ assert.equal(document.querySelector('form input').placeholder, 'Daily calorie bu
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -90,8 +104,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -103,7 +134,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -118,11 +149,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -98,8 +98,22 @@ assert.equal(document.querySelector('form fieldset div')?.className, "input-cont
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -127,8 +141,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -140,7 +171,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -155,11 +186,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -94,8 +94,22 @@ assert.equal(document.querySelectorAll('form fieldset')[1]?.querySelector('div')
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -123,8 +137,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -136,7 +167,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -151,11 +182,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -98,8 +98,22 @@ assert.equal(document.querySelectorAll('form fieldset')[2]?.querySelector('div')
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -127,8 +141,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -140,7 +171,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -155,11 +186,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -144,8 +144,22 @@ assert.equal(document.querySelectorAll('form fieldset')[4]?.querySelector('div')
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -173,8 +187,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -186,7 +217,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -201,11 +232,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -93,8 +93,22 @@ assert.exists(document.querySelector('form > div > span'));
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -122,8 +136,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -135,7 +166,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -150,11 +181,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -140,8 +140,22 @@ assert.equal(document.querySelector('.controls > span > button')?.innerText, 'Ad
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -169,8 +183,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -182,7 +213,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -197,11 +228,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -150,8 +150,22 @@ assert.isTrue(document.querySelectorAll('.controls select option')?.[0]?.getAttr
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -179,8 +193,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -192,7 +223,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -207,11 +238,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -137,8 +137,22 @@ assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelectorAll('but
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -166,8 +180,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -179,7 +210,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -194,11 +225,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -112,8 +112,22 @@ assert.equal(document.querySelector('.container > div')?.innerHTML, '');
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -141,8 +155,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -154,7 +185,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -169,11 +200,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -100,8 +100,22 @@ assert.match(code, /script\s*?src\s*?=\s*?('|")(\.\/)?script\.js\1/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -129,8 +143,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -142,7 +173,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -157,11 +188,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.equal(calorieCounter, document.getElementById('calorie-counter'));
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -122,8 +122,22 @@ assert.equal(entryDropdown, document.getElementById('entry-dropdown'));
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -151,8 +165,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -164,7 +195,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -179,11 +210,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -140,8 +140,22 @@ assert.equal(output, document.getElementById("output"));
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -169,8 +183,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -182,7 +213,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -197,11 +228,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(code, /let\s+isError\s*=\s*false/g);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -112,8 +112,22 @@ assert.match(cleanInputString?.toString(), /\{\s*\}/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -141,8 +155,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -154,7 +185,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -169,11 +200,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -100,8 +100,22 @@ assert.match(cleanInputString.toString(), /strArray\s*=\s*str\.split\(\s*('|")\1
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -129,8 +143,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -142,7 +173,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -157,11 +188,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -98,8 +98,22 @@ assert.match(cleanInputString.toString(), /cleanStrArray\s*=\s*\[\s*\]/g);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -127,8 +141,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -140,7 +171,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -155,11 +186,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -110,8 +110,22 @@ assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -139,8 +153,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -152,7 +183,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -167,11 +198,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -113,8 +113,22 @@ assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.len
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -142,8 +156,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -155,7 +186,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -170,11 +201,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -124,8 +124,22 @@ assert.match(cleanInputString.toString(), /regex\s*=\s*\/hello\//);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -153,8 +167,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -166,7 +197,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -181,11 +212,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -94,8 +94,22 @@ assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\//);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -123,8 +137,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -136,7 +167,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -151,11 +182,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -92,8 +92,22 @@ assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\\s\//)
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -121,8 +135,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -134,7 +165,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -149,11 +180,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\s\]\//);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -98,8 +98,22 @@ assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\s\]\/g/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -127,8 +141,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -140,7 +171,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -155,11 +186,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -116,8 +116,22 @@ assert.match(cleanInputString.toString(), /return\s*str\.replace\(\s*regex\s*,\s
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -145,8 +159,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -158,7 +189,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -173,11 +204,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(isInvalidInput?.toString(), /\(\s*str\s*\)/)
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -98,8 +98,22 @@ assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\//);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -127,8 +141,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -140,7 +171,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -155,11 +186,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -92,8 +92,22 @@ assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\/i/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -121,8 +135,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -134,7 +165,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -149,11 +180,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -100,8 +100,22 @@ assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e\[0-9\]\//);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -129,8 +143,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -142,7 +173,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -157,11 +188,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -98,8 +98,22 @@ assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e\[0-9\]\+\//);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -127,8 +141,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -140,7 +171,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -155,11 +186,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -98,8 +98,22 @@ assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e\\d\+\//);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -127,8 +141,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -140,7 +171,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -155,11 +186,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(isInvalidInput.toString(), /return\s+str\.match\(\s*regex\s*\)/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(addEntry?.toString(), /\(\s*\)/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1\s*\+\s*entryDropdown\
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -110,8 +110,22 @@ assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySel
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -139,8 +153,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -152,7 +183,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -167,11 +198,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -110,8 +110,22 @@ assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -139,8 +153,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -152,7 +183,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -167,11 +198,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(addEntry.toString(), /entryNumber\s*=\s*targetInputContainer\.query
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -108,8 +108,22 @@ assert.match(addEntry.toString(), /entryNumber\s*=\s*targetInputContainer\.query
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -137,8 +151,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -150,7 +181,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -165,11 +196,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -98,8 +98,22 @@ assert.match(code, /HTMLString\s*=\s*``/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -127,8 +141,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -140,7 +171,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -155,11 +186,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(code, /HTMLString\s*=\s*`\n\s*<label>Entry\s\$\{entryNumber\}\sName
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -98,8 +98,22 @@ assert.match(code, /HTMLString\s*=\s*`\n\s*<label\s+for="\$\{entryDropdown.value
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -127,8 +141,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -140,7 +171,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -155,11 +186,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -122,8 +122,22 @@ assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-name"
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -151,8 +165,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -164,7 +195,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -179,11 +210,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -132,8 +132,22 @@ assert.match(HTMLstring, /`\n\s*<label\s+for="\$\{entryDropdown.value\}-\$\{entr
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -161,8 +175,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -174,7 +205,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -189,11 +220,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -141,8 +141,22 @@ assert.include(inputAttributes, 'min="0"');
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -170,8 +184,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -183,7 +214,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -198,11 +229,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=\s*HTMLS
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -94,8 +94,22 @@ assert.match(addEntry.toString(), /entryNumber\s*=\s*targetInputContainer\.query
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -123,8 +137,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -136,7 +167,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -151,11 +182,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(addEntry.toString(), /targetInputContainer\.insertAdjacentHTML\(\s*
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -102,8 +102,22 @@ assert.match(addEntry.toString(), /insertAdjacentHTML\(\s*('|")beforeend\1\s*,\s
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -131,8 +145,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -144,7 +175,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -159,11 +190,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -108,8 +108,22 @@ assert.match(getCaloriesFromInputs?.toString(), /\(\s*list\s*\)/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -137,8 +151,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -150,7 +181,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -165,11 +196,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*,\s*addE
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(getCaloriesFromInputsString, /let\s+calories\s*=\s*0/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -112,8 +112,22 @@ assert.match(getCaloriesFromInputs.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -141,8 +155,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -154,7 +185,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -169,11 +200,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -120,8 +120,22 @@ assert.match(getCaloriesString, /for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*list\.
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -149,8 +163,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -162,7 +193,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -177,11 +208,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -107,8 +107,22 @@ assert.match(getCaloriesFromInputs.toString(), /currVal\s*=\s*cleanInputString\(
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -136,8 +150,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -149,7 +180,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -164,11 +195,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(getCaloriesFromInputs.toString(), /invalidInputMatch\s*=\s*isInvali
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -116,8 +116,22 @@ assert.isBelow(getCaloriesFromInputs.toString().indexOf("for"), getCaloriesFromI
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -145,8 +159,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -158,7 +189,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -173,11 +204,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -107,8 +107,22 @@ assert.match(code.split("function getCaloriesFromInputs")[1], /alert\(`Invalid I
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -136,8 +150,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -149,7 +180,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -164,11 +195,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -98,8 +98,22 @@ assert.match(code.split("function getCaloriesFromInputs")[1], /alert\(`Invalid I
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -127,8 +141,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -140,7 +171,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -155,11 +186,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -112,8 +112,22 @@ assert.match(getCaloriesFromInputs.toString(), /calories\s*\+=\s*Number\(\s*curr
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -141,8 +155,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -154,7 +185,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -169,11 +200,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -98,8 +98,22 @@ assert.match(getCaloriesFromInputs.toString(), /calories\s*\+=\sNumber\(currVal\
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -127,8 +141,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -140,7 +171,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -155,11 +186,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(calculateCalories?.toString(), /\(e\)/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -100,8 +100,22 @@ assert.match(calculateCalories.toString(), /isError\s*=\s*false/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -129,8 +143,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -142,7 +173,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -157,11 +188,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(calculateCalories.toString(), /breakfastNumberInputs\s*=\s*document
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(calculateCalories.toString(), /lunchNumberInputs\s*=\s*document\.qu
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -140,8 +140,22 @@ assert.match(calculateCalories.toString(), /exerciseNumberInputs\s*=\s*document\
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -169,8 +183,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -182,7 +213,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -197,11 +228,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(calculateCalories.toString(), /breakfastCalories\s*=\s*getCaloriesF
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(calculateCalories.toString(), /lunchCalories\s*=\s*getCaloriesFromI
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -140,8 +140,22 @@ assert.match(calculateCalories.toString(), /exerciseCalories\s*=\s*getCaloriesFr
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -169,8 +183,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -182,7 +213,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -197,11 +228,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -108,8 +108,22 @@ assert.match(calculateCalories.toString(), /budgetCalories\s*=\s*getCaloriesFrom
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -137,8 +151,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -150,7 +181,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -165,11 +196,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)\s*\{?\s*retur
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -110,8 +110,22 @@ assert.match(calculateCalories.toString(), /consumedCalories\s*=\s*breakfastCalo
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -139,8 +153,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -152,7 +183,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -167,11 +198,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(calculateCalories.toString(), /remainingCalories\s*=\s*budgetCalori
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -118,8 +118,22 @@ assert.match(calculateCalories.toString(), /surplusOrDeficit\s*=\s*remainingCalo
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -147,8 +161,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -160,7 +191,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -175,11 +206,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -100,8 +100,22 @@ assert.equal(htmlString, '``');
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -129,8 +143,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -142,7 +173,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -157,11 +188,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -116,8 +116,22 @@ assert.match(htmlString, /<span\s+class\s*=\s*"\$\{surplusOrDeficit\s*\.toLowerC
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -145,8 +159,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -158,7 +189,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -173,11 +204,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -93,8 +93,22 @@ assert.match(htmlString, /<span\s+class\s*=\s*"\$\{surplusOrDeficit\s*\.toLowerC
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -122,8 +136,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -135,7 +166,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -150,11 +181,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -102,8 +102,22 @@ assert.match(htmlString, /<span\s+class\s*=\s*"\$\{surplusOrDeficit\s*\.toLowerC
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -131,8 +145,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -144,7 +175,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -159,11 +190,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -109,8 +109,22 @@ assert.match(htmlString, /\n\s*<hr\s*\/?>/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -138,8 +152,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -151,7 +182,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -166,11 +197,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -116,8 +116,22 @@ assert.match(htmlString, /<p>\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -145,8 +159,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -158,7 +189,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -173,11 +204,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -114,8 +114,22 @@ assert(htmlString.match(/<p>\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/))
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -143,8 +157,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -156,7 +187,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -171,11 +202,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(calculateCalories.toString(), /output\.classList\.remove\(\s*('|")h
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*,\s*cal
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(clearForm?.toString(), /\(\s*\)/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -104,8 +104,22 @@ assert.match(clearForm.toString(), /inputContainers\s*=\s*document\.querySelecto
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -133,8 +147,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -146,7 +177,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,11 +192,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -100,8 +100,22 @@ assert.match(clearForm, /inputContainers\s*=\s*Array\.from\(\s*document\.querySe
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -129,8 +143,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -142,7 +173,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -157,11 +188,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -111,8 +111,22 @@ assert.match(forLoop, /inputContainers\[\s*i\s*\]\s*\.innerHTML\s*=\s*(`|'|")\1\
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -140,8 +154,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -153,7 +184,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -168,11 +199,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(afterLoop, /budgetNumberInput\.value/);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.isAbove(clearForm.toString().indexOf('output'), clearForm.toString().inde
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(clearForm.toString(), /output\.classList\.add\(\s*('|")hide\1\s*\)/
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -106,8 +106,22 @@ assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*,\s
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -135,8 +149,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -148,7 +179,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -163,11 +194,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
@@ -350,8 +381,22 @@ calorieCounter.addEventListener("submit", calculateCalories);
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -379,8 +424,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -392,7 +454,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -407,11 +469,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-62
|
||||
|
||||
標題元素（如 `h1`、`h2`）的排版是由用戶瀏覽器的默認值設置的。
|
||||
|
||||
添加兩個新的類選擇器（`h1` 和 `h2`）。 對兩者都使用 `font-size` 屬性，但對 `h1` 使用 `40px`，對 `h2` 使用 `30px` 的值。
|
||||
添加兩個新的類型選擇器（`h1` 和 `h2`）。 對兩者都使用 `font-size` 屬性，但對 `h1` 使用 `40px`，對 `h2` 使用 `30px` 的值。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-48
|
||||
|
||||
選擇所有的 `input`、`textarea` 和 `select` 元素，使其寬度填滿父級元素的寬度。
|
||||
|
||||
另外，給最被選中的元素的頂部添加 `10px` 的 `margin`。 設置其餘的 margins 爲 `0`。
|
||||
另外，給被選中的元素的頂部添加 `10px` 的 `margin`。 設置其餘的 margins 爲 `0`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -28,13 +28,17 @@ assert.match(code, /background:\s*linear-gradient\(/)
|
||||
Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`.
|
||||
|
||||
```js
|
||||
assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/)
|
||||
const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
|
||||
const firstGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[1];
|
||||
assert.equal(firstGradient,'(94,94,94)85%,');
|
||||
```
|
||||
|
||||
Your `linear-gradient` function should set the second color to be `#45454f` at `100%`.
|
||||
|
||||
```js
|
||||
assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+100%\);?/)
|
||||
const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
|
||||
const secondGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[2];
|
||||
assert.equal(secondGradient,'(69,69,79)100%)');
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-34
|
||||
|
||||
# --description--
|
||||
|
||||
你的畫的顏色和形狀太銳利了，不能像 Rothko 一樣通過。
|
||||
你的畫的顏色和形狀太銳利了，不能當作羅斯科畫。
|
||||
|
||||
使用 `filter` 屬性在 `.canvas` 元素中使其 `blur` 爲 `2px`。
|
||||
|
||||
|
||||
@@ -52,8 +52,22 @@ assert.equal(document.querySelector('form')?.id, 'calorie-counter');
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--light-grey: #f5f6f7;
|
||||
--dark-blue: #0a0a23;
|
||||
--fcc-blue: #1b1b32;
|
||||
--light-yellow: #fecc4c;
|
||||
--dark-yellow: #feac32;
|
||||
--light-pink: #ffadad;
|
||||
--dark-red: #850000;
|
||||
--light-green: #acd157;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--fcc-blue);
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -81,8 +95,25 @@ legend {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: var(--light-yellow);
|
||||
border: 2px solid var(--dark-yellow);
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: var(--light-pink);
|
||||
color: var(--dark-red);
|
||||
border-color: var(--dark-red);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
min-height: 24px;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
fieldset,
|
||||
@@ -94,7 +125,7 @@ select {
|
||||
}
|
||||
|
||||
.output {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--light-grey);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -109,11 +140,11 @@ select {
|
||||
}
|
||||
|
||||
.surplus {
|
||||
color: #006627;
|
||||
color: var(--light-green);
|
||||
}
|
||||
|
||||
.deficit {
|
||||
color: #B30000;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user