mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-12 19:00:43 -04:00
chore(i18n,learn): processed translations (#46119)
This commit is contained in:
camperbot
@@ -26,6 +26,8 @@ dashedName: build-a-personal-portfolio-webpage
|
||||
|
||||
完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！
|
||||
|
||||
**注意：** 請在你的 HTML 中添加 `<link rel="stylesheet" href="styles.css">` 以鏈接你的樣式表並應用你的 CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
你的作品集應該有一個 `id` 爲 `welcome-section` 的歡迎部分。
|
||||
@@ -35,7 +37,7 @@ const el = document.getElementById('welcome-section')
|
||||
assert(!!el);
|
||||
```
|
||||
|
||||
你的 `#welcom-section` 元素應該包含一個 `h1` 元素。
|
||||
你的 `#welcome-section` 元素應該包含一個 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert.isAbove(
|
||||
@@ -116,7 +118,9 @@ assert(!!el && el.target === '_blank')
|
||||
你的作品集應該至少有一個媒體查詢。
|
||||
|
||||
```js
|
||||
assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1);
|
||||
const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
|
||||
const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
|
||||
assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
|
||||
```
|
||||
|
||||
你的 `#navbar` 元素應該始終位於視口的頂部。
|
||||
|
||||
@@ -31,6 +31,8 @@ dashedName: build-a-survey-form
|
||||
|
||||
完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！
|
||||
|
||||
**注意：** 請在你的 HTML 中添加 `<link rel="stylesheet" href="styles.css">` 以鏈接你的樣式表並應用你的 CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `id` 爲 `title` 的 `h1` 元素。
|
||||
@@ -61,7 +63,7 @@ const el = document.getElementById('description')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
你應該有一個 `id` 爲 `survey-form` 的 `form` 元素
|
||||
你應該有一個 `id` 爲 `survey-form` 的 `form` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('survey-form')
|
||||
@@ -96,7 +98,7 @@ const el = document.querySelector('#survey-form #name')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
你應該有一個 `id` 爲 `email` 的 `input` 元素
|
||||
你應該有一個 `id` 爲 `email` 的 `input` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
@@ -345,7 +347,7 @@ const el = document.getElementById('submit')
|
||||
assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
|
||||
```
|
||||
|
||||
你的 `#submit` 元素應該具有 `type` 爲 `submit`
|
||||
你的 `#submit` 元素應該具有 `type` 爲 `submit`。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
|
||||
@@ -30,6 +30,8 @@ dashedName: build-a-technical-documentation-page
|
||||
|
||||
完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！
|
||||
|
||||
**注意：** 請在你的 HTML 中添加 `<link rel="stylesheet" href="styles.css">` 以鏈接你的樣式表並應用你的 CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `id` 爲 `main-doc` 的 `main` 元素。
|
||||
@@ -142,7 +144,7 @@ assert(els.length === 1)
|
||||
你應該至少有一個 class 爲 `nav-link` 的 `a` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('a[class="nav-link"]')
|
||||
const els = document.querySelectorAll('a.nav-link')
|
||||
assert(els.length >= 1)
|
||||
```
|
||||
|
||||
|
||||
@@ -24,6 +24,8 @@ dashedName: build-a-tribute-page
|
||||
|
||||
完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！
|
||||
|
||||
**注意：** 請在你的 HTML 中添加 `<link rel="stylesheet" href="styles.css">` 以鏈接你的樣式表並應用你的 CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
你的頁面應該包含一個 `main` 元素，且它有一個值爲`main` 的`id`屬性。
|
||||
@@ -145,7 +147,7 @@ const style = imgStyle?.getPropertyValue('display')
|
||||
assert(style === 'block')
|
||||
```
|
||||
|
||||
你的 `#image` 元素應該具有 `max-width` 值爲 `100%`。
|
||||
你的 `#image` 應該具有 `max-width` 值爲 `100%`。
|
||||
|
||||
```js
|
||||
const img = document.getElementById('image');
|
||||
@@ -154,7 +156,7 @@ const style = imgStyle?.getPropertyValue('max-width')
|
||||
assert(style === '100%')
|
||||
```
|
||||
|
||||
你的 `#image` 元素應該具有 `height` 值爲 `auto`。
|
||||
你的 `#image` 應該具有 `height` 值爲 `auto`。
|
||||
|
||||
```js
|
||||
// taken from the testable-projects repo
|
||||
@@ -168,7 +170,7 @@ img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
|
||||
assert(heightValue === 'auto')
|
||||
```
|
||||
|
||||
你的 `#image` 元素應該在其父元素內居中。
|
||||
你的 `#image` 應該在其父元素內居中。
|
||||
|
||||
```js
|
||||
// taken from the testable-projects repo
|
||||
|
||||
@@ -26,6 +26,8 @@ dashedName: build-a-personal-portfolio-webpage
|
||||
|
||||
完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！
|
||||
|
||||
**注意：** 请在你的 HTML 中添加 `<link rel="stylesheet" href="styles.css">` 以链接你的样式表并应用你的 CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
你的作品集应该有一个 `id` 为 `welcome-section` 的欢迎部分。
|
||||
@@ -35,7 +37,7 @@ const el = document.getElementById('welcome-section')
|
||||
assert(!!el);
|
||||
```
|
||||
|
||||
你的 `#welcom-section` 元素应该包含一个 `h1` 元素。
|
||||
你的 `#welcome-section` 元素应该包含一个 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert.isAbove(
|
||||
@@ -116,7 +118,9 @@ assert(!!el && el.target === '_blank')
|
||||
你的作品集应该至少有一个媒体查询。
|
||||
|
||||
```js
|
||||
assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1);
|
||||
const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
|
||||
const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
|
||||
assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
|
||||
```
|
||||
|
||||
你的 `#navbar` 元素应该始终位于视口的顶部。
|
||||
|
||||
@@ -31,6 +31,8 @@ dashedName: build-a-survey-form
|
||||
|
||||
完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！
|
||||
|
||||
**注意：** 请在你的 HTML 中添加 `<link rel="stylesheet" href="styles.css">` 以链接你的样式表并应用你的 CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该有一个 `id` 为 `title` 的 `h1` 元素。
|
||||
@@ -61,7 +63,7 @@ const el = document.getElementById('description')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
你应该有一个 `id` 为 `survey-form` 的 `form` 元素
|
||||
你应该有一个 `id` 为 `survey-form` 的 `form` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('survey-form')
|
||||
@@ -96,7 +98,7 @@ const el = document.querySelector('#survey-form #name')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
你应该有一个 `id` 为 `email` 的 `input` 元素
|
||||
你应该有一个 `id` 为 `email` 的 `input` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
@@ -345,7 +347,7 @@ const el = document.getElementById('submit')
|
||||
assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
|
||||
```
|
||||
|
||||
你的 `#submit` 元素应该具有 `type` 为 `submit`
|
||||
你的 `#submit` 元素应该具有 `type` 为 `submit`。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
|
||||
@@ -30,6 +30,8 @@ dashedName: build-a-technical-documentation-page
|
||||
|
||||
完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！
|
||||
|
||||
**注意：** 请在你的 HTML 中添加 `<link rel="stylesheet" href="styles.css">` 以链接你的样式表并应用你的 CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该有一个 `id` 为 `main-doc` 的 `main` 元素。
|
||||
@@ -142,7 +144,7 @@ assert(els.length === 1)
|
||||
你应该至少有一个 class 为 `nav-link` 的 `a` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('a[class="nav-link"]')
|
||||
const els = document.querySelectorAll('a.nav-link')
|
||||
assert(els.length >= 1)
|
||||
```
|
||||
|
||||
|
||||
@@ -24,6 +24,8 @@ dashedName: build-a-tribute-page
|
||||
|
||||
完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！
|
||||
|
||||
**注意：** 请在你的 HTML 中添加 `<link rel="stylesheet" href="styles.css">` 以链接你的样式表并应用你的 CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
你的页面应该包含一个 `main` 元素，且它有一个值为`main` 的`id`属性。
|
||||
@@ -145,7 +147,7 @@ const style = imgStyle?.getPropertyValue('display')
|
||||
assert(style === 'block')
|
||||
```
|
||||
|
||||
你的 `#image` 元素应该具有 `max-width` 值为 `100%`。
|
||||
你的 `#image` 应该具有 `max-width` 值为 `100%`。
|
||||
|
||||
```js
|
||||
const img = document.getElementById('image');
|
||||
@@ -154,7 +156,7 @@ const style = imgStyle?.getPropertyValue('max-width')
|
||||
assert(style === '100%')
|
||||
```
|
||||
|
||||
你的 `#image` 元素应该具有 `height` 值为 `auto`。
|
||||
你的 `#image` 应该具有 `height` 值为 `auto`。
|
||||
|
||||
```js
|
||||
// taken from the testable-projects repo
|
||||
@@ -168,7 +170,7 @@ img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
|
||||
assert(heightValue === 'auto')
|
||||
```
|
||||
|
||||
你的 `#image` 元素应该在其父元素内居中。
|
||||
你的 `#image` 应该在其父元素内居中。
|
||||
|
||||
```js
|
||||
// taken from the testable-projects repo
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
---
|
||||
id: 61b09f739aa6572d2064f9b8
|
||||
title: Step 84
|
||||
challengeType: 0
|
||||
dashedName: step-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il bordo nero non si accosta molto bene al corpo trasparente del pennarello. Puoi usare un alfa channel per diminuire l'opacità del bordo nero.
|
||||
|
||||
Per la proprietà shorthand `border-left`, utilizza la funzione `rgba` per impostare il valore del colore sul nero puro con il 75% di opacità.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola CSS `.sleeve` dovrebbe avere una `border-left` con il valore `10px double rgba(0, 0, 0, 0.75)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double rgba(0, 0, 0, 0.75)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double black;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,123 @@
|
||||
---
|
||||
id: 61b0a1b2af494934b7ec1a72
|
||||
title: Step 85
|
||||
challengeType: 0
|
||||
dashedName: step-85
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ottimo. Il pennarello rosso sta venendo bene. Ora tutto quello che devi fare è aggiungere i tappi e i corpi degli altri pennarelli.
|
||||
|
||||
Aggiungi il tappo e il corpo al pennarello verde e a quello blu. Puoi semplicemente fare copia&incolla degli elementi `div` del pennarello rosso.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `div` del pennarello verde dovrebbe contenere due elementi `div`.
|
||||
|
||||
```js
|
||||
const greenMarkerChildren = [...document.querySelector('.green')?.children];
|
||||
assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2);
|
||||
```
|
||||
|
||||
L'elemento `div` del tappo del pennarello verde dovrebbe essere prima dell'elemento `div` del corpo.
|
||||
|
||||
```js
|
||||
const greenMarkerChildren = [...document.querySelector('.green')?.children];
|
||||
const greenMarkerCap = document.querySelector('.green .cap');
|
||||
const greenMarkerSleeve = document.querySelector('.green .sleeve');
|
||||
assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve));
|
||||
```
|
||||
|
||||
L'elemento `div` del pennarello blu dovrebbe contenere due elementi `div`.
|
||||
|
||||
```js
|
||||
const blueMarkerChildren = [...document.querySelector('.blue')?.children];
|
||||
assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2);
|
||||
```
|
||||
|
||||
L'elemento `div` del tappo del pennarello blu dovrebbe essere prima dell'elemento `div` del corpo.
|
||||
|
||||
```js
|
||||
const blueMarkerChildren = [...document.querySelector('.blue')?.children];
|
||||
const blueMarkerCap = document.querySelector('.blue .cap');
|
||||
const blueMarkerSleeve = document.querySelector('.blue .sleeve');
|
||||
assert(blueMarkerChildren.indexOf(blueMarkerCap) < blueMarkerChildren.indexOf(blueMarkerSleeve));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</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;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,109 @@
|
||||
---
|
||||
id: 61b0a44a6b865738ba49b9fb
|
||||
title: Step 86
|
||||
challengeType: 0
|
||||
dashedName: step-86
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'ultima cosa che devi fare è aggiungere una leggera ombra ai pennarelli per farli sembrare ancora più realistici.
|
||||
|
||||
La proprietà `box-shadow` consente di applicare una o più ombre intorno a un elemento. Ecco la sintassi di base:
|
||||
|
||||
```css
|
||||
box-shadow: offsetX offsetY color;
|
||||
```
|
||||
|
||||
Inizia aggiungendo una ombra semplice al pennarello rosso.
|
||||
|
||||
Nella regola CSS `.red`, aggiungi la proprietà `box-shadow` con i valori `5px` per `offsetX`, `5px` per `offsetY`e `red` per `color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola CSS `.red` dovrebbe avere una proprietà shorthand `box-shadow` con il valore `5px 5px red`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 61b306305810f1c9040ce5a2
|
||||
title: Step 87
|
||||
challengeType: 0
|
||||
dashedName: step-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Come puoi vedere, hai aggiunto un'ombra semplice intorno al pennarello rosso, 5 pixel a destra e 5 pixel verso il basso.
|
||||
|
||||
E se volessi posizionare l'ombra sul lato opposto? Puoi farlo usando dei valori negativi per `offsetX` e `offsetY`.
|
||||
|
||||
Aggiorna i valori della proprietà `box-shadow` e imposta `offsetX` a `-5px` e `offsetY` a `-5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola CSS `.red` dovrebbe avere una proprietà shorthand `box-shadow` con il valore `-5px -5px red`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red -5px -5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 5px 5px red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 61b30995968123ceb6b76167
|
||||
title: Step 88
|
||||
challengeType: 0
|
||||
dashedName: step-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nota che i bordi dell'ombra sono nitidi. Questo perché esiste un valore opzionale `blurRadius` per la proprietà `box-shadow`:
|
||||
|
||||
```css
|
||||
box-shadow: offsetX offsetY blurRadius color;
|
||||
```
|
||||
|
||||
Se non includi un valore `blurRadius`, il valore predefinito è `0` e produce dei bordi nitidi. Maggiore è il valore di `blurRadius`, maggiore è la sfocatura dei bordi.
|
||||
|
||||
Nella regola CSS `.green`, aggiungi la proprietà `box-shadow` con i valori `5px` per `offsetX`, `5px` per `offsetY` `5px` per `blurRadius`e `green` per `color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola CSS `.green` dovrebbe avere una proprietà shorthand `box-shadow` con il valore `5px 5px 5px green`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 5px 5px 5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: -5px -5px red;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 61b30a286c228bd0c493c09a
|
||||
title: Step 89
|
||||
challengeType: 0
|
||||
dashedName: step-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
E se volessi rendere l'ombra più estesa? Puoi farlo con il valore opzionale `spreadRadius`:
|
||||
|
||||
```css
|
||||
box-shadow: offsetX offsetY blurRadius spreadRadius color;
|
||||
```
|
||||
|
||||
Come per `blurRadius`, anche nel caso di `spreadRadius`, se non incluso, il valore predefinito è `0`.
|
||||
|
||||
Fai pratica aggiungendo un'ombra di 5 pixel direttamente attorno al pennarello blu.
|
||||
|
||||
Nella regola CSS `.blue`, aggiungi la proprietà `box-shadow` con i valori `0` per `offsetX`, `0` per `offsetY`, `0` per `blurRadius`, `5px` per `spreadRadius` e `blue` per `color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola CSS `.blue` dovrebbe avere una proprietà shorthand `box-shadow` con il valore `0 0 0 5px blue`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 0px 5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: -5px -5px red;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 5px 5px 5px green;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 61b31287fb580ae75a486047
|
||||
title: Step 90
|
||||
challengeType: 0
|
||||
dashedName: step-90
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora che hai familiarità con la proprietà `box-shadow`, puoi terminare le ombre, iniziando da quella del pennarello rosso.
|
||||
|
||||
Nella regola CSS `.red`, aggiorna i valori delle proprietà `box-shadow` in modo che `offsetX` sia `0`,`offsetY` sia `0`, `blurRadius` sia `20px`, `spreadRadius` sia `0` e `color` sia `red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola CSS `.red` dovrebbe avere una proprietà shorthand `box-shadow` con il valore `0 0 20px 0 red`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 0px 0px 20px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: -5px -5px red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 5px 5px 5px green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 0 5px blue;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 61b315e76a63b3ecbbb11b75
|
||||
title: Step 91
|
||||
challengeType: 0
|
||||
dashedName: step-91
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso aggiorna il valore `color` della proprietà `box-shadow` del pennarello rosso.
|
||||
|
||||
Sostituisci il colore con la funzione `rgba` corrispondente. Usa i valori `83` per il rosso, `14` per il verde, `14` per `blue` e `0.8` per l'alfa channel.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola CSS `.red` dovrebbe avere una proprietà shorthand `box-shadow` con il valore `0 0 20px 0 rgba(83, 14, 14, 0.8)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'rgba(83, 14, 14, 0.8) 0px 0px 20px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 0 0 20px 0 red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 5px 5px 5px green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 0 5px blue;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 61b3183655ec10efd8c0bb07
|
||||
title: Step 92
|
||||
challengeType: 0
|
||||
dashedName: step-92
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le ombre dei pennarelli verde e blu avranno la stessa posizione, sfocatura e diffusione. L'unica differenza sarà nei colori.
|
||||
|
||||
Nelle regole CSS `.green` e `.blue`, aggiorna i valori delle proprietà `box-shadow` in modo che `offsetX` sia `0`,`offsetY` sia `0`, `blurRadius` sia `20px` e `spreadRadius` sia `0`. Per ora, lascia i colori come `green` e `blue`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola CSS `.green` dovrebbe avere una proprietà shorthand `box-shadow` con il valore `0 0 20px 0 green`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px');
|
||||
```
|
||||
|
||||
La regola CSS `.blue` dovrebbe avere una proprietà shorthand `box-shadow` con il valore `0 0 20px 0 blue`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 5px 5px 5px green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 0 5px blue;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 61b31a451057fff645ec09be
|
||||
title: Step 93
|
||||
challengeType: 0
|
||||
dashedName: step-93
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per la proprietà `box-shadow` del pennarello verde, sostituisci il nome del colore con il codice esadecimale corrispondente. Usa i valori `3B` per il rosso, `7E` per il verde, `20` per il blu e `CC` per l'alfa channel.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola CSS `.green` dovrebbe avere una proprietà shorthand `box-shadow` con il valore `0 0 20px 0 #3B7E20CC`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'rgba(59, 126, 32, 0.8) 0px 0px 20px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 0 0 20px 0 green;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 20px 0 blue;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,184 @@
|
||||
---
|
||||
id: 61b31cd7b0c76bfc076b4719
|
||||
title: Step 94
|
||||
challengeType: 0
|
||||
dashedName: step-94
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per la proprietà `box-shadow` del pennarello blu, sostituisci il nome del colore con la funzione `hsla` corrispondente. Usa i valori `223` per la tonalità, `59%` per la saturazione, `31%` per la luminosità e `0.8` per l'alfa channel.
|
||||
|
||||
E con questo, il set di pennarelli colorati è completo! Ottimo lavoro.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola CSS `.blue` dovrebbe avere una proprietà shorthand `box-shadow` con il valore `0 0 20px 0 hsla(223, 59%, 31%, 0.8)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'rgba(32, 59, 126, 0.8) 0px 0px 20px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 0 0 20px 0 #3B7E20CC;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 20px 0 blue;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 0 0 20px 0 #3B7E20CC;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8);
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 60eebd07ea685b0e777b5583
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Benvenuto nel progetto Registration Form! Inizia ad aggiungere la dichiarazione `!DOCTYPE html` in cima al documento in modo che il browser sappia quale tipo di documento sta leggendo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il codice dovrebbe contenere il riferimento `DOCTYPE`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
Dovresti includere uno spazio dopo il riferimento `DOCTYPE`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
Dovresti definire il tipo di documento come `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/html/gi));
|
||||
```
|
||||
|
||||
Dovresti chiudere la dichiarazione `DOCTYPE` con un carattere `>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/html\s*>/gi));
|
||||
```
|
||||
|
||||
La dichiarazione `DOCTYPE` dovrebbe essere all'inizio del tuo documento HTML.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 60f027099a15b00485563dd2
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi i tag di apertura e chiusura `html` sotto la dichiarazione `DOCTYPE` in modo da avere un posto dove iniziare a inserire del codice.
|
||||
|
||||
# --hints--
|
||||
|
||||
La dichiarazione `DOCTYPE` dovrebbe essere all'inizio del documento HTML.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
L'elemento `html` dovrebbe avere un tag di apertura.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>/gi));
|
||||
```
|
||||
|
||||
L'elemento `html` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
I tag `html` dovrebbero essere nell'ordine corretto.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>\s*<\/html\s*>/));
|
||||
```
|
||||
|
||||
Dovresti avere un solo elemento `html`.
|
||||
|
||||
```js
|
||||
// Possibly a redundant test, as browser fixes this
|
||||
assert(document.querySelectorAll('html').length === 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 60f027c87bc98f050395c139
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso, aggiungi i tag di apertura e chiusura degli elementi `head` e `body` all'interno dell'elemento `html`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un tag di apertura `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
Dovresti avere un tag di chiusura `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
Dovresti avere un tag di apertura `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
Dovresti avere un tag di chiusura `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
Gli elementi `head` e `body` dovrebbero essere fratelli.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling.localName === 'body');
|
||||
```
|
||||
|
||||
L'elemento `head` dovrebbe essere all'interno dell'elemento `html`.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
L'elemento `body` dovrebbe essere all'interno dell'elemento `html`.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 60f0286404aefb0562a4fdf9
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi un elemento `title` all'elemento `head` e dai al tuo progetto il titolo `Registration Form`. Annida un elemento `link` autoconcludente nell'elemento `head`. Assegnagli un attributo `rel` con il valore `stylesheet`, un attributo `type` con il valore `text/css` e un attributo `href` con il valore `styles.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il codice dovrebbe avere un elemento `title`.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
L'elemento `title` dovrebbe essere all'interno dell'elemento `head`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('head > title'));
|
||||
```
|
||||
|
||||
Il progetto dovrebbe avere il titolo `Registration Form`.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title.text.toLowerCase(), 'registration form')
|
||||
```
|
||||
|
||||
Fai attenzione all'uso delle maiuscole/minuscole e all'ortografia nel titolo.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title.text, 'Registration Form');
|
||||
```
|
||||
|
||||
Il codice dovrebbe avere un elemento `link`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link/)
|
||||
```
|
||||
|
||||
Non dovresti cambiare i tuoi tag `head` esistenti. Assicurati di non aver eliminato il tag di chiusura.
|
||||
|
||||
```js
|
||||
const heads = document.querySelectorAll('head');
|
||||
assert.equal(heads?.length, 1);
|
||||
```
|
||||
|
||||
L'elemento `link` dovrebbe essere un elemento autoconcludente.
|
||||
|
||||
```js
|
||||
assert(code.match(/<link[\w\W\s]+\/>/i));
|
||||
```
|
||||
|
||||
L'elemento `link` dovrebbe essere all'interno dell'elemento `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
|
||||
```
|
||||
|
||||
L'elemento `link` dovrebbe avere un attributo `rel` con il valore `stylesheet`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
|
||||
```
|
||||
|
||||
L'elemento `link` dovrebbe avere un attributo `type` con il valore `text/css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?type=('|"|`)text\/css\1/)
|
||||
```
|
||||
|
||||
L'elemento `link` dovrebbe avere un attributo `href` con il valore `styles.css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
id: 60f02e7361b68405e27b62a5
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
All'interno dell'elemento `body`, aggiungi l'intestazione per il contenuto della pagina con un elemento un `h1` con il testo `Registration Form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere l'elemento `h1` all'interno del `body`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body > h1'));
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `h1` il testo `Registration Form`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('body > h1')?.textContent, 'Registration Form');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 60f030d388cb74067cf291c3
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sotto l'intestazione, utilizza il seguente testo all'interno di un elemento paragrafo per permettere agli utenti di registrarsi:
|
||||
|
||||
```md
|
||||
Please fill out this form with the required information
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `p` all'elemento `body`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body > p'));
|
||||
```
|
||||
|
||||
Dovresti aggiungere l'elemento `p` al di sotto dell'elemento `h1`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('h1 + p'));
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `p` il testo `Please fill out this form with the required information`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('p')?.innerText, 'Please fill out this form with the required information');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 60f1922fcbd2410527b3bd89
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso, iniziamo ad abbellire il progetto aggiungendo un po' di CSS. Inizia assegnando al `body` una proprietà `width` del `100%`, e una proprietà `height` di `100vh`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare un selettore `body`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
Dovresti assegnare al `body` una proprietà `width` del `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
Dovresti assegnare al `body` una proprietà `height` di `100vh`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
id: 60f1a5e2d2c23707a4f9a660
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora, rimuovi la barra di scorrimento orizzontale, impostando a `0` la proprietà `margin` dell'elemento `body` che a volte viene aggiunta di default da alcuni browser.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere la proprietà `margin` all'interno del selettore `body`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.margin);
|
||||
```
|
||||
|
||||
Dovresti assegnare allla proprietà `margin` il valore `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 60f1a9cbd23023082e149fee
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso va meglio. Ora, fai in modo che lo sfondo sia più piacevole alla vista, cambiando la proprietà `background-color` dell'elemento `body` in `#1b1b32`. Poi, per rendere il testo leggibile, cambia la proprietà `color` in `#f5f6f7`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere la proprietà `background-color` all'interno del selettore `body`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor);
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `background-color` il valore `#1b1b32`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor, 'rgb(27, 27, 50)');
|
||||
```
|
||||
|
||||
Dovresti aggiungere la proprietà `color` all'interno del selettore `body`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.color);
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `color` il valore `#f5f6f7`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.color, 'rgb(245, 246, 247)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 60f5c3e399ff1a05629964e4
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Come suggerito dal titolo, stai creando un modulo. Dopo l'elemento `p`, inserisci un elemento `form` con un attributo `action` con il valore `https://register-demo.freecodecamp.org`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `form` vicino all'elemento `p`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('p + form'));
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `form` un attributo `action`.
|
||||
|
||||
```js
|
||||
// Default action points to window location
|
||||
assert.notEqual(document.querySelector('form')?.action, window?.location?.href);
|
||||
```
|
||||
|
||||
Dovresti assegnare all'attributo `action` il valore `https://register-demo.freecodecamp.org`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 60f5cb8875ab6a0610f05071
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dato che il progetto prevede tre sezioni distinte nel modulo, aggiungi tre elementi `fieldset` all'interno dell'elemento `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere 3 elementi `fieldset`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset')?.length, 3);
|
||||
```
|
||||
|
||||
I tre elementi `fieldset` dovrebbero essere all'interno dell'elemento `form`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form > fieldset')?.length, 3);
|
||||
```
|
||||
|
||||
I tre elementi `fieldset` dovrebbero essere fratelli.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset + fieldset + fieldset'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
|
||||
</form>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 60f5d2776c854e069560fbe6
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il primo elemento `fieldset` conterrà i campi nome, email e password. Inizia aggiungendo quattro elementi `label` al primo `fieldset`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere quattro elementi `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label')?.length, 4);
|
||||
```
|
||||
|
||||
Dovresti aggiungere gli elementi `label` al primo `fieldset`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
--fcc-editable-region--
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
|
||||
</fieldset>
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 60f5dc35c07ac1078f140916
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi il seguente testo all'interno degli elementi `label`:
|
||||
|
||||
- `Enter Your First Name:`
|
||||
- `Enter Your Last Name:`
|
||||
- `Enter Your Email:`
|
||||
- `Create a New Password:`
|
||||
|
||||
# --hints--
|
||||
|
||||
Il primo `label` dovrebbe contenere il testo `Enter Your First Name:`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('label')?.innerHTML, /Enter Your First Name:/i);
|
||||
```
|
||||
|
||||
Il secondo `label` dovrebbe contenere il testo `Enter Your Last Name:`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset > label:nth-child(2)')?.innerHTML, /Enter Your Last Name:/i);
|
||||
```
|
||||
|
||||
Il terzo `label` dovrebbe contenere il testo `Enter Your Email:`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset > label:nth-child(3)')?.innerHTML, /Enter Your Email:/i);
|
||||
```
|
||||
|
||||
Il quarto `label` dovrebbe contenere il testo `Create a New Password:`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset > label:nth-child(4)')?.innerHTML, /Create a New Password:/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label></label>
|
||||
<label></label>
|
||||
<label></label>
|
||||
<label></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 60f803d5241e6a0433a523a1
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Poiché i `label` sono elementi `inline` come impostazione predefinita, appaiono sulla stessa riga del testo corrispondente. Per farli apparire su righe separate, aggiungi `display: block` all'elemento `label`, e aggiungi una proprietà `margin` con il valore `0.5rem 0`, per separarli gli uni dagli altri.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare un selettore `label`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('label'));
|
||||
```
|
||||
|
||||
È necessario aggiungere una proprietà `display` con il valore `block`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.display, 'block');
|
||||
```
|
||||
|
||||
Dovresti aggiungere una proprietà `margin` con il valore `0.5rem 0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.margin, '0.5rem 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name:</label>
|
||||
<label>Enter Your Last Name:</label>
|
||||
<label>Enter Your Email:</label>
|
||||
<label>Create a New Password:</label>
|
||||
</fieldset>
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 60f805f813eaf2049bc2ceea
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Annida un elemento `input` in ogni elemento `label`. Assicurati di aggiungere ogni elemento `input` dopo il testo `label` e di includere uno spazio dopo i due punti.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere quattro elementi `input` all'elemento `fieldset`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset input')?.length, 4);
|
||||
```
|
||||
|
||||
Dovresti annidare gli elementi `input` all'interno degli elementi `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label input')?.length, 4);
|
||||
```
|
||||
|
||||
Dovresti aggiungere il primo `input` il testo `Enter Your First Name:` dell'elemento `label` e includere uno spazio dopo i due punti.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML, 'Enter Your First Name: <input>');
|
||||
```
|
||||
|
||||
Dovresti aggiungere il secondo `input` dopo il testo `Enter Your Last Name:` dell'elemento `label` e includere uno spazio dopo i due punti.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label')?.[1]?.innerHTML, 'Enter Your Last Name: <input>');
|
||||
```
|
||||
|
||||
Dovresti aggiungere il terzo `input` dopo il testo `Enter Your Email:` dell'elemento `label` e includere uno spazio dopo i due punti.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label')?.[2]?.innerHTML, 'Enter Your Email: <input>');
|
||||
```
|
||||
|
||||
Dovresti aggiungere il quarto `input` dopo il testo `Create a New Password:` dell'elemento `label` e includere uno spazio dopo i due punti.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML, 'Create a New Password: <input>');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name:</label>
|
||||
<label>Enter Your Last Name:</label>
|
||||
<label>Enter Your Email:</label>
|
||||
<label>Create a New Password:</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 60f80e0081e0f2052ae5b505
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Specificare l'attributo `type` di un elemento form è importante per far sì che il browser sappia con che tipo di dati ha a che fare. Se il `type` non è specificato, il browser userà il valore predefinito `text`.
|
||||
|
||||
Assegna ai primi due elementi `input` un attributo `type` con il valore `text`, al terzo un attributo `type` con il valore `email` e al quarto un attributo `type` con il valore `password`.
|
||||
|
||||
Il valore `email` assegnato all'attributo type, permette di inserire solo e-mail contenenti un carattere `@` e un carattere `.`. Il valore `password` dell'attributo type nasconde l'input e avvisa se il sito non utilizza HTTPS.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare al primo elemento `input` un attributo `type` con il valore `text`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input')?.type, 'text');
|
||||
```
|
||||
|
||||
Dovresti assegnare al secondo elemento `input` un attributo `type` con il valore `text`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[1]?.type, 'text');
|
||||
```
|
||||
|
||||
Dovresti assegnare al terzo elemento `input` un attributo `type` con il valore `email`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[2]?.type, 'email');
|
||||
```
|
||||
|
||||
Dovresti assegnare al quarto elemento `input` un attributo `type` con il valore `password`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[3]?.type, 'password');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input /></label>
|
||||
<label>Enter Your Last Name: <input /></label>
|
||||
<label>Enter Your Email: <input /></label>
|
||||
<label>Create a New Password: <input /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 60f81167d0d4910809f88945
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il primo elemento `input` con l'attributo `type` con il valore `submit` viene automaticamente impostato per inviare l'elemento genitore `form` più vicino.
|
||||
|
||||
Per gestire l'invio del modulo, dopo l'ultimo elemento `fieldset`, aggiungi un elemento `input` con un attributo `type` con il valore `submit` e un attributo `value` con il valore `Submit`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere l'elemento `input` dopo l'ultimo elemento `fieldset`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('fieldset')?.[2]?.nextElementSibling?.tagName, 'input');
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `input` un attributo `type` con il valore `submit`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset + input[type="submit"]'));
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `input` un attributo `value` con il valore `Submit`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset + input[value="Submit"]'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" /></label>
|
||||
<label>Enter Your Last Name: <input type="text" /></label>
|
||||
<label>Enter Your Email: <input type="email" /></label>
|
||||
<label>Create a New Password: <input type="password" /></label>
|
||||
</fieldset>
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 60f81616cff80508badf9ad5
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A questo punto, dovresti essere in grado di inviare il modulo. Tuttavia, come puoi notare, non succede molto.
|
||||
|
||||
Per rendere il modulo più interattivo, aggiungi l'attributo `required` agli elementi `input` nel primo `fieldset`.
|
||||
|
||||
Ora, se tenti di inviare il modulo senza compilare i campi richiesti, vedrai un messaggio di errore.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare al primo elemento `input` un attributo `required`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input')?.required, true);
|
||||
```
|
||||
|
||||
Dovresti assegnare al secondo elemento `input` un attributo `required`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[1]?.required, true);
|
||||
```
|
||||
|
||||
Dovresti assegnare al terzo elemento `input` un attributo `required`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[2]?.required, true);
|
||||
```
|
||||
|
||||
Dovresti assegnare al quarto elemento `input` un attributo `required`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[3]?.required, true);
|
||||
```
|
||||
|
||||
L'`input` di `submit` non dovrebbe avere un attributo `required`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input[type="submit"]')?.required, false);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" /></label>
|
||||
<label>Enter Your Last Name: <input type="text" /></label>
|
||||
<label>Enter Your Email: <input type="email" /></label>
|
||||
<label>Create a New Password: <input type="password" /></label>
|
||||
</fieldset>
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 60f83e7bfc09900959f41e20
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Alcuni valori dell'attributo `type` sono dotati di validazione integrata del modulo. Ad esempio, `type="email"` richiede che il valore sia un indirizzo email valido.
|
||||
|
||||
Aggiungi una validazione personalizzata all'elemento `input` della password aggiungendo un attributo `minlength` con un valore di `8`. In questo modo si evita che vengano inviati input inferiori a 8 caratteri.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare all'elemento `input` della password un attributo `minlength`.
|
||||
|
||||
```js
|
||||
assert.notEqual(document.querySelector('input[type="password"]')?.minLength, -1);
|
||||
```
|
||||
|
||||
Dovresti assegnare all'attributo `minlength` il valore `8`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input[type="password"]')?.minLength, 8);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 60f84ec41116b209c280ba91
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Con `type="password"` puoi usare l'attributo `pattern` per definire un'espressione regolare a cui la password deve corrispondere per essere considerata valida.
|
||||
|
||||
Aggiungi un attributo `pattern` all'elemento `input` per richiedere la corrispondenza dell'input: `[a-z0-5]{8,}`
|
||||
|
||||
Questa è un'espressione regolare che corrisponde a otto o più lettere minuscole o alle cifre da `0` a `5`. Rimuovi l'attributo `minlength` e fai una prova.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare all'elemento `input` della password un attributo `pattern`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="password"]')?.pattern);
|
||||
```
|
||||
|
||||
Dovresti assegnare all'attributo `pattern` il valore `[a-z0-5]{8,}`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input[type="password"]')?.pattern, '[a-z0-5]{8,}');
|
||||
```
|
||||
|
||||
Dovresti rimuovere l'attributo `minlength` dall'elemento `input` della password.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input[type="password"]')?.minLength, -1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" minlength="8" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 60f852f645b5310a8264f555
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Andiamo proseguiamo con la prossima parte del modulo di registrazione. Questa sezione chiederà il tipo di account che l'utente sta aprendo, e confermerà che l'utente abbia letto i termini e le condizioni.
|
||||
|
||||
Inizia aggiungendo tre elementi `label` al secondo `fieldset`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere tre elementi `label` al secondo `fieldset`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset')?.[1]?.querySelectorAll('label')?.length, 3);
|
||||
```
|
||||
|
||||
Gli elementi `label` dovrebbero essere fratelli.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2)')?.querySelector('label + label + label'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 60f85a62fb30c80bcea0cedb
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Gli utenti potranno scegliere tra `Personal Account` e `Business Account`.
|
||||
|
||||
Per fare ciò, all'interno di ciascuno dei primi due elementi `label`, aggiungi un elemento `input` con `type="radio"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere due elementi `input`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(2) input')?.length, 2);
|
||||
```
|
||||
|
||||
Dovresti aggiungere un `input` a ciascuno dei primi due elementi `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(1) > input'));
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(2) > input'));
|
||||
```
|
||||
|
||||
Dovresti assegnare a entrambi gli elementi `input` un attributo `type` con il valore `radio`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(2) input[type="radio"]')?.length, 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label></label>
|
||||
<label></label>
|
||||
<label></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -7,7 +7,7 @@ dashedName: step-23
|
||||
|
||||
# --description--
|
||||
|
||||
Per i termini e le condizioni, aggiungi un `input` con un `type` di `checkbox` al terzo elemento `label`. Inoltre, dato che non vogliamo che gli utenti si registrino senza aver letto i termini e le condizioni, rendilo `required`.
|
||||
Per i termini e le condizioni, aggiungi al terzo elemento `label` un `input` con un attributo `type` con il valore `checkbox`. Inoltre, dato che non vogliamo che gli utenti si registrino senza aver letto i termini e le condizioni, aggiungi un attributo `required`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 60f8618d191b940d62038513
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
All'interno di ogni elemento `label` corrispondente, e subito dopo l'elemento `input`, aggiungi uno spazio seguito dal testo:
|
||||
|
||||
```md
|
||||
Personal Account
|
||||
Business Account
|
||||
I accept the terms and conditions
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare al primo elemento `label` il testo `Personal Account`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('fieldset:nth-child(2) > label')?.innerText, 'Personal Account');
|
||||
```
|
||||
|
||||
Dovresti assegnare al secondo elemento `label` il testo `Business Account`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText, 'Business Account');
|
||||
```
|
||||
|
||||
Dovresti assegnare al terzo elemento `label` il testo `I accept the terms and conditions`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText, 'I accept the terms and conditions');
|
||||
```
|
||||
|
||||
Dovresti aggiungere uno spazio prima del testo del primo elemento `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) > label')?.innerText?.[0], ' ');
|
||||
```
|
||||
|
||||
Dovresti aggiungere uno spazio prima del testo del secondo elemento `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText?.[0], ' ');
|
||||
```
|
||||
|
||||
Dovresti aggiungere uno spazio prima del testo del terzo elemento `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText?.[0], ' ');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" /></label>
|
||||
<label><input type="radio" /></label>
|
||||
<label><input type="checkbox" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 60fab4a123ce4b04526b082b
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
I pulsanti di opzione dovrebbero essere selezionabili uno alla volta. Tuttavia, il modulo non sa che gli input di opzione sono correlati.
|
||||
|
||||
Per collegare gli input di opzione, assegna loro lo stesso attributo `name` con il valore `account-type`. Ora, non è possibile selezionare entrambi gli input di opzione allo stesso tempo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare al primo input di opzione l'attributo `name` con il valore `account-type`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type');
|
||||
```
|
||||
|
||||
Dovresti assegnare al secondo input di opzione l'attributo `name` con il valore `account-type`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type');
|
||||
```
|
||||
|
||||
Non dovresti assegnare l'attributo `name` al `checkbox`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input[type="checkbox"]')?.name);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" /> Personal Account</label>
|
||||
<label><input type="radio" /> Business Account</label>
|
||||
<label><input type="checkbox" required /> I accept the terms and conditions</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 60fab8367d35de04e5cb7929
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per completare questo `fieldset`, collega il testo `terms and conditions` a questo link:
|
||||
|
||||
```md
|
||||
https://www.freecodecamp.org/news/terms-of-service/
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare un elemento `a` per linkare terms and conditions.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a'));
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `a` un attributo `href` con il valore `https://www.freecodecamp.org/news/terms-of-service/`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.href, /https:\/\/www\.freecodecamp\.org\/news\/terms-of-service\/?/);
|
||||
```
|
||||
|
||||
L'elemento `a` dovrebbe racchiudere soltanto il testo `terms and conditions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.textContent, 'terms and conditions');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label><input type="checkbox" required /> I accept the terms and conditions</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 60fab9f17fa294054b74228c
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Passiamo all'ultimo `fieldset`. Cosa succede se vuoi consentire a un utente di caricare un'immagine profilo?
|
||||
|
||||
Beh, il valore `file` delll'attributo type di `input` ti permette esattamente di fare questo. Aggiungi un elemento `label` con il testo `Upload a profile picture:` e aggiungi un `input` che accetta il caricamento di un file.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `label` con il testo `Upload a profile picture:`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset:nth-child(3) > label')?.innerText, /Upload a profile picture:/i);
|
||||
```
|
||||
|
||||
Dovresti annidare un elemento `input` all'interno dell'elemento `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label > input'));
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `input` un attributo `type` con il valore `file`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.type, 'file');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the
|
||||
<a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 60fabf0dd4959805dbae09e6
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi un altro elemento `label` dopo il primo, con il testo `Input your age (years):`. Quindi, annida un `input` con l'attributo `type` con il valore `number`.
|
||||
|
||||
Poiché non vogliamo che gli utenti di età inferiore ai 13 anni si registrino, aggiungi un attributo `min` all'`input` con il valore `13`. Inoltre, possiamo probabilmente presumere che non ci saranno utenti di età superiore ai 120 anni; aggiungi un attributo `max` con il valore `120`.
|
||||
|
||||
Ora, se qualcuno tenta di inviare il modulo con valori al di fuori dell'intervallo, verrà visualizzato un avviso e il modulo non verrà inviato. Fai una prova.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `label` al terzo `fieldset`, dopo l'elemento `label` esistente.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label + label'));
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `label` il testo `Input your age (years):`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent?.trim(), 'Input your age (years):');
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `label` un `input` con l'attributo `type` con il valore `number`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]'));
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `input` un attributo `min` con il valore `13`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.min, '13');
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `input` un attributo `max` con il valore `120`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.max, '120');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 60fac4095512d3066053d73c
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungere al modulo un menu a discesa è piuttosto facile con l'elemento `select`. L'elemento `select` è un contenitore per un gruppo di elementi `option` e l'elemento `option` funge da etichetta per ciascuna opzione a discesa. Entrambi gli elementi richiedono tag di chiusura.
|
||||
|
||||
Inizia aggiungendo un elemento `select` sotto i due elementi `label`. Poi, annida 5 elementi `option` all'interno dell'elemento `select`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `select` al terzo `fieldset`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > select'));
|
||||
```
|
||||
|
||||
Dovresti annidare 5 elementi `option` all'interno dell'elemento `select`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option')?.length, 5);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 60fac56271087806def55b33
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Annida l'elemento `select` in un elemento `label` con il testo `How did you hear about us?`. Il testo dovrebbe trovarsi prima dell'elemento `select`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti annidare solo l'elemento `select` all'interno di un elemento `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(3) > select'));
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `label` il testo `How did you hear about us?`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerText?.trim(), 'How did you hear about us?');
|
||||
```
|
||||
|
||||
Dovresti posizionare il testo prima dell'elemento `select`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerHTML?.replace(/[\t\n]+/g, ''), /^How did you hear about us\?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<select>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
</select>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 60fac8d7fdfaee0796934f20
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le opzioni a discesa sono attualmente vuote. Per assegnare loro il contenuto, aggiungi in ordine il seguente testo a ogni elemento `option`:
|
||||
|
||||
```md
|
||||
(select one)
|
||||
freeCodeCamp News
|
||||
freeCodeCamp YouTube Channel
|
||||
freeCodeCamp Forum
|
||||
Other
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare al primo elemento `option` il testo `(select one)`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.textContent, '(select one)');
|
||||
```
|
||||
|
||||
Dovresti assegnare al secondo elemento `option` il testo `freeCodeCamp News`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.textContent, 'freeCodeCamp News');
|
||||
```
|
||||
|
||||
Dovresti assegnare alla terzo elemento `option` il testo `freeCodeCamp YouTube Channel`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube Channel');
|
||||
```
|
||||
|
||||
Dovresti assegnare al quarto elemento `option` il testo `freeCodeCamp Forum`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.textContent, 'freeCodeCamp Forum');
|
||||
```
|
||||
|
||||
Dovresti assegnare al quinto elemento `option` il testo `Other`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.textContent, 'Other');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 60faca286cb48b07f6482970
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Se il modulo viene inviato con un'opzione selezionata il server non ottiene un valore utile. Per questo motivo, ogni elemento `option` ha bisogno di un attributo `value`. Senza di esso, il contenuto del testo dell'elemento `option` verrà inviato al server.
|
||||
|
||||
Assegna al primo elemento `option` un attributo `value` di `""` e agli elementi `option` successivi un attributo `value` con i valori da `1` a `4`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare al primo elemento `option` un attributo `value` di `""`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.value, '');
|
||||
```
|
||||
|
||||
Dovresti assegnare al secondo elemento `option` un attributo `value` di `1`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.value, '1');
|
||||
```
|
||||
|
||||
Dovresti assegnare al terzo elemento `option` un attributo `value` di `2`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.value, '2');
|
||||
```
|
||||
|
||||
Dovresti assegnare al quarto elemento `option` un attributo `value` di `3`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.value, '3');
|
||||
```
|
||||
|
||||
Dovresti assegnare al quinto elemento `option` un attributo `value` di `4`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.value, '4');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option>(select one)</option>
|
||||
<option>freeCodeCamp News</option>
|
||||
<option>freeCodeCamp YouTube Channel</option>
|
||||
<option>freeCodeCamp Forum</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 60facf914c7b9b08d7510c2c
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'elemento `textarea` è troppo piccolo. Per assegnargli una dimensione iniziale, puoi aggiungere gli attributi `rows` e `cols`.
|
||||
|
||||
Aggiungi una dimensione iniziale di `3` righe e `30` colonne.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare all'elemento `textarea` un attributo `rows` con il valore `3`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.rows, 3);
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `textarea` un attributo `cols` con il valore `30`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.cols, 30);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 60fad0a812d9890938524f50
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per dare ai Campers un'idea di cosa mettere nella loro biografia, viene utilizzato l'attributo `placeholder`. Il `placeholder` accetta un valore di testo, che viene visualizzato fino a quando l'utente inizia a digitare.
|
||||
|
||||
Dai all'elemento `textarea` un attributo `placeholder` con il valore `I like coding on the beach...`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare all'elemento `textarea` un attributo `placeholder`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder);
|
||||
```
|
||||
|
||||
Dovresti assegnare all'attributo `placeholder` il valore `I like coding on the beach...`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder, 'I like coding on the beach...');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea rows="3" cols="30"></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,155 @@
|
||||
---
|
||||
id: 60fad1cafcde010995e15306
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per quanto riguarda l'invio dei moduli, è utile oltre che una buona pratica, fornire ogni elemento inviabile di un attributo `name`. Questo attributo è utilizzato per identificare l'elemento una volta che il modulo è stato inviato.
|
||||
|
||||
Vai avanti, e assegna a ogni elemento inviabile un attributo `name` univoco di tua scelta. _Eccetto i due input `radio`._
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare all'`input` relativo al nome un attributo `name`. _PS Io avrei scelto `first-name`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name);
|
||||
```
|
||||
|
||||
Dovresti assegnare all'`input` relativo al cognome un attributo `name`. _PS Io avrei scelto `last-name`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(2) > input')?.name);
|
||||
```
|
||||
|
||||
Dovresti assegnare all'`email` un attributo `name`. _PS Io avrei scelto `email`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="email"]')?.name);
|
||||
```
|
||||
|
||||
Dovresti assegnare alla `password` un attributo `name`. _PS Io avrei scelto `password`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="password"]')?.name);
|
||||
```
|
||||
|
||||
Dovresti assegnare alla `checkbox` un attributo `name`. _PS Io avrei scelto `terms`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="checkbox"]')?.name);
|
||||
```
|
||||
|
||||
Dovresti assegnare al `file` un attributo `name`. _PS Io avrei scelto `file`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="file"]')?.name);
|
||||
```
|
||||
|
||||
Dovresti assegnare al `number` un attributo `name`. _PS Io avrei scelto `age`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="number"]')?.name);
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `select` un attributo `name`. _PS Io avrei scelto `referrer`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('select')?.name);
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `textarea` un attributo `name`. _PS Io avrei scelto `bio`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('textarea')?.name);
|
||||
```
|
||||
|
||||
Non dovresti assegnare a nessun elemento `option` un attributo `name`.
|
||||
|
||||
```js
|
||||
[...document.querySelectorAll('option')]?.forEach(option => assert.isUndefined(option?.name));
|
||||
```
|
||||
|
||||
Non dovresti assegnare a nessun elemento `label` un attributo `name`.
|
||||
|
||||
```js
|
||||
[...document.querySelectorAll('label')]?.forEach(label => assert.isUndefined(label?.name));
|
||||
```
|
||||
|
||||
Non dovresti assegnare a nessun elemento `fieldset` un attributo `name`.
|
||||
|
||||
```js
|
||||
[...document.querySelectorAll('fieldset')]?.forEach(fieldset => assert.isEmpty(fieldset?.name));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 60fad6dfcc0d930a59becf12
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'HTML per il modulo di registrazione è terminato. Ora puoi concentrarti ad abbellire un po' la pagina.
|
||||
|
||||
Inizia cambiando il carattere del `body` in `Tahoma` e la dimensione del carattere in `16px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare la proprietà `font-family` per cambiare il carattere.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily);
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `font-family` il valore `Tahoma`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily, 'Tahoma');
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `font-size` il valore `16px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 60fad8e6148f310bba7890b1
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Centra gli elementi `h1` e `p` dando loro una proprietà `margin` con il valore `1em auto`. Quindi, allinea anche il testo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare la virgola all'interno di un unico selettore per agire sullo stile degli elementi `h1` e `p`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('h1, p'));
|
||||
```
|
||||
|
||||
Dovresti utilizzare una proprietà `margin` di `1em auto` per centrare gli elementi `h1` e `p`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.margin, '1em auto');
|
||||
```
|
||||
|
||||
Dovresti usare una proprietà `text-align` con il valore `center` per centrare il testo degli elementi `h1` e `p`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 60fad99e09f9d30c1657e790
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Centra l'elemento `form`, assegnandogli una proprietà `margin` con il valore `0 auto`. Quindi, fissa la sua larghezza massima a `500px` e la larghezza minima a `300px`. In questo intervallo, assegnagli una proprietà `width` di `60vw`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare un selettore `form` per lo stile dell'elemento `form`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('form'));
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `form` una proprietà `margin` con il valore `0 auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.margin, '0px auto');
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `form` una proprietà `max-width` con il valore `500px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.maxWidth, '500px');
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `form` una proprietà `min-width` con il valore `300px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.minWidth, '300px');
|
||||
```
|
||||
|
||||
Dovresti assegnare all'elemento `form` una proprietà `width` con il valore `60vw`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 60fadb18058e950c73925279
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Durante lo sviluppo, è utile vedere i bordi predefiniti degli elementi `fieldset`. Tuttavia, rendono il contenuto troppo separato.
|
||||
|
||||
Rimuovi i bordi agendo sul valore della proprietà `border` e aggiungi `2rem` di paddingsolo in alto e in basso per ogni `fieldset`. Assicurati di rimuovere il `padding` di sinistra e destra.
|
||||
|
||||
# --hints--
|
||||
|
||||
Puoi rimuovere i bordi utilizzando il valore `none` o `0` per la proprietà `border`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle('fieldset')?.border, /(none)|(0px)/);
|
||||
```
|
||||
|
||||
Dovresti aggiungere un `padding` di `2rem` nella parte superiore e inferiore di ogni `fieldset`.
|
||||
|
||||
```js
|
||||
const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset')
|
||||
assert.equal(fieldset?.paddingTop, '2rem');
|
||||
assert.equal(fieldset?.paddingBottom, '2rem');
|
||||
```
|
||||
|
||||
Dovresti rimuovere il `padding` di sinistra e destra per ogni `fieldset`.
|
||||
|
||||
```js
|
||||
const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset')
|
||||
assert.equal(fieldset?.paddingLeft, '0px');
|
||||
assert.equal(fieldset?.paddingRight, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 60fadce90f85c50d0bb0dd4f
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per dare agli elementi `fieldset` un po' di separazione, seleziona tutti gli elementi `fieldset` tranne l'ultimo e assegna loro una proprietà `border-bottom` con il valore `3px solid #3b3b4f`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Puoi usare la pseudo-classe `:not(:last-of-type)` per selezionare tutti gli elemento tranne l'ultimo.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)'));
|
||||
```
|
||||
|
||||
Dovresti assegnare agli elementi `fieldset` una proprietà `border-bottom` con il valore `3px solid #3b3b4f`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')?.borderBottom, '3px solid rgb(59, 59, 79)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,151 @@
|
||||
---
|
||||
id: 60fadd972e6ffe0d6858fa2d
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sarebbe più carino far sì che il testo degli elementi `label` appaia sopra gli elementi form.
|
||||
|
||||
Seleziona tutti gli elementi `input`, `textarea` e `select` e fai in modo di impostarli alla larghezza massima dei loro elementi genitori.
|
||||
|
||||
Aggiungi anche una proprietà `margin` di `10px` nella parte superiore degli elementi selezionati. Imposta gli altri margini a `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare un selettore di elementi separati da virgola per selezionare gli elementi `input`, `textarea` e `select`.
|
||||
|
||||
```js
|
||||
assert.isTrue(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].some(selector => new __helpers.CSSHelp(document).getStyle(selector)));
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `width` al `100%`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.width, '100%');
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `margin-top` a `10px`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginTop, '10px');
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `margin-bottom` a `0`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginBottom, '0px');
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `margin-left` a `0`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginLeft, '0px');
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `margin-right` a `0`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginRight, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 60fadfa2b540b70dcfa8b771
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per il secondo `fieldset`, fai sì che il testo degli elementi `input` e `label` appaia sulla stessa riga.
|
||||
|
||||
Inizia, assegnando agli elementi `input` nel secondo `fieldset` la classe `inline`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare al primo `input` la classe `inline`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[0]?.classList?.contains('inline'));
|
||||
```
|
||||
|
||||
Dovresti assegnare al secondo `input` la classe `inline`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[1]?.classList?.contains('inline'));
|
||||
```
|
||||
|
||||
Dovresti assegnare al terzo `input` la classe `inline`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?.contains('inline'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 60fc219d333e37046f474a6e
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Seleziona solo gli elementi `.inline` e assegna loro una proprietà `width` con il valore `unset`. In questo modo, rimuoverai la regola precedente che impostava tutti gli elementi `input` su `width: 100%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore `.inline`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.inline'));
|
||||
```
|
||||
|
||||
Dovresti assegnare agli elementi `.inline` una proprietà `width` con il valore `unset`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 60fc22d1e64d1b04cdd4e602
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi un po' di spazio tra gli elementi `.inline` e il testo dei `label` usando una proprietà `margin` di `0.5em`. Inoltre, imposta tutti gli altri margini a `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare agli elementi `.inline` una proprietà `margin-right` di `0.5em`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginRight, '0.5em');
|
||||
```
|
||||
|
||||
Dovresti assegnare agli elementi `.inline` una proprietà `margin-bottom` di `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginBottom, '0px');
|
||||
```
|
||||
|
||||
Dovresti assegnare agli elementi `.inline` una proprietà `margin-top` di `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginTop, '0px');
|
||||
```
|
||||
|
||||
Dovresti assegnare agli elementi `.inline` una proprietà `margin-left` di `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.inline {
|
||||
width: unset;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 60fc236dc04532052926fdac
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Se guardi da vicino, noterai che gli elementi `.inline` sono troppo alti sulla riga.
|
||||
|
||||
Per impedirlo, imposta la proprietà `vertical-align` su `middle`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti impostare la proprietà `vertical-align` su `middle` per tutti gli elementi `.inline`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign, 'middle');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 60ffe1bc30415f042faea936
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per rendere gli elementi `input` e `textarea` uniformi con il tema di sfondo, imposta la loro proprietà `background-color` a `#0a0a23`. Quindi, assegna loro dei bordi da `1px`, `solid` e di colore `#0a0a23`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare un selettore con gli elementi separati da virgola per selezionare gli elementi `input` e `textarea`.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.isTrue(['input, textarea', 'textarea, input'].some(selFunc));
|
||||
```
|
||||
|
||||
Dovresti assegnareagli elementi `input` e `textarea` un `background-color` di `#0a0a23`.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.backgroundColor, 'rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
Dovresti assegnare agli elementi `input` e `textarea` un bordo di `1px`, `solid` e di colore `#0a0a23`.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderWidth, '1px');
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderStyle, 'solid');
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderColor, 'rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 60ffe3936796ac04959285a9
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Attualmente, se digiti all'interno degli elementi `input` o `textarea`, non sarai in grado di vedere il testo. Inoltre, non sono abbastanza alti per essere utilizzati comodamente.
|
||||
|
||||
Assegna alla proprietà `color` il valore `#ffffff` e alla proprietà `min-height` il valore `2em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare alla proprietà `color` il valore `#ffffff`.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.color, 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `min-height` il valore `2em`.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minHeight, '2em');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 60ffe4f4ec18cd04dc470c56
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ciò che desideri è che l'elemento `select` abbia uno sfondo bianco, ma ora non ha lo stesso valore della proprietà `min-height` degli elementi `input` e `textarea`.
|
||||
|
||||
Sposta la proprietà `min-height` e il relativo valore in modo che tutti e tre i tipi di elemento abbiano lo stesso valore di `min-height` e l'elemento `select` abbia ancora un sfondo bianco.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti spostare la proprietà e il valore `min-height` nel selettore `input, textarea, select`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight);
|
||||
```
|
||||
|
||||
Dovresti assegnare al selettore `input, textarea, select` una proprietà `min-height` di `2em`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight, '2em');
|
||||
```
|
||||
|
||||
Dovresti rimuovere la dichiarazione `min-height` dal selettore `input, textarea`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minHeight);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 60ffe69ee377c6055e192a46
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per lo stile del pulsante Submit, puoi usare un selettore di _attributi_ che seleziona un elemento in base al valore di uno specifico attributo. Ecco un esempio:
|
||||
|
||||
```css
|
||||
input[name="password"]
|
||||
```
|
||||
|
||||
Con questa sintassi selezioni gli elementi `input` con un attributo `name` con il valore `password`.
|
||||
|
||||
Adesso, usa il selettore attributi per lo stile del pulsante Submit con una proprietà `display` di `block`, e una proprietà `width` del `60%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare un selettore di attributi di `input[type="submit"]` per agire sullo stile del pulsante Submit.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="submit"]'));
|
||||
```
|
||||
|
||||
Dovresti assegnare al pulsante Submit una proprietà `display` con il valore `block`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.display, 'block');
|
||||
```
|
||||
|
||||
Dovresti assegnare al pulsante Submit una proprietà `width` del `60%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 60ffe7d8aae62c05bcc9e7eb
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Con una proprietà `display` con il valore `block`, il pulsante Submit si trova a filo con il bordo sinistro del suo genitore.
|
||||
|
||||
Usa la stessa tecnica usata per centrare l'elemento `form` per centrare il pulsante Submit.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare al pulsante Submit una proprietà `margin` con il valore `0 auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '0px auto');
|
||||
```
|
||||
|
||||
Non dovresti assegnare al pulsante Submit delle proprietà `min-width` o `max-width`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.maxWidth);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,143 @@
|
||||
---
|
||||
id: 60ffe8a5ceb0e90618db06d9
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per rendere il pulsante Submit più in linea con il resto del modulo, assegnagli lo stesso valore della proprietà `height` degli altri campi (`2em`). Inoltre, aumenta la proprietà `font-size` a `1.1rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare al pulsante Submit una proprietà `height` di `2em`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.height, '2em');
|
||||
```
|
||||
|
||||
Dovresti assegnare al pulsante Submit una proprietà `font-size` di `1.1rem`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.fontSize, '1.1rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 60ffe947a868ec068f7850f6
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per far distinguere il pulsante Submit, assegnagli una proprietà `background-color` di `#3b3b4f` e una proprietà `border-color` con il valore `white`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare al pulsante Submit una proprietà `background-color` con il valore `#3b3b4f`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.backgroundColor, 'rgb(59, 59, 79)');
|
||||
```
|
||||
|
||||
Dovresti assegnare al pulsante Submit una proprietà `border-color` con il valore `white`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.borderColor, 'white');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
height: 2em;
|
||||
font-size: 1.1rem;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,150 @@
|
||||
---
|
||||
id: 60ffe9cb47809106eda2f2c9
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Infine, dovresti separare il pulsante Submit dal `fieldset` superiore e regolare la sua larghezza minima a `300px`.
|
||||
|
||||
Cambia la proprietà `margin` per aggiungere `1em` in alto e in basso, e imposta la larghezza come descritto sopra.
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti cambiare la proprietà `width`. Usa la proprietà `min-width`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%');
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth);
|
||||
```
|
||||
|
||||
Dovresti utilizzare la proprietà `margin` esistente per includere `1em` in alto e in basso.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '1em auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
height: 2em;
|
||||
font-size: 1.1rem;
|
||||
background-color: #3b3b4f;
|
||||
border-color: white;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,151 @@
|
||||
---
|
||||
id: 60ffec2825da1007509ddd06
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La maggior parte dei browser applica le proprie proprietà e valori CSS predefiniti per diversi elementi. Se guardi attentamente, potresti essere notare che l'`input` del file è più piccolo del testo degli altri elementi `input`. L'impostazione predefinita di un `padding` è `1px 2px` per gli elementi `input` in cui puoi scrivere.
|
||||
|
||||
Usando un altro selettore di attributi, agisci sullo stile degli `input` con un attributo `type` del valore `file` per ottenere lo stesso padding degli altri elementi `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare un selettore di attributi per lo stile dell'elemento `input`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="file"]'));
|
||||
```
|
||||
|
||||
Dovresti assegnare a `input[type="file"]` un `padding` di `1px 2px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.padding, '1px 2px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 1em auto;
|
||||
height: 2em;
|
||||
font-size: 1.1rem;
|
||||
background-color: #3b3b4f;
|
||||
border-color: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 60ffecefac971607ae73c60f
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Parlando di `padding`, il pulsante Submit si trova in fondo all'elemento `form`. Aggiungi `2em` di `padding` solo in fondo al `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare la proprietà `padding-bottom`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom);
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `padding-bottom` il valore `2em`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2em');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 1em auto;
|
||||
height: 2em;
|
||||
font-size: 1.1rem;
|
||||
background-color: #3b3b4f;
|
||||
border-color: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,284 @@
|
||||
---
|
||||
id: 60ffefd6479a3d084fb77cbc
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Come ultima cosa, modifica il colore del testo del link `terms and conditions` in `#dfdfe2`.
|
||||
|
||||
Ottimo lavoro! Hai completato la parte finale del progetto _Registration Form_.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore `a`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
|
||||
```
|
||||
|
||||
Dovresti assegnare agli elementi `a` una proprietà `color` con il valore `#dfdfe2`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 1em auto;
|
||||
height: 2em;
|
||||
font-size: 1.1rem;
|
||||
background-color: #3b3b4f;
|
||||
border-color: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 1em auto;
|
||||
height: 2em;
|
||||
font-size: 1.1rem;
|
||||
background-color: #3b3b4f;
|
||||
border-color: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -8,7 +8,7 @@ dashedName: create-complex-multi-dimensional-arrays
|
||||
|
||||
# --description--
|
||||
|
||||
お疲れ様！ 配列について多くのことを学びましたね！ かなりハイレベルな概要でしたが、配列の操作についてはまだ学ぶべきことがたくさんあります。その多くはこのあとのセクションで説明していきます。 ですが<dfn>オブジェクト</dfn>に移る前に、もう一度確認しておきましょう。これまでのチャレンジで取り上げたものより、配列をもう少し複雑にする方法について見ていきます。
|
||||
お疲れ様！ 配列について多くのことを学びましたね！ かなりハイレベルな概要でしたが、配列の操作についてはまだ学ぶべきことがたくさんあります。その多くはこのあとのセクションで説明していきます。 では<dfn>オブジェクト</dfn>の話に移る前に、配列についてもう一度確認しておきましょう。これまでのチャレンジで取り上げたものより、配列をもう少し複雑にする方法について見ていきます。
|
||||
|
||||
配列をデータ構造として捉えるときに最も強力な機能の一つは、配列に他の配列を含めることができる、あるいは完全に他の配列で構成することができるという点です。 これまでのチャレンジでも、配列を含む配列を取り上げてきましたが、それらはかなり単純な例でした。 しかし、配列では他の配列を格納できる無限の深さの配列を扱うことができ、含まれる各配列にも任意のレベルの深さを持たせることができます。さらにそこに含まれる配列も同様です。 このように、配列はたちまち非常に複雑なデータ構造になる可能性があります。こうした配列のことを<dfn>多次元</dfn>配列、またはネストされた配列と呼びます。 以下の例を考えてみましょう。
|
||||
|
||||
|
||||
@@ -19,13 +19,11 @@ dashedName: access-array-data-with-indexes
|
||||
|
||||
```js
|
||||
const array = [50, 60, 70];
|
||||
array[0];
|
||||
console.log(array[0]);
|
||||
const data = array[1];
|
||||
```
|
||||
|
||||
ここで、`array[0]` は `50`、`data` の値は `60` となります。
|
||||
|
||||
**注:** 「`array [0]`」のように、配列名と角括弧 (ブラケット) の間にスペースを入れないでください。 JavaScript はこれを正しく処理できますが、このコードを読む他のプログラマーを混乱させる恐れがあります。
|
||||
ここで、`console.log(array[0])` は `50` を出力し、`data` の値は `60` となります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -38,18 +38,22 @@ assert(myVar === 10);
|
||||
`myVar = myVar - 1;` を書き換える必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
/let\s*myVar\s*=\s*11;\s*\/*.*\s*([-]{2}\s*myVar|myVar\s*[-]{2});/.test(code)
|
||||
);
|
||||
assert(!code.match(/myVar\s*=\s*myVar\s*[-]\s*1.*?;?/));
|
||||
```
|
||||
|
||||
`myVar` で `--` 演算子を使用する必要があります。
|
||||
`myVar` に `10` を代入してはいけません。
|
||||
|
||||
```js
|
||||
assert(!code.match(/myVar\s*=\s*10.*?;?/));
|
||||
```
|
||||
|
||||
`myVar` には `--` 演算子を使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(/[-]{2}\s*myVar|myVar\s*[-]{2}/.test(code));
|
||||
```
|
||||
|
||||
指定のコメントより上にあるコードを変更しないでください。
|
||||
指定されたコメントより上のコードを変更してはいけません。
|
||||
|
||||
```js
|
||||
assert(/let myVar = 11;/.test(code));
|
||||
|
||||
@@ -15,13 +15,13 @@ dashedName: find-the-length-of-a-string
|
||||
console.log("Alan Peter".length);
|
||||
```
|
||||
|
||||
この例では値 `10` がコンソールに表示されます。
|
||||
コンソールに `10` の値が表示されます。 なお、"Alan" と "Peter" の間のスペースも文字としてカウントされます。
|
||||
|
||||
たとえば、変数 `const firstName = "Ada"` を作成した場合、`firstName.length` プロパティを使用して文字列 `Ada` の長さを取得できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`.length` プロパティを使用して、`lastName` 変数の文字数をカウントし、それを `lastNameLength` に代入してください。
|
||||
`.length` プロパティを使って、`lastNameLength` に `lastName` の文字数を設定します。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -31,17 +31,17 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")` の実行後、`tracks` の末尾の要素は文字列 `Take a Chance on Me` になる必要があります。
|
||||
`updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")` の実行後、`tracks` 配列は、文字列 `Take a Chance on Me` が末尾かつ唯一の要素になる必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
updateRecords(_recordCollection, 5439, 'tracks', 'Take a Chance on Me')[5439][
|
||||
'tracks'
|
||||
].pop() === 'Take a Chance on Me'
|
||||
updateRecords(_recordCollection, 5439, 'tracks', 'Take a Chance on Me') &&
|
||||
_recordCollection[5439]['tracks'].length === 1 &&
|
||||
_recordCollection[5439]['tracks'].pop() === 'Take a Chance on Me'
|
||||
);
|
||||
```
|
||||
|
||||
`updateRecords(recordCollection, 2548, "artist", "")` の実行後、`artist` は設定されない必要があります。
|
||||
`updateRecords(recordCollection, 2548, "artist", "")` の実行後、`artist` は未設定であるべきです。
|
||||
|
||||
```js
|
||||
updateRecords(_recordCollection, 2548, 'artist', '');
|
||||
@@ -58,7 +58,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`updateRecords(recordCollection, 2468, "tracks", "Free")` の実行後、`tracks` の先頭の要素は文字列 `1999` になる必要があります。
|
||||
`updateRecords(recordCollection, 2468, "tracks", "Free")` の実行後、`tracks` の先頭の要素は文字列 `1999` であるべきです。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -68,7 +68,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`updateRecords(recordCollection, 2548, "tracks", "")` の実行後、`tracks` は設定されない必要があります。
|
||||
`updateRecords(recordCollection, 2548, "tracks", "")` の実行後、`tracks` は未設定であるべきです。
|
||||
|
||||
```js
|
||||
updateRecords(_recordCollection, 2548, 'tracks', '');
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: understanding-uninitialized-variables
|
||||
|
||||
# --description--
|
||||
|
||||
JavaScript で変数が宣言されるとき、その初期値は `undefined` です。 `undefined` の変数に対して数値演算を行うと、結果は `NaN` になります。これは、<dfn>"Not a Number" (数字ではない)</dfn> という意味です。 `undefined` の変数と文字列を連結すると、文字通り `undefined` という<dfn>文字列</dfn>が得られます。
|
||||
JavaScript で変数が宣言されるとき、その初期値は `undefined` です。 `undefined` の変数に対して数値演算を行うと、結果は `NaN` になります。これは、<dfn>"Not a Number" (数字ではない)</dfn> という意味です。 `undefined` の変数を文字列と連結した場合には、`undefined` という<dfn>文字列</dfn>が得られます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@@ -17,19 +17,19 @@ JavaScript で変数が宣言されるとき、その初期値は `undefined`
|
||||
|
||||
# --hints--
|
||||
|
||||
`a` を定義し、計算の結果 `6` の値を持つようにしてください。
|
||||
`a` を定義し、最終的な値が `6` になるようにしてください。
|
||||
|
||||
```js
|
||||
assert(typeof a === 'number' && a === 6);
|
||||
```
|
||||
|
||||
`b` を定義し、計算の結果 `15` の値を持つようにしてください。
|
||||
`b` を定義し、最終的な値が `15` になるようにしてください。
|
||||
|
||||
```js
|
||||
assert(typeof b === 'number' && b === 15);
|
||||
```
|
||||
|
||||
`c` は `undefined` を含まず、文字列の値 `I am a String!` を持つようにしてください。
|
||||
`c` は `undefined` を含まず、最終的な値が文字列の `I am a String!` になるようにしてください。
|
||||
|
||||
```js
|
||||
assert(!/undefined/.test(c) && c === 'I am a String!');
|
||||
|
||||
@@ -30,7 +30,7 @@ dashedName: timestamp-microservice
|
||||
};
|
||||
```
|
||||
|
||||
有効な日付を持つ `/api/:date?` へのリクエストに対して、JSON オブジェクトを返し、その `unix` キーの値は入力日付を表す Unix タイムスタンプ (ミリ秒) の値である必要があります。
|
||||
有効な日付を持つ `/api/:date?` へのリクエストに対して、JSON オブジェクトを返し、その `unix` キーの値は入力日付を表す Unix タイムスタンプ (ミリ秒単位で、データ型は Number) の値である必要があります。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e7b9f080b6c005b0e76f063
|
||||
title: ひと続きとして処理する
|
||||
title: ファイルをシーケンスとして扱う
|
||||
challengeType: 11
|
||||
videoId: cIA0EokbaHE
|
||||
bilibiliIds:
|
||||
|
||||
@@ -14,7 +14,7 @@ dashedName: iterations-loop-idioms
|
||||
|
||||
## --text--
|
||||
|
||||
次のコードでは、値のリストから最小値を見つけようとしています。 1 行にエラーがあり、コードが期待どおりに動作しません。 どの行ですか？
|
||||
次のコードでは、値のリストから最小値を見つけようとしています。 この中の 1 行に誤りがあり、コードが期待どおりに動作しません。 どの行ですか？
|
||||
|
||||
```python
|
||||
smallest = None
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 612e6afc009b450a437940a1
|
||||
title: ステップ 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML の基本的な構造から始めましょう。 `DOCTYPE` 宣言と、`html`、`head`、`body`、`title` 要素を追加してください。 `title` を `Piano` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードに `DOCTYPE` 参照を入れる必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
`DOCTYPE` 参照の後にスペースを入れる必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
ドキュメントのタイプが `html` であると定義する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
```
|
||||
|
||||
そのタイプの後ろに `>` を入力して、`DOCTYPE` 宣言を閉じる必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
`html` 要素には開始タグが必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>/gi));
|
||||
```
|
||||
|
||||
`html` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
`DOCTYPE` 宣言は HTML の先頭にある必要があります。
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
`head` の開始タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
`head` の終了タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
`body` の開始タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
`body` の終了タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
`head` 要素と `body` 要素は兄弟要素である必要があります。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
```
|
||||
|
||||
`head` 要素は `html` 要素の中にある必要があります。
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
`body` 要素は `html` 要素の中にある必要があります。
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
コードには `title` 要素が 1 つ必要です。
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
プロジェクトには `Piano` というタイトルが必要です。
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim()?.toLowerCase(), 'piano')
|
||||
```
|
||||
|
||||
タイトルについて、大文字小文字の区別とスペルに気をつけましょう。
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim(), 'Piano');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 612e813b3ba67633222cbe54
|
||||
title: ステップ 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`class` 属性には複数の値が設定できることを思い出しましょう。 黒鍵と白鍵を分けるため、`black--key` を `class` の 2 つ目の値として加えます。 これを 2 番目、3 番目、5 番目、6 番目、7 番目の `.key` 要素に加えてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
2 番目の `.key` 要素の `class` の値は `black--key` も含んでいる必要があります。
|
||||
|
||||
```js
|
||||
const key = document.querySelectorAll('.key')?.[1];
|
||||
assert(key?.className?.includes('black--key'));
|
||||
```
|
||||
|
||||
3 番目の `.key` 要素は `class` の値の中に `black--key` を含んでいる必要があります。
|
||||
|
||||
```js
|
||||
const third = document.querySelectorAll('.key')?.[2];
|
||||
assert(third?.classList?.contains('black--key'));
|
||||
```
|
||||
|
||||
5 番目の `.key` 要素は `class` の値の中に `black--key` を含んでいる必要があります。
|
||||
|
||||
```js
|
||||
const fifth = document.querySelectorAll('.key')?.[4];
|
||||
assert(fifth?.classList?.contains('black--key'));
|
||||
```
|
||||
|
||||
6 番目の `.key` 要素は `class` の値の中に `black--key` を含んでいる必要があります。
|
||||
|
||||
```js
|
||||
const sixth = document.querySelectorAll('.key')?.[5];
|
||||
assert(sixth?.classList?.contains('black--key'));
|
||||
```
|
||||
|
||||
7 番目の `.key` 要素は `class` の値の中に `black--key` を含んでいる必要があります。
|
||||
|
||||
```js
|
||||
const seventh = document.querySelectorAll('.key')?.[6];
|
||||
assert(seventh?.classList?.contains('black--key'));
|
||||
```
|
||||
|
||||
`.black--key` 要素が 5 つ必要です。
|
||||
|
||||
```js
|
||||
const blackKeys = document.querySelectorAll('.black--key');
|
||||
assert(blackKeys?.length === 5);
|
||||
```
|
||||
|
||||
`.key` 要素が 7 つ必要です。
|
||||
|
||||
```js
|
||||
const keys = document.querySelectorAll('.key');
|
||||
assert(keys?.length === 7);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key"></div>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 612e8279827a28352ce83a72
|
||||
title: ステップ 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ここで、`.key` の要素を 7 つまとめてコピーし、`.keys` の div 要素内に 2 セット追加で貼り付けてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.key` 要素が 21 個必要です。
|
||||
|
||||
```js
|
||||
const keys = document.querySelectorAll('.key');
|
||||
assert(keys?.length === 21);
|
||||
```
|
||||
|
||||
`.black--key` 要素が 15 個必要です。
|
||||
|
||||
```js
|
||||
const blackKeys = document.querySelectorAll('.black--key');
|
||||
assert(blackKeys?.length === 15);
|
||||
```
|
||||
|
||||
`.key` 要素はすべて `.keys` 要素の中にある必要があります。
|
||||
|
||||
```js
|
||||
const keys = document.querySelector('.keys');
|
||||
assert(keys?.querySelectorAll('.key')?.length === 21);
|
||||
```
|
||||
|
||||
`.black--key` 要素はすべて `.keys` 要素の中にある必要があります。
|
||||
|
||||
```js
|
||||
const keys = document.querySelector('.keys');
|
||||
assert(keys?.querySelectorAll('.black--key')?.length === 15);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 612e83ec2eca1e370f830511
|
||||
title: ステップ 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`link` 要素を 1 つ `head` 要素内に追加してください。 その `link` 要素の、`rel` 属性の値を `stylesheet` に、`href` 属性の値を `./styles.css` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードには `link` 要素が 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert.match(code, /<link/)
|
||||
```
|
||||
|
||||
既存の `head` タグを変更しないようにしてください。 終了タグを削除していないか確認してください。
|
||||
|
||||
```js
|
||||
const heads = document.querySelectorAll('head');
|
||||
assert.equal(heads?.length, 1);
|
||||
```
|
||||
|
||||
`link` 要素は自己閉じ要素である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<link[\w\W\s]+\/>/i));
|
||||
```
|
||||
|
||||
`link` 要素は `head` 要素の中にある必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
|
||||
```
|
||||
|
||||
`link` 要素は値が `stylesheet` に設定されている `rel` 属性を持つ必要があります。
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
|
||||
```
|
||||
|
||||
`link` 要素は値が `styles.css` に設定されている `href` 属性を持つ必要があります。
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
--fcc-editable-region--
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 612e89562043183c86df287c
|
||||
title: ステップ 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ブラウザーは、特定の要素にデフォルトのマージンとパディングの値を適用することがあります。 ピアノの外観を正しいものにするには、ボックスモデルをリセットする必要があります。
|
||||
|
||||
`html` のルールセレクターを CSS ファイルに加え、`box-sizing` プロパティの値を `border-box` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`html` 要素のセレクターが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('html'));
|
||||
```
|
||||
|
||||
`html` 要素のセレクターには値が `border-box` に設定されている `box-sizing` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 612e89d254fe5d3df7d6693d
|
||||
title: ステップ 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
これで `html` 要素のボックスモデルをリセットできたので、設定した値をその中の要素にも渡す必要があります。 そのためには、`box-sizing` プロパティの値に `inherit` を設定します。これは親要素と同じ値を使用するということを対象の要素に伝えます。
|
||||
|
||||
また、セレクターの後に続く特殊なキーワードである、疑似要素を指定する必要もあります。 これから使用する疑似要素は `::before` と `::after` の 2 つの疑似要素です。
|
||||
|
||||
`::before` セレクターは選択された要素の最初の子要素である疑似要素を作成し、`::after` セレクターは選択された要素の最後の子要素である疑似要素を作成します。 これらの疑似要素は、装飾的なコンテンツの作成によく使用されます。これについてはプロジェクトの後半で学習します。
|
||||
|
||||
ここでは、すべての要素を指定する CSS セレクターを `*` で作成し、`::before` と `::after` を使用して疑似要素も指定してください。 `box-sizing` プロパティの値を `inherit` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`*, ::before, ::after` セレクターが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
|
||||
```
|
||||
|
||||
`*, ::before, ::after` セレクターには値が `inherit` に設定されている `box-sizing` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 612e8eebe3a6dc3fcc33a66f
|
||||
title: ステップ 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ここで、`id` セレクターで `#piano` 要素を指定してください。 `background-color` プロパティの値を `#00471b` に、`width` プロパティの値を `992px` に、`height` プロパティの値を `290px` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#piano` セレクターが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#piano'));
|
||||
```
|
||||
|
||||
`#piano` セレクターには値が `#00471b` に設定されている `background-color` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
|
||||
```
|
||||
|
||||
`#piano` セレクターには値が `992px` に設定されている `width` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
|
||||
```
|
||||
|
||||
`#piano` セレクターには値が `290px` に設定されている `height` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 612e95ef2e4bdf41f69067f9
|
||||
title: ステップ 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`#piano` の `margin` の値を `80px auto` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#piano` セレクターには値が `80px auto` に設定されている `margin` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 612e96fc87fe8e44f69f7ec5
|
||||
title: ステップ 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
では、鍵盤のスタイルを設定しましょう。 `#piano` ルールの下に、`class` セレクターで `.keys` 要素を指定してください。 新しいルールには、`background-color` プロパティの値を `#040404` に、`width` プロパティの値を `949px` に、`height` プロパティの値を `180px` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.keys` セレクターが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.keys'));
|
||||
```
|
||||
|
||||
`.keys` セレクターには値が `#040404` に設定されている `background-color` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
|
||||
```
|
||||
|
||||
`.keys` セレクターには値が `949px` に設定されている `width` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
|
||||
```
|
||||
|
||||
`.keys` セレクターには値が `180px` に設定されている `height` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 612e98f3245c98475e49cfc6
|
||||
title: ステップ 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`.keys` の `padding-left` の値を `2px` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.keys` セレクターには値が `2px` に設定されている `padding-left` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 612e9a21381a1949327512e6
|
||||
title: ステップ 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`#piano` セレクターを調整して、鍵盤を所定の位置に移動させます。 `padding` プロパティの値を `90px 20px 0 20px` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#piano` セレクターには値が `90px 20px 0 20px` に設定されている `padding` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 612e9d142affc44a453655db
|
||||
title: ステップ 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
これから鍵盤の鍵一つ一つのスタイルを設定しましょう。 `.key` 要素用の `class` セレクターを作成してください。 `background-color` の値を `#ffffff` に、`position` プロパティの値を `relative` に、`width` プロパティの値を `41px` に、`height` プロパティの値を `175px` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.key` セレクターが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key'));
|
||||
```
|
||||
|
||||
`.key` セレクターには値が `#ffffff` に設定されている `background-color` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
`.key` セレクターには値が `relative` に設定されている `position` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
|
||||
```
|
||||
|
||||
`.key` セレクターには値が `41px` に設定されている `width` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
|
||||
```
|
||||
|
||||
`.key` セレクターには値が `175px` に設定されている `height` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
padding: 90px 20px 0 20px;
|
||||
}
|
||||
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 612e9f1e7e5ccd4fa9ada0be
|
||||
title: ステップ 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`.key` の `margin` の値を `2px` に、`float` プロパティの値を `left` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.key` セレクターには値が `2px` に設定されている `margin` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
|
||||
```
|
||||
|
||||
`.key` セレクターには値が `left` に設定されている `float` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
padding: 90px 20px 0 20px;
|
||||
}
|
||||
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.key {
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
width: 41px;
|
||||
height: 175px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 612ea4c4993aba52ab4aa32e
|
||||
title: ステップ 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ここで、以前のステップで説明した疑似要素を使用します。 黒鍵を作成するには、新しい `.key.black--key::after` セレクターを追加します。 これで、HTML 内のクラスが `key black--key` の要素を指定し、その後ろの疑似要素を選択できます。
|
||||
|
||||
新しいセレクターの中で、`background-color` の値を `#1d1e22` に設定してください。 また、`content` プロパティの値を `""` に設定してください。 これで疑似要素が空になります。
|
||||
|
||||
`content` プロパティは、要素の内容を設定したりオーバーライドするために使用されます。 デフォルトでは、`::before` と `::after` 疑似セレクターにより作成された疑似要素は空であり、ページには表示されません。 `content` プロパティの値を空の文字列 `""` に設定することで、ページに疑似要素が表示されるようになるものの、まだ空の状態です。
|
||||
|
||||
もし実験してみたければ、`background-color` プロパティを削除してから、`content` プロパティに `"♥"` などの異なる値を設定してみましょう。 実験が終わったら、テストに合格するためにこれらの変更を元に戻すことを忘れないようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.key.black--key::after` セレクターが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
|
||||
```
|
||||
|
||||
`.key.black--key::after` セレクターには値が `#1d1e22` に設定されている `background-color` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
|
||||
```
|
||||
|
||||
`.key.black--key::after` セレクターには値が `""` に設定されている `content` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
padding: 90px 20px 0 20px;
|
||||
}
|
||||
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.key {
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
width: 41px;
|
||||
height: 175px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 612ea97df5742154772f312e
|
||||
title: ステップ 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`.key.black--key::after` の `position` プロパティの値を `absolute` に、`left` プロパティの値を `-18px` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.key.black--key::after` セレクターには値が `absolute` に設定されている `position` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
|
||||
```
|
||||
|
||||
`.key.black--key::after` セレクターには値が `-18px` に設定されている `left` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
padding: 90px 20px 0 20px;
|
||||
}
|
||||
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.key {
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
width: 41px;
|
||||
height: 175px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.key.black--key::after {
|
||||
background-color: #1d1e22;
|
||||
content: "";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,112 @@
|
||||
---
|
||||
id: 612ead8788d28655ef8db056
|
||||
title: ステップ 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`.key.black--key::after` に対して、`width` の値を `32px` に、`height` の値を `100px` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.key.black--key::after` には値が `32px` に設定されている `width` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
|
||||
```
|
||||
|
||||
`.key.black--key::after` には値が `100px` に設定されている `height` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
padding: 90px 20px 0 20px;
|
||||
}
|
||||
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.key {
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
width: 41px;
|
||||
height: 175px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.key.black--key::after {
|
||||
background-color: #1d1e22;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user