mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-02-25 14:01:29 -05:00
chore(i18n,learn): processed translations (#45945)
This commit is contained in:
camperbot
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c242eddfaeb5bd13
|
||||
title: Build a Personal Portfolio Webpage
|
||||
title: 製作一個個人作品集展示頁
|
||||
challengeType: 14
|
||||
forumTopicId: 301143
|
||||
dashedName: build-a-personal-portfolio-webpage
|
||||
@@ -8,34 +8,34 @@ dashedName: build-a-personal-portfolio-webpage
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build an app that is functionally similar to <a href="https://personal-portfolio.freecodecamp.rocks" target="_blank">https://personal-portfolio.freecodecamp.rocks</a>
|
||||
**目標：** 構建一個功能類似於 <a href="https://personal-portfolio.freecodecamp.rocks" target="_blank">https://personal-portfolio.freecodecamp.rocks</a> 的應用程序
|
||||
|
||||
**User Stories:**
|
||||
**需求：**
|
||||
|
||||
1. Your portfolio should have a welcome section with an `id` of `welcome-section`
|
||||
1. The welcome section should have an `h1` element that contains text
|
||||
1. Your portfolio should have a projects section with an `id` of `projects`
|
||||
1. The projects section should contain at least one element with a `class` of `project-tile` to hold a project
|
||||
1. The projects section should contain at least one link to a project
|
||||
1. Your portfolio should have a navbar with an id of `navbar`
|
||||
1. The navbar should contain at least one link that you can click on to navigate to different sections of the page
|
||||
1. Your portfolio should have a link with an id of `profile-link`, which opens your GitHub or freeCodeCamp profile in a new tab
|
||||
1. Your portfolio should have at least one media query
|
||||
1. The height of the welcome section should be equal to the height of the viewport
|
||||
1. The navbar should always be at the top of the viewport
|
||||
1. 你的作品集應該有一個 `id` 爲 `welcome-section` 的歡迎部分
|
||||
1. 歡迎部分應該有一個包含文本的 `h1` 元素
|
||||
1. 你的作品集應該有一個 `id` 爲 `projects` 的項目部分
|
||||
1. 項目部分應該包含至少一個 `class` 爲 `project-tile` 的元素來保存項目
|
||||
1. 項目部分應該包含至少一個項目的鏈接
|
||||
1. 你的作品集應該有一個 id 爲 `navbar` 的導航欄
|
||||
1. 導航欄應該至少包含一個鏈接，你可以點擊它來導航到頁面的不同部分
|
||||
1. 你的作品集應該有一個 id 爲 `profile-link` 的鏈接，在新標籤中打開你的 GitHub 或 freeCodeCodeCamp 個人主頁
|
||||
1. 你的作品集應該至少有一個媒體查詢
|
||||
1. 歡迎部分的高度應該等於視口的高度
|
||||
1. 導航欄應該始終位於視口的頂部
|
||||
|
||||
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
|
||||
完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！
|
||||
|
||||
# --hints--
|
||||
|
||||
Your portfolio should have a "Welcome" section with an `id` of `welcome-section`.
|
||||
你的作品集應該有一個 `id` 爲 `welcome-section` 的歡迎部分。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('welcome-section')
|
||||
assert(!!el);
|
||||
```
|
||||
|
||||
Your `#welcom-section` element should contain an `h1` element.
|
||||
你的 `#welcom-section` 元素應該包含一個 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert.isAbove(
|
||||
@@ -45,7 +45,7 @@ assert.isAbove(
|
||||
);
|
||||
```
|
||||
|
||||
You should not have any empty `h1` elements within `#welcome-section` element.
|
||||
在 `#welcome-section` 元素中，你不應該有任何空的 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert.isAbove(
|
||||
@@ -56,14 +56,14 @@ assert.isAbove(
|
||||
);
|
||||
```
|
||||
|
||||
You should have a "Projects" section with an `id` of `projects`.
|
||||
你應該有一個 `id` 爲 `projects` 的項目部分。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('projects')
|
||||
assert(!!el);
|
||||
```
|
||||
|
||||
Your portfolio should contain at least one elment with a class of `project-tile`.
|
||||
你的作品集應該包含至少一個 class 爲 `project-tile` 的元素。
|
||||
|
||||
```js
|
||||
assert.isAbove(
|
||||
@@ -72,20 +72,20 @@ assert.isAbove(
|
||||
);
|
||||
```
|
||||
|
||||
Your `#projects` element should contain at least one `a` element.
|
||||
你的 `#projects` 元素應該包含至少一個 `a` 元素。
|
||||
|
||||
```js
|
||||
assert.isAbove(document.querySelectorAll('#projects a').length, 0);
|
||||
```
|
||||
|
||||
Your portfolio should have a navbar with an `id` of `navbar`.
|
||||
你的作品集應該有一個 `id` 爲 `navbar` 的導航欄。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('navbar');
|
||||
assert(!!el);
|
||||
```
|
||||
|
||||
Your `#navbar` element should contain at least one `a` element whose `href` attribute starts with `#`.
|
||||
你的 `#navbar` 元素應該包含至少一個 `a` 元素，它的 `href` 屬性以 `#` 開頭。
|
||||
|
||||
```js
|
||||
const links = [...document.querySelectorAll('#navbar a')].filter(
|
||||
@@ -99,27 +99,27 @@ assert.isAbove(
|
||||
);
|
||||
```
|
||||
|
||||
Your portfolio should have an `a` element with an `id` of `profile-link`.
|
||||
你的作品集應該有一個 `id` 爲 `profile-link` 的 `a` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('profile-link');
|
||||
assert(!!el && el.tagName === 'A')
|
||||
```
|
||||
|
||||
Your `#profile-link` element should have a `target` attribute of `_blank`.
|
||||
你的 `#profile-link` 元素應該有一個值爲 `_blank` 的 `target` 屬性。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('profile-link');
|
||||
assert(!!el && el.target === '_blank')
|
||||
```
|
||||
|
||||
Your portfolio should use at least one media query.
|
||||
你的作品集應該至少有一個媒體查詢。
|
||||
|
||||
```js
|
||||
assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1);
|
||||
```
|
||||
|
||||
Your `#navbar` element should always be at the top of the viewport.
|
||||
你的 `#navbar` 元素應該始終位於視口的頂部。
|
||||
|
||||
```js
|
||||
(async () => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b03
|
||||
title: Build a Survey Form
|
||||
title: 製作一個調查表格
|
||||
challengeType: 14
|
||||
forumTopicId: 301145
|
||||
dashedName: build-a-survey-form
|
||||
@@ -8,277 +8,277 @@ dashedName: build-a-survey-form
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build an app that is functionally similar to <a href="https://survey-form.freecodecamp.rocks" target="_blank">https://survey-form.freecodecamp.rocks</a>
|
||||
**目標：** 構建一個功能類似於 <a href="https://survey-form.freecodecamp.rocks" target="_blank">https://survey-form.freecodecamp.rocks</a> 的應用程序
|
||||
|
||||
**User Stories:**
|
||||
**需求：**
|
||||
|
||||
1. You should have a page title in an `h1` element with an `id` of `title`
|
||||
1. You should have a short explanation in a `p` element with an `id` of `description`
|
||||
1. You should have a `form` element with an `id` of `survey-form`
|
||||
1. Inside the form element, you are **required** to enter your name in an `input` field that has an `id` of `name` and a `type` of `text`
|
||||
1. Inside the form element, you are **required** to enter your email in an `input` field that has an `id` of `email`
|
||||
1. If you enter an email that is not formatted correctly, you will see an HTML5 validation error
|
||||
1. Inside the form, you can enter a number in an `input` field that has an `id` of `number`
|
||||
1. If you enter non-numbers in the number input, you will see an HTML5 validation error
|
||||
1. If you enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, you will see an HTML5 validation error
|
||||
1. For the name, email, and number input fields, you can see corresponding `label` elements in the form, that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"`
|
||||
1. For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field
|
||||
1. Inside the form element, you should have a `select` dropdown element with an `id` of `dropdown` and at least two options to choose from
|
||||
1. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the `name` attribute
|
||||
1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a `value` attribute
|
||||
1. Inside the form element, you are presented with a `textarea` for additional comments
|
||||
1. Inside the form element, you are presented with a button with `id` of `submit` to submit all the inputs
|
||||
1. 你應該有一個 `id` 爲 `title` 的 `h1` 元素
|
||||
1. 你應該有一個 `id` 爲 `description` 的 `p` 元素
|
||||
1. 你應該有一個 `id` 爲 `survey-form` 的 `form` 元素
|
||||
1. 在表單元素內，你**需要**在 `input` 字段中輸入你的名字，該字段的 `id` 爲 `name`，`type` 爲 `text`
|
||||
1. 在表單元素內，你**需要**在 `input` 字段中輸入你的郵箱，該字段的 `id` 爲 `email`
|
||||
1. 如果你輸入了格式不正確的郵箱，你將會看見 HTML5 驗證錯誤信息
|
||||
1. 在表單中，你可以在 `input` 字段中輸入一個數字，該字段的 `id` 爲 `number`
|
||||
1. 如果你在數字輸入框內輸入非數字內容，你會看到 HTML5 驗證錯誤信息
|
||||
1. 如果你輸入的數字超出了範圍（使用 `min` 和 `max` 屬性定義），你將會看見 HTML5 驗證錯誤信息
|
||||
1. 表單中的名字、郵箱和數字輸入框需有對應的包含描述輸入框用途的 `label` 元素，id 應分別爲 `id="name-label"`、`id="email-label"` 和 `id="number-label"`
|
||||
1. 在表單中的名字、郵箱和數字輸入框中，你能看到各自的描述文字作爲佔位符
|
||||
1. 在表單元素內， 你應該有一個 `select` 下拉元素， `id` 爲 `dropdown`，它至少有兩個選項
|
||||
1. 在表單元素內， 你可以從至少兩個單選按鈕的組中選擇一個選項，該選項使用 `name` 屬性
|
||||
1. 在表單元素內，你可以從一系列複選框中選擇幾個字段，每個複選框都必須具有 `value` 屬性
|
||||
1. 在表單元素內，你會有一個 `textarea` 以獲取額外的評論
|
||||
1. 在表單元素內，你將收到一個按鈕，其 `id` 爲 `submit`，提交所有輸入
|
||||
|
||||
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
|
||||
完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `h1` element with an `id` of `title`
|
||||
你應該有一個 `id` 爲 `title` 的 `h1` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el && el.tagName === 'H1')
|
||||
```
|
||||
|
||||
Your `#title` should not be empty
|
||||
你的 `#title` 不應爲空。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
You should have a `p` element with an `id` of `description`
|
||||
你應該有一個 `id` 爲 `description` 的 `p` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('description')
|
||||
assert(!!el && el.tagName === 'P')
|
||||
```
|
||||
|
||||
Your `#description` should not be empty
|
||||
你的 `#description` 不應爲空。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('description')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
You should have a `form` element with an `id` of `survey-form`
|
||||
你應該有一個 `id` 爲 `survey-form` 的 `form` 元素
|
||||
|
||||
```js
|
||||
const el = document.getElementById('survey-form')
|
||||
assert(!!el && el.tagName === 'FORM')
|
||||
```
|
||||
|
||||
You should have an `input` element with an `id` of `name`
|
||||
你應該有一個 `id` 爲 `name` 的 `input` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Your `#name` should have a `type` of `text`
|
||||
你的 `#name` 元素應該具有 `type` 爲 `text`。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.type === 'text')
|
||||
```
|
||||
|
||||
Your `#name` should require input
|
||||
你的 `#name` 元素應該需要輸入。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.required)
|
||||
```
|
||||
|
||||
Your `#name` should be a descedant of `#survey-form`
|
||||
你的 `#name` 元素應該是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #name')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have an `input` element with an `id` of `email`
|
||||
你應該有一個 `id` 爲 `email` 的 `input` 元素
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Your `#email` should have a `type` of `email`
|
||||
你的 `#email` 元素應該具有 `type` 爲 `email`。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.type === 'email')
|
||||
```
|
||||
|
||||
Your `#email` should require input
|
||||
你的 `#email` 元素應該需要輸入。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.required)
|
||||
```
|
||||
|
||||
Your `#email` should be a descedant of `#survey-form`
|
||||
你的 `#email` 元素應該是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #email')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have an `input` element with an `id` of `number`
|
||||
你應該有一個 `id` 爲 `number` 的 `input` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Your `#number` should be a descedant of `#survey-form`
|
||||
你的 `#number` 元素應該是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #number')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#number` should have a `type` of `number`
|
||||
你的 `#number` 元素應該具有 `type` 爲 `number`。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.type === 'number')
|
||||
```
|
||||
|
||||
Your `#number` should have a `min` attribute with a numeric value
|
||||
你的 `#number` 應該有一個值爲數字的 `min` 屬性。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.min && isFinite(el.min))
|
||||
```
|
||||
|
||||
Your `#number` should have a `max` attribute with a numeric value
|
||||
你的 `#number` 應該有一個值爲數字的 `max` 屬性。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.max && isFinite(el.max))
|
||||
```
|
||||
|
||||
You should have a `label` element with an `id` of `name-label`
|
||||
你應該有一個 `id` 爲 `name-label` 的 `label` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
You should have a `label` element with an `id` of `email-label`
|
||||
你應該有一個 `id` 爲 `email-label` 的 `label` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
You should have a `label` element with an `id` of `number-label`
|
||||
你應該有一個 `id` 爲 `number-label` 的 `label` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
Your `#name-label` should not be empty
|
||||
你的 `#name-label` 不應爲空。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Your `#email-label` should not be empty
|
||||
你的 `#email-label` 不應爲空。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Your `#number-label` should not be empty
|
||||
你的 `#number-label` 不應爲空。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Your `#name-label` should be a descedant of `#survey-form`
|
||||
你的 `#name-label` 元素應該是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #name-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#email-label` should be a descedant of `#survey-form`
|
||||
你的 `#email-label` 元素應該是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #email-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#number-label` should be a descedant of `#survey-form`
|
||||
你的 `#number-label` 元素應該是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #number-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#name` should have a `placeholder` attribute and value
|
||||
你的 `#name` 元素應該有 `placeholder` 屬性與佔位符文本。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
Your `#email` should have a `placeholder` attribute and value
|
||||
你的 `#email` 元素應該有 `placeholder` 屬性與佔位符文本。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
Your `#number` should have a `placeholder` attribute and value
|
||||
你的 `#number` 元素應該有 `placeholder` 屬性與佔位符文本。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
You should have a `select` field with an `id` of `dropdown`
|
||||
你應該有一個 `id` 爲 `dropdown` 的 `select` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('dropdown')
|
||||
assert(!!el && el.tagName === 'SELECT')
|
||||
```
|
||||
|
||||
Your `#dropdown` should have at least two selectable (not disabled) `option` elements
|
||||
你的 `#dropdown` 應該至少有兩個可選擇（未禁用）`option` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#dropdown option:not([disabled])')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
Your `#dropdown` should be a descendant of `#survey-form`
|
||||
你的 `#dropdown` 元素應該是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #dropdown')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have at least two `input` elements with a `type` of `radio` (radio buttons)
|
||||
你應該有至少兩個 `input` 元素，`type` 爲 `radio`（單選按鈕）。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('input[type="radio"]')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
You should have at least two radio buttons that are descendants of `#survey-form`
|
||||
你至少應該有兩個單選按鈕，是 `#survey-form` 的子元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#survey-form input[type="radio"]')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
All your radio buttons should have a `value` attribute and value
|
||||
你所有的單選按鈕都應該有一個 `value` 屬性和值。
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('input[type="radio"]')
|
||||
@@ -286,7 +286,7 @@ const els2 = document.querySelectorAll('input[type="radio"][value=""], input[typ
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
All your radio buttons should have a `name` attribute and value
|
||||
你所有的單選按鈕都應該有一個 `name` 屬性和值。
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('input[type="radio"]')
|
||||
@@ -294,7 +294,7 @@ const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
Every radio button group should have at least 2 radio buttons
|
||||
每個單選按鈕組應至少有 2 個單選按鈕。
|
||||
|
||||
```js
|
||||
const radioButtons = document.querySelectorAll('input[type="radio"]');
|
||||
@@ -316,14 +316,14 @@ groupKeys.forEach(key => {
|
||||
assert(groupKeys.length > 0)
|
||||
```
|
||||
|
||||
You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`
|
||||
你應該至少有兩個 `input` 元素，`type` 爲 `checkbox`（複選框），它們是 `#survey-form` 的子元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
All your checkboxes inside `#survey-form` should have a `value` attribute and value
|
||||
你在 `#survey-form` 中的所有複選框都應該有 `value` 屬性和值。
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
|
||||
@@ -331,28 +331,28 @@ const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][valu
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
You should have at least one `textarea` element that is a descendant of `#survey-form`
|
||||
你至少應該有一個 `textarea` 元素，它是 `#survey-form` 的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form textarea')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have an `input` or `button` element with an `id` of `submit`
|
||||
你應該有一個 `id` 爲 `submit` 的 `input` 或 `button` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
|
||||
```
|
||||
|
||||
Your `#submit` should have a `type` of `submit`
|
||||
你的 `#submit` 元素應該具有 `type` 爲 `submit`
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && el.type === 'submit')
|
||||
```
|
||||
|
||||
Your `#submit` should be a descendant of `#survey-form`
|
||||
你的 `#submit` 元素應該是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #submit')
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b05
|
||||
title: Build a Technical Documentation Page
|
||||
title: 製作一個技術文檔頁面
|
||||
challengeType: 14
|
||||
forumTopicId: 301146
|
||||
dashedName: build-a-technical-documentation-page
|
||||
@@ -8,45 +8,45 @@ dashedName: build-a-technical-documentation-page
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build an app that is functionally similar to <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank">https://technical-documentation-page.freecodecamp.rocks</a>
|
||||
**目標：** 構建一個功能類似於 <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank">https://technical-documentation-page.freecodecamp.rocks</a> 的應用程序
|
||||
|
||||
**User Stories:**
|
||||
**需求：**
|
||||
|
||||
1. You can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation)
|
||||
1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five
|
||||
1. The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section.
|
||||
1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`)
|
||||
1. The `.main-section` elements should contain at least ten `p` elements total (not each)
|
||||
1. The `.main-section` elements should contain at least five `code` elements total (not each)
|
||||
1. The `.main-section` elements should contain at least five `li` items total (not each)
|
||||
1. You can see a `nav` element with a corresponding `id="navbar"`
|
||||
1. The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation
|
||||
1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section`
|
||||
1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar
|
||||
1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world")
|
||||
1. When you click on a navbar element, the page should navigate to the corresponding section of the `main-doc` element (e.g. If you click on a `nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header)
|
||||
1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user
|
||||
1. Your technical documentation should use at least one media query
|
||||
1. 你能看見一個 `id="main-doc"` 的 `main`元素，它包含頁面的主要內容（技術文檔）。
|
||||
1. 在 `#main-doc` 元素內，我能看見至少 5 個 `section` 元素，每個元素都有一個 class 爲 `main-section`。 應存在至少 5 個這樣的元素。
|
||||
1. 每個 `.main-section` 中的第一個元素應該是 `header` 元素，其中包含描述該部分主題的文本。
|
||||
1. class 爲 `main-section` 的每個 `section` 元素應該有一個與包含在其中的每個 `header` 的文本相對應的 `id`。 所有空格都應該被替換爲下劃線（例如，包含標題 “JavaScript and Java” 的 section 應有一個相應的 `id="JavaScript_and_Java"`）。
|
||||
1. 所有 `.main-section` 元素總計（不是每個）包含至少 10 個 `p` 元素。
|
||||
1. 所有 `.main-section` 元素總計（不是每個）包含至少 5 個 `code` 元素。
|
||||
1. 所有 `.main-section` 元素總計（不是每個）包含至少 5 個 `li` 元素。
|
||||
1. 你能看見一個 `id="navbar"` 的 `nav` 元素。
|
||||
1. navbar 元素應包含一個 `header` 元素，其中包含描述技術文檔主題的文本。
|
||||
1. 此外，導航欄應包含 class 爲 `nav-link` 的鏈接元素（`a`）。 每個 class 爲 `main-section` 的元素都需要有一個。
|
||||
1. `#navbar` 中的 `header` 元素必須在任何鏈接 (`a`) 之前。
|
||||
1. class 爲 `nav-link` 的每個元素都應該包含每個 `section` 的 `header` 文本對應的文本（例如，如果你有一個 “Hello world” 部分/標題，你的導航欄應該有一個包含文本 “Hello world” 的元素）。
|
||||
1. 當你點擊一個 navbar 元素時，頁面應該導航到 `main-doc` 元素的相應部分（例如，如果你點擊包含文本 “Hello world” 的 `nav-link` 元素，頁面將導航到一個帶有對應 header 和 id 的 `section` 元素）。
|
||||
1. 在常規尺寸的設備上（筆記本電腦、臺式機），帶有 `id="navbar"` 的元素應該顯示在屏幕左側，並且始終對用戶可見。
|
||||
1. 你的技術文檔應該使用至少一個媒體查詢。
|
||||
|
||||
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
|
||||
完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `main` element with an `id` of `main-doc`
|
||||
你應該有一個 `id` 爲 `main-doc` 的 `main` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('main-doc')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have at least five `section` elements with a class of `main-section`
|
||||
你至少應該有 5 個 class 爲 `main-section` 的 `section` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#main-doc section')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
All of your `.main-section` elements should be `section` elements
|
||||
你所有的 `.main-section` 元素都應該是 `section` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
@@ -56,14 +56,14 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
You should have at least five `.main-section` elements that are descendants of `#main-doc`
|
||||
你至少應該有 5 個 `.main-section` 元素，它們是 `#main-doc` 的子元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#main-doc .main-section')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
The first child of each `.main-section` should be a `header` element
|
||||
每個 `.main-section` 的第一個子元素都應該是一個 `header` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
@@ -73,7 +73,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
None of your `header` elements should be empty
|
||||
你的 `header` 元素不應爲空。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('header')
|
||||
@@ -83,7 +83,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
All of your `.main-section` elements should have an `id`
|
||||
你所有的 `.main-section` 元素都應該有 `id`。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
@@ -93,7 +93,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id’s
|
||||
每個 `.main-section` 都應該有一個與其第一個子元素的文本匹配的 `id`，把子元素的文本中的空格都替換爲下劃線（`_`）用於 id。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
@@ -104,49 +104,49 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
You should have at least 10 `p` elements (total) within your `.main-section` elements
|
||||
在你的 `.main-section` 元素中應該至少有 10 個 `p` 元素（總計）。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section p')
|
||||
assert(els.length >= 10)
|
||||
```
|
||||
|
||||
You should have at least five `code` elements that are descendants of `.main-section` elements
|
||||
所有 `.main-section` 元素內總計應有至少 5 個 `code` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section code')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
You should have at least five `li` elements that are descendants of `.main-section` elements
|
||||
所有 `.main-section` 元素內總計應有至少 5 個 `li` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section li')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
You should have a `nav` element with an `id` of `navbar`
|
||||
你應該有一個 `id` 爲 `navbar` 的 `nav` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('navbar')
|
||||
assert(!!el && el.tagName === 'NAV')
|
||||
```
|
||||
|
||||
Your `#navbar` should have exactly one `header` element within it
|
||||
你的 `#navbar` 應該只有一個 `header` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#navbar header')
|
||||
assert(els.length === 1)
|
||||
```
|
||||
|
||||
You should have at least one `a` element with a class of `nav-link`
|
||||
你應該至少有一個 class 爲 `nav-link` 的 `a` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('a[class="nav-link"]')
|
||||
assert(els.length >= 1)
|
||||
```
|
||||
|
||||
All of your `.nav-link` elements should be anchor (`a`) elements
|
||||
你所有的 `.nav-link` 元素都應該是錨點（`a`）元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.nav-link')
|
||||
@@ -156,7 +156,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
All of your `.nav-link` elements should be in the `#navbar`
|
||||
你所有的 `.nav-link` 元素都應該在 `#navbar` 中。
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('.nav-link')
|
||||
@@ -164,7 +164,7 @@ const els2 = document.querySelectorAll('#navbar .nav-link')
|
||||
assert(els2.length > 0 && els1.length === els2.length)
|
||||
```
|
||||
|
||||
You should have the same number of `.nav-link` and `.main-section` elements
|
||||
你應該有相同數量的 `.nav-link` 和 `.main-section` 元素。
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('.main-section')
|
||||
@@ -172,7 +172,7 @@ const els2 = document.querySelectorAll('.nav-link')
|
||||
assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
|
||||
```
|
||||
|
||||
The `header` element in the `#navbar` should come before any link (`a`) elements also in the `#navbar`
|
||||
`#navbar` 中的 `header` 元素必須在 `#navbar` 中的任何鏈接 (`a`) 之前。
|
||||
|
||||
```js
|
||||
const navLinks = document.querySelectorAll('#navbar a.nav-link');
|
||||
@@ -188,7 +188,7 @@ navLinks.forEach((navLink) => {
|
||||
assert(!!header)
|
||||
```
|
||||
|
||||
Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world")
|
||||
每個 `.nav-link` 應該有與其相關 `section` 的 `header` 文本相對應的文本（例如，如果你有一個 “Hello world” 部分/標題，你的 `#navbar` 應該有一個 `.nav-link` 包含文本 “Hello world”）。
|
||||
|
||||
```js
|
||||
const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
|
||||
@@ -201,7 +201,7 @@ const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
|
||||
assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0)
|
||||
```
|
||||
|
||||
Each `.nav-link` should have an `href` attribute that links to its corresponding `.main-section` (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id)
|
||||
每個 `.nav-link` 都應該有一個 `href` 屬性，該屬性鏈接到其對應的 `.main-section`（例如，如果你單擊包含文本 “Hello world” 的 `.nav-link` 元素，頁面導航到具有該 id 的 `section` 元素）。
|
||||
|
||||
```js
|
||||
const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
|
||||
@@ -210,7 +210,7 @@ const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' +
|
||||
assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
|
||||
```
|
||||
|
||||
Your `#navbar` should always be on the left edge of the window
|
||||
你的 `#navbar` 元素應該始終位於視口的頂部。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('navbar')
|
||||
@@ -219,7 +219,7 @@ const left2 = el?.offsetLeft
|
||||
assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
|
||||
```
|
||||
|
||||
Your Technical Documentation project should use at least one media query
|
||||
你的技術文檔項目應該使用至少一個媒體查詢。
|
||||
|
||||
```js
|
||||
assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c242eddfaeb5bd13
|
||||
title: Build a Personal Portfolio Webpage
|
||||
title: 制作一个个人作品集展示页
|
||||
challengeType: 14
|
||||
forumTopicId: 301143
|
||||
dashedName: build-a-personal-portfolio-webpage
|
||||
@@ -8,34 +8,34 @@ dashedName: build-a-personal-portfolio-webpage
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build an app that is functionally similar to <a href="https://personal-portfolio.freecodecamp.rocks" target="_blank">https://personal-portfolio.freecodecamp.rocks</a>
|
||||
**目标：** 构建一个功能类似于 <a href="https://personal-portfolio.freecodecamp.rocks" target="_blank">https://personal-portfolio.freecodecamp.rocks</a> 的应用程序
|
||||
|
||||
**User Stories:**
|
||||
**需求：**
|
||||
|
||||
1. Your portfolio should have a welcome section with an `id` of `welcome-section`
|
||||
1. The welcome section should have an `h1` element that contains text
|
||||
1. Your portfolio should have a projects section with an `id` of `projects`
|
||||
1. The projects section should contain at least one element with a `class` of `project-tile` to hold a project
|
||||
1. The projects section should contain at least one link to a project
|
||||
1. Your portfolio should have a navbar with an id of `navbar`
|
||||
1. The navbar should contain at least one link that you can click on to navigate to different sections of the page
|
||||
1. Your portfolio should have a link with an id of `profile-link`, which opens your GitHub or freeCodeCamp profile in a new tab
|
||||
1. Your portfolio should have at least one media query
|
||||
1. The height of the welcome section should be equal to the height of the viewport
|
||||
1. The navbar should always be at the top of the viewport
|
||||
1. 你的作品集应该有一个 `id` 为 `welcome-section` 的欢迎部分
|
||||
1. 欢迎部分应该有一个包含文本的 `h1` 元素
|
||||
1. 你的作品集应该有一个 `id` 为 `projects` 的项目部分
|
||||
1. 项目部分应该包含至少一个 `class` 为 `project-tile` 的元素来保存项目
|
||||
1. 项目部分应该包含至少一个项目的链接
|
||||
1. 你的作品集应该有一个 id 为 `navbar` 的导航栏
|
||||
1. 导航栏应该至少包含一个链接，你可以点击它来导航到页面的不同部分
|
||||
1. 你的作品集应该有一个 id 为 `profile-link` 的链接，在新标签中打开你的 GitHub 或 freeCodeCodeCamp 个人主页
|
||||
1. 你的作品集应该至少有一个媒体查询
|
||||
1. 欢迎部分的高度应该等于视口的高度
|
||||
1. 导航栏应该始终位于视口的顶部
|
||||
|
||||
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
|
||||
完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！
|
||||
|
||||
# --hints--
|
||||
|
||||
Your portfolio should have a "Welcome" section with an `id` of `welcome-section`.
|
||||
你的作品集应该有一个 `id` 为 `welcome-section` 的欢迎部分。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('welcome-section')
|
||||
assert(!!el);
|
||||
```
|
||||
|
||||
Your `#welcom-section` element should contain an `h1` element.
|
||||
你的 `#welcom-section` 元素应该包含一个 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert.isAbove(
|
||||
@@ -45,7 +45,7 @@ assert.isAbove(
|
||||
);
|
||||
```
|
||||
|
||||
You should not have any empty `h1` elements within `#welcome-section` element.
|
||||
在 `#welcome-section` 元素中，你不应该有任何空的 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert.isAbove(
|
||||
@@ -56,14 +56,14 @@ assert.isAbove(
|
||||
);
|
||||
```
|
||||
|
||||
You should have a "Projects" section with an `id` of `projects`.
|
||||
你应该有一个 `id` 为 `projects` 的项目部分。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('projects')
|
||||
assert(!!el);
|
||||
```
|
||||
|
||||
Your portfolio should contain at least one elment with a class of `project-tile`.
|
||||
你的作品集应该包含至少一个 class 为 `project-tile` 的元素。
|
||||
|
||||
```js
|
||||
assert.isAbove(
|
||||
@@ -72,20 +72,20 @@ assert.isAbove(
|
||||
);
|
||||
```
|
||||
|
||||
Your `#projects` element should contain at least one `a` element.
|
||||
你的 `#projects` 元素应该包含至少一个 `a` 元素。
|
||||
|
||||
```js
|
||||
assert.isAbove(document.querySelectorAll('#projects a').length, 0);
|
||||
```
|
||||
|
||||
Your portfolio should have a navbar with an `id` of `navbar`.
|
||||
你的作品集应该有一个 `id` 为 `navbar` 的导航栏。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('navbar');
|
||||
assert(!!el);
|
||||
```
|
||||
|
||||
Your `#navbar` element should contain at least one `a` element whose `href` attribute starts with `#`.
|
||||
你的 `#navbar` 元素应该包含至少一个 `a` 元素，它的 `href` 属性以 `#` 开头。
|
||||
|
||||
```js
|
||||
const links = [...document.querySelectorAll('#navbar a')].filter(
|
||||
@@ -99,27 +99,27 @@ assert.isAbove(
|
||||
);
|
||||
```
|
||||
|
||||
Your portfolio should have an `a` element with an `id` of `profile-link`.
|
||||
你的作品集应该有一个 `id` 为 `profile-link` 的 `a` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('profile-link');
|
||||
assert(!!el && el.tagName === 'A')
|
||||
```
|
||||
|
||||
Your `#profile-link` element should have a `target` attribute of `_blank`.
|
||||
你的 `#profile-link` 元素应该有一个值为 `_blank` 的 `target` 属性。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('profile-link');
|
||||
assert(!!el && el.target === '_blank')
|
||||
```
|
||||
|
||||
Your portfolio should use at least one media query.
|
||||
你的作品集应该至少有一个媒体查询。
|
||||
|
||||
```js
|
||||
assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1);
|
||||
```
|
||||
|
||||
Your `#navbar` element should always be at the top of the viewport.
|
||||
你的 `#navbar` 元素应该始终位于视口的顶部。
|
||||
|
||||
```js
|
||||
(async () => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b03
|
||||
title: Build a Survey Form
|
||||
title: 制作一个调查表格
|
||||
challengeType: 14
|
||||
forumTopicId: 301145
|
||||
dashedName: build-a-survey-form
|
||||
@@ -8,277 +8,277 @@ dashedName: build-a-survey-form
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build an app that is functionally similar to <a href="https://survey-form.freecodecamp.rocks" target="_blank">https://survey-form.freecodecamp.rocks</a>
|
||||
**目标：** 构建一个功能类似于 <a href="https://survey-form.freecodecamp.rocks" target="_blank">https://survey-form.freecodecamp.rocks</a> 的应用程序
|
||||
|
||||
**User Stories:**
|
||||
**需求：**
|
||||
|
||||
1. You should have a page title in an `h1` element with an `id` of `title`
|
||||
1. You should have a short explanation in a `p` element with an `id` of `description`
|
||||
1. You should have a `form` element with an `id` of `survey-form`
|
||||
1. Inside the form element, you are **required** to enter your name in an `input` field that has an `id` of `name` and a `type` of `text`
|
||||
1. Inside the form element, you are **required** to enter your email in an `input` field that has an `id` of `email`
|
||||
1. If you enter an email that is not formatted correctly, you will see an HTML5 validation error
|
||||
1. Inside the form, you can enter a number in an `input` field that has an `id` of `number`
|
||||
1. If you enter non-numbers in the number input, you will see an HTML5 validation error
|
||||
1. If you enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, you will see an HTML5 validation error
|
||||
1. For the name, email, and number input fields, you can see corresponding `label` elements in the form, that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"`
|
||||
1. For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field
|
||||
1. Inside the form element, you should have a `select` dropdown element with an `id` of `dropdown` and at least two options to choose from
|
||||
1. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the `name` attribute
|
||||
1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a `value` attribute
|
||||
1. Inside the form element, you are presented with a `textarea` for additional comments
|
||||
1. Inside the form element, you are presented with a button with `id` of `submit` to submit all the inputs
|
||||
1. 你应该有一个 `id` 为 `title` 的 `h1` 元素
|
||||
1. 你应该有一个 `id` 为 `description` 的 `p` 元素
|
||||
1. 你应该有一个 `id` 为 `survey-form` 的 `form` 元素
|
||||
1. 在表单元素内，你**需要**在 `input` 字段中输入你的名字，该字段的 `id` 为 `name`，`type` 为 `text`
|
||||
1. 在表单元素内，你**需要**在 `input` 字段中输入你的邮箱，该字段的 `id` 为 `email`
|
||||
1. 如果你输入了格式不正确的邮箱，你将会看见 HTML5 验证错误信息
|
||||
1. 在表单中，你可以在 `input` 字段中输入一个数字，该字段的 `id` 为 `number`
|
||||
1. 如果你在数字输入框内输入非数字内容，你会看到 HTML5 验证错误信息
|
||||
1. 如果你输入的数字超出了范围（使用 `min` 和 `max` 属性定义），你将会看见 HTML5 验证错误信息
|
||||
1. 表单中的名字、邮箱和数字输入框需有对应的包含描述输入框用途的 `label` 元素，id 应分别为 `id="name-label"`、`id="email-label"` 和 `id="number-label"`
|
||||
1. 在表单中的名字、邮箱和数字输入框中，你能看到各自的描述文字作为占位符
|
||||
1. 在表单元素内， 你应该有一个 `select` 下拉元素， `id` 为 `dropdown`，它至少有两个选项
|
||||
1. 在表单元素内， 你可以从至少两个单选按钮的组中选择一个选项，该选项使用 `name` 属性
|
||||
1. 在表单元素内，你可以从一系列复选框中选择几个字段，每个复选框都必须具有 `value` 属性
|
||||
1. 在表单元素内，你会有一个 `textarea` 以获取额外的评论
|
||||
1. 在表单元素内，你将收到一个按钮，其 `id` 为 `submit`，提交所有输入
|
||||
|
||||
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
|
||||
完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `h1` element with an `id` of `title`
|
||||
你应该有一个 `id` 为 `title` 的 `h1` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el && el.tagName === 'H1')
|
||||
```
|
||||
|
||||
Your `#title` should not be empty
|
||||
你的 `#title` 不应为空。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
You should have a `p` element with an `id` of `description`
|
||||
你应该有一个 `id` 为 `description` 的 `p` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('description')
|
||||
assert(!!el && el.tagName === 'P')
|
||||
```
|
||||
|
||||
Your `#description` should not be empty
|
||||
你的 `#description` 不应为空。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('description')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
You should have a `form` element with an `id` of `survey-form`
|
||||
你应该有一个 `id` 为 `survey-form` 的 `form` 元素
|
||||
|
||||
```js
|
||||
const el = document.getElementById('survey-form')
|
||||
assert(!!el && el.tagName === 'FORM')
|
||||
```
|
||||
|
||||
You should have an `input` element with an `id` of `name`
|
||||
你应该有一个 `id` 为 `name` 的 `input` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Your `#name` should have a `type` of `text`
|
||||
你的 `#name` 元素应该具有 `type` 为 `text`。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.type === 'text')
|
||||
```
|
||||
|
||||
Your `#name` should require input
|
||||
你的 `#name` 元素应该需要输入。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.required)
|
||||
```
|
||||
|
||||
Your `#name` should be a descedant of `#survey-form`
|
||||
你的 `#name` 元素应该是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #name')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have an `input` element with an `id` of `email`
|
||||
你应该有一个 `id` 为 `email` 的 `input` 元素
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Your `#email` should have a `type` of `email`
|
||||
你的 `#email` 元素应该具有 `type` 为 `email`。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.type === 'email')
|
||||
```
|
||||
|
||||
Your `#email` should require input
|
||||
你的 `#email` 元素应该需要输入。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.required)
|
||||
```
|
||||
|
||||
Your `#email` should be a descedant of `#survey-form`
|
||||
你的 `#email` 元素应该是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #email')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have an `input` element with an `id` of `number`
|
||||
你应该有一个 `id` 为 `number` 的 `input` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Your `#number` should be a descedant of `#survey-form`
|
||||
你的 `#number` 元素应该是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #number')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#number` should have a `type` of `number`
|
||||
你的 `#number` 元素应该具有 `type` 为 `number`。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.type === 'number')
|
||||
```
|
||||
|
||||
Your `#number` should have a `min` attribute with a numeric value
|
||||
你的 `#number` 应该有一个值为数字的 `min` 属性。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.min && isFinite(el.min))
|
||||
```
|
||||
|
||||
Your `#number` should have a `max` attribute with a numeric value
|
||||
你的 `#number` 应该有一个值为数字的 `max` 属性。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.max && isFinite(el.max))
|
||||
```
|
||||
|
||||
You should have a `label` element with an `id` of `name-label`
|
||||
你应该有一个 `id` 为 `name-label` 的 `label` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
You should have a `label` element with an `id` of `email-label`
|
||||
你应该有一个 `id` 为 `email-label` 的 `label` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
You should have a `label` element with an `id` of `number-label`
|
||||
你应该有一个 `id` 为 `number-label` 的 `label` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
Your `#name-label` should not be empty
|
||||
你的 `#name-label` 不应为空。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Your `#email-label` should not be empty
|
||||
你的 `#email-label` 不应为空。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Your `#number-label` should not be empty
|
||||
你的 `#number-label` 不应为空。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Your `#name-label` should be a descedant of `#survey-form`
|
||||
你的 `#name-label` 元素应该是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #name-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#email-label` should be a descedant of `#survey-form`
|
||||
你的 `#email-label` 元素应该是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #email-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#number-label` should be a descedant of `#survey-form`
|
||||
你的 `#number-label` 元素应该是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #number-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#name` should have a `placeholder` attribute and value
|
||||
你的 `#name` 元素应该有 `placeholder` 属性与占位符文本。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
Your `#email` should have a `placeholder` attribute and value
|
||||
你的 `#email` 元素应该有 `placeholder` 属性与占位符文本。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
Your `#number` should have a `placeholder` attribute and value
|
||||
你的 `#number` 元素应该有 `placeholder` 属性与占位符文本。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
You should have a `select` field with an `id` of `dropdown`
|
||||
你应该有一个 `id` 为 `dropdown` 的 `select` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('dropdown')
|
||||
assert(!!el && el.tagName === 'SELECT')
|
||||
```
|
||||
|
||||
Your `#dropdown` should have at least two selectable (not disabled) `option` elements
|
||||
你的 `#dropdown` 应该至少有两个可选择（未禁用）`option` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#dropdown option:not([disabled])')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
Your `#dropdown` should be a descendant of `#survey-form`
|
||||
你的 `#dropdown` 元素应该是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #dropdown')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have at least two `input` elements with a `type` of `radio` (radio buttons)
|
||||
你应该有至少两个 `input` 元素，`type` 为 `radio`（单选按钮）。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('input[type="radio"]')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
You should have at least two radio buttons that are descendants of `#survey-form`
|
||||
你至少应该有两个单选按钮，是 `#survey-form` 的子元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#survey-form input[type="radio"]')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
All your radio buttons should have a `value` attribute and value
|
||||
你所有的单选按钮都应该有一个 `value` 属性和值。
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('input[type="radio"]')
|
||||
@@ -286,7 +286,7 @@ const els2 = document.querySelectorAll('input[type="radio"][value=""], input[typ
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
All your radio buttons should have a `name` attribute and value
|
||||
你所有的单选按钮都应该有一个 `name` 属性和值。
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('input[type="radio"]')
|
||||
@@ -294,7 +294,7 @@ const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
Every radio button group should have at least 2 radio buttons
|
||||
每个单选按钮组应至少有 2 个单选按钮。
|
||||
|
||||
```js
|
||||
const radioButtons = document.querySelectorAll('input[type="radio"]');
|
||||
@@ -316,14 +316,14 @@ groupKeys.forEach(key => {
|
||||
assert(groupKeys.length > 0)
|
||||
```
|
||||
|
||||
You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`
|
||||
你应该至少有两个 `input` 元素，`type` 为 `checkbox`（复选框），它们是 `#survey-form` 的子元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
All your checkboxes inside `#survey-form` should have a `value` attribute and value
|
||||
你在 `#survey-form` 中的所有复选框都应该有 `value` 属性和值。
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
|
||||
@@ -331,28 +331,28 @@ const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][valu
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
You should have at least one `textarea` element that is a descendant of `#survey-form`
|
||||
你至少应该有一个 `textarea` 元素，它是 `#survey-form` 的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form textarea')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have an `input` or `button` element with an `id` of `submit`
|
||||
你应该有一个 `id` 为 `submit` 的 `input` 或 `button` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
|
||||
```
|
||||
|
||||
Your `#submit` should have a `type` of `submit`
|
||||
你的 `#submit` 元素应该具有 `type` 为 `submit`
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && el.type === 'submit')
|
||||
```
|
||||
|
||||
Your `#submit` should be a descendant of `#survey-form`
|
||||
你的 `#submit` 元素应该是 `#survey-form` 元素的子元素。
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #submit')
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b05
|
||||
title: Build a Technical Documentation Page
|
||||
title: 制作一个技术文档页面
|
||||
challengeType: 14
|
||||
forumTopicId: 301146
|
||||
dashedName: build-a-technical-documentation-page
|
||||
@@ -8,45 +8,45 @@ dashedName: build-a-technical-documentation-page
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build an app that is functionally similar to <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank">https://technical-documentation-page.freecodecamp.rocks</a>
|
||||
**目标：** 构建一个功能类似于 <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank">https://technical-documentation-page.freecodecamp.rocks</a> 的应用程序
|
||||
|
||||
**User Stories:**
|
||||
**需求：**
|
||||
|
||||
1. You can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation)
|
||||
1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five
|
||||
1. The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section.
|
||||
1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`)
|
||||
1. The `.main-section` elements should contain at least ten `p` elements total (not each)
|
||||
1. The `.main-section` elements should contain at least five `code` elements total (not each)
|
||||
1. The `.main-section` elements should contain at least five `li` items total (not each)
|
||||
1. You can see a `nav` element with a corresponding `id="navbar"`
|
||||
1. The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation
|
||||
1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section`
|
||||
1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar
|
||||
1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world")
|
||||
1. When you click on a navbar element, the page should navigate to the corresponding section of the `main-doc` element (e.g. If you click on a `nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header)
|
||||
1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user
|
||||
1. Your technical documentation should use at least one media query
|
||||
1. 你能看见一个 `id="main-doc"` 的 `main`元素，它包含页面的主要内容（技术文档）。
|
||||
1. 在 `#main-doc` 元素内，我能看见至少 5 个 `section` 元素，每个元素都有一个 class 为 `main-section`。 应存在至少 5 个这样的元素。
|
||||
1. 每个 `.main-section` 中的第一个元素应该是 `header` 元素，其中包含描述该部分主题的文本。
|
||||
1. class 为 `main-section` 的每个 `section` 元素应该有一个与包含在其中的每个 `header` 的文本相对应的 `id`。 所有空格都应该被替换为下划线（例如，包含标题 “JavaScript and Java” 的 section 应有一个相应的 `id="JavaScript_and_Java"`）。
|
||||
1. 所有 `.main-section` 元素总计（不是每个）包含至少 10 个 `p` 元素。
|
||||
1. 所有 `.main-section` 元素总计（不是每个）包含至少 5 个 `code` 元素。
|
||||
1. 所有 `.main-section` 元素总计（不是每个）包含至少 5 个 `li` 元素。
|
||||
1. 你能看见一个 `id="navbar"` 的 `nav` 元素。
|
||||
1. navbar 元素应包含一个 `header` 元素，其中包含描述技术文档主题的文本。
|
||||
1. 此外，导航栏应包含 class 为 `nav-link` 的链接元素（`a`）。 每个 class 为 `main-section` 的元素都需要有一个。
|
||||
1. `#navbar` 中的 `header` 元素必须在任何链接 (`a`) 之前。
|
||||
1. class 为 `nav-link` 的每个元素都应该包含每个 `section` 的 `header` 文本对应的文本（例如，如果你有一个 “Hello world” 部分/标题，你的导航栏应该有一个包含文本 “Hello world” 的元素）。
|
||||
1. 当你点击一个 navbar 元素时，页面应该导航到 `main-doc` 元素的相应部分（例如，如果你点击包含文本 “Hello world” 的 `nav-link` 元素，页面将导航到一个带有对应 header 和 id 的 `section` 元素）。
|
||||
1. 在常规尺寸的设备上（笔记本电脑、台式机），带有 `id="navbar"` 的元素应该显示在屏幕左侧，并且始终对用户可见。
|
||||
1. 你的技术文档应该使用至少一个媒体查询。
|
||||
|
||||
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
|
||||
完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `main` element with an `id` of `main-doc`
|
||||
你应该有一个 `id` 为 `main-doc` 的 `main` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('main-doc')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have at least five `section` elements with a class of `main-section`
|
||||
你至少应该有 5 个 class 为 `main-section` 的 `section` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#main-doc section')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
All of your `.main-section` elements should be `section` elements
|
||||
你所有的 `.main-section` 元素都应该是 `section` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
@@ -56,14 +56,14 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
You should have at least five `.main-section` elements that are descendants of `#main-doc`
|
||||
你至少应该有 5 个 `.main-section` 元素，它们是 `#main-doc` 的子元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#main-doc .main-section')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
The first child of each `.main-section` should be a `header` element
|
||||
每个 `.main-section` 的第一个子元素都应该是一个 `header` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
@@ -73,7 +73,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
None of your `header` elements should be empty
|
||||
你的 `header` 元素不应为空。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('header')
|
||||
@@ -83,7 +83,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
All of your `.main-section` elements should have an `id`
|
||||
你所有的 `.main-section` 元素都应该有 `id`。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
@@ -93,7 +93,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id’s
|
||||
每个 `.main-section` 都应该有一个与其第一个子元素的文本匹配的 `id`，把子元素的文本中的空格都替换为下划线（`_`）用于 id。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
@@ -104,49 +104,49 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
You should have at least 10 `p` elements (total) within your `.main-section` elements
|
||||
在你的 `.main-section` 元素中应该至少有 10 个 `p` 元素（总计）。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section p')
|
||||
assert(els.length >= 10)
|
||||
```
|
||||
|
||||
You should have at least five `code` elements that are descendants of `.main-section` elements
|
||||
所有 `.main-section` 元素内总计应有至少 5 个 `code` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section code')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
You should have at least five `li` elements that are descendants of `.main-section` elements
|
||||
所有 `.main-section` 元素内总计应有至少 5 个 `li` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section li')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
You should have a `nav` element with an `id` of `navbar`
|
||||
你应该有一个 `id` 为 `navbar` 的 `nav` 元素。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('navbar')
|
||||
assert(!!el && el.tagName === 'NAV')
|
||||
```
|
||||
|
||||
Your `#navbar` should have exactly one `header` element within it
|
||||
你的 `#navbar` 应该只有一个 `header` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#navbar header')
|
||||
assert(els.length === 1)
|
||||
```
|
||||
|
||||
You should have at least one `a` element with a class of `nav-link`
|
||||
你应该至少有一个 class 为 `nav-link` 的 `a` 元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('a[class="nav-link"]')
|
||||
assert(els.length >= 1)
|
||||
```
|
||||
|
||||
All of your `.nav-link` elements should be anchor (`a`) elements
|
||||
你所有的 `.nav-link` 元素都应该是锚点（`a`）元素。
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.nav-link')
|
||||
@@ -156,7 +156,7 @@ els.forEach(el => {
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
All of your `.nav-link` elements should be in the `#navbar`
|
||||
你所有的 `.nav-link` 元素都应该在 `#navbar` 中。
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('.nav-link')
|
||||
@@ -164,7 +164,7 @@ const els2 = document.querySelectorAll('#navbar .nav-link')
|
||||
assert(els2.length > 0 && els1.length === els2.length)
|
||||
```
|
||||
|
||||
You should have the same number of `.nav-link` and `.main-section` elements
|
||||
你应该有相同数量的 `.nav-link` 和 `.main-section` 元素。
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('.main-section')
|
||||
@@ -172,7 +172,7 @@ const els2 = document.querySelectorAll('.nav-link')
|
||||
assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
|
||||
```
|
||||
|
||||
The `header` element in the `#navbar` should come before any link (`a`) elements also in the `#navbar`
|
||||
`#navbar` 中的 `header` 元素必须在 `#navbar` 中的任何链接 (`a`) 之前。
|
||||
|
||||
```js
|
||||
const navLinks = document.querySelectorAll('#navbar a.nav-link');
|
||||
@@ -188,7 +188,7 @@ navLinks.forEach((navLink) => {
|
||||
assert(!!header)
|
||||
```
|
||||
|
||||
Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world")
|
||||
每个 `.nav-link` 应该有与其相关 `section` 的 `header` 文本相对应的文本（例如，如果你有一个 “Hello world” 部分/标题，你的 `#navbar` 应该有一个 `.nav-link` 包含文本 “Hello world”）。
|
||||
|
||||
```js
|
||||
const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
|
||||
@@ -201,7 +201,7 @@ const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
|
||||
assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0)
|
||||
```
|
||||
|
||||
Each `.nav-link` should have an `href` attribute that links to its corresponding `.main-section` (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id)
|
||||
每个 `.nav-link` 都应该有一个 `href` 属性，该属性链接到其对应的 `.main-section`（例如，如果你单击包含文本 “Hello world” 的 `.nav-link` 元素，页面导航到具有该 id 的 `section` 元素）。
|
||||
|
||||
```js
|
||||
const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
|
||||
@@ -210,7 +210,7 @@ const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' +
|
||||
assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
|
||||
```
|
||||
|
||||
Your `#navbar` should always be on the left edge of the window
|
||||
你的 `#navbar` 元素应该始终位于视口的顶部。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('navbar')
|
||||
@@ -219,7 +219,7 @@ const left2 = el?.offsetLeft
|
||||
assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
|
||||
```
|
||||
|
||||
Your Technical Documentation project should use at least one media query
|
||||
你的技术文档项目应该使用至少一个媒体查询。
|
||||
|
||||
```js
|
||||
assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1);
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 5f344fad8bf01691e71a30eb
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finora, sei stato limitato per quanto riguarda la presentazione e l'aspetto del contenuto che hai creato. Per curare questa parte, dovresti creare un elemento `style` dentro l'elemento `head`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il codice dovrebbe avere un tag di apertura `<style>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<style\s*>/i));
|
||||
```
|
||||
|
||||
Il codice dovrebbe avere un tag di chiusura `</style>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/style\s*>/));
|
||||
```
|
||||
|
||||
L'elemento `style` dovrebbe essere annidato nell'elemento `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
<html>
|
||||
```
|
||||
@@ -7,7 +7,7 @@ dashedName: step-14
|
||||
|
||||
# --description--
|
||||
|
||||
Ora hai tre tipi di selettori con lo stesso stile. È possibile aggiungere lo stesso gruppo di stili a molti elementi separando i selettori con virgole in questo modo:
|
||||
Ora hai tre selettori di tipo con lo stesso stile. È possibile aggiungere lo stesso gruppo di stili a molti elementi separando i selettori con virgole in questo modo:
|
||||
|
||||
```css
|
||||
selector1, selector2 {
|
||||
@@ -15,11 +15,11 @@ selector1, selector2 {
|
||||
}
|
||||
```
|
||||
|
||||
Usa un singolo tipo di selettore per centrare gli elementi `h1`, `h2` e `p` contemporaneamente.
|
||||
Usa un singolo selettore di tipo per centrare contemporaneamente gli elementi `h1`, `h2` e `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare un singolo tipo di selettore per tutti e tre gli elementi, `h1, h2, p`. Assicurati di utilizzare quell'ordine.
|
||||
Dovresti usare un singolo selettore di tipo per tutti e tre gli elementi, `h1, h2, p`. Assicurati di utilizzare quell'ordine.
|
||||
|
||||
```js
|
||||
const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p');
|
||||
|
||||
@@ -11,13 +11,13 @@ Ora che hai il CSS nel file `styles.css`, rimuovi l'elemento `style` e tutto il
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti avere un elemento `style` nel tuo codice.
|
||||
Non dovresti avere un elemento `style` nel codice.
|
||||
|
||||
```js
|
||||
assert(!code.match(/style/i));
|
||||
```
|
||||
|
||||
Non dovresti avere alcun selettore CSS nel tuo file HTML.
|
||||
Non dovresti avere alcun selettore CSS nel file HTML.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
|
||||
@@ -7,46 +7,46 @@ dashedName: step-13
|
||||
|
||||
# --description--
|
||||
|
||||
Nello step precedente, hai usato un <dfn>selettore di tipo</dfn> (type selector) per lo stile dell'elemento `h1`. Centra gli elementi `h2` e `p` con un nuovo selettore di tipo per ciascuno.
|
||||
Nello step precedente, hai usato un <dfn>selettore di tipo</dfn> (type selector) per agire sullo stile dell'elemento `h1`. Centra gli elementi `h2` e `p` con un nuovo selettore di tipo per ciascuno.
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti cambiare il selettore esistente per `h1`.
|
||||
Non dovresti cambiare il selettore `h1` esistente.
|
||||
|
||||
```js
|
||||
const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
|
||||
assert(hasH1);
|
||||
```
|
||||
|
||||
Dovresti aggiungere un nuovo selettore per `h2`.
|
||||
Dovresti aggiungere un nuovo selettore `h2`.
|
||||
|
||||
```js
|
||||
const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
|
||||
assert(hasH2);
|
||||
```
|
||||
|
||||
Dovresti aggiungere un nuovo selettore per `p`.
|
||||
Dovresti aggiungere un nuovo selettore `p`.
|
||||
|
||||
```js
|
||||
const hasP = new __helpers.CSSHelp(document).getStyle('p');
|
||||
assert(hasP);
|
||||
```
|
||||
|
||||
I tuoi elementi `h1` dovrebbero avere una proprietà `text-align` di `center`.
|
||||
L'elemento `h1` dovrebbero avere una proprietà `text-align` con valore `center`.
|
||||
|
||||
```js
|
||||
const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
|
||||
assert(h1TextAlign === 'center');
|
||||
```
|
||||
|
||||
I tuoi elementi `h2` dovrebbero avere una prorpietà `text-align` di `center`.
|
||||
L'elemento `h2` dovrebbe avere una proprietà `text-align` con valore `center`.
|
||||
|
||||
```js
|
||||
const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align');
|
||||
assert(h2TextAlign === 'center');
|
||||
```
|
||||
|
||||
I tuoi elementi `p` dovrebbero avere una prorpietà `text-align` di `center`.
|
||||
L'elemento `p` dovrebbe avere una proprietà `text-align` con valore `center`.
|
||||
|
||||
```js
|
||||
const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align');
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5f3477aefa51bfc29327200b
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Hai impostato lo stile di tre elementi scrivendo del CSS all'interno dei tag dell'elemento `style`. Questo approccio funziona, ma poiché ci saranno molti altri stili, è meglio mettere tutti gli stili in un file separato e linkarlo.
|
||||
|
||||
Abbiamo creato per te un file separato `styles.css` e cambiato la vista dell'editor su quel file. Puoi passare da un file all'altro usando le schede in cima all'editor.
|
||||
|
||||
Inizia riscrivendo gli stili che hai creato all'interno del file `styles.css`. Assicurati di escludere i tag `style` di apertura e chiusura.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il file `styles.css` dovrebbe avere il selettore di tipo `h1, h2, p`.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
assert(getUserInput('editableContents').replace(/[\s\n]*/g, "").match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/));
|
||||
}
|
||||
```
|
||||
|
||||
Il selettore dovrebbe assegnare alla proprietà `text-align` il valore `center`.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
assert(getUserInput('editableContents').match(/text-align:\s*center;?/));
|
||||
}
|
||||
```
|
||||
|
||||
Dovresti avere un solo selettore.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
assert(getUserInput('editableContents').match(/text-align:\s*center;?/)?.length === 1);
|
||||
}
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
<style>
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -7,11 +7,11 @@ dashedName: step-17
|
||||
|
||||
# --description--
|
||||
|
||||
Ora è necessario collegare il file `styles.css` in modo che gli stili verranno applicati di nuovo. Annida un elemento `link` auto-chiudente nell'elemento `head`. Dagli un attributo `rel` con valore di `stylesheet`, un attributo `type` con valore di `text/css`, e un attributo `href` con valore `styles.css`.
|
||||
Ora è necessario collegare il file `styles.css` in modo che gli stili vengano applicati di nuovo. Annida un elemento `link` autoconcludente nell'elemento `head`. Dagli un attributo `rel` con valore di `stylesheet`, un attributo `type` con valore di `text/css`, e un attributo `href` con valore `styles.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere un elemento `link`.
|
||||
Il codice dovrebbe avere un elemento `link`.
|
||||
|
||||
```js
|
||||
// link is removed -> if exists, replaced with style
|
||||
@@ -25,31 +25,31 @@ Non dovresti cambiare l'elemento `head` esistente. Assicurati di non aver elimin
|
||||
assert($('head').length === 1);
|
||||
```
|
||||
|
||||
Il tuo elemento `link` dovrebbe essere un elemento auto-chiudente.
|
||||
L'elemento `link` dovrebbe essere un elemento autoconcludente.
|
||||
|
||||
```js
|
||||
assert(code.match(/<link[\w\W\s]+\/?>/i));
|
||||
```
|
||||
|
||||
Il tuo elemento `link` dovrebbe essere all'interno dell'elemento `head`.
|
||||
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))
|
||||
```
|
||||
|
||||
Il tuo elemento `link` dovrebbe avere un attributo `rel` con valore di `stylesheet`.
|
||||
L'elemento `link` dovrebbe avere un attributo `rel` con il valore `stylesheet`.
|
||||
|
||||
```js
|
||||
assert(code.match(/rel=('|")stylesheet\1/i));
|
||||
```
|
||||
|
||||
Il tuo elemento `link` dovrebbe avere un attributo `type` con il valore `text/css`.
|
||||
L'elemento `link` dovrebbe avere un attributo `type` con il valore `text/css`.
|
||||
|
||||
```js
|
||||
assert(code.match(/type=('|")text\/css\1/i));
|
||||
```
|
||||
|
||||
Il tuo elemento `link` dovrebbe avere un attributo `href` con un valore di `styles.css`.
|
||||
L'elemento `link` dovrebbe avere un attributo `href` con il valore `styles.css`.
|
||||
|
||||
```js
|
||||
assert(code.match(/href=('|")styles.css\1/i));
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-19
|
||||
|
||||
# --description--
|
||||
|
||||
Il testoè di nuovo centrato quindi il collegamento al file CSS funziona. Aggiungi un altro stile al file che cambia la proprietà `background-color` in `brown` per l'elemento `body`.
|
||||
Il testo è di nuovo centrato, quindi il collegamento al file CSS funziona. Aggiungi al file un altro stile che cambia la proprietà `background-color` in `brown` per l'elemento `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -18,14 +18,14 @@ const hasBody = new __helpers.CSSHelp(document).getStyle('body');
|
||||
assert(hasBody);
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `background-color` su `brown`.
|
||||
Dovresti assegnare il valore `brown` alla proprietà `background-color`.
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
|
||||
assert(hasBackground);
|
||||
```
|
||||
|
||||
Il tuo elemento `body` dovrebbe avere uno sfondo marrone (`brown`).
|
||||
Lo sfondo dell'elemento `body` dovrebbe essere `brown`.
|
||||
|
||||
```js
|
||||
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 5f3477cbcb6ba47918c1da92
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per far sì che lo stile della pagina sia simile su uno smatphone, su un desktop o un laptop, devi aggiungere un elemento `meta` con un attributo speciale `content`.
|
||||
|
||||
Aggiungi il seguente codice all'interno dell'elemento `head`:
|
||||
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Il codice dovrebbe avere due elementi `meta`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<meta.*\/?>/g).length === 2);
|
||||
```
|
||||
|
||||
L'elemento `meta` dovrebbe avere un attributo `name` con il valore `viewport`.
|
||||
|
||||
```js
|
||||
const meta = $('meta');
|
||||
assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/));
|
||||
```
|
||||
|
||||
L'elemento `meta` dovrebbe avere un attributo `content` con il valore `width=device-width, initial-scale=1.0`.
|
||||
|
||||
```js
|
||||
const meta = $('meta');
|
||||
assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 5f34a1fd611d003edeafd681
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Lo sfondo marrone rende difficile la lettura del testo. Cambia il colore dello sfondo dell'elemento `body` in `burlywood`, in modo che più semplice da leggere pur avendo un po' di colore.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare alla proprietà `background-color` il valore `burlywood`.
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
|
||||
assert(hasBackground);
|
||||
```
|
||||
|
||||
L'elemento `body` dovrebbe avere uno sfondo `burlywood`.
|
||||
|
||||
```js
|
||||
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
|
||||
assert(bodyBackground === 'burlywood');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 5f356ed60785e1f3e9850b6e
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora è facile vedere che il testo è centrato all'interno dell'elemento `div`. Attualmente, la larghezza dell'elemento `div` è specificata in pixel (`px`). Cambia il valore della proprietà `width` in `80%`, per renderlo l'80% della larghezza del suo elemento genitore (`body`).
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare alla proprietà `width` il valore `80%`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `width` il valore `300px`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
|
||||
assert(!hasWidth);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
div {
|
||||
width: 300px;
|
||||
background-color: burlywood;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 5f356ed60a5decd94ab66986
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
removeComments: false
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
I commenti in CSS hanno quest'aspetto:
|
||||
|
||||
```css
|
||||
/* comment here */
|
||||
```
|
||||
|
||||
Nel foglio di stile, trasforma in un commento la riga contenente la proprietà `background-color` e il suo valore, in modo da poter vedere l'effetto dello stile del solo elemento `div`. In questo modo lo sfondo tornerà bianco di nuovo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti trasformare in un commento la riga `background-color: burlywood;` del CSS.
|
||||
|
||||
```js
|
||||
assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i));
|
||||
```
|
||||
|
||||
|
||||
L'elemento `body` dovrebbe avere uno sfondo bianco.
|
||||
|
||||
```js
|
||||
const bodyCSS = $('body').css('background-color');
|
||||
assert(bodyCSS === "rgba(0, 0, 0, 0)")
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
--fcc-editable-region--
|
||||
background-color: burlywood;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 300px;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 5f356ed63c7807a4f1e6d054
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso, l'obiettivo è far sì che `div` non occupi l'intera larghezza della pagina. La proprietà CSS `width` è perfetta per questo. Crea un nuovo selettore di tipo nel foglio di stile che dà al tuo elemento `div` una larghezza di `300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore di tipo `div`.
|
||||
|
||||
```js
|
||||
const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
|
||||
assert(hasDiv);
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `width` il valore `300px`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
`div` dovrebbe avere una larghezza di 300px.
|
||||
|
||||
```js
|
||||
const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width');
|
||||
assert(divWidth === '300px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 5f356ed63e0fa262326eef05
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora cambia il colore di sfondo dell'elemento `div` in `burlywood`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare alla proprietà `background-color` il valore `burlywood`.
|
||||
|
||||
```js
|
||||
const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
|
||||
assert(hasBackgroundColor);
|
||||
```
|
||||
|
||||
`div` dovrebbe avere uno sfondo burlywood.
|
||||
|
||||
```js
|
||||
const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color');
|
||||
assert(divBackground === 'burlywood');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
div {
|
||||
width: 300px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 5f356ed656a336993abd9f7c
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il prossimo passo è centrare `div` orizzontalmente. Puoi farlo assegnando alle sue proprietà `margin-left` e `margin-right` il valore `auto`. Pensa al margine come spazio invisibile attorno a un elemento. Utilizzando queste due proprietà dei margini, centra l'elemento `div` all'interno dell'elemento `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare alla proprietà `margin-left` il valore `auto`.
|
||||
|
||||
```js
|
||||
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-left'] === 'auto');
|
||||
assert(hasMargin);
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `margin-right` il valore `auto`.
|
||||
|
||||
```js
|
||||
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-right'] === 'auto');
|
||||
assert(hasMargin);
|
||||
```
|
||||
|
||||
Dovresti assegnare alle proprietà `margin-left` e `margin-right` di `div` il valore `auto`.
|
||||
|
||||
```js
|
||||
const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right');
|
||||
const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left');
|
||||
assert(divMarginRight === 'auto');
|
||||
assert(divMarginLeft === 'auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
div {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 5f356ed69db0a491745e2bb6
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per applicare lo stile della classe all'elemento `div`, aggiungi un attributo `class` al tag di apertura dell'elemento `div` e assegnagli il valore `menu`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` dovrebbe ancora apparire. Assicurati di aver scritto correttamente il tag `<div>`.
|
||||
|
||||
```js
|
||||
assert($('div').length === 1);
|
||||
```
|
||||
|
||||
L'elemento `div` dovrebbe avere la classe `menu`.
|
||||
|
||||
```js
|
||||
assert($('div').attr('class').includes('menu'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5f356ed6cf6eab5f15f5cfe6
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A differenza degli altri elementi di contenuto che hai utilizzato finora, l'elemento `div` è utilizzato principalmente per il design del layout. Aggiungi un elemento `div` all'interno dell'elemento `body` e poi sposta tutti gli altri elementi all'interno del nuovo elemento `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un tag di apertura `<div>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<div>/i));
|
||||
```
|
||||
|
||||
Dovresti avere un tag di chiusura `</div>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/div>/i));
|
||||
```
|
||||
|
||||
Non dovresti cambiare l'elemento `body` esistente. Assicurati di non aver eliminato il tag di chiusura.
|
||||
|
||||
```js
|
||||
assert($('body').length === 1);
|
||||
```
|
||||
|
||||
Il tag `div` dovrebbe essere annidato nell'elemento `body`.
|
||||
|
||||
```js
|
||||
const div = $('div')[0];
|
||||
assert(div.parentElement.tagName === 'BODY');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 5f35e5c4321f818cdc4bed30
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sta prendendo un bell'aspetto. È ora di iniziare ad aggiungere alcune voci al menu. Aggiungi un elemento `article` vuoto sotto l'intestazione `Coffee`. Conterrà il gusto e il prezzo di ogni caffè offerto.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un tag di apertura `<article>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<article>/i));
|
||||
```
|
||||
|
||||
Dovresti avere un tag di chiusura `</article>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/article>/i));
|
||||
```
|
||||
|
||||
Non dovresti modificare l'elemento `h2` esistente.
|
||||
|
||||
```js
|
||||
assert($('h2').length === 1);
|
||||
```
|
||||
|
||||
L'elemento `article` dovrebbe trovarsi dopo l'elemento `h2`.
|
||||
|
||||
```js
|
||||
const article = $('article')[0];
|
||||
assert(article.previousElementSibling.tagName === 'H2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Coffee</h2>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 5f35e5c44359872a137bd98f
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dal momento che il prodotto principale del bar è il caffè, puoi utilizzare un'immagine con dei chicchi di caffè per lo sfondo della pagina.
|
||||
|
||||
Elimina il commento e il suo contenuto all'interno del selettore di tipo `body`. Ora aggiungi una proprietà `background-image` e assegnale il valore `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti rimuovere la proprietà `background-color` che avevi trasformato in un commento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i))
|
||||
```
|
||||
|
||||
Il selettore `body` non dovrebbe avere commenti.
|
||||
|
||||
```js
|
||||
assert(!code.match(/body\s*{\s*\/\*/i));
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `background-image` il valore `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`)
|
||||
assert(hasBackground)
|
||||
```
|
||||
|
||||
L'elemento `body` dovrebbe avere un'immagine di sfondo con dei chicchi di caffè.
|
||||
|
||||
```js
|
||||
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image');
|
||||
console.log(bodyBackground);
|
||||
assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
--fcc-editable-region--
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 5f3c866d0fc037f7311b4ac8
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ci siamo quasi, ma il prezzo non è rimasto sulla destra. Questo perché gli elementi `inline-block` occupano solo la larghezza del loro contenuto. Per distribuirli, aggiungi una proprietà `width` ai selettori di classe `flavor` e `price` col valore di `50%` per entrambi.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare alla proprietà `width` nel selettore `.flavor` il valore `50%`.
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '50%');
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `width` nel selettore `.price` il valore `50%`.
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
assert(priceWidth === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 5f3c866d5414453fc2d7b480
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Partendo al di sotto della coppia caffè/prezzo esistente, aggiungi i seguenti caffè e prezzi utilizzando elementi `article` con due elementi `p` annidati all'interno di ciascuno di essi. Come prima, il testo del primo elemento `p` dovrebbe contenere il gusto del caffè e il testo del secondo elemento `p` dovrebbe contenerne il prezzo.
|
||||
|
||||
```bash
|
||||
Caramel Macchiato 3.75
|
||||
Pumpkin Spice 3.50
|
||||
Hazelnut 4.00
|
||||
Mocha 4.50
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere cinque elementi `article`.
|
||||
|
||||
```js
|
||||
assert($('article').length === 5);
|
||||
```
|
||||
|
||||
Ciascun elemento `article` dovrebbe avere due elementi `p`.
|
||||
|
||||
```js
|
||||
const articles = $('article');
|
||||
assert(articles[0].children.length === 2);
|
||||
assert(articles[1].children.length === 2);
|
||||
assert(articles[2].children.length === 2);
|
||||
assert(articles[3].children.length === 2);
|
||||
assert(articles[4].children.length === 2);
|
||||
```
|
||||
|
||||
Il primo elemento `article` dovrebbe avere degli elementi `p` con il testo `French Vanilla` e `3.00`.
|
||||
|
||||
```js
|
||||
const children = $('article')[0].children;
|
||||
assert(children[0].innerText.match(/French Vanilla/i));
|
||||
assert(children[1].innerText.match(/3\.00/i));
|
||||
```
|
||||
|
||||
Il secondo elemento `article` dovrebbe avere degli elementi `p` con il testo `Caramel Macchiato` e `3.75`.
|
||||
|
||||
```js
|
||||
const children = $('article')[1].children;
|
||||
assert(children[0].innerText.match(/Caramel Macchiato/i));
|
||||
assert(children[1].innerText.match(/3\.75/i));
|
||||
```
|
||||
|
||||
Il terzo elemento `article` dovrebbe avere degli elementi `p` con il testo `Pumpkin Spice` e `3.50`.
|
||||
|
||||
```js
|
||||
const children = $('article')[2].children;
|
||||
assert(children[0].innerText.match(/Pumpkin Spice/i));
|
||||
assert(children[1].innerText.match(/3\.50/i));
|
||||
```
|
||||
|
||||
Il quarto elemento `article` dovrebbe avere degli elementi `p` con il testo `Hazelnut` e `4.00`.
|
||||
|
||||
```js
|
||||
const children = $('article')[3].children;
|
||||
assert(children[0].innerText.match(/Hazelnut/i));
|
||||
assert(children[1].innerText.match(/4\.00/i));
|
||||
```
|
||||
|
||||
Il quinto elemento `article` dovrebbe avere degli elementi `p` con il testo `Mocha` e `4.50`.
|
||||
|
||||
```js
|
||||
const children = $('article')[4].children;
|
||||
assert(children[0].innerText.match(/Mocha/i));
|
||||
assert(children[1].innerText.match(/4\.50/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>French Vanilla</p>
|
||||
<p>3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 5f3c866daec9a49519871816
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Gli elementi `article` spesso contengono più elementi che hanno informazioni correlate. In questo caso, conterrà il gusto del caffè e il prezzo corrispondente. Annida due elementi `p` all'interno dell'elemento`article`. Il testo del primo dovrebbe essere `French Vanilla`, e il testo del secondo `3.00`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti cambiare l'elemento `article` esistente.
|
||||
|
||||
```js
|
||||
assert($('article').length === 1);
|
||||
```
|
||||
|
||||
L'elemento `article` dovrebbe avere due elementi `p`.
|
||||
|
||||
```js
|
||||
assert($('article').children('p').length === 2);
|
||||
```
|
||||
|
||||
Il primo elemento `p` dovrebbe avere il testo `French Vanilla`.
|
||||
|
||||
```js
|
||||
const firstP = $('article').children('p')[0];
|
||||
assert(firstP.innerText.match(/French Vanilla/i));
|
||||
```
|
||||
|
||||
Il secondo elemento `p` dovrebbe avere il testo `3.00`.
|
||||
|
||||
```js
|
||||
const secondP = $('article').children('p')[1];
|
||||
assert(secondP.innerText.match(/3\.00/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 5f3c866dbf362f99b9a0c6d0
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Gli elementi `p` sono annidati in un elemento `article` con l'attributo di classe `item`. Puoi agire sullo stile di tutti gli elementi `p` annidati in qualsiasi elemento con una classe chiamata `item` in questo modo:
|
||||
|
||||
```css
|
||||
.item p { }
|
||||
```
|
||||
|
||||
Usando il selettore qui sopra, aggiungi una proprietà `display` con valore `inline-block` in modo che gli elementi `p` si comportino come degli elementi `inline`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti utilizzare il selettore `.item p`.
|
||||
|
||||
```js
|
||||
const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p');
|
||||
assert(hasItemP);
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `display` il valore `inline-block`.
|
||||
|
||||
```js
|
||||
const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block');
|
||||
assert(hasDisplay);
|
||||
```
|
||||
|
||||
Il selettore `.item p` dovrebbe avere una proprietà `display` con il valore `inline-block`.
|
||||
|
||||
```js
|
||||
const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display');
|
||||
assert(itemPDisplay === 'inline-block');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 5f3c866dd0d0275f01d4d847
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Beh, non ha funzionato. Agire sullo stile degli elementi `p` per renderli `inline-block` e metterli su righe di codice diverse crea uno spazio extra alla destra dell'elemento `p`, facendo passare il secondo alla riga successiva. Un modo per risolvere questo problema è quello di rendere la larghezza di ogni elemento `p` un po' inferiore al `50%`.
|
||||
|
||||
Cambia il valore di `width` in `49%` per ogni classe per vedere cosa accade.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare alla proprietà `width` il valore `49%` nel selettore `.flavor`.
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '49%');
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `width` il valore `49%` nel selettore `.price`.
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
assert(priceWidth === '49%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 5f3c866de7a5b784048f94b1
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inizia ad assomigliare a quello che desideri, ma ora sarebbe bello se il gusto e il prezzo fossero sulla stessa riga. Gli elementi `p` sono <dfn>elementi di blocco</dfn>, quindi occupano l'intera larghezza dell'elemento genitore.
|
||||
|
||||
Per averli sulla stessa riga, devi agire sullo stile degli elementi `p` e far sì che si comportino come elementi `inline`. Aggiungi un attributo `class` con il valore `item` al primo elemento `article` sotto l'intestazione `Coffee`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti applicare la classe `item` all'elemento `article`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<article\s*class=('|")item\1\s*>/i))
|
||||
```
|
||||
|
||||
Dovresti avere un solo elemento di classe `item`.
|
||||
|
||||
```js
|
||||
assert($('.item').length === 1);
|
||||
```
|
||||
|
||||
Il nuovo elemento `article` dovrebbe avere la classe `item`.
|
||||
|
||||
```js
|
||||
assert($('article')[0].className === 'item');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 5f3cade94c6576e7f7b7953f
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso prosegui e cambia le larghezze di entrambe le classi `flavor` e `price` in modo che abbiano di nuovo il valore `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare alla proprietà `width` il valore `50%` nel selettore `.flavor`.
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '50%');
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `width` il valore `50%` nel selettore `.price`.
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
assert(priceWidth === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 49%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 5f3cade9993019e26313fa8e
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora che sai che funziona, puoi cambiare gli altri elementi `article` e `p` per disporli come il primo set. Inizia aggiungendo la classe `item` agli altri elementi `article`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere solo cinque elementi `article`.
|
||||
|
||||
```js
|
||||
assert($('article').length === 5);
|
||||
```
|
||||
|
||||
Dovresti avere solo cinque elementi `.item`.
|
||||
|
||||
```js
|
||||
assert($('.item').length === 5);
|
||||
```
|
||||
|
||||
Gli elementi `.item` dovrebbero essere gli elementi `article`.
|
||||
|
||||
|
||||
```js
|
||||
const articles = $('article');
|
||||
const items = $('.item');
|
||||
assert(articles[0] === items[0]);
|
||||
assert(articles[1] === items[1]);
|
||||
assert(articles[2] === items[2]);
|
||||
assert(articles[3] === items[3]);
|
||||
assert(articles[4] === items[4]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 5f3cade99dda4e6071a85dfd
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Tornerai a breve ad agire sullo stile del menu, intanto prosegui aggiungendo un secondo elemento `section` sotto il primo per visualizzare i dessert offerti dal bar.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un tag di apertura `section`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<section>/ig).length === 2);
|
||||
```
|
||||
|
||||
Dovresti avere un tag di chiusura `section`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/section>/ig).length === 2);
|
||||
```
|
||||
|
||||
Non dovresti cambiare l'elemento `main` esistente.
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
Il nuovo elemento `section` dovrebbe essere annidato nell'elemento `main`.
|
||||
|
||||
```js
|
||||
assert($('main').children('section').length === 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 5f3cade9fa77275d9f4efe62
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ha funzionato, ma c'è ancora un po' di spazio a destra del prezzo.
|
||||
|
||||
Potresti continuare a provare diverse percentuali per le larghezze. Invece, puoi semplicemente spostare l'elemento `p` relativo al prezzo in modo che sia sulla stessa riga assicurandoti che non ci sia spazio tra di loro.
|
||||
|
||||
# --hints--
|
||||
|
||||
Gli elementi `p` non dovrebbero avere spazio tra di loro.
|
||||
|
||||
```js
|
||||
assert(code.match(/Vanilla<\/p><p/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
--fcc-editable-region--
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 49%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 5f3ef6e0819d4f23ca7285e6
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi un elemento `article` vuoto sotto l'intestazione `Desserts`. Dagli un attributo `class` con il valore `item`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti cambiare l'elemento `h2` esistente.
|
||||
|
||||
```js
|
||||
assert($('h2').length === 2);
|
||||
```
|
||||
|
||||
L'elemento `article` dovrebbe essere sotto l'elemento `h2`.
|
||||
|
||||
```js
|
||||
assert($('section')[1].children[1].tagName === 'ARTICLE');
|
||||
```
|
||||
|
||||
Il nuovo elemento `article` dovrebbe avere la classe `item`.
|
||||
|
||||
```js
|
||||
assert($('section')[1].children[1].className === 'item');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 5f3ef6e0e0c3feaebcf647ad
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nella nuova sezione, aggiungi un elemento `h2` con il testo `Desserts`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti cambiare l'elemento `section` esistente.
|
||||
|
||||
```js
|
||||
assert($('section').length === 2);
|
||||
```
|
||||
|
||||
Dovresti aggiungere un elemento `h2` nel secondo elemento `section`.
|
||||
|
||||
```js
|
||||
assert($('section')[1].children[0].tagName === 'H2');
|
||||
```
|
||||
|
||||
Il nuovo elemento `h2` dovrebbe avere il testo `Desserts`.
|
||||
|
||||
```js
|
||||
assert($('h2')[1].innerText.match(/Desserts/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -7,20 +7,20 @@ dashedName: step-46
|
||||
|
||||
# --description--
|
||||
|
||||
Se riduci la larghezza dell'anteprima della pagina, noterai ad un certo punto, parte del testo a sinistra inizia ad andare sulla riga successiva. Questo perché la larghezza degli elementi `p` sul lato sinistro può occupare solo il `50%` dello spazio.
|
||||
Se riduci la larghezza dell'anteprima della pagina, a un certo punto, noterai che parte del testo a sinistra inizia ad andare sulla riga successiva. Questo perché la larghezza degli elementi `p` sul lato sinistro può occupare solo il `50%` dello spazio.
|
||||
|
||||
Dal momento che sai che i prezzi sulla destra hanno significativamente meno caratteri, modifica la classe `flavor` così che abbia una proprietà `width` con valore `75%` e la classe `price` così che abbia una proprietà `width` con valore `25%`.
|
||||
Dal momento che sai che i prezzi sulla destra hanno molti meno caratteri, modifica la classe `flavor` così che abbia una proprietà `width` con valore `75%` e la classe `price` così che abbia una proprietà `width` con valore `25%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti impostare la proprietà `width` a `75%` nel tuo selettore `.flavor`.
|
||||
Dovresti assegnare alla proprietà `width` il valore `75%` nel selettore `.flavor`.
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '75%');
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `width` a `25%` nel tuo selettore `.price`.
|
||||
Dovresti assegnare alla proprietà `width` il valore `25%` nel selettore `.price`.
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 5f716ad029ee4053c7027a7a
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Annida due elementi `p` all'interno dell'elemento `article`. Il testo del primo dovrebbe essere `Donut` e il testo del secondo `1.50`. Mettili entrambi sulla stessa riga assicurandoti che non ci sia spazio tra loro.
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti cambiare l'elemento `article` esistente.
|
||||
|
||||
```js
|
||||
assert($('article').length === 6);
|
||||
```
|
||||
|
||||
Il nuovo elemento `article` dovrebbe avere due elementi `p`.
|
||||
|
||||
```js
|
||||
assert($('article').last().children('p').length === 2);
|
||||
```
|
||||
|
||||
Il primo elemento `p` dovrebbe avere il testo `Donut`.
|
||||
|
||||
```js
|
||||
assert($('article').last().children('p')[0].innerText.match(/Donut/i));
|
||||
```
|
||||
|
||||
Il secondo elemento `p` dovrebbe avere il testo `1.50`.
|
||||
|
||||
```js
|
||||
assert($('article').last().children('p')[1].innerText.match(/1\.50/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 5f7691dafd882520797cd2f0
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso, posiziona gli altri elementi `p` sulla stessa riga senza spazio tra di loro.
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti avere spazi tra gli elementi `p`.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<\/p>\s+<p/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
---
|
||||
id: 5f7692f7c5b3ce22a57788b6
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per completare lo styling, aggiungi i nomi delle classi `flavor` e `price` a tutti i restanti elementi `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere cinque elementi `.flavor`.
|
||||
|
||||
```js
|
||||
assert($('.flavor').length === 5);
|
||||
```
|
||||
|
||||
Dovresti avere cinque elementi `.price`.
|
||||
|
||||
```js
|
||||
assert($('.price').length === 5);
|
||||
```
|
||||
|
||||
Gli elementi `.flavor` dovrebbero essere gli elementi `p` con il testo `French Vanilla`, `Caramel Macchiato`, `Pumpkin Spice`, `Hazelnut` e `Mocha`.
|
||||
|
||||
```js
|
||||
const p = $('p');
|
||||
const flavor = $('.flavor');
|
||||
assert(p[1] === flavor[0]);
|
||||
assert(p[3] === flavor[1]);
|
||||
assert(p[5] === flavor[2]);
|
||||
assert(p[7] === flavor[3]);
|
||||
assert(p[9] === flavor[4]);
|
||||
```
|
||||
|
||||
Gli elementi `.price` dovrebbero essere gli elementi `p` con il testo `3.00`, `3.75`, `3.50`, `4.00`, e `4.50`.
|
||||
|
||||
```js
|
||||
const p = $('p');
|
||||
const price = $('.price');
|
||||
assert(p[2] === price[0]);
|
||||
assert(p[4] === price[1]);
|
||||
assert(p[6] === price[2]);
|
||||
assert(p[8] === price[3]);
|
||||
assert(p[10] === price[4]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p>Caramel Macchiato</p><p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Pumpkin Spice</p><p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Hazelnut</p><p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Mocha</p><p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 5f769541be494f25449b292f
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Usando la nuova classe `flavor` come selettore, assegna alla proprietà `text-align` il valore `left`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore di classe `flavor`.
|
||||
|
||||
```js
|
||||
const hasFlavor = new __helpers.CSSHelp(document).getStyle('.flavor');
|
||||
assert(hasFlavor);
|
||||
```
|
||||
|
||||
Dovresti assegnare alla proprietà `text-align` il valore `left`.
|
||||
|
||||
```js
|
||||
const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'left');
|
||||
assert(hasTextAlign);
|
||||
```
|
||||
|
||||
Il selettore di classe `flavor` dovrebbe assegnare alla proprietà `text-align` il valore `left`.
|
||||
|
||||
```js
|
||||
const flavorTextAlign = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('text-align');
|
||||
assert(flavorTextAlign === 'left');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p>3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 5f76967fad478126d6552b0d
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il prossimo passo è allineare il prezzo a destra. Aggiungi una classe chiamata `price` all'elemento `p` contenente il testo `3.00`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere la classe `price` all'elemento `p`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<p\s*class=('|")price\1\s*>/i));
|
||||
```
|
||||
|
||||
Dovresti avere un solo elemento con la classe `price`.
|
||||
|
||||
```js
|
||||
assert($('.price').length === 1);
|
||||
```
|
||||
|
||||
La classe `price` dovrebbe essere nell'elemento `p` con il testo `3.00`.
|
||||
|
||||
```js
|
||||
assert($('.price')[0].innerText.match(/3\.00/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
--fcc-editable-region--
|
||||
<p>3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 5f769702e6e33127d14aa120
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso allinea a destra il testo degli elementi con la classe `price`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore di classe `price`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.price\s*{/i));
|
||||
```
|
||||
|
||||
Il selettore di classe `price` dovrebbe assegnare alla proprietà `text-align` il valore `right`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.price\s*{\s*text-align:\s*right;?/i));
|
||||
```
|
||||
|
||||
L'elemento `.price` dovrebbe essere allineato a destra.
|
||||
|
||||
```js
|
||||
assert($('.price').css('text-align') === 'right');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 5f7b87422a560036fd03ccff
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per i due elementi `p` che hai appena aggiunto, aggiungi `dessert` come valore dell'attributo `class` del primo elemento `p`, e `price` come valore dell'attributo `class` del secondo elemento `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un elemento `p` con la classe `dessert`.
|
||||
|
||||
```js
|
||||
assert($('.dessert').length === 1);
|
||||
```
|
||||
|
||||
L'elemento `p` con il testo `Donut` dovrebbe avere la classe `dessert`.
|
||||
|
||||
```js
|
||||
assert($('.dessert')[0].innerText.match(/donut/i));
|
||||
```
|
||||
|
||||
L'elemento `p` con il testo `1.50` dovrebbe avere la classe `price`.
|
||||
|
||||
```js
|
||||
assert($('.price').last().text().match(/1\.50/));
|
||||
```
|
||||
|
||||
Non dovresti avere spazi tra i tuoi elementi `p`.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<\/p>\s+<p/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
--fcc-editable-region--
|
||||
<p>Donut</p><p>1.50</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 5f7b88d37b1f98386f04edc0
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sembra esserci qualcosa di sbagliato. Hai aggiunto il valore corretto dell'attributo `class` all'elemento `p` con il testo `Donut`, ma non hai definito un selettore per esso.
|
||||
|
||||
Dal momento che il selettore di classe `flavor` ha già le proprietà che vuoi, puoi aggiungergli il nome della classe `dessert`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere il selettore `.dessert` al selettore `.flavor`.
|
||||
|
||||
```js
|
||||
const selector = new __helpers.CSSHelp(document).getStyle('.flavor, .dessert') || new __helpers.CSSHelp(document).getStyle('.dessert, .flavor');
|
||||
assert(selector)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user