mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
chore(i18n,learn): processed translations (#46964)
This commit is contained in:
camperbot
+23
-33
@@ -39,15 +39,13 @@ assert(
|
||||
`DisplayMessages` 組件應渲染含 `h2`、`button`、`ul`、`li` 四個子元素的`div`
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const state = () => {
|
||||
mockedComponent.setState({ messages: ['__TEST__MESSAGE'] });
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await state();
|
||||
const updated = state();
|
||||
assert(
|
||||
updated.find('div').length === 1 &&
|
||||
updated.find('h2').length === 1 &&
|
||||
@@ -67,18 +65,16 @@ assert(code.match(/this\.state\.messages\.map/g));
|
||||
`input` 元素應渲染本地狀態中的 `input` 值。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const testValue = '__TEST__EVENT__INPUT';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testValue);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await changed();
|
||||
const updated = changed();
|
||||
assert(updated.find('input').props().value === testValue);
|
||||
};
|
||||
```
|
||||
@@ -86,19 +82,17 @@ async () => {
|
||||
調用 `handleChange` 方法時應更新狀態中的 `input` 值爲當前輸入。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__TEST__EVENT__MESSAGE__';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterInput = await changed();
|
||||
const afterInput = changed();
|
||||
assert(
|
||||
initialState.input === '' &&
|
||||
afterInput.state().input === '__TEST__EVENT__MESSAGE__'
|
||||
@@ -109,36 +103,34 @@ async () => {
|
||||
單擊 `Add message` 按鈕應調用 `submitMessage` 方法，添加當前 `input` 到狀態中的 `messages` 數組。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage_1 = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage_1);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_1 = await firstSubmit();
|
||||
const afterSubmit_1 = firstSubmit();
|
||||
const submitState_1 = afterSubmit_1.state();
|
||||
const testMessage_2 = '__SECOND__MESSAGE__';
|
||||
const secondChange = () => {
|
||||
causeChange(mockedComponent, testMessage_2);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const secondResult = await secondChange();
|
||||
const secondResult = secondChange();
|
||||
const secondSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_2 = await secondSubmit();
|
||||
const afterSubmit_2 = secondSubmit();
|
||||
const submitState_2 = afterSubmit_2.state();
|
||||
assert(
|
||||
initialState.messages.length === 0 &&
|
||||
@@ -152,25 +144,23 @@ async () => {
|
||||
`submitMessage` 方法應清除當前輸入。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstState = firstResult.state();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit = await firstSubmit();
|
||||
const afterSubmit = firstSubmit();
|
||||
const submitState = afterSubmit.state();
|
||||
assert(firstState.input === testMessage && submitState.input === '');
|
||||
};
|
||||
|
||||
+1
-1
@@ -161,7 +161,7 @@ assert(
|
||||
```js
|
||||
assert(
|
||||
new RegExp(/(\s|;)if(\s|\()/).test(
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()
|
||||
code
|
||||
) === false
|
||||
);
|
||||
```
|
||||
|
||||
+23
-33
@@ -39,15 +39,13 @@ assert(
|
||||
`DisplayMessages` 组件应渲染含 `h2`、`button`、`ul`、`li` 四个子元素的`div`
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const state = () => {
|
||||
mockedComponent.setState({ messages: ['__TEST__MESSAGE'] });
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await state();
|
||||
const updated = state();
|
||||
assert(
|
||||
updated.find('div').length === 1 &&
|
||||
updated.find('h2').length === 1 &&
|
||||
@@ -67,18 +65,16 @@ assert(code.match(/this\.state\.messages\.map/g));
|
||||
`input` 元素应渲染本地状态中的 `input` 值。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const testValue = '__TEST__EVENT__INPUT';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testValue);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await changed();
|
||||
const updated = changed();
|
||||
assert(updated.find('input').props().value === testValue);
|
||||
};
|
||||
```
|
||||
@@ -86,19 +82,17 @@ async () => {
|
||||
调用 `handleChange` 方法时应更新状态中的 `input` 值为当前输入。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__TEST__EVENT__MESSAGE__';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterInput = await changed();
|
||||
const afterInput = changed();
|
||||
assert(
|
||||
initialState.input === '' &&
|
||||
afterInput.state().input === '__TEST__EVENT__MESSAGE__'
|
||||
@@ -109,36 +103,34 @@ async () => {
|
||||
单击 `Add message` 按钮应调用 `submitMessage` 方法，添加当前 `input` 到状态中的 `messages` 数组。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage_1 = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage_1);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_1 = await firstSubmit();
|
||||
const afterSubmit_1 = firstSubmit();
|
||||
const submitState_1 = afterSubmit_1.state();
|
||||
const testMessage_2 = '__SECOND__MESSAGE__';
|
||||
const secondChange = () => {
|
||||
causeChange(mockedComponent, testMessage_2);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const secondResult = await secondChange();
|
||||
const secondResult = secondChange();
|
||||
const secondSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_2 = await secondSubmit();
|
||||
const afterSubmit_2 = secondSubmit();
|
||||
const submitState_2 = afterSubmit_2.state();
|
||||
assert(
|
||||
initialState.messages.length === 0 &&
|
||||
@@ -152,25 +144,23 @@ async () => {
|
||||
`submitMessage` 方法应清除当前输入。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstState = firstResult.state();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit = await firstSubmit();
|
||||
const afterSubmit = firstSubmit();
|
||||
const submitState = afterSubmit.state();
|
||||
assert(firstState.input === testMessage && submitState.input === '');
|
||||
};
|
||||
|
||||
+1
-1
@@ -161,7 +161,7 @@ assert(
|
||||
```js
|
||||
assert(
|
||||
new RegExp(/(\s|;)if(\s|\()/).test(
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()
|
||||
code
|
||||
) === false
|
||||
);
|
||||
```
|
||||
|
||||
+23
-33
@@ -39,15 +39,13 @@ assert(
|
||||
El componente `DisplayMessages` debe renderizar un `div` que contenga un elemento `h2`, un elemento `button`, un elemento `ul` y elementos `li` como hijos.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const state = () => {
|
||||
mockedComponent.setState({ messages: ['__TEST__MESSAGE'] });
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await state();
|
||||
const updated = state();
|
||||
assert(
|
||||
updated.find('div').length === 1 &&
|
||||
updated.find('h2').length === 1 &&
|
||||
@@ -67,18 +65,16 @@ assert(code.match(/this\.state\.messages\.map/g));
|
||||
El elemento `input` debe renderizar el valor de `input` en estado local.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const testValue = '__TEST__EVENT__INPUT';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testValue);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await changed();
|
||||
const updated = changed();
|
||||
assert(updated.find('input').props().value === testValue);
|
||||
};
|
||||
```
|
||||
@@ -86,19 +82,17 @@ async () => {
|
||||
La llamada al método `handleChange` debe actualizar el valor de `input` en estado a la entrada actual.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__TEST__EVENT__MESSAGE__';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterInput = await changed();
|
||||
const afterInput = changed();
|
||||
assert(
|
||||
initialState.input === '' &&
|
||||
afterInput.state().input === '__TEST__EVENT__MESSAGE__'
|
||||
@@ -109,36 +103,34 @@ async () => {
|
||||
Al hacer clic en el botón `Add message` se debe llamar al método `submitMessage` que debe añadir el `input` actual al arreglo `messages` del estado.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage_1 = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage_1);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_1 = await firstSubmit();
|
||||
const afterSubmit_1 = firstSubmit();
|
||||
const submitState_1 = afterSubmit_1.state();
|
||||
const testMessage_2 = '__SECOND__MESSAGE__';
|
||||
const secondChange = () => {
|
||||
causeChange(mockedComponent, testMessage_2);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const secondResult = await secondChange();
|
||||
const secondResult = secondChange();
|
||||
const secondSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_2 = await secondSubmit();
|
||||
const afterSubmit_2 = secondSubmit();
|
||||
const submitState_2 = afterSubmit_2.state();
|
||||
assert(
|
||||
initialState.messages.length === 0 &&
|
||||
@@ -152,25 +144,23 @@ async () => {
|
||||
El método `submitMessage` debe borrar la entrada actual.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstState = firstResult.state();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit = await firstSubmit();
|
||||
const afterSubmit = firstSubmit();
|
||||
const submitState = afterSubmit.state();
|
||||
assert(firstState.input === testMessage && submitState.input === '');
|
||||
};
|
||||
|
||||
+1
-1
@@ -161,7 +161,7 @@ Tu código no debe contener ninguna sentencia `if/else`.
|
||||
```js
|
||||
assert(
|
||||
new RegExp(/(\s|;)if(\s|\()/).test(
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()
|
||||
code
|
||||
) === false
|
||||
);
|
||||
```
|
||||
|
||||
+2
-2
@@ -172,11 +172,11 @@ L'elemento `#navbar` dovrebbe sempre essere in cima al viewport.
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Personal Portfolio</title>
|
||||
</head>
|
||||
<body>
|
||||
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
|
||||
<!--Font Reference-->
|
||||
<nav id="navbar">
|
||||
<a href="#projects">Projects</a> |
|
||||
|
||||
+23
-33
@@ -39,15 +39,13 @@ assert(
|
||||
Il componente `DisplayMessages` dovrebbe rendere un `div` contenente un elemento `h2`, un elemento `button`, un elemento `ul`, e degli elementi `li` come figli.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const state = () => {
|
||||
mockedComponent.setState({ messages: ['__TEST__MESSAGE'] });
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await state();
|
||||
const updated = state();
|
||||
assert(
|
||||
updated.find('div').length === 1 &&
|
||||
updated.find('h2').length === 1 &&
|
||||
@@ -67,18 +65,16 @@ assert(code.match(/this\.state\.messages\.map/g));
|
||||
L'elemento `input` dovrebbe presentare il valore di `input` nello stato locale.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const testValue = '__TEST__EVENT__INPUT';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testValue);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await changed();
|
||||
const updated = changed();
|
||||
assert(updated.find('input').props().value === testValue);
|
||||
};
|
||||
```
|
||||
@@ -86,19 +82,17 @@ async () => {
|
||||
Chiamare il metodo `handleChange` dovrebbe aggiornare il valore `input` nello stato in base all'input corrente.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__TEST__EVENT__MESSAGE__';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterInput = await changed();
|
||||
const afterInput = changed();
|
||||
assert(
|
||||
initialState.input === '' &&
|
||||
afterInput.state().input === '__TEST__EVENT__MESSAGE__'
|
||||
@@ -109,36 +103,34 @@ async () => {
|
||||
Fare clic sul pulsante `Add message` dovrebbe chiamare il metodo `submitMessage` che dovrebbe aggiungere l'`input` corrente all'array `messages` nello stato.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage_1 = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage_1);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_1 = await firstSubmit();
|
||||
const afterSubmit_1 = firstSubmit();
|
||||
const submitState_1 = afterSubmit_1.state();
|
||||
const testMessage_2 = '__SECOND__MESSAGE__';
|
||||
const secondChange = () => {
|
||||
causeChange(mockedComponent, testMessage_2);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const secondResult = await secondChange();
|
||||
const secondResult = secondChange();
|
||||
const secondSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_2 = await secondSubmit();
|
||||
const afterSubmit_2 = secondSubmit();
|
||||
const submitState_2 = afterSubmit_2.state();
|
||||
assert(
|
||||
initialState.messages.length === 0 &&
|
||||
@@ -152,25 +144,23 @@ async () => {
|
||||
Il metodo `submitMessage` dovrebbe cancellare l'input corrente.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstState = firstResult.state();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit = await firstSubmit();
|
||||
const afterSubmit = firstSubmit();
|
||||
const submitState = afterSubmit.state();
|
||||
assert(firstState.input === testMessage && submitState.input === '');
|
||||
};
|
||||
|
||||
+1
-1
@@ -161,7 +161,7 @@ Il tuo codice non dovrebbe contenere alcuna istruzione `if/else`.
|
||||
```js
|
||||
assert(
|
||||
new RegExp(/(\s|;)if(\s|\()/).test(
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()
|
||||
code
|
||||
) === false
|
||||
);
|
||||
```
|
||||
|
||||
+2
-2
@@ -172,11 +172,11 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Personal Portfolio</title>
|
||||
</head>
|
||||
<body>
|
||||
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
|
||||
<!--Font Reference-->
|
||||
<nav id="navbar">
|
||||
<a href="#projects">Projects</a> |
|
||||
|
||||
+23
-33
@@ -39,15 +39,13 @@ assert(
|
||||
`DisplayMessages` コンポーネントで、`h2` 要素、`button` 要素、 `ul` 要素、および `li` 要素を子として含む `div` をレンダーします。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const state = () => {
|
||||
mockedComponent.setState({ messages: ['__TEST__MESSAGE'] });
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await state();
|
||||
const updated = state();
|
||||
assert(
|
||||
updated.find('div').length === 1 &&
|
||||
updated.find('h2').length === 1 &&
|
||||
@@ -67,18 +65,16 @@ assert(code.match(/this\.state\.messages\.map/g));
|
||||
`input` 要素で、ローカルの state にある `input` の値をレンダーします。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const testValue = '__TEST__EVENT__INPUT';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testValue);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await changed();
|
||||
const updated = changed();
|
||||
assert(updated.find('input').props().value === testValue);
|
||||
};
|
||||
```
|
||||
@@ -86,19 +82,17 @@ async () => {
|
||||
メソッド `handleChange` の呼び出しで、`input` の値を現在の入力に更新します。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__TEST__EVENT__MESSAGE__';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterInput = await changed();
|
||||
const afterInput = changed();
|
||||
assert(
|
||||
initialState.input === '' &&
|
||||
afterInput.state().input === '__TEST__EVENT__MESSAGE__'
|
||||
@@ -109,36 +103,34 @@ async () => {
|
||||
`Add message` ボタンのクリックで、メソッド `submitMessage` を呼び出します。このメソッドは、現在の `input` を state 内の `messages` 配列に追加します。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage_1 = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage_1);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_1 = await firstSubmit();
|
||||
const afterSubmit_1 = firstSubmit();
|
||||
const submitState_1 = afterSubmit_1.state();
|
||||
const testMessage_2 = '__SECOND__MESSAGE__';
|
||||
const secondChange = () => {
|
||||
causeChange(mockedComponent, testMessage_2);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const secondResult = await secondChange();
|
||||
const secondResult = secondChange();
|
||||
const secondSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_2 = await secondSubmit();
|
||||
const afterSubmit_2 = secondSubmit();
|
||||
const submitState_2 = afterSubmit_2.state();
|
||||
assert(
|
||||
initialState.messages.length === 0 &&
|
||||
@@ -152,25 +144,23 @@ async () => {
|
||||
`submitMessage` メソッドで、現在の入力をクリアします。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstState = firstResult.state();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit = await firstSubmit();
|
||||
const afterSubmit = firstSubmit();
|
||||
const submitState = afterSubmit.state();
|
||||
assert(firstState.input === testMessage && submitState.input === '');
|
||||
};
|
||||
|
||||
+1
-1
@@ -161,7 +161,7 @@ assert(
|
||||
```js
|
||||
assert(
|
||||
new RegExp(/(\s|;)if(\s|\()/).test(
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()
|
||||
code
|
||||
) === false
|
||||
);
|
||||
```
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: step-15
|
||||
|
||||
マーカーの `div` 要素が別々に 3 つありますが、1 つの大きな長方形のように見えています。 それぞれの要素が見えるように、間にスペースを追加する必要があります。
|
||||
|
||||
一括指定 `margin` プロパティに値を 2 つ設定すると、`margin-top` と `margin-bottom` が 1 つ目の値に、`margin-left` と `margin-right` が 2 つ目の値に設定されます。
|
||||
一括指定プロパティ `margin` に値を 2 つ設定すると、`margin-top` と `margin-bottom` が 1 つ目の値に、`margin-left` と `margin-right` が 2 つ目の値に設定されます。
|
||||
|
||||
`.marker` CSS ルール内で、`margin` プロパティを `10px auto` に設定してください。
|
||||
|
||||
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 617b65579ce424bf5f02ca73
|
||||
title: ステップ 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
先ほど RGB カラーモデルは加法混合であることを学びました。 これは色が黒から始まり、異なる量の赤、緑、青が加えられることによって変化することを意味します。
|
||||
|
||||
これを簡単に確認する方法が CSS の `rgb` 関数です。
|
||||
|
||||
クラス `container` を対象とする新しい CSS ルールを作成し、その `background-color` を `rgb(0, 0, 0)` で黒に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
クラスセレクタ―を使用してクラス `container` を指定してください。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.container'));
|
||||
```
|
||||
|
||||
`.container` CSS ルールの `background-color` プロパティを `rgb(0, 0, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
```
|
||||
+90
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 617b8b38f32bf2080a140675
|
||||
title: ステップ 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
関数とは、入力を受け取って特定の処理を実行するコードのまとまりです。 CSS の `rgb` 関数は、赤、緑、青の値 (<dfn>引数</dfn>) を受け取り、1 つの色を作成します:
|
||||
|
||||
```css
|
||||
rgb(red, green, blue);
|
||||
```
|
||||
|
||||
赤、緑、青の各値は `0` から `255` の数値です。 `0` はその色が 0% であり、黒であることを意味します。 `255` はその色が 100% であることを意味します。
|
||||
|
||||
`.one` CSS ルール内で、色キーワード `red` を `rgb` 関数に置き換えてください。 その `rgb` 関数に対し、赤の値を `255` に、緑の値を `0` に、青の値を `0` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.one` CSS ルールの `background-color` プロパティの設定には、色キーワード `red` を使わないでください。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor !== 'red');
|
||||
```
|
||||
|
||||
`.one` CSS ルールの `background-color` プロパティを `rgb(255, 0, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.two {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
```
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 617b8e0d93a8d10d9a90e720
|
||||
title: ステップ 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
マーカーの `background-color` がまだ赤であることに注目してみましょう。 `rgb` 関数の赤の値を最大の `255` (100%) に設定し、緑と青の両方の値を `0` に設定しているので、このようになります。
|
||||
|
||||
では `rgb` 関数を使用して他の色を設定してみましょう。
|
||||
|
||||
`.two` CSS ルール内で、`rgb` 関数を使用して `background-color` の緑の値を最大に設定し、他の値は `0` にしてください。 また `.three` CSS ルール内で、`rgb` 関数を使用して `background-color` の青の値を最大に設定し、他の値は `0` にしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.two` CSS ルールの `background-color` プロパティの設定には、色キーワード `green` を使わないでください。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor !== 'green');
|
||||
```
|
||||
|
||||
`.two` CSS ルールの `background-color` プロパティを `rgb(0, 255, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
`.three` CSS ルールの `background-color` プロパティの設定には、色キーワード `blue` を使わないでください。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor !== 'blue');
|
||||
```
|
||||
|
||||
`.three` CSS ルールの `background-color` プロパティを `rgb(0, 0, 255)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: blue;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+78
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 617b92b9de349513466f6156
|
||||
title: ステップ 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
赤と青のマーカーは同じように見えますが、緑は前よりかなり明るくなっています。 これは色キーワード `green` が実際はより暗い、黒と緑の最大値の中間くらいの色であるためです。
|
||||
|
||||
`.two` CSS ルール内で、`rgb` 関数内の緑の値を `127` に設定し強度を下げてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.two` CSS ルールの `background-color` プロパティを `rgb(0, 127, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 617b954d9f4f6217a749380e
|
||||
title: ステップ 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
次に、マーカーとその周りの `container` 要素のふちの間に、垂直方向のスペースを少し足します。
|
||||
|
||||
`.container` CSS ルール内で、一括指定プロパティ `padding` を使用して上と下に `10px` のパディングを追加し、左と右のパディングは `0` に設定してください。 これは以前使用した一括指定プロパティ `margin` と同様に機能します。
|
||||
|
||||
# --hints--
|
||||
|
||||
`background-color`プロパティとその値を `.container` CSS ルールから削除しないでください。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
`.container` CSS ルールの `padding` プロパティを `10px 0` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.container')?.padding === '10px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 127, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 617b97abd9f3f61d1590b815
|
||||
title: ステップ 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
加法 RGB カラーモデルにおける<dfn>原色</dfn>とは、混合された時に純粋な白を作る色のことです。 純粋な白を作るには、それぞれの色が最大強度である必要があります。
|
||||
|
||||
色を混ぜ合わせる前に、緑のマーカーを純粋な緑に戻しましょう。 `.two` CSS ルール内の `rgb` 関数について、緑を最大値の `255` に戻してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.two` CSS ルールの `background-color` プロパティを `rgb(0, 255, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 127, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 617b9ad735109e217284e095
|
||||
title: ステップ 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
これで原色の RGB カラーができたので、それを混合しましょう。
|
||||
|
||||
`.container` ルール内の `rgb` 関数に対し、赤、緑、青の値を最大の `255` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.container` CSS ルールの `background-color` プロパティを `rgb(255, 255, 255)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
padding: 10px 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 617bb5624a75e86463b7e638
|
||||
title: ステップ 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>二次色</dfn>とは原色を混合して得られる色のことです。 前のステップで赤、緑、青の値を変えている途中で、二次色に気づいたかもしれません。
|
||||
|
||||
1 つ目の二次色として黄色を作成するために、`.one` CSS ルール内の `rgb` 関数を変更して純粋な赤と純粋な緑を混ぜ合わせてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.one` CSS ルールの `background-color` プロパティを `rgb(255, 255, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 255, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 617bb77353188166af43f3ac
|
||||
title: ステップ 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
次の二次色としてシアンを作成するために、`.two` CSS ルール内の `rgb` 関数を変更して純粋な緑と純粋な青を混ぜ合わせてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.two` CSS ルールの `background-color` プロパティを `rgb(0, 255, 255)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 617bb9fdef27bc6aa0470ac2
|
||||
title: ステップ 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
最後の二次色のマゼンタを作成するために、`.three` CSS ルール内の `rgb` 関数を変更して純粋な青と純粋な赤を混ぜ合わせてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.three` CSS ルールの `background-color` プロパティを `rgb(255, 0, 255)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 617bbb6b97a83f6d1f7d6e38
|
||||
title: ステップ 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
二次色に慣れてきたところで、<dfn>三次色</dfn>の作り方を学びましょう。 三次色は、原色を隣接する二次色の 1 つと混合することで得られます。
|
||||
|
||||
三次色のオレンジを作成するために、`.one` CSS ルール内の `rgb` 関数を変更して赤を最大値に、緑を `127` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.one` CSS ルールの `background-color` プロパティを `rgb(255, 127, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 127, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(255, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 617bc3386dc7d07d6469bf20
|
||||
title: ステップ 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
オレンジを作るには、`rgb` 値の赤の強度を増やし、緑の強度を減らさなければならないことに注目してください。 これは、オレンジが赤と黄色を混ぜ合わせたものであり、カラーホイール上でその 2 つの色の間にあるためです。
|
||||
|
||||
三次色のスプリンググリーン (黄緑) を作成するには、シアンと緑を混ぜ合わせます。 `.two` CSS ルール内の `rgb` 関数を変更して、緑を最大値に、青を `127` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.two` CSS ルールの `background-color` プロパティを `rgb(0, 255, 127)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 127)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 127, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(255, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 617bc4824e233180553a8069
|
||||
title: ステップ 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
三次色のバイオレットを作成するには、マゼンタと青を混ぜ合わせます。 `.three` CSS ルール内の `rgb` 関数を変更して、青を最大値に、赤を `127` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.three` CSS ルールの `background-color` プロパティを `rgb(127, 0, 255)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(127, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 127, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 127);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.three {
|
||||
background-color: rgb(255, 0, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+95
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 617bd6ec666b1da2587e4e37
|
||||
title: ステップ 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
三次色には他にもシャルトルーズグリーン (緑 + 黄、黄色がかった緑色)、アジュール (青 + シアン、明るい青)、ローズ (赤 + マゼンタ、薔薇色) の 3 つがあります。
|
||||
|
||||
シャルトルーズグリーンを作成するには、`.one` ルール内の `rgb` 関数を変更して赤を `127` に、緑を最大値にしてください。
|
||||
|
||||
アジュールを得るには、`.two` ルール内の `rgb` 関数を変更して緑を `127` に、青を最大値にしてください。
|
||||
|
||||
そしてローズ (明るいピンクと呼ばれることもあります) を得るには、`.three` ルール内の `rgb` 関数を変更して青を `127` に、赤を最大値にしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.one` CSS ルールの `background-color` プロパティを `rgb(127, 255, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(127, 255, 0)');
|
||||
```
|
||||
|
||||
`.two` CSS ルールの `background-color` プロパティを `rgb(0, 127, 255)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 255)');
|
||||
```
|
||||
|
||||
`.three` CSS ルールの `background-color` プロパティを `rgb(255, 0, 127)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 127)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(255, 127, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 127);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(127, 0, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+91
@@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 618a00ed1ca871a2b3aca0cb
|
||||
title: ステップ 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
これでカラーホイールの原色、二次色、および三次色をすべて見てきたので、他の色彩理論の概念や、デザインに与える影響について理解しやすくなったことでしょう。
|
||||
|
||||
では最初に、`.one`、`.two`、`.three` ルールの中の `rgb` 関数の値を調整して、各要素の `background-color` を純粋な黒にしてください。 `rgb` 関数は加法カラーモデルを使用しており、色が黒から始まり、赤、緑、青の値が増えるにしたがって変化することを忘れないようにしましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.one` CSS ルールの `background-color` プロパティを `rgb(0, 0, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
`.two` CSS ルールの `background-color` プロパティを `rgb(0, 0, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
`.three` CSS ルールの `background-color` プロパティを `rgb(0, 0, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(127, 255, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 127, 255);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(255, 0, 127);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 618a0927005553b74bfa05ae
|
||||
title: ステップ 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
カラーホイールとは、同じような色 (<dfn>色相</dfn>) が互いに近くに、異なる色は離れて配置された円のことです。 例えば、純粋な赤はローズとオレンジの色相の間に位置します。
|
||||
|
||||
カラーホイール上で互いに反対の位置にある 2 つの色は<dfn>補色</dfn>と呼ばれています。 2 つの補色を混ぜ合わせると、灰色ができます。 しかしそれらを並べて配置すると、視覚的なコントラストが強くなり明るく見えます。
|
||||
|
||||
`.one` CSS ルールの `rgb` 関数内で、赤の値を最大の `255` に設定して純粋な赤を作成してください。 `.two` CSS ルールの `rgb` 関数内では、緑と青の値を最大の `255` に設定してシアンを作成してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.one` CSS ルールの `background-color` プロパティを `rgb(255, 0, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
`.two` CSS ルールの `background-color` プロパティを `rgb(0, 255, 255)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 618a0b2befb143baefab632b
|
||||
title: ステップ 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
赤とシアンの色が隣り合わせにあると、とても明るく見えることに注目してください。 このコントラストはウェブサイト上で過度に使用すると目障りになることがあり、また、補色の背景色の上ではテキストが読みづらくなることがあります。
|
||||
|
||||
1 つの色を主要な色として使い、その補色をページの特定のコンテンツに注意を向けさせるためのアクセントとして使うのが良い方法とされています。
|
||||
|
||||
では最初に、`h1` ルール内で、`rgb` 関数を使用して背景色をシアンに設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`text-align` プロパティとその値は、削除または変更しないでください。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
|
||||
```
|
||||
|
||||
`h1` CSS ルールの `background-color` プロパティを `rgb(0, 255, 255)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 618a1275e873dcc803c2d1aa
|
||||
title: ステップ 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
次に、`.one` ルール内の `background-color` を、`rgb` 関数を使用して黒に設定してください。 また `.two` ルール内の `background-color` を、`rgb` 関数を使用して赤に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.one` CSS ルールの `background-color` プロパティを `rgb(0, 0, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
`.two` CSS ルールの `background-color` プロパティを `rgb(255, 0, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 618a132676346ac9f7fd59dd
|
||||
title: ステップ 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
自然に中央の赤色が目を引くことに気がつきましたか？ サイトをデザインする際に、この効果を利用して重要な見出し、ボタン、あるいはリンクに注意を引き付けることができます。
|
||||
|
||||
補色の他にも重要な色の組み合わせがありますが、それらはもう少し後で学びます。
|
||||
|
||||
ではここで、`.two` ルール内の `rgb` 関数を使用して、`background-color` を黒に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.two` CSS ルールの `background-color` プロパティを `rgb(0, 0, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 618a16873520a8d088ffdf44
|
||||
title: ステップ 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
また、`h1` ルール内の `background-color` プロパティと値を削除して、デフォルトの白色に戻してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` CSS ルールが `background-color` プロパティと値を持たないようにしてください。
|
||||
|
||||
```js
|
||||
const backgroundColorInstances = code.match(/background-color:.*;/gi);
|
||||
assert(backgroundColorInstances.length === 4 && !new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
text-align: center;
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 618a16d21bd3dad1bb3aa8ef
|
||||
title: ステップ 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
では最初のマーカーから、ディテールを追加し始めましょう。
|
||||
|
||||
最初のマーカーの `div` 要素について、クラスを `one` から `red` に変更してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
最初のマーカーの `div` にクラス `one` は必要ありません。
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
assert(!containerFirstChild?.classList?.contains('one'));
|
||||
```
|
||||
|
||||
最初のマーカーの `div` には `marker` と `red` というクラスが必要です。
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('red'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 619b72a0db211f1c29afb906
|
||||
title: ステップ 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`.one` クラスセレクターを変更して、新しい `red` クラスを選択してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コード内に `.one` クラスセレクターがないようにしてください。
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.one'));
|
||||
```
|
||||
|
||||
クラスセレクターを使用して、クラス `red` を指定してください。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red'));
|
||||
```
|
||||
|
||||
`.red` CSS ルールの `background-color` プロパティは `rgb(0, 0, 0)` に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 619b7396e57b771f903be90d
|
||||
title: ステップ 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
次に、`.red` ルール内の `rgb` 関数を更新して赤を最大値にしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.red` CSS ルールの `background-color` プロパティを `rgb(255, 0, 0)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+99
@@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 619b7424f43ec9215e538afe
|
||||
title: ステップ 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
次に、2 つ目のマーカーの `div` についてクラスを `two` から `green` に、3 つ目のマーカーの `div` についてクラスを `three` から `blue` に変更してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
2 つ目のマーカーの `div` にクラス `two` は必要ありません。
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(!containerSecondChild?.classList?.contains('two'));
|
||||
```
|
||||
|
||||
2 つ目のマーカーの `div` には `marker` と `green` というクラスが必要です。
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green'));
|
||||
```
|
||||
|
||||
3 つ目のマーカーの `div` にクラス `three` は必要ありません。
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
assert(!containerThirdChild?.classList?.contains('three'));
|
||||
```
|
||||
|
||||
3 つ目のマーカーの `div` には `marker` と `blue` というクラスが必要です。
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('blue'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 619b74fa777a2b2473c94f82
|
||||
title: ステップ 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS クラスセレクター `.two` を変更して、新しい `green` クラスを選択してください。 また `.three` セレクターを変更して新しい `blue` クラスを選択してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コード内に `.two` クラスセレクターがないようにしてください。
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.two'));
|
||||
```
|
||||
|
||||
クラスセレクタ―を使用してクラス `green` を指定してください。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green'));
|
||||
```
|
||||
|
||||
`.green` CSS ルールの `background-color` プロパティは `rgb(0, 0, 0)` に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
コード内に `.three` クラスセレクターがないようにしてください。
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.three'));
|
||||
```
|
||||
|
||||
クラスセレクタ―を使用してクラス `blue` を指定してください。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue'));
|
||||
```
|
||||
|
||||
`.blue` CSS ルールの `background-color` プロパティは `rgb(0, 0, 0)` に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 619b761916dac02643940022
|
||||
title: ステップ 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS で要素に色を適用する方法として、<dfn>16 進数</dfn> (hexadecimal、ヘキサ) の値がよく使われます。 16 進数と聞くとわかりにくいですが、実のところ RGB 値の別の形式に過ぎません。
|
||||
|
||||
16 進数の色の値は `#` 記号から始まり、0-9 および A-F から 6 つの文字を取ります。 最初の二文字のペアが赤を、2 つ目のペアは緑を、3 つ目のペアは青を表します。 たとえば `#4B5320` のように記述します。
|
||||
|
||||
`.green` CSS ルール内の `background-color` プロパティを、赤が `00`、緑が `FF`、青が `00` の 16 進数カラーコードに設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.green` CSS ルールの `background-color` プロパティを `#00FF00` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
+85
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 619b7c3c83de403126b69c1e
|
||||
title: ステップ 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
0 から 9 までの十進法 (10 進数) の値については馴染みがあると思います。 16 進法 (16 進数) の値は、0 から 9 の後に、A から F が続きます。
|
||||
|
||||
```
|
||||
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
|
||||
```
|
||||
|
||||
16 進数カラーの場合、`00` がその色の 0% で、`FF` が 100% です。 つまり `#00FF00` は赤が 0%、緑が 100%、青が 0% と解釈でき、`rgb(0, 255, 0)` と同じです。
|
||||
|
||||
16 進数カラーの緑の値を `7F`に設定して緑の強度を減らしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.green` CSS ルールの `background-color` プロパティを `#007F00` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 127, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background-color: #00FF00;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 619b7fd56aa2253778bcf5f7
|
||||
title: ステップ 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>HSL</dfn> カラーモデル、または色相 (hue)、彩度 (saturation)、および明度 (lightness) とは、色を表現するもう一つの方法です。
|
||||
|
||||
CSS の `hsl` 関数は 3 つの値を受け付けます: 0 から 360 までの数値の色相、0 から 100 パーセントの彩度、0 から 100 パーセントの明度です。
|
||||
|
||||
カラーホイールを想像すると、赤の色相は 0 度、緑は 120 度、青は 240 度に位置します。
|
||||
|
||||
彩度とは色の強度で、0% のグレーから 100% の純粋な色までを表します。
|
||||
|
||||
明度は色の明るさで、0% の完全な黒から 100% の完全な白までを表し、50% で中間色となります。
|
||||
|
||||
`.blue` CSS ルール内で、`hsl` 関数を使用して `background-color` プロパティを変更し、純粋な青にしてください。 色相を `240` に、彩度を `100%` に、明度を `50%` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.blue` CSS ルールの `background-color` プロパティを `hsl(240, 100%, 50%)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 61a489b8579e87364b2d2cdb
|
||||
title: ステップ 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS で均一な色を設定する方法をいくつか学んできましたが、色の移り変わり、<dfn>グラデーション</dfn>を要素に適用することもできます。
|
||||
|
||||
グラデーションとは、ある色を別の色へ変化させることです。 CSS の `linear-gradient` 関数を使用して、線に沿った変化の方向と使用する色を制御できます。
|
||||
|
||||
ひとつ忘れてはならないことがあります。`linear-gradient` 関数は実際は `image` 要素を作り出すため、画像を値として受け付ける `background` プロパティと通常はペアで使われます。
|
||||
|
||||
`.red` CSS ルール内の `background-color` プロパティを `background` に変更してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.red` CSS ルールには `background` プロパティと値 `rgb(255, 0, 0)` が必要です。
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.red').cssText, 'background: rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 61a493ead935c148d2b76312
|
||||
title: ステップ 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`linear-gradient` 関数は非常に柔軟性があります。このチュートリアルで使用する基本的な構文はこちらです:
|
||||
|
||||
```css
|
||||
linear-gradient(gradientDirection, color1, color2, ...);
|
||||
```
|
||||
|
||||
`gradientDirection` は変化に使用する線の方向です。 `color1` と `color2` は色の引数で、変化の中で使用される色です。 色にはカラーキーワード、16 進数、`rgb`、または `hsl` を含め、どの形式でも使用できます。
|
||||
|
||||
では 1 つ目のマーカーに、赤から緑のグラデーションを 90 度の線に沿って適用してみましょう。
|
||||
|
||||
最初に、`.red` CSS ルール内で `background` プロパティを `linear-gradient()` に設定し、それに値 `90deg` を `gradientDirection` として渡してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.red` CSS ルールには `background` プロパティと値 `linear-gradient(90deg)` が必要です。
|
||||
|
||||
```js
|
||||
assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: rgb(255, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61a498399534644f59cff05e
|
||||
title: ステップ 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ご覧のとおり、`linear-gradient` 関数は赤から緑の滑らかなグラデーションを作り出してくれました。 `linear-gradient` 関数は、動作するには少なくとも 2 つの色の引数を必要としますが、より多くの色の引数を受け取ることもできます。
|
||||
|
||||
`rgb` 関数を使用し、純粋な青を 3 つ目の色の引数として `linear-gradient` 関数に追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.red` CSS ルールの `background` プロパティを `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61b095989e7fc020b43b1bb9
|
||||
title: ステップ 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
このグラデーションの色指定には `rgb` 関数を使用します。
|
||||
|
||||
`linear-gradient` 関数内で、`rgb` 関数を使用して最初の色の引数を純粋な赤に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.red` CSS ルールには `background` プロパティと値 `linear-gradient(90deg, rgb(255, 0, 0))` が必要です。
|
||||
|
||||
```js
|
||||
assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg,rgb\(255,0,0\)\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61b095a79e7fc020b43b1bba
|
||||
title: ステップ 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`linear-gradient` 関数が動作するためには少なくとも 2 色の引数が必要なため、まだグラデーションには見えません。
|
||||
|
||||
同じ `linear-gradient` 関数内で、`rgb` 関数を使用して 2 つ目の色の引数を純粋な緑に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.red` CSS ルールの `background` プロパティを `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0))` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
+2
-2
@@ -172,11 +172,11 @@ O elemento `#navbar` deve estar sempre na parte superior da viewport.
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Personal Portfolio</title>
|
||||
</head>
|
||||
<body>
|
||||
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
|
||||
<!--Font Reference-->
|
||||
<nav id="navbar">
|
||||
<a href="#projects">Projects</a> |
|
||||
|
||||
+26
-26
@@ -34,63 +34,63 @@ Atenda às histórias de usuário e passe em todos os testes abaixo para conclui
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter um elemento `header` com o `id` `header`
|
||||
Você deve ter um elemento `header` com o `id` `header`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('header')
|
||||
assert(!!el && el.tagName === 'HEADER')
|
||||
```
|
||||
|
||||
Você deve ter um elemento `img` com o `id` `header-img`
|
||||
Você deve ter um elemento `img` com o `id` `header-img`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('header-img')
|
||||
assert(!!el && el.tagName === 'IMG')
|
||||
```
|
||||
|
||||
O elemento `#header-img` deve estar aninhado dentro de `#header`
|
||||
O elemento `#header-img` deve estar aninhado dentro de `#header`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#header #header-img')
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
O elemento `#header-img` deve ter um atributo `src`
|
||||
O elemento `#header-img` deve ter um atributo `src`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('header-img')
|
||||
assert(!!el && !!el.src)
|
||||
```
|
||||
|
||||
O `src` de `#header-img` deve ser um URL válido (que comece por `http`)
|
||||
O `src` de `#header-img` deve ser um URL válido (que comece por `http`).
|
||||
|
||||
```js
|
||||
const el = document.getElementById('header-img')
|
||||
assert(!!el && /^http/.test(el.src))
|
||||
```
|
||||
|
||||
Você deve ter um elemento `nav` com o `id` `nav-bar`
|
||||
Você deve ter um elemento `nav` com o `id` `nav-bar`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('nav-bar')
|
||||
assert(!!el && el.tagName === 'NAV')
|
||||
```
|
||||
|
||||
O elemento `#nav-bar` deve estar aninhado dentro de `#header`
|
||||
O elemento `#nav-bar` deve estar aninhado dentro de `#header`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#header #nav-bar')
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Você deve ter pelo menos 3 elementos `.nav-link` dentro de `#nav-bar`
|
||||
Você deve ter pelo menos 3 elementos `.nav-link` dentro de `#nav-bar`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#nav-bar .nav-link')
|
||||
assert(els.length >= 3)
|
||||
```
|
||||
|
||||
Cada elemento `.nav-link` deve ter um atributo `href`
|
||||
Cada elemento `.nav-link` deve ter um atributo `href`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.nav-link')
|
||||
@@ -100,7 +100,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Cada elemento `.nav-link` deve vincular a um elemento correspondente na página inicial (ter um `href` com o valor do id de outro elemento, como `#footer`)
|
||||
Cada elemento `.nav-link` deve vincular a um elemento correspondente na página inicial (ter um `href` com o valor do id de outro elemento, como `#footer`).
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.nav-link')
|
||||
@@ -111,14 +111,14 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Você deve ter um elemento `video` ou um elemento `iframe` com o `id` `video`
|
||||
Você deve ter um elemento `video` ou um elemento `iframe` com o `id` `video`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('video')
|
||||
assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME'))
|
||||
```
|
||||
|
||||
O elemento `#video` deve ter um atributo `src`
|
||||
O elemento `#video` deve ter um atributo `src`.
|
||||
|
||||
```js
|
||||
let el = document.getElementById('video')
|
||||
@@ -133,77 +133,77 @@ if (sourceElement) {
|
||||
assert(el.hasAttribute('src'));
|
||||
```
|
||||
|
||||
Você deve ter um elemento `form` com o `id` `form`
|
||||
Você deve ter um elemento `form` com o `id` `form`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('form')
|
||||
assert(!!el && el.tagName === 'FORM')
|
||||
```
|
||||
|
||||
Você deve ter um elemento `input` com o `id` `email`
|
||||
Você deve ter um elemento `input` com o `id` de `email`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
O elemento `#email` deve estar aninhado dentro de `#form`
|
||||
O elemento `#email` deve estar aninhado dentro de `#form`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#form #email')
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
O elemento `#email` deve ter o atributo `placeholder` e um texto ilustrativo
|
||||
O elemento `#email` deve ter o atributo `placeholder` e um texto ilustrativo.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
O elemento `#email` deve usar a validação de HTML5 definindo seu `type` como `email`
|
||||
O elemento `#email` deve usar a validação de HTML5 definindo seu `type` como `email`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.type === 'email')
|
||||
```
|
||||
|
||||
Você deve ter um elemento `input` com o `id` `submit`
|
||||
Você deve ter um elemento `input` com o `id` `submit`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
O elemento `#submit` deve estar aninhado dentro de `#form`
|
||||
O elemento `#submit` deve estar aninhado dentro de `#form`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#form #submit')
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
O elemento `#submit` deve ter o atributo `type` com o valor `submit`
|
||||
O elemento `#submit` deve ter o atributo `type` com o valor `submit`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && el.type === 'submit')
|
||||
```
|
||||
|
||||
Seu `#form` deve ter um atributo `action` definido como `https://www.freecodecamp.com/email-submit`
|
||||
Seu `#form` deve ter um atributo `action` definido como `https://www.freecodecamp.com/email-submit`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('form')
|
||||
assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit')
|
||||
```
|
||||
|
||||
O elemento `#email` deve ter um atributo `name` definido como `email`
|
||||
O elemento `#email` deve ter um atributo `name` definido como `email`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.name === 'email')
|
||||
```
|
||||
|
||||
O elemento `#nav-bar` deve estar sempre na parte superior da viewport
|
||||
O elemento `#nav-bar` deve estar sempre na parte superior da viewport.
|
||||
|
||||
```js
|
||||
(async () => {
|
||||
@@ -243,7 +243,7 @@ O elemento `#nav-bar` deve estar sempre na parte superior da viewport
|
||||
})();
|
||||
```
|
||||
|
||||
A página inicial deve ter pelo menos uma media query
|
||||
A página inicial deve ter pelo menos uma media query.
|
||||
|
||||
```js
|
||||
const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
|
||||
@@ -251,7 +251,7 @@ const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
|
||||
assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
|
||||
```
|
||||
|
||||
A página inicial do produto deve utilizar o CSS flexbox pelo menos uma vez
|
||||
A página inicial do produto deve utilizar o CSS flexbox pelo menos uma vez.
|
||||
|
||||
```js
|
||||
const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
|
||||
@@ -281,7 +281,7 @@ assert(usesFlex)
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Product Landing Page</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
+41
-41
@@ -35,84 +35,84 @@ Atenda às histórias de usuário e passe em todos os testes abaixo para conclui
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter um elemento `h1` com o `id` `title`
|
||||
Você deve ter um elemento `h1` com o `id` `title`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el && el.tagName === 'H1')
|
||||
```
|
||||
|
||||
O elemento `#title` não deve estar vazio
|
||||
O elemento `#title` não deve estar vazio.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Você deve ter um elemento `p` com o `id` `description`
|
||||
Você deve ter um elemento `p` com o `id` `description`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('description')
|
||||
assert(!!el && el.tagName === 'P')
|
||||
```
|
||||
|
||||
O elemento `#description` não deve estar vazio
|
||||
O elemento `#description` não deve estar vazio.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('description')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Você deve ter um elemento `form` com o `id` `survey-form`
|
||||
Você deve ter um elemento `form` com o `id` `survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('survey-form')
|
||||
assert(!!el && el.tagName === 'FORM')
|
||||
```
|
||||
|
||||
Você deve ter um elemento `input` com o `id` `name`
|
||||
Você deve ter um elemento `input` com o `id` `name`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
O elemento `#name` deve ter o atributo `type` com o valor `text`
|
||||
O elemento `#name` deve ter o atributo `type` com o valor `text`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.type === 'text')
|
||||
```
|
||||
|
||||
O elemento `#name` deve exigir a entrada
|
||||
O elemento `#name` deve exigir a entrada.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.required)
|
||||
```
|
||||
|
||||
O elemento `#name` deve estar aninhado dentro de `#survey-form`
|
||||
O elemento `#name` deve estar aninhado dentro de `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #name')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Você deve ter um elemento `input` com o `id` `email`
|
||||
Você deve ter um elemento `input` com o `id` de `email`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
O elemento `#email` deve ter o atributo `type` com o valor `email`
|
||||
O elemento `#email` deve ter o atributo `type` com o valor `email`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.type === 'email')
|
||||
```
|
||||
|
||||
O elemento `#email` deve exigir a entrada
|
||||
O elemento `#email` deve exigir a entrada.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
@@ -126,56 +126,56 @@ const el = document.querySelector('#survey-form #email')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Você deve ter um elemento `input` com o `id` `number`
|
||||
Você deve ter um elemento `input` com o `id` `number`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
O elemento `#number` deve estar aninhado dentro de `#survey-form`
|
||||
O elemento `#number` deve estar aninhado dentro de `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #number')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
O elemento `#number` deve ter o atributo `type` com o valor `number`
|
||||
O elemento `#number` deve ter o atributo `type` com o valor `number`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.type === 'number')
|
||||
```
|
||||
|
||||
O elemento `#number` deve ter um atributo `min` com um valor numérico
|
||||
O elemento `#number` deve ter um atributo `min` com um valor numérico.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.min && isFinite(el.min))
|
||||
```
|
||||
|
||||
O elemento `#number` deve ter um atributo `max` com um valor numérico
|
||||
O elemento `#number` deve ter um atributo `max` com um valor numérico.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.max && isFinite(el.max))
|
||||
```
|
||||
|
||||
Você deve ter um elemento `label` com o `id` `name-label`
|
||||
Você deve ter um elemento `label` com o `id` `name-label`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
Você deve ter um elemento `label` com o `id` `email-label`
|
||||
Você deve ter um elemento `label` com o `id` `email-label`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
Você deve ter um elemento `label` com o `id` `number-label`
|
||||
Você deve ter um elemento `label` com o `id` `number-label`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number-label')
|
||||
@@ -203,84 +203,84 @@ const el = document.getElementById('number-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
O elemento `#name-label` deve estar aninhado dentro de `#survey-form`
|
||||
O elemento `#name-label` deve estar aninhado dentro de `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #name-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
O elemento `#email-label` deve estar aninhado dentro de `#survey-form`
|
||||
O elemento `#email-label` deve estar aninhado dentro de `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #email-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
O elemento `#number-label` deve estar aninhado dentro de `#survey-form`
|
||||
O elemento `#number-label` deve estar aninhado dentro de `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #number-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
O elemento `#name` deve ter o atributo `placeholder` e um valor
|
||||
O elemento `#name` deve ter o atributo `placeholder` e um valor.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
O elemento `#email` deve ter o atributo `placeholder` e um valor
|
||||
O elemento `#email` deve ter o atributo `placeholder` e um valor.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
O elemento `#number` deve ter o atributo `placeholder` e um valor
|
||||
O elemento `#number` deve ter o atributo `placeholder` e um valor.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
Você deve ter um campo `select` com o `id` `dropdown`
|
||||
Você deve ter um campo `select` com o `id` `dropdown`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('dropdown')
|
||||
assert(!!el && el.tagName === 'SELECT')
|
||||
```
|
||||
|
||||
O elemento `#dropdown` deve ter pelo menos dois elementos selecionáveis (não desativados) `option`
|
||||
O elemento `#dropdown` deve ter pelo menos dois elementos selecionáveis (não desativados) `option`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#dropdown option:not([disabled])')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
O elemento `#dropdown` deve estar aninhado dentro de `#survey-form`
|
||||
O elemento `#dropdown` deve estar aninhado dentro de `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #dropdown')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Você deve ter pelo menos dois elementos `input` com `type` `radio` (botões de opção)
|
||||
Você deve ter pelo menos dois elementos `input` com `type` `radio` (botões de opção).
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('input[type="radio"]')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
Você deve ter pelo menos dois botões de opção aninhados dentro de `#survey-form`
|
||||
Você deve ter pelo menos dois botões de opção aninhados dentro de `#survey-form`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#survey-form input[type="radio"]')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
Todos os seus botões de opção devem ter um atributo `value` e um valor
|
||||
Todos os seus botões de opção devem ter um atributo `value` e um valor.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('input[type="radio"]')
|
||||
@@ -288,7 +288,7 @@ const els2 = document.querySelectorAll('input[type="radio"][value=""], input[typ
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
Todos os seus botões de opção devem ter um atributo `name` e um valor
|
||||
Todos os seus botões de opção devem ter um atributo `name` e um valor.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('input[type="radio"]')
|
||||
@@ -296,7 +296,7 @@ const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
Todos os grupos de botões de opção devem ter pelo menos 2 botões de opção
|
||||
Todos os grupos de botões de opção devem ter pelo menos 2 botões de opção.
|
||||
|
||||
```js
|
||||
const radioButtons = document.querySelectorAll('input[type="radio"]');
|
||||
@@ -318,14 +318,14 @@ groupKeys.forEach(key => {
|
||||
assert(groupKeys.length > 0)
|
||||
```
|
||||
|
||||
Você deve ter pelo menos dois elementos `input` com `type` `checkbox` (caixas de seleção) aninhados dentro de `#survey-form`
|
||||
Você deve ter pelo menos dois elementos `input` com `type` `checkbox` (caixas de seleção) aninhados dentro de `#survey-form`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
Todas as caixas de seleção dentro de `#survey-form` devem ter um atributo `value` e um valor
|
||||
Todas as caixas de seleção dentro de `#survey-form` devem ter um atributo `value` e um valor.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
|
||||
@@ -333,28 +333,28 @@ const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][valu
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
Você deve ter pelo menos um elemento `textarea` aninhado dentro de `#survey-form`
|
||||
Você deve ter pelo menos um elemento `textarea` aninhado dentro de `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form textarea')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Você deve ter um elemento `input` ou um elemento `button` com o `id` `submit`
|
||||
Você deve ter um elemento `input` ou um elemento `button` com o `id` `submit`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
|
||||
```
|
||||
|
||||
O elemento `#submit` deve ter o atributo `type` com o valor `submit`
|
||||
O elemento `#submit` deve ter o atributo `type` com o valor `submit`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && el.type === 'submit')
|
||||
```
|
||||
|
||||
O elemento `#submit` deve estar aninhado dentro de `#survey-form`
|
||||
O elemento `#submit` deve estar aninhado dentro de `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #submit')
|
||||
@@ -380,7 +380,7 @@ assert(!!el)
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Survey Form</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
+24
-24
@@ -24,7 +24,7 @@ dashedName: build-a-technical-documentation-page
|
||||
1. Além disso, a barra de navegação deve conter elementos de âncora (`a`) com a classe `nav-link`. Deve haver um para cada elemento com a classe `main-section`
|
||||
1. O elemento `header` em `#navbar` deve vir antes de qualquer elemento de link (`a`) na barra de navegação
|
||||
1. Cada elemento com a classe `nav-link` deve conter um texto que corresponda ao texto do `header` dentro de cada `section` (exemplo: se você tem uma seção/cabeçalho "Olá mundo", sua barra de navegação deve ter um elemento que contenha o texto "Olá mundo")
|
||||
1. Ao clicar em um elemento da barra de navegação, a página deve navegar para a seção correspondente do elemento `main-doc` (exemplo: ao clicar em um elemento `nav-link` que contenha o texto "Olá mundo", a página deve navegar para o elemento `section` que tenha esse id e contenha o cabeçalho correspondente)
|
||||
1. Ao clicar em um elemento da barra de navegação, a página deve navegar para a seção correspondente do elemento `#main-doc` (exemplo: ao clicar em um elemento `.nav-link` que contenha o texto "Olá mundo", a página deve navegar para o elemento `section` que tenha esse id e contenha o cabeçalho correspondente)
|
||||
1. Em dispositivos com tamanho regular (laptops, desktops), o elemento com `id="navbar"` deve ser mostrado no lado esquerdo da tela e deve sempre estar visível para o usuário
|
||||
1. A documentação técnica deve utilizar pelo menos uma media query
|
||||
|
||||
@@ -34,21 +34,21 @@ Atenda às histórias de usuário e passe em todos os testes abaixo para conclui
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter um elemento `main` com o `id` `main-doc`
|
||||
Você deve ter um elemento `main` com o `id` `main-doc`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('main-doc')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Você deve ter pelo menos cinco elementos `section` com a classe `main-section`
|
||||
Você deve ter pelo menos cinco elementos `section` com a classe `main-section`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#main-doc section')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
Todos os elementos com a classe `.main-section` devem ser elementos `section`
|
||||
Todos os elementos com a classe `.main-section` devem ser elementos `section`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
@@ -58,14 +58,14 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Você deve ter pelo menos cinco elementos `.main-section` aninhados dentro de `#main-doc`
|
||||
Você deve ter pelo menos cinco elementos `.main-section` aninhados dentro de `#main-doc`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#main-doc .main-section')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
O primeiro filho de `.main-section` deve ser um elemento `header`
|
||||
O primeiro filho de `.main-section` deve ser um elemento `header`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
@@ -75,7 +75,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Nenhum dos elementos `header` deve estar vazio
|
||||
Nenhum dos elementos `header` deve estar vazio.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('header')
|
||||
@@ -85,7 +85,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Todos os elementos com a classe `.main-section` devem ter um `id`
|
||||
Todos os elementos com a classe `.main-section` devem ter um `id`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
@@ -95,7 +95,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Cada `.main-section` deve ter um `id` que corresponda ao texto de seu primeiro filho, e todos os espaços no texto do filho devem ser substituídos por sublinhados (`_`) no id
|
||||
Cada `.main-section` deve ter um `id` que corresponda ao texto de seu primeiro filho, e todos os espaços no texto do filho devem ser substituídos por sublinhados (`_`) no id.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
@@ -106,49 +106,49 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Você precisa ter, pelo menos, 10 elementos `p` (ao todo) dentro dos elementos `.main-section`
|
||||
Você precisa ter, pelo menos, 10 elementos `p` (ao todo) dentro dos elementos `.main-section`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section p')
|
||||
assert(els.length >= 10)
|
||||
```
|
||||
|
||||
Você precisa ter, pelo menos, cinco elementos `code` (ao todo) dentro dos elementos `.main-section`
|
||||
Você precisa ter, pelo menos, cinco elementos `code` (ao todo) dentro dos elementos `.main-section`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section code')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
Você precisa ter, pelo menos, cinco elementos `li` dentro dos elementos `.main-section`
|
||||
Você precisa ter, pelo menos, cinco elementos `li` dentro dos elementos `.main-section`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section li')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
Você deve ter um elemento `nav` com o `id` `navbar`
|
||||
Você deve ter um elemento `nav` com o `id` `navbar`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('navbar')
|
||||
assert(!!el && el.tagName === 'NAV')
|
||||
```
|
||||
|
||||
O elemento `#navbar` deve ter exatamente um elemento `header` dentro dele
|
||||
O elemento `#navbar` deve ter exatamente um elemento `header` dentro dele.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#navbar header')
|
||||
assert(els.length === 1)
|
||||
```
|
||||
|
||||
Você deve ter pelo menos cinco elementos `a` com a classe `nav-link`
|
||||
Você deve ter pelo menos um elemento `a` com a classe `nav-link`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('a.nav-link')
|
||||
assert(els.length >= 1)
|
||||
```
|
||||
|
||||
Todos os elementos com a classe `.nav-link` devem ser elementos âncora (`a`)
|
||||
Todos os elementos com a classe `.nav-link` devem ser elementos âncora (`a`).
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.nav-link')
|
||||
@@ -158,7 +158,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Todos os elementos com a classe `.nav-link` devem estar dentro de `#navbar`
|
||||
Todos os elementos com a classe `.nav-link` devem estar dentro de `#navbar`.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('.nav-link')
|
||||
@@ -166,7 +166,7 @@ const els2 = document.querySelectorAll('#navbar .nav-link')
|
||||
assert(els2.length > 0 && els1.length === els2.length)
|
||||
```
|
||||
|
||||
Você deve ter o mesmo número de elementos `.nav-link` e de elementos `.main-section`
|
||||
Você deve ter o mesmo número de elementos `.nav-link` e de elementos `.main-section`.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('.main-section')
|
||||
@@ -174,7 +174,7 @@ const els2 = document.querySelectorAll('.nav-link')
|
||||
assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
|
||||
```
|
||||
|
||||
O elemento `header` em `#navbar` deve vir antes de qualquer elemento de link (`a`) que também estão na `#navbar`
|
||||
O elemento `header` em `#navbar` deve vir antes de qualquer elemento de link (`a`) que também esteja em `#navbar`.
|
||||
|
||||
```js
|
||||
const navLinks = document.querySelectorAll('#navbar a.nav-link');
|
||||
@@ -190,7 +190,7 @@ navLinks.forEach((navLink) => {
|
||||
assert(!!header)
|
||||
```
|
||||
|
||||
Cada elemento com a classe `.nav-link` deve conter um texto que corresponda ao texto do `header` da `section` relacionada (por exemplo: se você tem uma seção/cabeçalho "Olá mundo", sua `#navbar` deve ter um elemento `.nav-link` que contenha o texto "Olá mundo")
|
||||
Cada elemento com a classe `.nav-link` deve conter um texto que corresponda ao texto do `header` da `section` relacionada (por exemplo: se você tem uma seção/cabeçalho "Olá mundo", sua `#navbar` deve ter um elemento `.nav-link` que contenha o texto "Olá mundo").
|
||||
|
||||
```js
|
||||
const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
|
||||
@@ -203,7 +203,7 @@ const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
|
||||
assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0)
|
||||
```
|
||||
|
||||
Cada `.nav-link` deve ter um atributo `href` que vincule à sua `.main-section` correspondente (por exemplo: se você clicar em um elemento `.nav-link` que contenha o texto "Olá mundo", a página navegará para o elemento `section` com aquele id)
|
||||
Cada `.nav-link` deve ter um atributo `href` que vincule à sua `.main-section` correspondente (por exemplo: se você clicar em um elemento `.nav-link` que contenha o texto "Olá mundo", a página navegará para o elemento `section` com aquele id).
|
||||
|
||||
```js
|
||||
const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
|
||||
@@ -212,7 +212,7 @@ const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' +
|
||||
assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
|
||||
```
|
||||
|
||||
O elemento `#navbar` deve estar sempre na parte superior da viewport
|
||||
O elemento `#navbar` deve estar sempre na parte superior da viewport.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('navbar')
|
||||
@@ -221,7 +221,7 @@ const left2 = el?.offsetLeft
|
||||
assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
|
||||
```
|
||||
|
||||
O projeto de documentação técnica deve utilizar pelo menos uma media query
|
||||
O projeto de documentação técnica deve utilizar pelo menos uma media query.
|
||||
|
||||
```js
|
||||
const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
|
||||
@@ -248,7 +248,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Technical Documentation Page</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
+25
-25
@@ -12,11 +12,11 @@ dashedName: build-a-tribute-page
|
||||
|
||||
**Histórias de usuário:**
|
||||
|
||||
1. A página de homenagem deve ter um elemento com um `id="main"` que envolva todos os demais elementos
|
||||
1. A página de homenagem deve ter um elemento `main` com o `id` `main` correspondente, que envolva todos os demais elementos
|
||||
1. Deve haver um elemento com `id` `title`, que contenha uma string (ou seja, um texto) que descreva a pessoa a quem a página presta homenagem (por exemplo, "Dr. Norman Borlaug")
|
||||
1. Você deve ter um elemento `figure` ou um elemento `div` com o `id` `img-div`
|
||||
1. Dentro do elemento `img-div`, deve haver um elemento `img` com um `id="image"` correspondente
|
||||
1. Dentro do elemento `img-div`, deve haver um elemento com um `id="img-caption"` correspondente que contenha um conteúdo textual descrevendo a imagem mostrada em `img-div`
|
||||
1. Dentro do elemento `#img-div`, deve haver um elemento `img` com um `id="image"` correspondente
|
||||
1. Dentro do elemento `#img-div`, deve haver um elemento com um `id="img-caption"` correspondente que contenha um conteúdo textual descrevendo a imagem mostrada em `#img-div`
|
||||
1. Deve haver um elemento com `id="tribute-info"`, que contenha conteúdo textual descrevendo a pessoa a quem a página presta homenagem
|
||||
1. Deve haver um elemento `a` com um `id="tribute-link"`, que leve a um site externo que contenha informações adicionais sobre a pessoa a quem a página presta homenagem. DICA: você deve dar ao seu elemento um atributo `target` e definir o valor para `_blank` para que seu link possa ser aberto em uma nova aba
|
||||
1. O elemento `#image` deve usar `max-width` e `height` para redimensionar de forma responsiva, em relação à largura de seu elemento pai, sem exceder seu tamanho original
|
||||
@@ -28,14 +28,14 @@ Atenda às histórias de usuário e passe em todos os testes abaixo para conclui
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter um elemento `main` com o `id` `main`
|
||||
Você deve ter um elemento `main` com o `id` `main`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('main')
|
||||
assert(!!el && el.tagName === 'MAIN')
|
||||
```
|
||||
|
||||
Os elementos `#img-div`, `#image`, `#img-caption`, `#tribute-info` e `#tribute-link` devem estar aninhados dentro de `#main`
|
||||
Os elementos `#img-div`, `#image`, `#img-caption`, `#tribute-info` e `#tribute-link` devem estar aninhados dentro de `#main`.
|
||||
|
||||
```js
|
||||
const el1 = document.querySelector('#main #img-div')
|
||||
@@ -46,14 +46,14 @@ const el5 = document.querySelector('#main #tribute-link')
|
||||
assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5)
|
||||
```
|
||||
|
||||
Você deve ter um elemento com o `id` `title`
|
||||
Você deve ter um elemento com o `id` `title`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
O elemento `#title` não deve estar vazio
|
||||
O elemento `#title` não deve estar vazio.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
@@ -61,84 +61,84 @@ assert(!!el && el.innerText.length > 0)
|
||||
|
||||
```
|
||||
|
||||
Você deve ter um elemento `figure` ou um elemento `div` com o `id` `img-div`
|
||||
Você deve ter um elemento `figure` ou um elemento `div` com o `id` `img-div`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('img-div')
|
||||
assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE'))
|
||||
```
|
||||
|
||||
Você deve ter um elemento `img` com o `id` `image`
|
||||
Você deve ter um elemento `img` com o `id` `image`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('image')
|
||||
assert(!!el && el.tagName === 'IMG')
|
||||
```
|
||||
|
||||
O elemento `#image` deve estar aninhado dentro de `#img-div`
|
||||
O elemento `#image` deve estar aninhado dentro de `#img-div`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#img-div #image')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Você deve ter um elemento `figcaption` ou um elemento `div` com o `id` `img-caption`
|
||||
Você deve ter um elemento `figcaption` ou um elemento `div` com o `id` `img-caption`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('img-caption')
|
||||
assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION'))
|
||||
```
|
||||
|
||||
O elemento `#img-caption` deve estar aninhado dentro de `#img-div`
|
||||
O elemento `#img-caption` deve estar aninhado dentro de `#img-div`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#img-div #img-caption')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
O elemento `#img-caption` não deve estar vazio
|
||||
O elemento `#img-caption` não deve estar vazio.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('img-caption')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Você deve ter um elemento com o `id` `tribute-info`
|
||||
Você deve ter um elemento com o `id` `tribute-info`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-info')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
O elemento `#tribute-info` não deve estar vazio
|
||||
O elemento `#tribute-info` não deve estar vazio.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-info')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Você deve ter um elemento `a` com o `id` `tribute-link`
|
||||
Você deve ter um elemento `a` com o `id` `tribute-link`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-link')
|
||||
assert(!!el && el.tagName === 'A')
|
||||
```
|
||||
|
||||
O elemento `#tribute-link` deve ter o atributo `href` e um valor
|
||||
O elemento `#tribute-link` deve ter o atributo `href` e um valor.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-link')
|
||||
assert(!!el && !!el.href && el.href.length > 0)
|
||||
```
|
||||
|
||||
O elemento `#tribute-link` deve ter um atributo `target` definido como `_blank`
|
||||
O elemento `#tribute-link` deve ter um atributo `target` definido como `_blank`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-link')
|
||||
assert(!!el && el.target === '_blank')
|
||||
```
|
||||
|
||||
O elemento `img` deve ter o atributo `display` com o valor `block`
|
||||
O elemento `img` deve ter o atributo `display` com o valor `block`.
|
||||
|
||||
```js
|
||||
const img = document.getElementById('image');
|
||||
@@ -147,7 +147,7 @@ const style = imgStyle?.getPropertyValue('display')
|
||||
assert(style === 'block')
|
||||
```
|
||||
|
||||
O elemento `#image` deve ter o atributo `max-width` com o valor `100%`
|
||||
O elemento `#image` deve ter o atributo `max-width` com o valor `100%`.
|
||||
|
||||
```js
|
||||
const img = document.getElementById('image');
|
||||
@@ -156,7 +156,7 @@ const style = imgStyle?.getPropertyValue('max-width')
|
||||
assert(style === '100%')
|
||||
```
|
||||
|
||||
O elemento `#image` deve ter o atributo `height` com o valor `auto`
|
||||
O elemento `#image` deve ter o atributo `height` com o valor `auto`.
|
||||
|
||||
```js
|
||||
// taken from the testable-projects repo
|
||||
@@ -170,7 +170,7 @@ img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
|
||||
assert(heightValue === 'auto')
|
||||
```
|
||||
|
||||
O elemento `#image` deve ser centralizado dentro de seu elemento pai
|
||||
O elemento `#image` deve ser centralizado dentro de seu elemento pai.
|
||||
|
||||
```js
|
||||
// taken from the testable-projects repo
|
||||
@@ -207,14 +207,14 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Pacifico"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Lobster"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
|
||||
/>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
<title>Tribute Page</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
+23
-33
@@ -39,15 +39,13 @@ assert(
|
||||
O componente `DisplayMessages` deve renderizar um `div` contendo um elemento `h2`, um elemento `button`, um elemento `ul` e elementos `li` como filhos.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const state = () => {
|
||||
mockedComponent.setState({ messages: ['__TEST__MESSAGE'] });
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await state();
|
||||
const updated = state();
|
||||
assert(
|
||||
updated.find('div').length === 1 &&
|
||||
updated.find('h2').length === 1 &&
|
||||
@@ -67,18 +65,16 @@ assert(code.match(/this\.state\.messages\.map/g));
|
||||
O elemento `input` deve renderizar o valor de `input` no state local.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const testValue = '__TEST__EVENT__INPUT';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testValue);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await changed();
|
||||
const updated = changed();
|
||||
assert(updated.find('input').props().value === testValue);
|
||||
};
|
||||
```
|
||||
@@ -86,19 +82,17 @@ async () => {
|
||||
Chamar o método `handleChange` deve atualizar o valor do `input` no state para o input atual.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__TEST__EVENT__MESSAGE__';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterInput = await changed();
|
||||
const afterInput = changed();
|
||||
assert(
|
||||
initialState.input === '' &&
|
||||
afterInput.state().input === '__TEST__EVENT__MESSAGE__'
|
||||
@@ -109,36 +103,34 @@ async () => {
|
||||
Clicar o botão `Add message` deve chamar o método `submitMessage` o qual deve adicionar o texto atual no `input` ao array `messages` no state.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage_1 = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage_1);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_1 = await firstSubmit();
|
||||
const afterSubmit_1 = firstSubmit();
|
||||
const submitState_1 = afterSubmit_1.state();
|
||||
const testMessage_2 = '__SECOND__MESSAGE__';
|
||||
const secondChange = () => {
|
||||
causeChange(mockedComponent, testMessage_2);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const secondResult = await secondChange();
|
||||
const secondResult = secondChange();
|
||||
const secondSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_2 = await secondSubmit();
|
||||
const afterSubmit_2 = secondSubmit();
|
||||
const submitState_2 = afterSubmit_2.state();
|
||||
assert(
|
||||
initialState.messages.length === 0 &&
|
||||
@@ -152,25 +144,23 @@ async () => {
|
||||
O método `submitMessage` deve limpar o input atual.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstState = firstResult.state();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit = await firstSubmit();
|
||||
const afterSubmit = firstSubmit();
|
||||
const submitState = afterSubmit.state();
|
||||
assert(firstState.input === testMessage && submitState.input === '');
|
||||
};
|
||||
|
||||
+1
-1
@@ -161,7 +161,7 @@ O código não deve conter nenhuma instrução `if/else`.
|
||||
```js
|
||||
assert(
|
||||
new RegExp(/(\s|;)if(\s|\()/).test(
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()
|
||||
code
|
||||
) === false
|
||||
);
|
||||
```
|
||||
|
||||
+1
-1
@@ -12,7 +12,7 @@ Lembrando que este projeto está sendo construído a partir do <a href="https://
|
||||
|
||||
# --instructions--
|
||||
|
||||
Em `tests/2_functional-tests.js`, no teste `'Submit the surname "Vespucci" in the HTML form'` (`// #5`), automatize o seguinte:
|
||||
Em `tests/2_functional-tests.js`, no teste `'Submit the surname "Vespucci" in the HTML form'` (`// #6`), automatize o seguinte:
|
||||
|
||||
1. Preencha o formulário com o surname `Vespucci`
|
||||
2. Pressione o botão Submit
|
||||
|
||||
+23
-33
@@ -39,15 +39,13 @@ assert(
|
||||
Компонент `DisplayMessages` повинен відображати `div`, що містить елементи `h2`, `button`, `ul`, та `li` elements.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const state = () => {
|
||||
mockedComponent.setState({ messages: ['__TEST__MESSAGE'] });
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await state();
|
||||
const updated = state();
|
||||
assert(
|
||||
updated.find('div').length === 1 &&
|
||||
updated.find('h2').length === 1 &&
|
||||
@@ -67,18 +65,16 @@ assert(code.match(/this\.state\.messages\.map/g));
|
||||
Елемент `input` повинен відображати значення `input` у локальному стані.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const testValue = '__TEST__EVENT__INPUT';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testValue);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const updated = await changed();
|
||||
const updated = changed();
|
||||
assert(updated.find('input').props().value === testValue);
|
||||
};
|
||||
```
|
||||
@@ -86,19 +82,17 @@ async () => {
|
||||
Виклик методу `handleChange` повинен оновити значення стану `input` до поточного входу.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__TEST__EVENT__MESSAGE__';
|
||||
const changed = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterInput = await changed();
|
||||
const afterInput = changed();
|
||||
assert(
|
||||
initialState.input === '' &&
|
||||
afterInput.state().input === '__TEST__EVENT__MESSAGE__'
|
||||
@@ -109,36 +103,34 @@ async () => {
|
||||
Натискання кнопки `Add message` повинно викликати метод `submitMessage`, який повинен додати поточний `input` до масиву `messages`.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage_1 = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage_1);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_1 = await firstSubmit();
|
||||
const afterSubmit_1 = firstSubmit();
|
||||
const submitState_1 = afterSubmit_1.state();
|
||||
const testMessage_2 = '__SECOND__MESSAGE__';
|
||||
const secondChange = () => {
|
||||
causeChange(mockedComponent, testMessage_2);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const secondResult = await secondChange();
|
||||
const secondResult = secondChange();
|
||||
const secondSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit_2 = await secondSubmit();
|
||||
const afterSubmit_2 = secondSubmit();
|
||||
const submitState_2 = afterSubmit_2.state();
|
||||
assert(
|
||||
initialState.messages.length === 0 &&
|
||||
@@ -152,25 +144,23 @@ async () => {
|
||||
Метод `submitMessage` повинен очистити поточне введення.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
() => {
|
||||
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
||||
const waitForIt = (fn) =>
|
||||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||||
const causeChange = (c, v) =>
|
||||
c.find('input').simulate('change', { target: { value: v } });
|
||||
const initialState = mockedComponent.state();
|
||||
const testMessage = '__FIRST__MESSAGE__';
|
||||
const firstChange = () => {
|
||||
causeChange(mockedComponent, testMessage);
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const firstResult = await firstChange();
|
||||
const firstResult = firstChange();
|
||||
const firstState = firstResult.state();
|
||||
const firstSubmit = () => {
|
||||
mockedComponent.find('button').simulate('click');
|
||||
return waitForIt(() => mockedComponent);
|
||||
return mockedComponent;
|
||||
};
|
||||
const afterSubmit = await firstSubmit();
|
||||
const afterSubmit = firstSubmit();
|
||||
const submitState = afterSubmit.state();
|
||||
assert(firstState.input === testMessage && submitState.input === '');
|
||||
};
|
||||
|
||||
+1
-1
@@ -161,7 +161,7 @@ assert(
|
||||
```js
|
||||
assert(
|
||||
new RegExp(/(\s|;)if(\s|\()/).test(
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()
|
||||
code
|
||||
) === false
|
||||
);
|
||||
```
|
||||
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 5dc1798ff86c76b9248c6eb3
|
||||
title: Крок 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Заголовкові елементи від `h1` до `h6` використовують для позначення важливості вмісту під ними. Чим менше число, тим вища важливість; отже елементи `h2` мають меншу важливість, ніж елементи `h1`. Використовуйте лише один елемент `h1` на сторінці та розмістіть заголовки меншої важливості під заголовками вищої важливості.
|
||||
|
||||
Під елементом `h1` додайте елемент `h2` з цим текстом:
|
||||
|
||||
`Cat Photos`
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `h1` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1'));
|
||||
```
|
||||
|
||||
Ваш елемент `h1` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h1\>/));
|
||||
```
|
||||
|
||||
У вас повинен бути тільки один елемент `h1`. Видаліть зайві.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('h1') && document.querySelectorAll('h1').length === 1
|
||||
);
|
||||
```
|
||||
|
||||
Текст вашого елемента `h1` повинен бути 'CatPhotoApp'. Ви або не написали текст, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');
|
||||
```
|
||||
|
||||
Ваш елемент `h2` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h2'));
|
||||
```
|
||||
|
||||
Елемент `h2` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h2\>/));
|
||||
```
|
||||
|
||||
Текст вашого елемента `h2` повинен бути 'Cat Photos'. Розмістіть текст `Cat Photos` між початковими та кінцевими теґами `h2`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h2').innerText.toLowerCase() === 'cat photos');
|
||||
```
|
||||
|
||||
Ваш елемент `h2` повинен бути під елементом `h1`. Елемент `h1` має більшу важливість та повинен бути над елементом `h2`.
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('h1,h2')].map(
|
||||
(node) => node.nodeName
|
||||
);
|
||||
assert(collection.indexOf('H1') < collection.indexOf('H2'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<h1>CatPhotoApp</h1>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+1
-1
@@ -34,7 +34,7 @@ const extraSpacesRemoved = document
|
||||
assert(extraSpacesRemoved.match(/click here to view more cat photos\.?$/i));
|
||||
```
|
||||
|
||||
Ваш елемент `p` має бути нижче елемента `h2`. Вони знаходяться в неправильному порядку.
|
||||
Ваш елемент `p` повинен бути під елементом `h2`. Вони знаходяться в неправильному порядку.
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('h2,p')].map(
|
||||
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 5dc2385ff86c76b9248c6eb7
|
||||
title: Крок 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 має деякі елементи, що ідентифікують різні області вмісту. Ці елементи полегшують прочитання вашого HTML, а також допомагають з оптимізацією пошукової системи (SEO) та доступністю.
|
||||
|
||||
Ідентифікуйте головну секцію цієї сторінки, додавши початковий теґ `<main>` після елемента `h1` та кінцевий теґ `</main>` після елемента `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `main` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('main'));
|
||||
```
|
||||
|
||||
Ваш елемент `main` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/main\>/));
|
||||
```
|
||||
|
||||
Початковий теґ вашого елемента `main` повинен бути під елементом `h1`. Вони знаходяться в неправильному порядку.
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('main,h1')].map(
|
||||
(node) => node.nodeName
|
||||
);
|
||||
assert(collection.indexOf('H1') < collection.indexOf('MAIN'));
|
||||
```
|
||||
|
||||
Початковий теґ вашого елемента `main` повинен бути над елементом `h2`. Вони знаходяться в неправильному порядку.
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('main,h2')].map(
|
||||
(node) => node.nodeName
|
||||
);
|
||||
assert(collection.indexOf('MAIN') < collection.indexOf('H2'));
|
||||
```
|
||||
|
||||
Кінцевий теґ вашого елемента `main` повинен бути під елементом `p`. Вони знаходяться в неправильному порядку.
|
||||
|
||||
```js
|
||||
const mainNode = document.querySelector('main');
|
||||
const pNode = document.querySelector('p');
|
||||
assert(
|
||||
mainNode.contains(pNode) &&
|
||||
pNode.textContent.toLowerCase().match(/click here to view more cat photos/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more cat photos.</p>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 5dc23991f86c76b9248c6eb8
|
||||
title: Крок 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
В попередньому кроці ви вклали елемент `h2`, коментар та елемент `p` в елемент `main`. Абзацний відступ вкладених елементів, що більший на два пробіли за їхній батьківський елемент, покращує читабельність:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li> This `li` element indented </li>
|
||||
<li> This `li` element is also indented </li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Додайте ще два пробіли перед елементом `h2`, коментарем та елементами `p`, щоб ваш HTML був читабельнішим.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен мати елемент `h2` з текстом `Cat Photos`. Можливо, ви випадково видалили його, в ньому відсутні обидва початковий та кінцевий теґи, або змінився текст.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('h2') &&
|
||||
code.match(/<\/h2\>/) &&
|
||||
document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
|
||||
);
|
||||
```
|
||||
|
||||
Ви не повинні додавати елементи `ul` або `li` з прикладу.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!document.querySelector('ul') && !document.querySelector('li')
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `h2` повинен бути під початковим теґом елемента `main`, а його початковий теґ повинен починатися після 6 пробілів від початку рядка.
|
||||
|
||||
```js
|
||||
assert(code.toLowerCase().match(/<main\>\s*\n\s{6}<h2>/));
|
||||
```
|
||||
|
||||
Ваш код повинен мати коментар. Ви видалили коментар з попереднього кроку.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--.*-->/));
|
||||
```
|
||||
|
||||
Текст коментаря повинен бути `TODO: Add link to cat photos`. Не змінюйте текст та пробіли коментаря.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
|
||||
```
|
||||
|
||||
Ваш коментар повинен бути під елементом `h2` та починатись після 6 пробілів з початку рядка.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code
|
||||
.toLowerCase()
|
||||
.match(/<\/h2>\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш код повинен мати елемент `p`. Ви видалили елемент `p` з попереднього кроку.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('p'));
|
||||
```
|
||||
|
||||
Текст елемента `p` повинен бути `Click here to view more cat photos.` Не змінюйте текст, пробіли чи знаки пунктуації елемента `p`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document
|
||||
.querySelector('p')
|
||||
.innerText.toLowerCase()
|
||||
.match(/click\s+here\s+to\s+view\s+more\s+cat\s+photos\.?$/)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `p` повинен бути під коментарем, а його початковий теґ повинен починатися через 6 пробілів від початку рядка.
|
||||
|
||||
```js
|
||||
assert(code.toLowerCase().match(/-->\n\s{6}<p>/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more cat photos.</p>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+1
-1
@@ -31,7 +31,7 @@ assert(!code.match(/<\/img\>/));
|
||||
assert(document.querySelectorAll('img').length === 1);
|
||||
```
|
||||
|
||||
Ваш елемент `img` повинен бути нижче елемента `p`. Вони знаходяться в неправильному порядку.
|
||||
Ваш елемент `img` повинен бути під елементом `p`. Вони знаходяться в неправильному порядку.
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('p,img')].map(
|
||||
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 5dc24073f86c76b9248c6ebb
|
||||
title: Крок 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML <dfn>атрибути</dfn> – це спеціальні слова, які використовують всередині початкового теґа елемента для керування поведінкою елемента. Атрибут `src` в елементі `img` зазначає URL-адресу зображення (де локалізовано зображення). Приклад використання елементом `img` атрибута `src`: `<img src="https://www.your-image-source.com/your-image.jpg">`.
|
||||
|
||||
Всередині наявного елемента `img` додайте атрибут `src` з цією URL-адресою:
|
||||
|
||||
`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен мати елемент `img`. Можливо, ви видалили елемент `img` або ви не оточили значення атрибута `src` в лапки.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img'));
|
||||
```
|
||||
|
||||
Елемент `img` повинен мати атрибут `src`. Ви або не додали атрибут, або маєте друкарську помилку. Переконайтеся, що між назвою елемента та назвою атрибуту є пробіл.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').src);
|
||||
```
|
||||
|
||||
Атрибут `src` вашого елемента `img` повинен мати значення '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. Ви або не написали URL-адресу, або маєте друкарську помилку. Важливо, з якої літери написана URL-адреса (з великої чи малої).
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
|
||||
```
|
||||
|
||||
Хоча ви встановили атрибут `src` елемента `img` як правильну URL-адресу, краще завжди писати значення атрибута в лапках.
|
||||
|
||||
```js
|
||||
assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more cat photos.</p>
|
||||
--fcc-editable-region--
|
||||
<img>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 5dc24165f86c76b9248c6ebc
|
||||
title: Крок 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Всі елементи `img` повинні мати атрибут `alt`. Текст атрибута `alt` використовують для читачів екрана, щоб покращити доступність, та він зображається, якщо зображення не завантажується. Наприклад, `<img src="cat.jpg" alt="A cat">` має атрибут `alt` з текстом `A cat`.
|
||||
|
||||
Всередині наявного елемента `img` додайте атрибут `alt` з цим текстом:
|
||||
|
||||
`A cute orange cat lying on its back`
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен мати елемент `img`. Ви видалили елемент `img` з попереднього кроку.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img'));
|
||||
```
|
||||
|
||||
Ваш елемент `img` не має атрибута `alt`. Перевірте, чи є пробіл після назви початкового теґа та/або є пробіли перед усіма назвами атрибутів.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').hasAttribute('alt'));
|
||||
```
|
||||
|
||||
Значення атрибута `alt` вашого елемента `img` встановлене на щось інше, а не на 'A cute orange cat lying on its back'. Переконайтеся, що значення атрибута `alt` написане в лапках.
|
||||
|
||||
```js
|
||||
const altText = document
|
||||
.querySelector('img')
|
||||
.alt.toLowerCase()
|
||||
.replace(/\s+/g, ' ');
|
||||
assert(altText.match(/A cute orange cat lying on its back\.?$/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more cat photos.</p>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 5dc24614f86c76b9248c6ebd
|
||||
title: Крок 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете посилати на іншу сторінку з елементом anchor (`a`). Наприклад, `<a href='https://freecodecamp.org'></a>` посилає на `freecodecamp.org`.
|
||||
|
||||
Додайте елемент anchor після абзацу, який посилає на `https://freecatphotoapp.com`. На цей момент посилання не з’явиться в попередньому перегляді.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент anchor `a` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('a'));
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/a\>/));
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) повинен бути під елементом `p`. Вони знаходяться в неправильному порядку.
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('a, p')].map(
|
||||
(node) => node.nodeName
|
||||
);
|
||||
assert(collection.indexOf('P') < collection.indexOf('A'));
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) не має атрибута `href`. Перевірте, чи є пробіл після назви початкового теґа та/або є пробіли перед усіма назвами атрибутів.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('a').hasAttribute('href'));
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) повинен посилати на `https://freecatphotoapp.com`. Ви або не написали URL-адресу, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('a').getAttribute('href') ===
|
||||
'https://freecatphotoapp.com'
|
||||
);
|
||||
```
|
||||
|
||||
Хоча ви встановили атрибут `href` елемента anchor ('a') як правильне посилання, краще завжди писати значення атрибута в лапках.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!/\<a\s+href\s*=\s*https:\/\/www.freecodecamp.org\/cat-photos/.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
--fcc-editable-region--
|
||||
<p>Click here to view more cat photos.</p>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 5ddbd81294d8ddc1510a8e56
|
||||
title: Крок 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Текст посилання повинен бути розміщений між початковим та кінцевим теґами елемента anchor (`a`). Наприклад, `<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>` є посиланням з текстом `click here to go to freeCodeCamp.org`.
|
||||
|
||||
Додайте текст anchor `cat photos` до елемента anchor. Це буде текстом посилання.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент anchor (`a`) повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('a'));
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/a\>/));
|
||||
```
|
||||
|
||||
Текст вашого елемент anchor (`a`) повинен бути `cat photos`. Переконайтеся, що розмістили текст посилання між початковим та кінцевим теґами елемента anchor (`a`).
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
|
||||
'cat photos'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more cat photos.</p>
|
||||
--fcc-editable-region--
|
||||
<a href="https://freecatphotoapp.com"></a>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 5dfa22d1b521be39a3de7be0
|
||||
title: Крок 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Тепер в попередньому перегляді ви можете побачити підкреслені слова `cat photos` поруч із зображенням. Це ваше посилання; сміливо клацайте. В тексті вашого елемента `p` перетворіть слова `cat photos` на посилання `https://freecatphotoapp.com`. Коли ви закінчите, видаліть старий anchor тег та текст під абзацом.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен мати лише один елемент anchor (`a`). Видаліть зайві елементи anchor.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('a').length === 1);
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) повинен бути вкладеним в межах елемента `p`.
|
||||
|
||||
```js
|
||||
assert($('p > a').length);
|
||||
```
|
||||
|
||||
Значення href посилання повинне бути `https://freecatphotoapp.com`. Ви або не написали значення href, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
const nestedAnchor = $('p > a')[0];
|
||||
assert(
|
||||
nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com'
|
||||
);
|
||||
```
|
||||
|
||||
Текст посилання повинен бути `cat photos`. Ви або не написали текст, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
const nestedAnchor = $('p > a')[0];
|
||||
assert(
|
||||
nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
|
||||
);
|
||||
```
|
||||
|
||||
Після вкладення елемента anchor (`a`) єдиним видимим вмістом елемента `p` в браузері повинен бути `Click here to view more cat photos.` Двічі перевірте текст, пробіли або пунктуацію обох елементів `p` та вкладеного елемента anchor.
|
||||
|
||||
```js
|
||||
const pText = document
|
||||
.querySelector('p')
|
||||
.innerText.toLowerCase()
|
||||
.replace(/\s+/g, ' ');
|
||||
assert(pText.match(/click here to view more cat photos\.?$/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
--fcc-editable-region--
|
||||
<p>Click here to view more cat photos.</p>
|
||||
<a href="https://freecatphotoapp.com">cat photos</a>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 5dfa2407b521be39a3de7be1
|
||||
title: Крок 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додайте атрибут `target` зі значенням `_blank` до початкового теґа елемента anchor (`a`) так, щоб посилання відкривалося в новій вкладці.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `p` повинен мати вкладений елемент anchor (`a`) з текстом `cat photos`. Можливо, ви видалили його або допустили помилку.
|
||||
|
||||
```js
|
||||
const anchor = $('p > a');
|
||||
assert(
|
||||
anchor.length &&
|
||||
anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) не має атрибута `target`. Перевірте, чи є пробіл після назви початкового теґа та/або є пробіли перед усіма назвами атрибутів.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('a').hasAttribute('target'));
|
||||
```
|
||||
|
||||
Значення атрибута `target` повинне бути `_blank`. Ви або не написали значення, або маєте друкарську помилку. Пам'ятайте, що значення атрибутів повинні бути в лапках.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('a').getAttribute('target') === '_blank');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
--fcc-editable-region--
|
||||
<p>Click here to view more <a href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 5dfa30b9eacea3f48c6300ad
|
||||
title: Крок 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Перетворіть зображення на посилання, оточивши його необхідними теґами елементів. Використайте `https://freecatphotoapp.com` як значення атрибута `href` елемента anchor.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати елемент `img` з `src` зі значенням `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. Можливо, ви випадково видалили його.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('img') &&
|
||||
document.querySelector('img').getAttribute('src') ===
|
||||
'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg'
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('a').length >= 2);
|
||||
```
|
||||
|
||||
Ви повинні додати лише один початковий теґ anchor (`a`). Будь ласка, видаліть всі зайві.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('a').length === 2);
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/a>/g).length >= 2);
|
||||
```
|
||||
|
||||
Ви повинні додати лише один кінцевий теґ anchor (`a`). Будь ласка, видаліть всі зайві.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/a>/g).length === 2);
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) не має атрибута `href`. Перевірте, чи є пробіл після назви початкового теґа та/або є пробіли перед усіма назвами атрибутів.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('a').hasAttribute('href'));
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) повинен посилати на `https://freecatphotoapp.com`. Ви або не написали URL-адресу, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelectorAll('a')[1].getAttribute('href') ===
|
||||
'https://freecatphotoapp.com'
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `img` повинен бути вкладеним в межах елемента anchor (`a`). Весь елемент `img` повинен бути всередині початкового та кінцевого теґів елемента anchor (`a`).
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').parentNode.nodeName === 'A');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+75
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 5dfa3589eacea3f48c6300ae
|
||||
title: Крок 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
В межах другого елемента `section` додайте новий елемент `h2` із текстом `Cat Lists`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `section` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelectorAll('section').length === 2 &&
|
||||
code.match(/<\/section>/g).length === 2
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `h2` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('h2').length === 2);
|
||||
```
|
||||
|
||||
Ваш елемент `h2` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h2\>/g).length === 2);
|
||||
```
|
||||
|
||||
Ваш другий елемент `h2` повинен бути прямо над кінцевим теґом другого елемента `section`. Він в неправильному положенні.
|
||||
|
||||
```js
|
||||
const secondSection = document.querySelectorAll('section')[1];
|
||||
assert(secondSection.lastElementChild.nodeName === 'H2');
|
||||
```
|
||||
|
||||
Другий елемент `h2` повинен мати текст `Cat Lists`. Ви або не написали текст, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document
|
||||
.querySelectorAll('main > section')[1]
|
||||
.lastElementChild.innerText.toLowerCase() === 'cat lists'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 5dfa371beacea3f48c6300af
|
||||
title: Крок 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Якщо ви додаєте заголовковий елемент нижчого рангу, то ідеться про те, що ви починаєте нову підсекцію.
|
||||
|
||||
Після останнього елемента `h2` другого елемента `section` додайте елемент `h3` з таким текстом:
|
||||
|
||||
`Things cats love:`
|
||||
|
||||
# --hints--
|
||||
|
||||
Здається, другий елемент `section` не має початкового та кінцевого теґів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelectorAll('main > section')[1] &&
|
||||
code.match(/\<\/section>/g).length == 2
|
||||
);
|
||||
```
|
||||
|
||||
Прямо над кінцевим теґом другого елемента `section` має бути елемент `h3`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelectorAll('main > section')[1].lastElementChild.nodeName ===
|
||||
'H3'
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `h3` над кінцевим теґом другого елемента `section` повинен мати текст `Things cats love:`. Переконайтеся, що поставили двокрапку в кінці тексту.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document
|
||||
.querySelectorAll('main > section')[1]
|
||||
.lastElementChild.innerText.toLowerCase()
|
||||
.replace(/\s+/g, ' ') === 'things cats love:'
|
||||
);
|
||||
```
|
||||
|
||||
Повинен бути елемент `h2` з текстом `Cat Lists` над останнім елементом `h3`, вкладеним в останній елемент `section`. Можливо, ви випадково видалили елемент `h2`.
|
||||
|
||||
```js
|
||||
const secondSectionLastElemNode = document.querySelectorAll('main > section')[1]
|
||||
.lastElementChild;
|
||||
assert(
|
||||
secondSectionLastElemNode.nodeName === 'H3' &&
|
||||
secondSectionLastElemNode.previousElementSibling.innerText
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, ' ') === 'cat lists'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
---
|
||||
id: 5dfa37b9eacea3f48c6300b0
|
||||
title: Крок 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Після елемента `h3` з текстом `Things cats love:` додайте елемент невпорядкованого списку (`ul`). Зауважте, що на цьому етапі нічого не буде показано.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `ul` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('ul'));
|
||||
```
|
||||
|
||||
Ваш елемент `ul` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/ul>/));
|
||||
```
|
||||
|
||||
Ваш елемент `ul` повинен бути над кінцевим теґом другого елемента `section`.
|
||||
|
||||
```js
|
||||
const secondSectionLastElemNode = $('main > section')[1].lastElementChild;
|
||||
assert(secondSectionLastElemNode.nodeName === 'UL');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 5dfb5ecbeacea3f48c6300b1
|
||||
title: Крок 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Використовуйте елементи (`li`) предметів списку, щоб створити предмети в списку. Ось приклад предметів списку в невпорядкованому списку:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>cheese</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Всередині елемента `ul` вкладіть три предмети списку, щоб зобразити три речі, які люблять коти:
|
||||
|
||||
`cat nip` `laser pointers` `lasagna`
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати три елементи `li`. Кожен елемент `li` повинен мати власні початковий та кінцевий теґи.
|
||||
|
||||
```js
|
||||
assert($('li').length === 3 && code.match(/<\/li\>/g).length === 3);
|
||||
```
|
||||
|
||||
Ви повинні мати три елементи `li` з текстом `cat nip`, `laser pointers` та `lasagna` в будь-якому порядку. Ви або не написали текст, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(
|
||||
[...document.querySelectorAll('li')]
|
||||
.map((item) => item.innerText.toLowerCase())
|
||||
.sort((a, b) => a.localeCompare(b)),
|
||||
['cat nip', 'lasagna', 'laser pointers']
|
||||
);
|
||||
```
|
||||
|
||||
Три елементи `li` повинні бути розташовані між початковим та кінцевим теґами елемента `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
[...document.querySelectorAll('li')].filter(
|
||||
(item) => item.parentNode.nodeName === 'UL'
|
||||
).length === 3
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 5dfb6250eacea3f48c6300b2
|
||||
title: Крок 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Після невпорядкованого списку додайте нове зображення зі значенням атрибута `src`:
|
||||
|
||||
`https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`
|
||||
|
||||
Та його значенням атрибута `alt`:
|
||||
|
||||
`A slice of lasagna on a plate.`
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `img` повинен бути відразу після кінцевого теґа `</ul>`.
|
||||
|
||||
```js
|
||||
assert($('section')[1].lastElementChild.nodeName === 'IMG');
|
||||
```
|
||||
|
||||
Нове зображення не має атрибута `alt`. Перевірте, чи є пробіл після назви початкового теґа та/або є пробіли перед усіма назвами атрибутів.
|
||||
|
||||
```js
|
||||
assert($('section')[1].lastElementChild.hasAttribute('alt'));
|
||||
```
|
||||
|
||||
Нове зображення повинне мати `alt` зі значенням `A slice of lasagna on a plate.` Переконайтеся, що значення атрибута `alt` написане в лапках.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('section')[1]
|
||||
.lastElementChild.getAttribute('alt')
|
||||
.replace(/\s+/g, ' ')
|
||||
.match(/^A slice of lasagna on a plate\.?$/i)
|
||||
);
|
||||
```
|
||||
|
||||
Нове зображення не має атрибута `src`. Перевірте, чи є пробіл після назви початкового теґа та/або є пробіли перед усіма назвами атрибутів.
|
||||
|
||||
```js
|
||||
assert($('section')[1].lastElementChild.hasAttribute('src'));
|
||||
```
|
||||
|
||||
Нове зображення повинне мати `src` зі значенням `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`. Переконайтеся, що значення атрибута `src` написане в лапках.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('section')[1].lastElementChild.getAttribute('src') ===
|
||||
'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
|
||||
);
|
||||
```
|
||||
|
||||
Хоча ви встановили атрибут `src` нового зображення як правильну URL-адресу, краще завжди писати значення атрибута в лапках.
|
||||
|
||||
```js
|
||||
assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/lasagna\.jpg/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 5dfb655eeacea3f48c6300b3
|
||||
title: Крок 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Елемент `figure` представляє самодостатній вміст та дозволяє вам пов’язати зображення із підписом.
|
||||
|
||||
Вкладіть зображення, яке ви щойно додали, в елемент `figure`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `figure` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('figure'));
|
||||
```
|
||||
|
||||
Ваш елемент `figure` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/figure\>/));
|
||||
```
|
||||
|
||||
Прямо над кінцевим теґом другого елемента `section` повинен бути елемент `figure`.
|
||||
|
||||
```js
|
||||
assert($('section')[1].lastElementChild.nodeName === 'FIGURE');
|
||||
```
|
||||
|
||||
Елемент `img` «лазанья» повинен бути вкладеним в елементі `figure`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('figure > img') &&
|
||||
document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
|
||||
'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+108
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 5dfb6a35eacea3f48c6300b4
|
||||
title: Крок 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Елемент підпису до рисунка (`figcaption`) використовують для додавання підпису, щоб описати зображення, яке міститься в елементі `figure`. Наприклад, `<figcaption>A cute cat</figcaption>` додає підпис `A cute cat`.
|
||||
|
||||
Після зображення, вкладеного в елемент `figure`, додайте елемент `figcaption` з таким текстом:
|
||||
|
||||
`Cats love lasagna.`
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `img` «Лазанья» повинен бути вкладеним в елементі `figure`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('figure > img') &&
|
||||
document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
|
||||
'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `figcaption` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('figcaption'));
|
||||
```
|
||||
|
||||
Ваш елемент `figcaption` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/figcaption\>/));
|
||||
```
|
||||
|
||||
Елемент `figcaption` повинен бути вкладеним в елементі `figure`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('figure > figcaption') &&
|
||||
document.querySelector('figure > figcaption')
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `img` лазанья повинен бути вкладеним в елементі `figure`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('figure > img') &&
|
||||
document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
|
||||
'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `figcaption`, вкладений в елемент `figure`, повинен бути під елементом `img`. Вони знаходяться в неправильному порядку.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('figcaption').previousElementSibling.nodeName === 'IMG'
|
||||
);
|
||||
```
|
||||
|
||||
Текст вашого елемента `figcaption` повинен бути `Cats love lasagna.` Ви або не написали текст, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('figcaption').innerText.match(/Cats love lasagna.?$/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
</figure>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+85
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d0
|
||||
title: Крок 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Відзначте слово `love` в елементі `figcaption`, обернувши його в елемент emphasis `em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент emphasis `em` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('em'));
|
||||
```
|
||||
|
||||
Ваш елемент emphasis `em` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/em\>/));
|
||||
```
|
||||
|
||||
Ви або видалили елемент `figcaption`, або в ньому відсутній початковий чи кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('figcaption') && code.match(/<\/figcaption\>/));
|
||||
```
|
||||
|
||||
Ваш елемент emphasis `em` повинен оточувати текст `love`. Ви або не написали текст, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('figcaption > em').innerText.toLowerCase() === 'love'
|
||||
);
|
||||
```
|
||||
|
||||
Текст `figcaption` повинен бути `Cats love lasagna`. Перевірте наявність друкарських помилок та необхідних пробілів навколо початкового та кінцевого теґів елемента `em`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document
|
||||
.querySelector('figcaption')
|
||||
.innerText.replace(/\s+/gi, ' ')
|
||||
.match(/cats love lasagna\.?/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
--fcc-editable-region--
|
||||
<figcaption>Cats love lasagna.</figcaption>
|
||||
--fcc-editable-region--
|
||||
</figure>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+1
-1
@@ -22,7 +22,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Новий елемент `h3` повинен мати текст `Top 3 things cats hate:`. Не забудьте поставити двокрапку в кінці тексту.
|
||||
Новий елемент `h3` повинен мати текст `Top 3 things cats hate:`. Переконайтеся, що поставили двокрапку в кінці тексту.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
+72
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d3
|
||||
title: Крок 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Після впорядкованого списку додайте ще один елемент `figure`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `figure` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('figure').length === 2);
|
||||
```
|
||||
|
||||
Ваш елемент `figure` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/figure>/g).length === 2);
|
||||
```
|
||||
|
||||
Прямо над кінцевим теґом другого елемента `section` повинен бути елемент `figure`.
|
||||
|
||||
```js
|
||||
assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
--fcc-editable-region--
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+96
@@ -0,0 +1,96 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d4
|
||||
title: Крок 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Елемент `strong` використовують для того, щоб вказати важливість або терміновість тексту.
|
||||
|
||||
В `figcaption`, який ви щойно додали, вкажіть, що `hate` має велике значення, обгорнувши його елементом `strong`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `strong` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('strong'));
|
||||
```
|
||||
|
||||
Ваш елемент `strong` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/strong\>/));
|
||||
```
|
||||
|
||||
Ваш елемент `strong` повинен оточувати слово `hate` в тексті `Cats hate other cats.` Ви або не написали текст, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document
|
||||
.querySelectorAll('figcaption')[1]
|
||||
.querySelector('strong')
|
||||
.innerText.toLowerCase() === 'hate'
|
||||
);
|
||||
```
|
||||
|
||||
Текст `figcaption` повинен бути `Cats hate other cats.` Перевірте наявність друкарських помилок та необхідних пробілів навколо початкового та кінцевого теґів елемента `strong`.
|
||||
|
||||
```js
|
||||
const secondFigCaption = document.querySelectorAll('figcaption')[1];
|
||||
assert(
|
||||
secondFigCaption &&
|
||||
secondFigCaption.innerText
|
||||
.replace(/\s+/gi, ' ')
|
||||
.trim()
|
||||
.match(/cats hate other cats\.?/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
--fcc-editable-region--
|
||||
<figcaption>Cats hate other cats.</figcaption>
|
||||
--fcc-editable-region--
|
||||
</figure>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d5
|
||||
title: Крок 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Всередині третього елемента `section` додайте елемент `h2` з текстом:
|
||||
|
||||
`Cat Form`
|
||||
|
||||
# --hints--
|
||||
|
||||
Не вдалося знайти третій елемент `section`. Можливо, ви випадково видалили його або початковий/кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelectorAll('section').length === 3 &&
|
||||
code.match(/<\/section>/g).length === 3
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `h2` повинен мати початковий та кінцевий теґи. Можливо, вам не вистачає одного чи обох необхідних теґів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelectorAll('h2').length >= 3 &&
|
||||
code.match(/<\/h2>/g).length >= 3
|
||||
);
|
||||
```
|
||||
|
||||
Ви повинні додати лише один новий елемент `h2`. Будь ласка, видаліть всі зайві.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('h2').length === 3);
|
||||
```
|
||||
|
||||
Новий елемент `h2` повинен бути прямо над кінцевим теґом третього елемента `section`.
|
||||
|
||||
```js
|
||||
const thirdSection = document.querySelectorAll('section')[2];
|
||||
assert(thirdSection.lastElementChild.nodeName === 'H2');
|
||||
```
|
||||
|
||||
Текст вашого елемента `h2` повинен бути `Cat Form`.
|
||||
|
||||
```js
|
||||
const thirdSection = document.querySelectorAll('section')[2];
|
||||
assert(
|
||||
thirdSection
|
||||
.querySelector('h2')
|
||||
.innerText.toLowerCase()
|
||||
.replace(/\s+/g, ' ') === 'cat form'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d6
|
||||
title: Крок 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Зараз ви додасте вебформу для збору інформації від користувачів.
|
||||
|
||||
Після заголовка `Cat Form` додайте елемент `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `form` повинен мати початковий та кінцевий теґи. Можливо, вам не вистачає одного/обох необхідних теґів або вони розміщені в неправильному порядку.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('form') && code.match(/<\/form>/g));
|
||||
```
|
||||
|
||||
Теґи вашого елемента `form` розташовані в неправильному порядку.
|
||||
|
||||
```js
|
||||
const noSpaces = code.replace(/\s/g, '');
|
||||
assert(noSpaces.indexOf('<form>') < noSpaces.indexOf('</form>'));
|
||||
```
|
||||
|
||||
Елемент `form`, вкладений в останній елемент `section`, повинен бути під елементом `h2`. Елементи `h2` та `form` розташовані в неправильному порядку.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('form').previousElementSibling.nodeName === 'H2');
|
||||
```
|
||||
|
||||
Елемент `form` не повинен мати вмісту. Видаліть будь-які елементи HTML або текст між теґами елемента `form`.
|
||||
|
||||
```js
|
||||
assert($('form')[0].innerHTML.trim().length === 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Cat Form</h2>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+116
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d7
|
||||
title: Крок 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Атрибут `action` вказує, куди треба надсилати дані форми. Наприклад, `<form action="/submit-url"></form>` повідомляє браузеру, що дані форми треба надіслати на шлях `/submit-url`.
|
||||
|
||||
Додайте атрибут `action` зі значенням `https://freecatphotoapp.com/submit-cat-photo` до елемента `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `form` повинен мати початковий та кінцевий теґи в правильному порядку. Можливо, вам не вистачає одного/обох необхідних теґів або вони розміщені в неправильному порядку.
|
||||
|
||||
```js
|
||||
const noSpaces = code.replace(/\s/g, '');
|
||||
assert(
|
||||
document.querySelector('form') &&
|
||||
code.match(/<\/form>/g) &&
|
||||
noSpaces.indexOf('<form') < noSpaces.indexOf('</form>')
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `form`, вкладений в останній елемент `section`, повинен бути під елементом `h2`. Елементи `h2` та `form` розташовані в неправильному порядку.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('form').previousElementSibling.nodeName === 'H2');
|
||||
```
|
||||
|
||||
Ваш елемент `form` не повинен мати вмісту. Видаліть будь-які елементи HTML або текст між теґами елемента `form`.
|
||||
|
||||
```js
|
||||
assert($('form')[0].innerHTML.trim().length === 0);
|
||||
```
|
||||
|
||||
Ваш елемент `form` не має атрибута `action`. Перевірте, чи є пробіл після назви початкового теґа та/або є пробіли перед усіма назвами атрибутів.
|
||||
|
||||
```js
|
||||
const form = document.querySelector('form');
|
||||
assert(form.hasAttribute('action'));
|
||||
```
|
||||
|
||||
Ваш елемент `form` повинен мати атрибут `action` зі значенням `https://freecatphotoapp.com/submit-cat-photo`.
|
||||
|
||||
```js
|
||||
const form = document.querySelector('form');
|
||||
assert(
|
||||
form
|
||||
.getAttribute('action')
|
||||
.match(/^https:\/\/freecatphotoapp\.com\/submit-cat-photo$/)
|
||||
);
|
||||
```
|
||||
|
||||
Хоча ви встановили атрибут `action` як правильну URL-адресу, краще завжди писати значення атрибута в лапках.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!/\<form\s+action\s*=\s*https:\/\/freecatphotoapp\.com\/submit-cat-photo/.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
--fcc-editable-region--
|
||||
<form>
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+109
@@ -0,0 +1,109 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d8
|
||||
title: Крок 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Елемент `input` дозволяє збирати дані з вебформи кількома способами. Як і елементи `img`, елементи `input` є <dfn>самозакривними</dfn> та не потребують кінцевих теґів.
|
||||
|
||||
Вкладіть елемент `input` в елемент `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `form` повинен мати початковий та кінцевий теґи в правильному порядку. Можливо, вам не вистачає одного/обох необхідних теґів або вони розміщені в неправильному порядку.
|
||||
|
||||
```js
|
||||
const noSpaces = code.replace(/\s/g, '');
|
||||
assert(
|
||||
document.querySelector('form') &&
|
||||
code.match(/<\/form>/g) &&
|
||||
noSpaces.indexOf('<form') < noSpaces.indexOf('</form>')
|
||||
);
|
||||
```
|
||||
|
||||
Початковий теґ вашого елемента `form` повинен мати лише атрибут `action`. Видаліть все, що ви могли ввести в ньому.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('form').attributes].length < 2);
|
||||
```
|
||||
|
||||
Ви повинні створити елемент `input`. Перевірте синтаксис.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('input'));
|
||||
```
|
||||
|
||||
Ваш елемент `input` повинен мати початковий теґ, але не кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('input') && !code.match(/<\/input\>/g));
|
||||
```
|
||||
|
||||
Елемент `input` повинен бути вкладеним в елемент `form`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
Ваш `form` повинен містити тільки елемент `input`. Видаліть будь-які елементи HTML або текст між теґами елемента `form`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('form')[0].children.length === 1 &&
|
||||
$('form')[0].innerText.trim().length === 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
--fcc-editable-region--
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d9
|
||||
title: Крок 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Текст-заповнювач використовують, щоб дати людям підказку про те, яку інформацію потрібно вводити в поле введення (input). Наприклад, `<input type="text" placeholder="Email address">`.
|
||||
|
||||
Додайте текст-заповнювач `cat photo URL` до свого елемента `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви або видалили свій елемент `input`, або він має недійсний синтаксис. Всі значення атрибутів повинні бути в лапках.
|
||||
|
||||
```js
|
||||
assert($('input').length);
|
||||
```
|
||||
|
||||
Ваш `form` повинен містити тільки елемент `input`. Видаліть будь-які додаткові елементи HTML або текст в елементі `form`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('form')[0].children.length === 1 &&
|
||||
$('form')[0].innerText.trim().length === 0
|
||||
);
|
||||
```
|
||||
|
||||
Ваш новий елемент `input` не має атрибута `placeholder`. Перевірте, чи є пробіл після назви початкового теґа та/або є пробіли перед усіма назвами атрибутів.
|
||||
|
||||
```js
|
||||
assert($('input')[0].hasAttribute('placeholder'));
|
||||
```
|
||||
|
||||
Ваш елемент `input` повинен мати атрибут `placeholder` зі значенням `cat photo URL`. Ви або не написали значення, або маєте друкарську помилку. Пам'ятайте, що значення атрибутів повинні бути в лапках.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input')[0]
|
||||
.getAttribute('placeholder')
|
||||
.replace(/\s+/g, ' ')
|
||||
.match(/^cat photo URL$/i)
|
||||
);
|
||||
```
|
||||
|
||||
Хоча ви встановили атрибут `placeholder` елемента `input` як `cat photo URL`, краще завжди писати значення атрибута в лапках.
|
||||
|
||||
```js
|
||||
assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl">
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804da
|
||||
title: Крок 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Використовуйте елемент `button`, щоб створити кнопку, яку можна натиснути. Наприклад, `<button>Click Here</button>` створює кнопку з текстом `Click Here`.
|
||||
|
||||
Додайте елемент `button` із текстом `Submit` під елементом `input`. За замовчуванням натискання кнопки форми без жодних атрибутів надсилає форму до місця, вказаного в атрибуті `action` форми.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `button` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('button'));
|
||||
```
|
||||
|
||||
Ваш елемент `button` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/button\>/));
|
||||
```
|
||||
|
||||
Текст вашого елемента `button` повинен бути `Submit`. Ви або не написали текст, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('button').innerText.toLowerCase() === 'submit');
|
||||
```
|
||||
|
||||
Ваш елемент `button` повинен бути під елементом `input`. Вони знаходяться в неправильному порядку.
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('input, button')].map(
|
||||
(node) => node.nodeName
|
||||
);
|
||||
assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+91
@@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804db
|
||||
title: Крок 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Щоб користувач не надсилав вашу форму, коли потрібна інформація відсутня, ви повинні додати атрибут `required` до елемента `input`. Немає потреби встановлювати значення для атрибута `required`. Замість цього, просто додайте слово `required` до елемента `input`, переконавшись, що між ним та іншими атрибутами є пробіл.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви або видалили свій елемент `input`, або він має недійсний синтаксис. Всі значення атрибутів повинні бути в лапках.
|
||||
|
||||
```js
|
||||
assert($('input').length);
|
||||
```
|
||||
|
||||
Ваш `form` повинен містити тільки елемент `input`. Видаліть будь-які додаткові елементи HTML або текст в елементі `form`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('form')[0].children.length === 1 &&
|
||||
$('form')[0].innerText.trim().length === 0
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `input` повинен мати атрибут `required`. Пам’ятайте, що ви просто додаєте слово `required` всередині теґа елемента `input`.
|
||||
|
||||
```js
|
||||
assert($('input')[0].hasAttribute('required'));
|
||||
```
|
||||
|
||||
Значення не повинне бути надане атрибуту `required`.
|
||||
|
||||
```js
|
||||
assert($('input')[0].getAttribute('required') === '');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL">
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+137
@@ -0,0 +1,137 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804dc
|
||||
title: Крок 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете використовувати радіокнопки для запитань, де хочете тільки одну відповідь з декількох варіантів.
|
||||
|
||||
Ось приклад радіокнопки з опцією `cat`: `<input type="radio"> cat`. Пам'ятайте, що елементи `input` є <dfn>самозакривними</dfn>.
|
||||
|
||||
Перед полем тексту (text input) додайте радіокнопку з опцією, встановленою як:
|
||||
|
||||
`Indoor`
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити елемент `input` для своєї радіокнопки. Перевірте синтаксис.
|
||||
|
||||
```js
|
||||
assert($('form > input').length >= 2);
|
||||
```
|
||||
|
||||
Ваш елемент `input` повинен мати початковий теґ, але не кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert($('form > input') && !code.match(/<\/input\>/g));
|
||||
```
|
||||
|
||||
Ви повинні додати лише один елемент `input` для своєї радіокнопки. Видаліть зайві.
|
||||
|
||||
```js
|
||||
assert($('form > input').length === 2);
|
||||
```
|
||||
|
||||
Ваш новий елемент `input` повинен бути над наявним `input` з атрибутом `type`, встановленим на `text`. Вони знаходяться в неправильному порядку.
|
||||
|
||||
```js
|
||||
const existingInputElem = document.querySelector('form > input[type="text"]');
|
||||
assert(
|
||||
existingInputElem &&
|
||||
existingInputElem.previousElementSibling.nodeName === 'INPUT'
|
||||
);
|
||||
```
|
||||
|
||||
Ваш новий елемент `input` не має атрибута `type`. Перевірте, чи є пробіл після назви початкового теґа.
|
||||
|
||||
```js
|
||||
assert($('input')[0].hasAttribute('type'));
|
||||
```
|
||||
|
||||
Ваш новий елемент `input` повинен мати атрибут `type` зі значенням `radio`. Ви або не написали значення, або маєте друкарську помилку. Пам'ятайте, що значення атрибутів повинні бути в лапках.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input')[0]
|
||||
.getAttribute('type')
|
||||
.match(/^radio$/i)
|
||||
);
|
||||
```
|
||||
|
||||
Хоча ви встановили атрибут `type` нового елемента `input` як `radio`, краще завжди писати значення атрибута в лапках.
|
||||
|
||||
```js
|
||||
assert(!/\<\s*input\s+type\s*=\s*radio/i.test(code));
|
||||
```
|
||||
|
||||
Текст `Indoor` кнопки `radio` повинен бути розташованим після неї, а не перед нею.
|
||||
|
||||
```js
|
||||
const radioInputElem = $('input')[0];
|
||||
assert(!radioInputElem.previousSibling.nodeValue.match(/Indoor/i));
|
||||
```
|
||||
|
||||
Текст `Indoor` повинен бути розташованим праворуч від кнопки `radio`. Ви або не написали текст, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
const radioInputElem = $('input')[0];
|
||||
assert(
|
||||
radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/Indoor/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
--fcc-editable-region--
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804dd
|
||||
title: Крок 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Елементи `label` використовують, щоб допомогти пов’язати текст елемента `input` із самим елементом `input` (особливо для допоміжних технологій, як-от читачі екрана). Наприклад, `<label><input type="radio"> cat</label>` робить так, що натискання слова `cat` також вибирає відповідну радіокнопку.
|
||||
|
||||
Вкладіть свою кнопку `radio` всередині елемента `label`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Переконайтеся, що радіокнопка досі присутня.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]')[0]);
|
||||
```
|
||||
|
||||
Текст `Indoor` повинен бути розташованим праворуч від кнопки `radio`. Переконайтеся, що між елементом та текстом є пробіл. Ви або не написали текст, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
const radioInputElem = $('input')[0];
|
||||
assert(
|
||||
radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Indoor/i)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `label` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('label'));
|
||||
```
|
||||
|
||||
Ваш елемент `label` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/label\>/));
|
||||
```
|
||||
|
||||
Ваша радіокнопка та її текст повинні бути всередині початкового та кінцевого теґів елемента `label`.
|
||||
|
||||
```js
|
||||
const labelChildNodes = [...$('form > label')[0].childNodes];
|
||||
assert(
|
||||
labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<input type="radio"> Indoor
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804de
|
||||
title: Крок 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Зверніть увагу, що обидві радіокнопки можуть бути обрані одночасно. Щоб зробити так, щоб вибір однієї радіокнопки автоматично скасовував вибір іншої, обидві кнопки повинні мати атрибут `name` з однаковим значенням.
|
||||
|
||||
Додайте атрибут `name` зі значенням `indoor-outdoor` до обох радіокнопок.
|
||||
|
||||
# --hints--
|
||||
|
||||
Обидві радіокнопки досі повинні бути між початковим та кінцевим теґами елемента `label`.
|
||||
|
||||
```js
|
||||
const labelChildNodes = [...document.querySelectorAll('form > label')].map(
|
||||
(node) => node.childNodes
|
||||
);
|
||||
assert(
|
||||
labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT')
|
||||
.length === 2
|
||||
);
|
||||
```
|
||||
|
||||
Обидві радіокнопки повинні мати атрибут `name`. Перевірте, чи є пробіл після назви початкового теґа та/або є пробіли перед усіма назвами атрибутів.
|
||||
|
||||
```js
|
||||
const radioButtons = [...document.querySelectorAll('input[type="radio"]')];
|
||||
assert(radioButtons.every((btn) => btn.hasAttribute('name')));
|
||||
```
|
||||
|
||||
Обидві радіокнопки повинні мати атрибут `name` зі значенням `indoor-outdoor`. Ви або не написали значення, або маєте друкарську помилку. Пам'ятайте, що значення атрибутів повинні бути в лапках.
|
||||
|
||||
```js
|
||||
const radioButtons = [...$('input[type="radio"]')];
|
||||
assert(
|
||||
radioButtons.every((btn) =>
|
||||
btn.getAttribute('name').match(/^indoor-outdoor$/)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<label><input id="indoor" type="radio"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio"> Outdoor</label>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804df
|
||||
title: Крок 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Атрибут `id` використовують для ідентифікації певних елементів HTML. Кожне значення атрибута `id` повинне бути унікальним від всіх інших значень `id` для всієї сторінки.
|
||||
|
||||
Додайте атрибут `id` зі значенням `indoor` до радіокнопки. Якщо елементи мають багато атрибутів, порядок атрибутів не має значення.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваша радіокнопка досі повинна бути всередині початкового та кінцевого теґів елемента `label`.
|
||||
|
||||
```js
|
||||
const labelChildNodes = [...$('form > label')[0].childNodes];
|
||||
assert(
|
||||
labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length
|
||||
);
|
||||
```
|
||||
|
||||
Ваша радіокнопка повинна мати атрибут `id`. Перевірте, чи є пробіл після назви початкового теґа та/або є пробіли перед усіма назвами атрибутів.
|
||||
|
||||
```js
|
||||
assert($('input')[0].hasAttribute('id'));
|
||||
```
|
||||
|
||||
Ваша радіокнопка повинна мати атрибут `id` зі значенням `indoor`. Ви або не написали значення, або маєте друкарську помилку. Пам'ятайте, що значення атрибутів повинні бути в лапках.
|
||||
|
||||
```js
|
||||
assert($('input')[0].id.match(/^indoor$/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<label><input type="radio"> Indoor</label>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e1
|
||||
title: Крок 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Елемент `fieldset` використовують для групування пов’язаних inputs та labels у вебформі. Елементи `fieldset` є <dfn>елементами на рівні блоків</dfn>, тобто вони з’являються в новому рядку.
|
||||
|
||||
Вкладіть радіокнопки `Indoor` та `Outdoor` в елемент `fieldset`, та не забудьте зробити відступи для радіокнопок.
|
||||
|
||||
# --hints--
|
||||
|
||||
Обидві радіокнопки досі повинні бути між початковим та кінцевим теґами елемента `label`.
|
||||
|
||||
```js
|
||||
const labelChildNodes = [...$('label')].map((node) => [...node.childNodes]);
|
||||
assert(
|
||||
labelChildNodes.filter(
|
||||
childNodes =>
|
||||
childNodes.filter(node => node.nodeName === 'INPUT').length === 1
|
||||
).length === 2
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `fieldset` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('fieldset'));
|
||||
```
|
||||
|
||||
Ваш елемент `fieldset` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/fieldset\>/));
|
||||
```
|
||||
|
||||
Обидві радіокнопки та пов’язані мітки (labels) повинні бути всередині початкового та кінцевого теґів елемента `fieldset`.
|
||||
|
||||
```js
|
||||
const radioButtons = [...$('input[type="radio"]')];
|
||||
assert(
|
||||
radioButtons.every((btn) => btn.parentNode.parentNode.nodeName === 'FIELDSET')
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+130
@@ -0,0 +1,130 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e2
|
||||
title: Крок 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Зазвичай форми використовують checkboxes (прапорці) для запитань, які можуть мати більше за одну відповідь. Наприклад, ось прапорець з опцією `tacos`: `<input type="checkbox"> tacos`.
|
||||
|
||||
Під елементом `legend`, який ви щойно додали, додайте `input` з атрибутом `type`, встановленим на `checkbox`, та надайте йому опцію:
|
||||
|
||||
`Loving`
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `input` повинен мати початковий теґ, але не кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert($('fieldset > input') && !code.match(/<\/input\>/g));
|
||||
```
|
||||
|
||||
Ви повинні додати лише один елемент input для вашого прапорця. Видаліть зайві.
|
||||
|
||||
```js
|
||||
assert($('fieldset > input').length === 1);
|
||||
```
|
||||
|
||||
Ваш новий елемент `input` повинен бути під елементом `legend` із текстом `What's your cat's personality?`. Вони знаходяться в неправильному порядку.
|
||||
|
||||
```js
|
||||
const existingLegendElem = $('fieldset > legend')[1];
|
||||
assert(
|
||||
existingLegendElem &&
|
||||
existingLegendElem.nextElementSibling.nodeName === 'INPUT'
|
||||
);
|
||||
```
|
||||
|
||||
Ваш новий елемент `input` не має атрибута `type`. Перевірте, чи є пробіл після назви початкового теґа.
|
||||
|
||||
```js
|
||||
assert($('fieldset > input')[0].hasAttribute('type'));
|
||||
```
|
||||
|
||||
Ваш новий елемент `input` повинен мати атрибут `type` зі значенням `checkbox`. Ви або не написали значення, або маєте друкарську помилку. Пам'ятайте, що значення атрибутів повинні бути в лапках.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('fieldset > input')[0]
|
||||
.getAttribute('type')
|
||||
.match(/^checkbox$/i)
|
||||
);
|
||||
```
|
||||
|
||||
Хоча ви встановили атрибут `type` нового елемента `input` як `checkbox`, краще завжди писати значення атрибута в лапках.
|
||||
|
||||
```js
|
||||
assert(!/\<\s*input\s+type\s*=\s*checkbox/i.test(code));
|
||||
```
|
||||
|
||||
Текст `Loving` повинен бути розташованим праворуч від вашого прапорця. Переконайтеся, що між елементом та текстом є пробіл. Ви або не написали текст, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
const checkboxInputElem = $('input[type="checkbox"]')[0];
|
||||
assert(
|
||||
checkboxInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Loving/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
--fcc-editable-region--
|
||||
<legend>What's your cat's personality?</legend>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+122
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e3
|
||||
title: Крок 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додайте ще один прапорець після того, який ви щойно додали. Значення атрибута `id` повинне бути `lazy`, а значення атрибута `name` повинне бути таким же, як в останнього прапорця.
|
||||
|
||||
Також додайте елемент `label` праворуч від нового прапорця з текстом `Lazy`. Переконайтеся, що пов’язали елемент `label` із новим прапорцем з допомогою атрибута `for`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Вам потрібно додати новий прапорець.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').length === 2);
|
||||
```
|
||||
|
||||
Ваш новий прапорець повинен мати атрибут `id` зі значенням `lazy` та атрибут `name` зі значенням `personality`. Перевірте, чи є пробіл після назви початкового теґа та/або є пробіли перед усіма назвами атрибутів.
|
||||
|
||||
```js
|
||||
const checkboxes = [...$('input[type="checkbox"]')];
|
||||
assert(
|
||||
checkboxes.some(
|
||||
(checkbox) =>
|
||||
checkbox.id === 'lazy' && checkbox.getAttribute('name') === 'personality'
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш новий прапорець повинен бути після першого. Вони знаходяться в неправильному порядку.
|
||||
|
||||
```js
|
||||
const checkboxes = [...$('input[type="checkbox"]')].map(
|
||||
(checkbox) => checkbox.id
|
||||
);
|
||||
assert(checkboxes.indexOf('loving') < checkboxes.indexOf('lazy'));
|
||||
```
|
||||
|
||||
Праворуч від вашого нового прапорця повинен бути елемент `label` із текстом `Lazy`.
|
||||
|
||||
```js
|
||||
const nextElementSibling = $('input[type="checkbox"]')[1].nextElementSibling;
|
||||
assert(
|
||||
nextElementSibling.nodeName === 'LABEL' &&
|
||||
nextElementSibling.innerText.replace(/\s+/g, '').match(/^Lazy$/i)
|
||||
);
|
||||
```
|
||||
|
||||
Новий `label` повинен мати атрибут `for` з таким самим значенням, що й атрибут `id` нового прапорця. Ви або не написали значення, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input[type="checkbox"]')[1].nextElementSibling.getAttribute('for') ===
|
||||
'lazy'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
--fcc-editable-region--
|
||||
<input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e5
|
||||
title: Крок 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Щоб зробити прапорець або радіокнопку вибраними за замовчуванням, вам потрібно додати до них атрибут `checked`. Нема потреби встановлювати значення для атрибута `checked`. Замість цього, просто додайте слово `checked` до елемента `input`, переконавшись, що між ним та іншими атрибутами є пробіл.
|
||||
|
||||
Зробіть першу радіокнопку і перший прапорець вибраними за замовчуванням.
|
||||
|
||||
# --hints--
|
||||
|
||||
Переконайтеся, що дві радіокнопки та три прапорці досі вкладені в своїх відповідних елементах `fieldset`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input[type="radio"]').length === 2 &&
|
||||
$('fieldset > input[type="checkbox"]').length === 3
|
||||
);
|
||||
```
|
||||
|
||||
В першій радіокнопці відсутній атрибут `checked`.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]')[0].hasAttribute('checked'));
|
||||
```
|
||||
|
||||
Друга радіокнопка не повинна мати атрибут `checked`.
|
||||
|
||||
```js
|
||||
assert(!$('input[type="radio"]')[1].hasAttribute('checked'));
|
||||
```
|
||||
|
||||
В першому прапорці відсутній атрибут `checked`.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]')[0].hasAttribute('checked'));
|
||||
```
|
||||
|
||||
Другий прапорець не повинен мати атрибут `checked`.
|
||||
|
||||
```js
|
||||
assert(!$('input[type="checkbox"]')[1].hasAttribute('checked'));
|
||||
```
|
||||
|
||||
Третій прапорець не повинен мати атрибут `checked`.
|
||||
|
||||
```js
|
||||
assert(!$('input[type="checkbox"]')[2].hasAttribute('checked'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
<input id="loving" type="checkbox" name="personality" value="loving"> <label for="loving">Loving</label>
|
||||
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
|
||||
<input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic"> Energetic</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e7
|
||||
title: Крок 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Тепер ви додасте розділ нижнього колонтитула до сторінки.
|
||||
|
||||
Після елемента `main` додайте елемент `footer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви або видалили елемент `main`, або в ньому відсутній початковий чи кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('main') && code.match(/<\/main>/));
|
||||
```
|
||||
|
||||
Ваш елемент `footer` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('footer'));
|
||||
```
|
||||
|
||||
Ваш елемент `footer` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/footer\>/));
|
||||
```
|
||||
|
||||
Ваш елемент `footer` повинен бути під кінцевим теґом елемента `main`. Ви поклали його в іншому місці.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
<input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
|
||||
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
|
||||
<input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e8
|
||||
title: Крок 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вкладіть елемент `p` із текстом `No Copyright - freeCodeCamp.org` в елемент `footer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви або видалили елемент `footer`, або в ньому відсутній початковий чи кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('footer') && code.match(/<\/footer>/));
|
||||
```
|
||||
|
||||
Ваш елемент `footer` повинен мати елемент `p`. Переконайтеся, що додали початковий та кінцевий теґи для елемента `p`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('footer > p'));
|
||||
```
|
||||
|
||||
Ваш елемент `footer` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
const pElemClosingTags = code.match(/<\/p\>/g);
|
||||
assert(pElemClosingTags && pElemClosingTags.length === 2);
|
||||
```
|
||||
|
||||
Текст вашого елемента `p` повинен бути `No Copyright - freeCodeCamp.org`. Ви пропустили текст, маєте друкарську помилку, або його немає між початковим та кінцевим теґами елемента `p`.
|
||||
|
||||
```js
|
||||
const extraSpacesRemoved = $('footer > p')[0].innerText.replace(/\s+/g, ' ');
|
||||
assert(extraSpacesRemoved.match(/No Copyright - freeCodeCamp\.org$/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
<input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
|
||||
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
|
||||
<input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e9
|
||||
title: Крок 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Перетворіть текст `freeCodeCamp.org` в посилання, вклавши його в елемент anchor (`a`). Атрибут `href` повинен бути встановленим на `https://www.freecodecamp.org`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент anchor (`a`) повинен бути вкладеним в межах елемента `footer`. Переконайтеся, що додали початковий та кінцевий теґи для елемента anchor (`a`).
|
||||
|
||||
```js
|
||||
assert($('footer > p > a').length);
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
const aElemClosingTags = code.match(/<\/a\>/g);
|
||||
assert(aElemClosingTags && aElemClosingTags.length === 3);
|
||||
```
|
||||
|
||||
Ваш елемент anchor (`a`) повинен мати атрибут `href` зі значенням `https://www.freecodecamp.org`. Можливо, ви пропустили атрибут/значення або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
const nestedAnchor = $('footer > p > a')[0];
|
||||
assert(nestedAnchor.getAttribute('href').toLowerCase() === 'https://www.freecodecamp.org');
|
||||
```
|
||||
|
||||
Текст посилання повинен бути `freeCodeCamp.org`. Ви або не написали текст, або маєте друкарську помилку.
|
||||
|
||||
```js
|
||||
const nestedAnchor = $('footer > p > a')[0];
|
||||
assert(
|
||||
nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') ===
|
||||
'freecodecamp.org'
|
||||
);
|
||||
```
|
||||
|
||||
Після вкладення елемента anchor (`a`) єдиним видимим вмістом елемента `p` в браузері повинен бути `No Copyright - freeCodeCamp.org`. Двічі перевірте текст, пробіли або пунктуацію обох елементів `p` та вкладеного елемента anchor.
|
||||
|
||||
```js
|
||||
const pText = $('footer > p')[0].innerText.toLowerCase().replace(/\s+/g, ' ');
|
||||
assert(pText.match(/^no copyright - freecodecamp.org$/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
<input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
|
||||
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
|
||||
<input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
--fcc-editable-region--
|
||||
No Copyright - freeCodeCamp.org
|
||||
--fcc-editable-region--
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+108
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804ea
|
||||
title: Крок 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Зверніть увагу, що все, що ви додали до сторінки, знаходиться всередині елемента `body`. Всі елементи вмісту сторінки, які мають відтворюватися на сторінці, йдуть в елемент `body`. Однак інша важлива інформація йде всередину елемента `head`.
|
||||
|
||||
Додайте елемент `head` прямо над елементом `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви або видалили елемент `body`, або в ньому відсутній початковий чи кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body') && code.match(/<\/body>/));
|
||||
```
|
||||
|
||||
Ваш елемент `head` повинен мати початковий теґ. Початкові теґи мають такий синтаксис: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\<head\>/));
|
||||
```
|
||||
|
||||
Ваш елемент `head` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\<\/head\>/));
|
||||
```
|
||||
|
||||
Ваш елемент `head` повинен бути над початковим теґом елемента `body`. Ви поклали його в іншому місці.
|
||||
|
||||
```js
|
||||
const noSpaces = code.replace(/\s/g, '');
|
||||
assert(noSpaces.match(/\<\/head\>\<body\>/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
<input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
|
||||
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
|
||||
<input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
+1
-1
@@ -21,7 +21,7 @@ dashedName: step-65
|
||||
assert(code.match(/\<head\>/) && code.match(/\<\/head\>/));
|
||||
```
|
||||
|
||||
Ваш елемент `title` повинен бути вкладеним в елементі `head`. Обов’язково додайте початковий та кінцевий теґи для елемента `title`.
|
||||
Ваш елемент `title` повинен бути вкладеним в елементі `head`. Переконайтеся, що додали початковий та кінцевий теґи для елемента `title`.
|
||||
|
||||
```js
|
||||
const noSpaces = code.replace(/\s/g, '');
|
||||
|
||||
+1
-1
@@ -23,7 +23,7 @@ assert(document.querySelectorAll('figure').length >= 2);
|
||||
assert(code.match(/<\/figure>/g).length >= 2);
|
||||
```
|
||||
|
||||
Прямо над кінцевим тегом другого елемента `section` повинен бути другий елемент `figure`. Вони знаходяться в неправильному порядку.
|
||||
Прямо над кінцевим теґом другого елемента `section` повинен бути другий елемент `figure`. Вони знаходяться в неправильному порядку.
|
||||
|
||||
```js
|
||||
assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE');
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user