diff --git a/curriculum/challenges/chinese-traditional/03-front-end-libraries/react/render-state-in-the-user-interface.md b/curriculum/challenges/chinese-traditional/03-front-end-libraries/react/render-state-in-the-user-interface.md index b02583ce2f..24bd7dd875 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-libraries/react/render-state-in-the-user-interface.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-libraries/react/render-state-in-the-user-interface.md @@ -43,7 +43,7 @@ assert( ); ``` -渲染的 `h1` 標題中應該包含一段文本，這段文本是從組件的 state 中渲染出來的。 +渲染的 `h1` 標題中應該只包含一段文本，這段文本是從組件的 state 中渲染出來的。 ```js async () => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md index cc4ac56591..05e30032a3 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md @@ -78,7 +78,7 @@ passport.use(new GitHubStrategy({ (data) => { assert.match( data, - /passport\.use.*new GitHubStrategy/gi, + /passport\.use.*new GitHubStrategy/gis, 'Passport should use a new GitHubStrategy' ); assert.match( diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/american-british-translator.md index fd90bb89e2..e245dc28ed 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -130,7 +130,7 @@ async (getUserInput) => { }; ``` -`/api/translate` 路由也應該處理美式英語和英式英語中頭銜/尊稱的縮寫方式。 例如，Doctor Wright 在英式英語中縮寫爲 “Dr Wright”，在美式英語中縮寫爲 “Dr. Wright"”。 查看 `/public/american-to-british-titles.js` 了應用程序應該處理的不同的頭銜。 +`/api/translate` 路由也應該處理美式英語和英式英語中頭銜/尊稱的縮寫方式。 例如，Doctor Wright 在英式英語中縮寫爲 “Dr Wright”，在美式英語中縮寫爲 “Dr. Wright"”。 請參閱 `/components/american-to-british-titles.js`，瞭解程序應當處理的不同標題。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/sudoku-solver.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/sudoku-solver.md index cf12453a26..75f0e1d87f 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/sudoku-solver.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/sudoku-solver.md @@ -40,7 +40,7 @@ dashedName: sudoku-solver - 邏輯處理一個無效的區域 (3x3 網格) - 有效解謎字符串通過 solver - 無效解謎字符串無法通過 solver -- solver 返回一個不完整謎題的的預期解決方案 +- Solver 返回一個不完整謎題的的預期解決方案 在 `tests/2_functional-tests.js` 中編寫下以下測試： diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md index f1f0855d93..c6870e697e 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md @@ -1,6 +1,6 @@ --- id: 5e7b9f090b6c005b0e76f068 -title: 'Dictionaries: Common Applications' +title: '字典：常見應用' challengeType: 11 videoId: f17xPfIXct0 dashedName: dictionaries-common-applications @@ -10,7 +10,7 @@ dashedName: dictionaries-common-applications ## --text-- -What will the following code print? +這段代碼將打印什麼? ```python counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} @@ -35,7 +35,7 @@ quincy --- -[will return error] +[將返回錯誤] ## --video-solution-- diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md index 7196aa02da..9cd8228b3d 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md @@ -1,6 +1,6 @@ --- id: 5e7b9f0c0b6c005b0e76f072 -title: Networking Protocol +title: 網絡協議 challengeType: 11 videoId: c6vZGescaSc dashedName: networking-protocol @@ -10,7 +10,7 @@ dashedName: networking-protocol ## --text-- -What type of HTTP request is usually used to access a website? +通常使用哪種類型的 HTTP 請求來訪問一個網站？ ## --answers-- diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md index bf0c895949..3aa47daf5e 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md @@ -1,6 +1,6 @@ --- id: 5e7b9f0c0b6c005b0e76f074 -title: 'Networking: Text Processing' +title: '聯網：文本處理' challengeType: 11 videoId: Pv_pJgVu8WI dashedName: networking-text-processing @@ -10,7 +10,7 @@ dashedName: networking-text-processing ## --text-- -Which type of encoding do most websites use? +大多數網站使用哪種編碼類型？ ## --answers-- diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md index 41fc6959e0..dbe154aaed 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md @@ -1,6 +1,6 @@ --- id: 5e7b9f0c0b6c005b0e76f073 -title: 'Networking: Write a Web Browser' +title: '聯網：編寫一個 Web 瀏覽器' challengeType: 11 videoId: zjyT9DaAjx4 dashedName: networking-write-a-web-browser @@ -10,7 +10,7 @@ dashedName: networking-write-a-web-browser ## --text-- -What does the following code create?: +以下代碼創建了什麼？ ```py import socket @@ -30,19 +30,19 @@ mysock.close() ## --answers-- -A simple web server. +一個簡單的 web 服務器 --- -A simple email client. +一個簡單的 email 客戶端 --- -A simple todo list. +一個簡單的待辦事項列表 --- -A simple web browser. +一個簡單的 web 瀏覽器 ## --video-solution-- diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md index c85eabd257..6ad6f85aaa 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md @@ -1,6 +1,6 @@ --- id: 5e7b9f170b6c005b0e76f087 -title: Object Lifecycle +title: 對象的生命週期 challengeType: 11 videoId: p1r3h_AMMIM dashedName: object-lifecycle @@ -10,7 +10,7 @@ dashedName: object-lifecycle ## --text-- -What will the following program print?: +以下程序將打印什麼？ ```python class PartyAnimal: diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/reading-files.md index 9be11dc4f3..c9959fee1c 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/reading-files.md @@ -1,6 +1,6 @@ --- id: 5e7b9f080b6c005b0e76f062 -title: Reading Files +title: 閱讀文件中 challengeType: 11 videoId: Fo1tW09KIwo dashedName: reading-files @@ -10,7 +10,7 @@ dashedName: reading-files ## --text-- -What is used to indicate a new line in a string? +在字符串中，用什麼來代表新的一行？ ## --answers-- diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md index 21f07615fc..2b169db7ea 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md @@ -1,6 +1,6 @@ --- id: 5e7b9f180b6c005b0e76f08c -title: Relational Database Design +title: 關係數據庫設計 challengeType: 11 videoId: AqdfbrpkbHk dashedName: relational-database-design @@ -10,7 +10,7 @@ dashedName: relational-database-design ## --text-- -What is the best practice for how many times a piece of string data should be stored in a database? +對於一個字符串數據應該被保存在一個數據庫裏多少次，最佳實踐是什麼？ ## --answers-- diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md index 26732397d0..9744e2adde 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md @@ -1,6 +1,6 @@ --- id: 5e7b9f170b6c005b0e76f08a -title: Relational Databases and SQLite +title: 關係數據庫和 SQLite challengeType: 11 videoId: QlNod5-kFpA dashedName: relational-databases-and-sqlite @@ -10,23 +10,23 @@ dashedName: relational-databases-and-sqlite ## --text-- -Which is NOT a primary data structure in a database? +哪個不是數據庫中主要的數據結構？ ## --answers-- -index +指數 --- -table +表格 --- -row +一行 --- -column +一列 ## --video-solution-- diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md index 03b88fb678..86c77d7588 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md @@ -1,6 +1,6 @@ --- id: 5e7b9f180b6c005b0e76f08d -title: Representing Relationships in a Relational Database +title: 在關係型數據庫中表示關係 challengeType: 11 videoId: '-orenCNdC2Q' dashedName: representing-relationships-in-a-relational-database @@ -10,23 +10,23 @@ dashedName: representing-relationships-in-a-relational-database ## --text-- -What is a foreign key? +什麼是外鍵？ ## --answers-- -A key that is not supposed to be there. +一個不應存在於這裏的鍵 --- -A key that uses non-latin characters. +一個使用非拉丁字符的鍵 --- -A number that points to the primary key of an associated row in a different table. +一個指向不同表中關聯行的主鍵的數字 --- -A key that the "real world" might use to look up a row. +一個在“現實世界”中可能用於查找行的鍵 ## --video-solution-- diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md index c258b56bce..cd714d68ca 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md @@ -1,6 +1,6 @@ --- id: 5e7b9f690b6c005b0e76f095 -title: Visualizing Data with Python +title: 使用 Python 可視化數據 challengeType: 11 videoId: e3lydkH0prw dashedName: visualizing-data-with-python @@ -10,27 +10,27 @@ dashedName: visualizing-data-with-python ## --text-- -Most data needs to be \_\_\_\_\_\_ before using it. +大多數數據在使用之前需要 \_\_\_\_\_\_ 。 ## --answers-- -converted to JSON format +轉換爲 JSON 格式 --- -graphed +圖形化 --- -cleaned +清理 --- -memorized +記憶 --- -turned into song +轉化成歌曲 ## --video-solution-- diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-json.md index 336373054c..eaac841551 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-json.md @@ -1,6 +1,6 @@ --- id: 5e7b9f140b6c005b0e76f07d -title: 'Web Services: JSON' +title: 'Web 服務：JSON' challengeType: 11 videoId: ZJE-U56BppM dashedName: web-services-json @@ -10,7 +10,7 @@ dashedName: web-services-json ## --text-- -What will the following code print?: +這些代碼會打印出什麼？ ```python import json @@ -48,7 +48,7 @@ Mrugesh --- -[Error] +[Error]（錯誤） ## --video-solution-- diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md index dbeda928ee..42ec4c2660 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md @@ -1,6 +1,6 @@ --- id: 5e7b9f090b6c005b0e76f065 -title: Working with Lists +title: 使用列表 challengeType: 11 videoId: lCnHfTHkhbE dashedName: working-with-lists @@ -10,7 +10,7 @@ dashedName: working-with-lists ## --text-- -Which method is used to add an item at the end of a list? +使用下列哪種方法可以在列表末尾添加元素？ ## --answers-- diff --git a/curriculum/challenges/chinese/03-front-end-libraries/react/render-state-in-the-user-interface.md b/curriculum/challenges/chinese/03-front-end-libraries/react/render-state-in-the-user-interface.md index 3d834953f3..8e6a6156e1 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/react/render-state-in-the-user-interface.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/react/render-state-in-the-user-interface.md @@ -43,7 +43,7 @@ assert( ); ``` -渲染的 `h1` 标题中应该包含一段文本，这段文本是从组件的 state 中渲染出来的。 +渲染的 `h1` 标题中应该只包含一段文本，这段文本是从组件的 state 中渲染出来的。 ```js async () => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md index 42cddeb0c6..261bc1828f 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md @@ -78,7 +78,7 @@ passport.use(new GitHubStrategy({ (data) => { assert.match( data, - /passport\.use.*new GitHubStrategy/gi, + /passport\.use.*new GitHubStrategy/gis, 'Passport should use a new GitHubStrategy' ); assert.match( diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/american-british-translator.md index 1379eae12c..98c56a7066 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -130,7 +130,7 @@ async (getUserInput) => { }; ``` -`/api/translate` 路由也应该处理美式英语和英式英语中头衔/尊称的缩写方式。 例如，Doctor Wright 在英式英语中缩写为 “Dr Wright”，在美式英语中缩写为 “Dr. Wright"”。 查看 `/public/american-to-british-titles.js` 了应用程序应该处理的不同的头衔。 +`/api/translate` 路由也应该处理美式英语和英式英语中头衔/尊称的缩写方式。 例如，Doctor Wright 在英式英语中缩写为 “Dr Wright”，在美式英语中缩写为 “Dr. Wright"”。 请参阅 `/components/american-to-british-titles.js`，了解程序应当处理的不同标题。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/sudoku-solver.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/sudoku-solver.md index df3ae5158c..26038ad359 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/sudoku-solver.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/sudoku-solver.md @@ -40,7 +40,7 @@ dashedName: sudoku-solver - 逻辑处理一个无效的区域 (3x3 网格) - 有效解谜字符串通过 solver - 无效解谜字符串无法通过 solver -- solver 返回一个不完整谜题的的预期解决方案 +- Solver 返回一个不完整谜题的的预期解决方案 在 `tests/2_functional-tests.js` 中编写下以下测试： diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md index f1f0855d93..662bfcd6c0 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md @@ -1,6 +1,6 @@ --- id: 5e7b9f090b6c005b0e76f068 -title: 'Dictionaries: Common Applications' +title: '字典：常见应用' challengeType: 11 videoId: f17xPfIXct0 dashedName: dictionaries-common-applications @@ -10,7 +10,7 @@ dashedName: dictionaries-common-applications ## --text-- -What will the following code print? +这段代码将打印什么? ```python counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} @@ -35,7 +35,7 @@ quincy --- -[will return error] +[将返回错误] ## --video-solution-- diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md index 7196aa02da..3ef0c8a74c 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md @@ -1,6 +1,6 @@ --- id: 5e7b9f0c0b6c005b0e76f072 -title: Networking Protocol +title: 网络协议 challengeType: 11 videoId: c6vZGescaSc dashedName: networking-protocol @@ -10,7 +10,7 @@ dashedName: networking-protocol ## --text-- -What type of HTTP request is usually used to access a website? +通常使用哪种类型的 HTTP 请求来访问一个网站？ ## --answers-- diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md index bf0c895949..7f37e03673 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md @@ -1,6 +1,6 @@ --- id: 5e7b9f0c0b6c005b0e76f074 -title: 'Networking: Text Processing' +title: '联网：文本处理' challengeType: 11 videoId: Pv_pJgVu8WI dashedName: networking-text-processing @@ -10,7 +10,7 @@ dashedName: networking-text-processing ## --text-- -Which type of encoding do most websites use? +大多数网站使用哪种编码类型？ ## --answers-- diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md index 41fc6959e0..c5be00f70a 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md @@ -1,6 +1,6 @@ --- id: 5e7b9f0c0b6c005b0e76f073 -title: 'Networking: Write a Web Browser' +title: '联网：编写一个 Web 浏览器' challengeType: 11 videoId: zjyT9DaAjx4 dashedName: networking-write-a-web-browser @@ -10,7 +10,7 @@ dashedName: networking-write-a-web-browser ## --text-- -What does the following code create?: +以下代码创建了什么？ ```py import socket @@ -30,19 +30,19 @@ mysock.close() ## --answers-- -A simple web server. +一个简单的 web 服务器 --- -A simple email client. +一个简单的 email 客户端 --- -A simple todo list. +一个简单的待办事项列表 --- -A simple web browser. +一个简单的 web 浏览器 ## --video-solution-- diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md index c85eabd257..d3aafe998b 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md @@ -1,6 +1,6 @@ --- id: 5e7b9f170b6c005b0e76f087 -title: Object Lifecycle +title: 对象的生命周期 challengeType: 11 videoId: p1r3h_AMMIM dashedName: object-lifecycle @@ -10,7 +10,7 @@ dashedName: object-lifecycle ## --text-- -What will the following program print?: +以下程序将打印什么？ ```python class PartyAnimal: diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/reading-files.md index 9be11dc4f3..3c9dd1b013 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/reading-files.md @@ -1,6 +1,6 @@ --- id: 5e7b9f080b6c005b0e76f062 -title: Reading Files +title: 阅读文件中 challengeType: 11 videoId: Fo1tW09KIwo dashedName: reading-files @@ -10,7 +10,7 @@ dashedName: reading-files ## --text-- -What is used to indicate a new line in a string? +在字符串中，用什么来代表新的一行？ ## --answers-- diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md index 21f07615fc..c2a1a17f7c 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md @@ -1,6 +1,6 @@ --- id: 5e7b9f180b6c005b0e76f08c -title: Relational Database Design +title: 关系数据库设计 challengeType: 11 videoId: AqdfbrpkbHk dashedName: relational-database-design @@ -10,7 +10,7 @@ dashedName: relational-database-design ## --text-- -What is the best practice for how many times a piece of string data should be stored in a database? +对于一个字符串数据应该被保存在一个数据库里多少次，最佳实践是什么？ ## --answers-- diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md index 26732397d0..6f0b3d9f4a 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md @@ -1,6 +1,6 @@ --- id: 5e7b9f170b6c005b0e76f08a -title: Relational Databases and SQLite +title: 关系数据库和 SQLite challengeType: 11 videoId: QlNod5-kFpA dashedName: relational-databases-and-sqlite @@ -10,23 +10,23 @@ dashedName: relational-databases-and-sqlite ## --text-- -Which is NOT a primary data structure in a database? +哪个不是数据库中主要的数据结构？ ## --answers-- -index +指数 --- -table +表格 --- -row +一行 --- -column +一列 ## --video-solution-- diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md index 03b88fb678..58f343ea4c 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md @@ -1,6 +1,6 @@ --- id: 5e7b9f180b6c005b0e76f08d -title: Representing Relationships in a Relational Database +title: 在关系型数据库中表示关系 challengeType: 11 videoId: '-orenCNdC2Q' dashedName: representing-relationships-in-a-relational-database @@ -10,23 +10,23 @@ dashedName: representing-relationships-in-a-relational-database ## --text-- -What is a foreign key? +什么是外键？ ## --answers-- -A key that is not supposed to be there. +一个不应存在于这里的键 --- -A key that uses non-latin characters. +一个使用非拉丁字符的键 --- -A number that points to the primary key of an associated row in a different table. +一个指向不同表中关联行的主键的数字 --- -A key that the "real world" might use to look up a row. +一个在“现实世界”中可能用于查找行的键 ## --video-solution-- diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md index c258b56bce..3fb6cb2aba 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md @@ -1,6 +1,6 @@ --- id: 5e7b9f690b6c005b0e76f095 -title: Visualizing Data with Python +title: 使用 Python 可视化数据 challengeType: 11 videoId: e3lydkH0prw dashedName: visualizing-data-with-python @@ -10,27 +10,27 @@ dashedName: visualizing-data-with-python ## --text-- -Most data needs to be \_\_\_\_\_\_ before using it. +大多数数据在使用之前需要 \_\_\_\_\_\_ 。 ## --answers-- -converted to JSON format +转换为 JSON 格式 --- -graphed +图形化 --- -cleaned +清理 --- -memorized +记忆 --- -turned into song +转化成歌曲 ## --video-solution-- diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md index 336373054c..59e2d8b664 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md @@ -1,6 +1,6 @@ --- id: 5e7b9f140b6c005b0e76f07d -title: 'Web Services: JSON' +title: 'Web 服务：JSON' challengeType: 11 videoId: ZJE-U56BppM dashedName: web-services-json @@ -10,7 +10,7 @@ dashedName: web-services-json ## --text-- -What will the following code print?: +这些代码会打印出什么？ ```python import json @@ -48,7 +48,7 @@ Mrugesh --- -[Error] +[Error]（错误） ## --video-solution-- diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md index dbeda928ee..83a208cf96 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md @@ -1,6 +1,6 @@ --- id: 5e7b9f090b6c005b0e76f065 -title: Working with Lists +title: 使用列表 challengeType: 11 videoId: lCnHfTHkhbE dashedName: working-with-lists @@ -10,7 +10,7 @@ dashedName: working-with-lists ## --text-- -Which method is used to add an item at the end of a list? +使用下列哪种方法可以在列表末尾添加元素？ ## --answers-- diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-controlled-input.md b/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-controlled-input.md index 88c018d807..a3a29c558d 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-controlled-input.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-controlled-input.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036178 -title: Create a Controlled Input +title: Crea una entrada controlada challengeType: 6 forumTopicId: 301385 dashedName: create-a-controlled-input @@ -8,23 +8,23 @@ dashedName: create-a-controlled-input # --description-- -Your application may have more complex interactions between `state` and the rendered UI. For example, form control elements for text input, such as `input` and `textarea`, maintain their own state in the DOM as the user types. With React, you can move this mutable state into a React component's `state`. The user's input becomes part of the application `state`, so React controls the value of that input field. Typically, if you have React components with input fields the user can type into, it will be a controlled input form. +Tu aplicación puede tener interacciones más complejas entre `state` y la interfaz de usuario renderizada. Por ejemplo, elementos de control de formulario para la entrada de texto, tales como `input` y `textarea`, mantienen su propio estado en el DOM como los tipos de usuario. Con React, puedes mover este estado mutable hacia el `state` de un componente de React. La entrada del usuario se convierte en parte del `state` de la aplicación, así que React controla el valor de ese campo de entrada. Por lo general, si tienes componentes de React con campos de entrada en los que el usuario puede escribir, será un formulario de entrada controlado. # --instructions-- -The code editor has the skeleton of a component called `ControlledInput` to create a controlled `input` element. The component's `state` is already initialized with an `input` property that holds an empty string. This value represents the text a user types into the `input` field. +El editor de código tiene el esqueleto de un componente llamado `ControlledInput` para crear un elemento `input` controlado. El `state` del componente ya está inicializado con una propiedad `input` que contiene una cadena vacía. Este valor representa el texto que un usuario escribe en el campo `input`. -First, create a method called `handleChange()` that has a parameter called `event`. When the method is called, it receives an `event` object that contains a string of text from the `input` element. You can access this string with `event.target.value` inside the method. Update the `input` property of the component's `state` with this new string. +Primero, crea un método llamado `handleChange()` que tiene un parámetro llamado `event`. Cuando el método es llamado, este recibe un objeto `event` que contiene una cadena de texto del elemento `input`. Puedes acceder a esta cadena con `event.target.value` dentro del método. Actualiza la propiedad `input` del `state` del componente con esta nueva cadena. -In the render method, create the `input` element above the `h4` tag. Add a `value` attribute which is equal to the `input` property of the component's `state`. Then add an `onChange()` event handler set to the `handleChange()` method. +En el método `render`, crea el elemento `input` encima de la etiqueta `h4`. Añade un atributo `value` que es igual a la propiedad `input` del `state` del componente. Luego añade un manejador de eventos `onChange()` establecido al método `handleChange()`. -When you type in the input box, that text is processed by the `handleChange()` method, set as the `input` property in the local `state`, and rendered as the value in the `input` box on the page. The component `state` is the single source of truth regarding the input data. +Cuando escribes en el cuadro de entrada, ese texto es procesado por el método `handleChange()`, establecido como la propiedad `input` en el `state` local, y renderizado como el valor en el cuadro `input` de la página. El `state` del componente es la única fuente de verdad con respecto a los datos de entrada. -Last but not least, don't forget to add the necessary bindings in the constructor. +Por último, pero no menos importante, no olvides añadir los enlaces necesarios en el constructor. # --hints-- -`ControlledInput` should return a `div` element which contains an `input` and a `p` tag. +`ControlledInput` debe devolver un elemento `div` que contiene un `input` y una etiqueta `p`. ```js assert( @@ -39,7 +39,7 @@ assert( ); ``` -The state of `ControlledInput` should initialize with an `input` property set to an empty string. +El estado de `ControlledInput` debe inicializarse con una propiedad `input` establecida a una cadena vacía. ```js assert.strictEqual( @@ -48,7 +48,7 @@ assert.strictEqual( ); ``` -Typing in the input element should update the state and the value of the input, and the `p` element should render this state as you type. +Escribir en el elemento de entrada debe actualizar el estado y el valor de la entrada, y el elemento `p` debe renderizar este estado a medida que escribas. ```js async () => { diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-react-component.md b/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-react-component.md index 6a92615c1d..b5867d7178 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-react-component.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-react-component.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036163 -title: Create a React Component +title: Crea un componente de React challengeType: 6 forumTopicId: 301386 dashedName: create-a-react-component @@ -8,7 +8,7 @@ dashedName: create-a-react-component # --description-- -The other way to define a React component is with the ES6 `class` syntax. In the following example, `Kitten` extends `React.Component`: +La otra forma de definir un componente React es con la sintaxis de clase de ES6 `class`. En el siguiente ejemplo, `Kitten` hereda de `React.Component`: ```jsx class Kitten extends React.Component { @@ -24,21 +24,21 @@ class Kitten extends React.Component { } ``` -This creates an ES6 class `Kitten` which extends the `React.Component` class. So the `Kitten` class now has access to many useful React features, such as local state and lifecycle hooks. Don't worry if you aren't familiar with these terms yet, they will be covered in greater detail in later challenges. Also notice the `Kitten` class has a `constructor` defined within it that calls `super()`. It uses `super()` to call the constructor of the parent class, in this case `React.Component`. The constructor is a special method used during the initialization of objects that are created with the `class` keyword. It is best practice to call a component's `constructor` with `super`, and pass `props` to both. This makes sure the component is initialized properly. For now, know that it is standard for this code to be included. Soon you will see other uses for the constructor as well as `props`. +Esto crea una clase de ES6 `Kitten` que hereda de la clase `React.Component`. Así que la clase `Kitten` ahora tiene acceso a muchas características útiles de React, como el estado local y el ciclo de vida de los "hooks". No te preocupes si aún no estás familiarizado con estos términos, ya que se tratarán con más detalle en los desafíos posteriores. También ten en cuenta que la clase `Kitten` tiene un `constructor` definido dentro de ella que llama a `super()`. Utiliza `super()` para llamar al constructor de la clase padre, en este caso `React.Component`. El constructor es un método especial utilizado durante la inicialización de objetos que se crean con la palabra clave `class`. Es una mejor práctica llamar al `constructor` de un componente con `super`, y pasar sus propiedades `props` a ambos. Esto asegura que el componente esté inicializado correctamente. Por ahora, sepan que es estándar que se incluya este código. Pronto verás otros usos para el constructor, así como las `props`. # --instructions-- -`MyComponent` is defined in the code editor using class syntax. Finish writing the `render` method so it returns a `div` element that contains an `h1` with the text `Hello React!`. +`MyComponent` está definido en el editor de código usando la sintaxis de clase. Termina de escribir el método `render` para que devuelva un elemento `div` que contiene un `h1` con el texto `Hello React!`. # --hints-- -The React component should return a `div` element. +El componente React debe devolver un único elemento `div`. ```js assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div'); ``` -The returned `div` should render an `h1` header within it. +El `div` retornado debe renderizar un encabezado `h1` dentro de él. ```js assert( @@ -48,7 +48,7 @@ assert( ); ``` -The `h1` header should contain the string `Hello React!`. +El encabezado `h1` debe contener la cadena `Hello React!`. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-simple-jsx-element.md b/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-simple-jsx-element.md index ee4ee865a5..767a2702da 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-simple-jsx-element.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-simple-jsx-element.md @@ -1,6 +1,6 @@ --- id: 587d7dbc367417b2b2512bb1 -title: Create a Simple JSX Element +title: Crea un elemento JSX simple challengeType: 6 forumTopicId: 301390 dashedName: create-a-simple-jsx-element @@ -8,29 +8,29 @@ dashedName: create-a-simple-jsx-element # --description-- -**Intro:** React is an Open Source view library created and maintained by Facebook. It's a great tool to render the User Interface (UI) of modern web applications. +React es una librería de vistas de código abierto creada y mantenida por Facebook. Es una gran herramienta para hacer la interfaz de usuario (UI) de aplicaciones web modernas. -React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript. This has several benefits. It lets you use the full programmatic power of JavaScript within HTML, and helps to keep your code readable. For the most part, JSX is similar to the HTML that you have already learned, however there are a few key differences that will be covered throughout these challenges. +React usa una extensión de sintaxis de JavaScript llamada JSX que te permite escribir HTML directamente dentro de JavaScript. Esto tiene muchos beneficios. Te permite utilizar el poder programático completo de JavaScript dentro de HTML, y ayuda a mantener tu código legible. En su mayor parte, JSX es similar al HTML que ya has aprendido. Sin embargo, hay algunas diferencias clave que se abordarán a lo largo de estos desafíos. -For instance, because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX. To do this, you simply include the code you want to be treated as JavaScript within curly braces: `{ 'this is treated as JavaScript code' }`. Keep this in mind, since it's used in several future challenges. +Por ejemplo, dado que JSX es una extensión sintáctica de JavaScript, se puede escribir JavaScript directamente dentro de JSX. Para hacer esto, simplemente incluye el código que deseas que sea tratado como JavaScript entre llaves: `{ 'this is treated as JavaScript code' }`. Ten esto en cuenta, ya que se utiliza en varios desafíos futuros. -However, because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. The transpiler Babel is a popular tool for this process. For your convenience, it's already added behind the scenes for these challenges. If you happen to write syntactically invalid JSX, you will see the first test in these challenges fail. +Sin embargo, debido a que JSX no es JavaScript válido, el código JSX debe ser compilado en JavaScript. El transpilador Babel es una herramienta muy popular para este proceso. Para tu comodidad, ya se ha añadido tras bambalinas para estos desafíos. Si escribes JSX no válido sintácticamente, verás que la primera prueba de estos desafíos falla. -It's worth noting that under the hood the challenges are calling `ReactDOM.render(JSX, document.getElementById('root'))`. This function call is what places your JSX into React's own lightweight representation of the DOM. React then uses snapshots of its own DOM to optimize updating only specific parts of the actual DOM. +Vale la pena señalar que por debajo los desafíos están llamando `ReactDOM.render(JSX, document.getElementById('root'))`. Esta llamada de función es la que coloca tu JSX en la representación ligera del DOM de React. React entonces utiliza capturas instantáneas de su propio DOM para optimizar actualizando sólo partes específicas del DOM. # --instructions-- -**Instructions:** The current code uses JSX to assign a `div` element to the constant `JSX`. Replace the `div` with an `h1` element and add the text `Hello JSX!` inside it. +El código actual utiliza JSX para asignar un elemento `div` a la constante `JSX`. Reemplaza el `div` por un elemento `h1` y añade el texto `Hello JSX!` dentro de él. # --hints-- -The constant `JSX` should return an `h1` element. +La constante `JSX` debe devolver un elemento `h1`. ```js assert(JSX.type === 'h1'); ``` -The `h1` tag should include the text `Hello JSX!` +La etiqueta `h1` debe incluir el texto `Hello JSX!` ```js assert(Enzyme.shallow(JSX).contains('Hello JSX!')); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-stateful-component.md b/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-stateful-component.md index 86c86859cf..9d1e65f39e 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-stateful-component.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/create-a-stateful-component.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036170 -title: Create a Stateful Component +title: Crea un componente de estado challengeType: 6 forumTopicId: 301391 dashedName: create-a-stateful-component @@ -8,25 +8,25 @@ dashedName: create-a-stateful-component # --description-- -One of the most important topics in React is `state`. State consists of any data your application needs to know about, that can change over time. You want your apps to respond to state changes and present an updated UI when necessary. React offers a nice solution for the state management of modern web applications. +Uno de los temas más importantes en React es `state`. El estado consiste en cualquier dato que tu aplicación necesite conocer y que pueda cambiar con el tiempo. Quieres que tus aplicaciones respondan a los cambios de estado y presenten una interfaz de usuario actualizada cuando sea necesario. React ofrece una buena solución para el manejo de estado de aplicaciones web modernas. -You create state in a React component by declaring a `state` property on the component class in its `constructor`. This initializes the component with `state` when it is created. The `state` property must be set to a JavaScript `object`. Declaring it looks like this: +Creas un estado en un componente de React declarando una propiedad `state` en la clase del componente en su `constructor`. Esto inicializa el componente con `state` cuando se crea. La propiedad `state` debe establecerse en un `object` de JavaScript. Declararlo se ve así: ```jsx this.state = { - // describe your state here + } ``` -You have access to the `state` object throughout the life of your component. You can update it, render it in your UI, and pass it as props to child components. The `state` object can be as complex or as simple as you need it to be. Note that you must create a class component by extending `React.Component` in order to create `state` like this. +Tienes acceso al objeto `state` a lo largo de la vida de tu componente. Puedes actualizarlo, renderizarlo en tu interfaz de usuario y pasarlo como propiedades a componentes hijos. El objeto `state` puede ser tan complejo o simple como lo necesites. Ten en cuenta que debes crear un componente de clase heredando `React.Component` para crear un `state` como este. # --instructions-- -There is a component in the code editor that is trying to render a `name` property from its `state`. However, there is no `state` defined. Initialize the component with `state` in the `constructor` and assign your name to a property of `name`. +Hay un componente en el editor de código que está intentando renderizar una propiedad `name` desde su `state`. Sin embargo, no hay ningún `state` definido. Inicializa el componente con `state` en el `constructor` y asigna tu nombre a una propiedad de `name`. # --hints-- -`StatefulComponent` should exist and render. +`StatefulComponent` debe existir y renderizar. ```js assert( @@ -39,7 +39,7 @@ assert( ); ``` -`StatefulComponent` should render a `div` and an `h1` element. +`StatefulComponent` debe renderizar un `div` y un elemento `h1`. ```js assert( @@ -55,7 +55,7 @@ assert( ); ``` -The state of `StatefulComponent` should be initialized with a property `name` set to a string. +El estado de `StatefulComponent` debe inicializarse con una propiedad `name` establecida a una cadena. ```js assert( @@ -71,7 +71,7 @@ assert( ); ``` -The property `name` in the state of `StatefulComponent` should render in the `h1` element. +La propiedad `name` en el estado de `StatefulComponent` debe renderizarse en el elemento `h1`. ```js assert( diff --git a/curriculum/challenges/italian/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.md b/curriculum/challenges/italian/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.md index 0d6cca62f6..7d865096c4 100644 --- a/curriculum/challenges/italian/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.md +++ b/curriculum/challenges/italian/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403618a -title: Use Array.map() to Dynamically Render Elements +title: Usare Array.map() per presentare dinamicamente gli elementi challengeType: 6 forumTopicId: 301417 dashedName: use-array-map-to-dynamically-render-elements @@ -8,21 +8,21 @@ dashedName: use-array-map-to-dynamically-render-elements # --description-- -Conditional rendering is useful, but you may need your components to render an unknown number of elements. Often in reactive programming, a programmer has no way to know what the state of an application is until runtime, because so much depends on a user's interaction with that program. Programmers need to write their code to correctly handle that unknown state ahead of time. Using `Array.map()` in React illustrates this concept. +Il rendering condizionale è utile, ma potresti aver bisogno che i tuoi componenti presentino un numero sconosciuto di elementi. Spesso nella programmazione reattiva, un programmatore non ha modo di sapere qual è lo stato di un'applicazione fino al runtime, perché molto dipende dall'interazione di un utente con quel programma. I programmatori devono quindi scrivere il loro codice per gestire correttamente quello stato sconosciuto prima di conoscerlo. L'uso di `Array.map()` in React illustra questo concetto. -For example, you create a simple "To Do List" app. As the programmer, you have no way of knowing how many items a user might have on their list. You need to set up your component to dynamically render the correct number of list elements long before someone using the program decides that today is laundry day. +Creiamo ad esempio una semplice app "To Do List". Come programmatore, non hai modo di sapere quanti elementi un utente potrebbe avere nella sua lista. È necessario impostare il componente per presentare dinamicamente il numero corretto di elementi della lista molto prima che qualcuno che utilizza il programma decida che oggi è giorno di bucato. # --instructions-- -The code editor has most of the `MyToDoList` component set up. Some of this code should look familiar if you completed the controlled form challenge. You'll notice a `textarea` and a `button`, along with a couple of methods that track their states, but nothing is rendered to the page yet. +Nell'editor di codice troverai il componente `MyToDoList` quasi completamente configurato. Alcune parti di questo codice dovrebbero esserti familiari se hai completato la sfida del modulo controllato. Noterai una `textarea` e un `button`, insieme a un paio di metodi che tracciano i loro stati, ma per il momento niente è ancora presentato nella pagina. -Inside the `constructor`, create a `this.state` object and define two states: `userInput` should be initialized as an empty string, and `toDoList` should be initialized as an empty array. Next, delete the comment in the `render()` method next to the `items` variable. In its place, map over the `toDoList` array stored in the component's internal state and dynamically render a `li` for each item. Try entering the string `eat, code, sleep, repeat` into the `textarea`, then click the button and see what happens. +All'interno del `constructor`, crea un oggetto `this.state` e definisci due stati: `userInput` dovrebbe essere inizializzato con una stringa vuota, e `toDoList` dovrebbe essere inizializzato con un array vuoto. Successivamente, elimina il commento nel metodo `render()` accanto alla variabile `items`. Al suo posto, mappa l'array `toDoList` memorizzato nello stato interno del componente e presenta dinamicamente un `li` per ogni elemento. Prova ad inserire la stringa `eat, code, sleep, repeat` nella `textarea`, quindi fai clic sul bottone per vedere cosa succede. -**Note:** You may know that all sibling child elements created by a mapping operation like this do need to be supplied with a unique `key` attribute. Don't worry, this is the topic of the next challenge. +**Nota:** Forse sai già che tutti gli elementi figli (e fratelli tra loro) creati da un'operazione di mappatura come questa devono essere forniti con un attributo `key` univoco. Non ti preoccupare, questo è il tema della prossima sfida. # --hints-- -The MyToDoList component should exist and render to the page. +Il componente MyToDoList dovrebbe esistere ed essere presentato nella pagina. ```js assert( @@ -33,7 +33,7 @@ assert( ); ``` -The first child of `MyToDoList` should be a `textarea` element. +Il primo figlio di `MyToDoList` dovrebbe essere un elemento `textarea`. ```js assert( @@ -47,7 +47,7 @@ assert( ); ``` -The second child of `MyToDoList` should be a `br` element. +Il secondo figlio di `MyToDoList` dovrebbe essere un elemento `br`. ```js assert( @@ -60,7 +60,7 @@ assert( ); ``` -The third child of `MyToDoList` should be a `button` element. +Il terzo figlio di `MyToDoList` dovrebbe essere un elemento `button`. ```js assert( @@ -74,7 +74,7 @@ assert( ); ``` -The state of `MyToDoList` should be initialized with `toDoList` as an empty array. +Lo stato di `MyToDoList` dovrebbe essere inizializzato con `toDoList` come un array vuoto. ```js assert( @@ -89,7 +89,7 @@ assert( ); ``` -The state of `MyToDoList` should be initialized with `userInput` as an empty string. +Lo stato di `MyToDoList` dovrebbe essere inizializzato con `userInput` come una stringa vuota. ```js assert( @@ -104,7 +104,7 @@ assert( ); ``` -When the `Create List` button is clicked, the `MyToDoList` component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the `textarea` element. +Quando viene cliccato il bottone `Create List`, il componente `MyToDoList` dovrebbe restituire dinamicamente una lista non ordinata che contiene un li (list item) per ogni elemento di una lista separata da virgole inserito nell'elemento `textarea`. ```js (() => { diff --git a/curriculum/challenges/italian/03-front-end-libraries/react/use-default-props.md b/curriculum/challenges/italian/03-front-end-libraries/react/use-default-props.md index 1f048ada95..f4faecab42 100644 --- a/curriculum/challenges/italian/03-front-end-libraries/react/use-default-props.md +++ b/curriculum/challenges/italian/03-front-end-libraries/react/use-default-props.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403616b -title: Use Default Props +title: Usare le proprietà predefinite challengeType: 6 forumTopicId: 301418 dashedName: use-default-props @@ -8,15 +8,15 @@ dashedName: use-default-props # --description-- -React also has an option to set default props. You can assign default props to a component as a property on the component itself and React assigns the default prop if necessary. This allows you to specify what a prop value should be if no value is explicitly provided. For example, if you declare `MyComponent.defaultProps = { location: 'San Francisco' }`, you have defined a location prop that's set to the string `San Francisco`, unless you specify otherwise. React assigns default props if props are undefined, but if you pass `null` as the value for a prop, it will remain `null`. +React ha anche un'opzione per impostare props predefinite. È possibile assegnare props predefinite a un componente come una proprietà del componente stesso, in modo che React le assegni quando necessario. Questo ti permette di specificare quale valore dovrebbe avere una prop se nessun valore è esplicitamente fornito. Ad esempio, se dichiari `MyComponent.defaultProps = { location: 'San Francisco' }`, hai definito una prop location impostata sulla stringa `San Francisco`, a meno che non specifichi diversamente. React assegna le prop di default se non sono definite, ma se passi `null` come valore per una prop, essa rimarrà pari a `null`. # --instructions-- -The code editor shows a `ShoppingCart` component. Define default props on this component which specify a prop `items` with a value of `0`. +L'editor di codice mostra un componente `ShoppingCart`. Definisci gli elementi predefiniti su questo componente in modo che specifichino una prop `items` con un valore di `0`. # --hints-- -The `ShoppingCart` component should render. +Il componente `ShoppingCart` dovrebbe essere presentato. ```js assert( @@ -27,7 +27,7 @@ assert( ); ``` -The `ShoppingCart` component should have a default prop of `{ items: 0 }`. +Il componente `ShoppingCart` dovrebbe avere una prop predefinita di `{ items: 0 }`. ```js assert( diff --git a/curriculum/challenges/italian/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md b/curriculum/challenges/italian/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md index 2c6a725994..4d7708e23c 100644 --- a/curriculum/challenges/italian/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md +++ b/curriculum/challenges/italian/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403616d -title: Use PropTypes to Define the Props You Expect +title: Usare i PropTypes per definire le Prop attese challengeType: 6 forumTopicId: 301419 dashedName: use-proptypes-to-define-the-props-you-expect @@ -8,25 +8,25 @@ dashedName: use-proptypes-to-define-the-props-you-expect # --description-- -React provides useful type-checking features to verify that components receive props of the correct type. For example, your application makes an API call to retrieve data that you expect to be in an array, which is then passed to a component as a prop. You can set `propTypes` on your component to require the data to be of type `array`. This will throw a useful warning when the data is of any other type. +React fornisce utili funzioni di verifica del tipo per verificare che i componenti ricevano proprietà del tipo corretto. Ad esempio, la tua applicazione effettua una chiamata API per recuperare dei dati che ti aspetti essere in un array, che viene poi passato a un componente come proprietà. Puoi impostare `propTypes` sul tuo componente per richiedere che i dati siano di tipo `array`. Questo generà un avviso utile quando i dati saranno di qualsiasi altro tipo. -It's considered a best practice to set `propTypes` when you know the type of a prop ahead of time. You can define a `propTypes` property for a component in the same way you defined `defaultProps`. Doing this will check that props of a given key are present with a given type. Here's an example to require the type `function` for a prop called `handleClick`: +È considerata una buona pratica impostare `propTypes` quando si conosce il tipo di una prop in anticipo. Puoi definire una proprietà `propTypes` per un componente nello stesso modo in cui hai definito `defaultProps`. In questo modo si verificherà che la prop con una data chiave sia presenti con un dato tipo. Ecco un esempio per richiedere il tipo `function` per una prop chiamata `handleClick`: ```js MyComponent.propTypes = { handleClick: PropTypes.func.isRequired } ``` -In the example above, the `PropTypes.func` part checks that `handleClick` is a function. Adding `isRequired` tells React that `handleClick` is a required property for that component. You will see a warning if that prop isn't provided. Also notice that `func` represents `function`. Among the seven JavaScript primitive types, `function` and `boolean` (written as `bool`) are the only two that use unusual spelling. In addition to the primitive types, there are other types available. For example, you can check that a prop is a React element. Please refer to the [documentation](https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type) for all of the options. +Nell'esempio sopra, la parte `PropTypes.func` controlla che `handleClick` sia una funzione. Aggiungendo `isRequired` si dice a React che `handleClick` è una proprietà richiesta per quel componente. Se quella prop non è fornita vedrai un avviso. Nota anche che `func` rappresenta `function`. Tra i sette tipi primitivi JavaScript, `function` e `boolean` (scritto come `bool`) sono gli unici che usano un'ortografia insolita. Oltre ai tipi primitivi, ci sono altri tipi disponibili. Ad esempio, puoi controllare che una prop sia un elemento React. Fai riferimento alla [documentazione](https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type) per tutte le opzioni. -**Note:** As of React v15.5.0, `PropTypes` is imported independently from React, like this: `import PropTypes from 'prop-types';` +**Nota:** A partire da React v15.5.0, `PropTypes` viene importato indipendentemente da React, in questo modo: `import PropTypes from 'prop-types';` # --instructions-- -Define `propTypes` for the `Items` component to require `quantity` as a prop and verify that it is of type `number`. +Definisci `propTypes` in modo che il componente `Items` richieda `quantity` come prop e verifica che sia di tipo `number`. # --hints-- -The `ShoppingCart` component should render. +Il componente `ShoppingCart` dovrebbe essere presentato. ```js assert( @@ -37,7 +37,7 @@ assert( ); ``` -The `Items` component should render. +Il componente `Items` dovrebbe essere presentato. ```js assert( @@ -48,7 +48,7 @@ assert( ); ``` -The `Items` component should include a `propTypes` check to require a value for `quantity` and ensure that its value is a number. +Il componente `Items` dovrebbe includere un controllo di `propTypes` per richiedere un valore per `quantity` e assicurarsi che il suo valore sia un numero. ```js (getUserInput) => diff --git a/curriculum/challenges/italian/03-front-end-libraries/react/use-react-to-render-nested-components.md b/curriculum/challenges/italian/03-front-end-libraries/react/use-react-to-render-nested-components.md index 3f98507054..3181d9586d 100644 --- a/curriculum/challenges/italian/03-front-end-libraries/react/use-react-to-render-nested-components.md +++ b/curriculum/challenges/italian/03-front-end-libraries/react/use-react-to-render-nested-components.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036165 -title: Use React to Render Nested Components +title: Usare React per presentare i componenti annidati challengeType: 6 forumTopicId: 301420 dashedName: use-react-to-render-nested-components @@ -8,23 +8,23 @@ dashedName: use-react-to-render-nested-components # --description-- -The last challenge showed a simple way to compose two components, but there are many different ways you can compose components with React. +L'ultima sfida ha mostrato un modo semplice per comporre due componenti, ma ci sono molti modi diversi per comporre componenti con React. -Component composition is one of React's powerful features. When you work with React, it is important to start thinking about your user interface in terms of components like the App example in the last challenge. You break down your UI into its basic building blocks, and those pieces become the components. This helps to separate the code responsible for the UI from the code responsible for handling your application logic. It can greatly simplify the development and maintenance of complex projects. +La composizione dei componenti è una delle potenti caratteristiche di React. Quando si lavora con React, è importante iniziare a pensare alla tua interfaccia utente in termini di componenti come abbiamo visto nell'App di esempio dell'ultima sfida. Scomponi la tua interfaccia utente nei suoi blocchi di base e quei pezzi diventeranno i componenti. Questo aiuta a separare il codice responsabile dell'interfaccia utente dal codice responsabile della gestione della logica dell'applicazione. Questo può semplificare notevolmente lo sviluppo e il mantenimento di progetti complessi. # --instructions-- -There are two functional components defined in the code editor, called `TypesOfFruit` and `Fruits`. Take the `TypesOfFruit` component and compose it, or *nest* it, within the `Fruits` component. Then take the `Fruits` component and nest it within the `TypesOfFood` component. The result should be a child component, nested within a parent component, which is nested within a parent component of its own! +Ci sono due componenti funzionali definiti nell'editor di codice, chiamati `TypesOfFruit` e `Fruits`. Prendi il componente `TypesOfFruit` e componilo o *annidalo* all'interno del componente `Fruits`. Quindi prendi il componente `Fruits` e annidalo all'interno del componente `TypesOfFood`. Il risultato dovrebbe essere un componente figlio, annidato all'interno di un componente genitore, che è annidato all'interno di un componente genitore proprio! # --hints-- -The `TypesOfFood` component should return a single `div` element. +Il componente `TypesOfFood` dovrebbe restituire un singolo elemento `div`. ```js assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div'); ``` -The `TypesOfFood` component should return the `Fruits` component. +Il componente `TypesOfFood` dovrebbe restituire il componente `Fruits`. ```js assert( @@ -33,7 +33,7 @@ assert( ); ``` -The `Fruits` component should return the `TypesOfFruit` component. +Il componente `Fruits` dovrebbe restituire il componente `TypesOfFruit`. ```js assert( @@ -42,7 +42,7 @@ assert( ); ``` -The `TypesOfFruit` component should return the `h2` and `ul` elements. +Il componente `TypesOfFruit` dovrebbe restituire gli elementi `h2` e `ul`. ```js assert( diff --git a/curriculum/challenges/italian/03-front-end-libraries/react/use-state-to-toggle-an-element.md b/curriculum/challenges/italian/03-front-end-libraries/react/use-state-to-toggle-an-element.md index d4b7578928..1b3bb8241e 100644 --- a/curriculum/challenges/italian/03-front-end-libraries/react/use-state-to-toggle-an-element.md +++ b/curriculum/challenges/italian/03-front-end-libraries/react/use-state-to-toggle-an-element.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036176 -title: Use State to Toggle an Element +title: Usare lo stato per attivare e disattivare un elemento challengeType: 6 forumTopicId: 301421 dashedName: use-state-to-toggle-an-element @@ -8,7 +8,7 @@ dashedName: use-state-to-toggle-an-element # --description-- -Sometimes you might need to know the previous state when updating the state. However, state updates may be asynchronous - this means React may batch multiple `setState()` calls into a single update. This means you can't rely on the previous value of `this.state` or `this.props` when calculating the next value. So, you should not use code like this: +A volte potrebbe essere necessario conoscere lo stato precedente quando si aggiorna lo stato. Tuttavia, gli aggiornamenti dello stato possono essere asincroni - questo significa che React può raggruppare più chiamate `setState()` in un singolo aggiornamento. Questo significa che non puoi fare affidamento sul valore precedente di `this.state` o di `this.props` quando calcoli il valore successivo. Quindi, non si dovrebbe utilizzare il codice in questo modo: ```jsx this.setState({ @@ -16,7 +16,7 @@ this.setState({ }); ``` -Instead, you should pass `setState` a function that allows you to access state and props. Using a function with `setState` guarantees you are working with the most current values of state and props. This means that the above should be rewritten as: +Invece, dovresti passare a `setState` una funzione che ti permetta di accedere a stato e props. L'utilizzo di una funzione con `setState` garantisce che si sta lavorando con i valori più aggiornati di stato e props. Questo significa che quanto sopra dovrebbe essere riscritto come: ```jsx this.setState((state, props) => ({ @@ -24,7 +24,7 @@ this.setState((state, props) => ({ })); ``` -You can also use a form without `props` if you need only the `state`: +Puoi anche usare una forma senza `props` se hai bisogno solo dello `state`: ```jsx this.setState(state => ({ @@ -32,21 +32,21 @@ this.setState(state => ({ })); ``` -Note that you have to wrap the object literal in parentheses, otherwise JavaScript thinks it's a block of code. +Nota che devi avvolgere l'oggetto letterale tra parentesi, altrimenti JavaScript pensa che sia un blocco di codice. # --instructions-- -`MyComponent` has a `visibility` property which is initialized to `false`. The render method returns one view if the value of `visibility` is true, and a different view if it is false. +`MyComponent` ha una proprietà `visibility` che viene inizializzata a `false`. Il metodo render restituisce una vista se il valore di `visibility` è true, e una vista diversa se è false. -Currently, there is no way of updating the `visibility` property in the component's `state`. The value should toggle back and forth between true and false. There is a click handler on the button which triggers a class method called `toggleVisibility()`. Pass a function to `setState` to define this method so that the `state` of `visibility` toggles to the opposite value when the method is called. If `visibility` is `false`, the method sets it to `true`, and vice versa. +Attualmente, non c'è modo di aggiornare la proprietà `visibility` nello `state` del componente. Il valore dovrebbe commutare avanti e indietro tra vero e falso. C'è un gestore di click sul bottone che attiva un metodo di classe chiamato `toggleVisibility()`. Passa una funzione a `setState` per definire questo metodo in modo che lo `state` di `visibility` commuti al valore opposto quando viene chiamato il metodo. Se `visibility` è `false`, il metodo lo imposta a `true`, e viceversa. -Finally, click the button to see the conditional rendering of the component based on its `state`. +Infine, fai click sul pulsante per vedere il rendering condizionale del componente in base al suo `state`. -**Hint:** Don't forget to bind the `this` keyword to the method in the `constructor`! +**Suggerimento:** Non dimenticare di associare la parola chiave `this` al metodo nel `constructor`! # --hints-- -`MyComponent` should return a `div` element which contains a `button`. +`MyComponent` dovrebbe restituire un elemento `div` che contiene un `button`. ```js assert.strictEqual( @@ -56,7 +56,7 @@ assert.strictEqual( ); ``` -The state of `MyComponent` should initialize with a `visibility` property set to `false`. +Lo stato di `MyComponent` dovrebbe essere inizializzato con una proprietà `visibility` impostata su `false`. ```js assert.strictEqual( @@ -65,7 +65,7 @@ assert.strictEqual( ); ``` -Clicking the button element should toggle the `visibility` property in state between `true` and `false`. +Cliccando sul bottone si dovrebbe commutare la proprietà `visibility` nello stato, tra i due valori `true` e `false`. ```js (() => { @@ -89,7 +89,7 @@ Clicking the button element should toggle the `visibility` property in state bet })(); ``` -An anonymous function should be passed to `setState`. +Una funzione anonima dovrebbe essere passata a `setState`. ```js const paramRegex = '[a-zA-Z$_]\\w*(,[a-zA-Z$_]\\w*)?'; @@ -104,7 +104,7 @@ assert( ); ``` -`this` should not be used inside `setState` +`this` non dovrebbe essere usato all'interno di `setState` ```js assert(!/this\.setState\([^}]*this/.test(code)); diff --git a/curriculum/challenges/italian/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.md b/curriculum/challenges/italian/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.md index f20b192ce8..70f2d98f6e 100644 --- a/curriculum/challenges/italian/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.md +++ b/curriculum/challenges/italian/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403617d -title: Use the Lifecycle Method componentDidMount +title: Usare il metodo del ciclo di vita componentDidMount challengeType: 6 forumTopicId: 301422 dashedName: use-the-lifecycle-method-componentdidmount @@ -8,17 +8,17 @@ dashedName: use-the-lifecycle-method-componentdidmount # --description-- -Most web developers, at some point, need to call an API endpoint to retrieve data. If you're working with React, it's important to know where to perform this action. +La maggior parte degli sviluppatori web, a un certo punto, deve chiamare un'API endpoint per recuperare i dati. Se stai lavorando con React, è importante sapere dove eseguire questa azione. -The best practice with React is to place API calls or any calls to your server in the lifecycle method `componentDidMount()`. This method is called after a component is mounted to the DOM. Any calls to `setState()` here will trigger a re-rendering of your component. When you call an API in this method, and set your state with the data that the API returns, it will automatically trigger an update once you receive the data. +La migliore pratica con React è quella di effettuare chiamate API o qualsiasi chiamata al server nel metodo del ciclo di vita `componentDidMount()`. Questo metodo viene chiamato dopo che un componente è stato montato nel DOM. Qualsiasi chiamata a `setState()` qui attiverà un re-rendering del tuo componente. Quando chiami un'API in questo metodo, e imposti il tuo stato con i dati che l'API restituisce, si attiverà automaticamente un aggiornamento una volta che i dati saranno ricevuti. # --instructions-- -There is a mock API call in `componentDidMount()`. It sets state after 2.5 seconds to simulate calling a server to retrieve data. This example requests the current total active users for a site. In the render method, render the value of `activeUsers` in the `h1` after the text `Active Users:`. Watch what happens in the preview, and feel free to change the timeout to see the different effects. +C'è una chiamata API finta in `componentDidMount()`. Essa imposta lo stato dopo 2.5 secondi per simulare la chiamata a un server per recuperare i dati. Questo esempio richiede il numero di utenti attivi per un sito. Nel metodo render, presenta il valore di `activeUsers` nell'`h1` dopo il testo `Active Users:`. Guarda cosa succede nell'anteprima e sentiti libero di cambiare il timeout per vedere i diversi effetti. # --hints-- -`MyComponent` should render a `div` element which wraps an `h1` tag. +`MyComponent` dovrebbe mostrare un elemento `div` che contiene un tag `h1`. ```js assert( @@ -32,7 +32,7 @@ assert( ); ``` -Component state should be updated with a timeout function in `componentDidMount`. +Lo stato del componente dovrebbe essere aggiornato con una funzione timeout in `componentDidMount`. ```js assert( @@ -45,7 +45,7 @@ assert( ); ``` -The `h1` tag should render the `activeUsers` value from `MyComponent`'s state. +Il tag `h1` dovrebbe presentare il valore `activeUsers` dallo stato di `MyComponent`. ```js (() => { diff --git a/curriculum/challenges/italian/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.md b/curriculum/challenges/italian/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.md index 6095a48eed..753acac0da 100644 --- a/curriculum/challenges/italian/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.md +++ b/curriculum/challenges/italian/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403617c -title: Use the Lifecycle Method componentWillMount +title: Usare il metodo del ciclo di vita componentWillMount challengeType: 6 forumTopicId: 301423 dashedName: use-the-lifecycle-method-componentwillmount @@ -8,17 +8,17 @@ dashedName: use-the-lifecycle-method-componentwillmount # --description-- -React components have several special methods that provide opportunities to perform actions at specific points in the lifecycle of a component. These are called lifecycle methods, or lifecycle hooks, and allow you to catch components at certain points in time. This can be before they are rendered, before they update, before they receive props, before they unmount, and so on. Here is a list of some of the main lifecycle methods: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()` The next several lessons will cover some of the basic use cases for these lifecycle methods. +I componenti React hanno diversi metodi speciali che offrono l'opportunità di eseguire azioni in punti specifici del ciclo di vita di un componente. Questi sono chiamati metodi del ciclo di vita, o hooks (ganci) del ciclo di vita, e consentono di intercettare i componenti in determinati istanti. Ad esempio prima che sia fatto il render del componente, prima di aggiornarlo, prima di ricevere le prop, prima di smontarlo, e così via. Ecco un elenco di alcuni dei principali metodi del ciclo di vita: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()` Le prossime lezioni copriranno alcuni dei casi di base per questi metodi del ciclo di vita. -**Note:** The `componentWillMount` Lifecycle method will be deprecated in a future version of 16.X and removed in version 17. [(Source)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) +**Nota:** Il metodo del ciclo di vita `componentWillMount` sarà deprecato in una versione futura di 16.X e rimosso nella versione 17. [(Fonte)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) # --instructions-- -The `componentWillMount()` method is called before the `render()` method when a component is being mounted to the DOM. Log something to the console within `componentWillMount()` - you may want to have your browser console open to see the output. +Il metodo `componentWillMount()` viene chiamato prima del metodo `render()` quando un componente viene montato sul DOM. Scrivi qualcosa nella console all'interno di `componentWillMount()` - potresti aprire la console del browser per vedere l'output. # --hints-- -`MyComponent` should render a `div` element. +`MyComponent` dovrebbe presentare un elemento `div`. ```js assert( @@ -29,7 +29,7 @@ assert( ); ``` -`console.log` should be called in `componentWillMount`. +`console.log` dovrebbe essere chiamato in `componentWillMount`. ```js assert( diff --git a/curriculum/challenges/italian/03-front-end-libraries/react/write-a-react-component-from-scratch.md b/curriculum/challenges/italian/03-front-end-libraries/react/write-a-react-component-from-scratch.md index 83cf8603ab..355176ea4c 100644 --- a/curriculum/challenges/italian/03-front-end-libraries/react/write-a-react-component-from-scratch.md +++ b/curriculum/challenges/italian/03-front-end-libraries/react/write-a-react-component-from-scratch.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036168 -title: Write a React Component from Scratch +title: Scrivere un componente React da zero challengeType: 6 forumTopicId: 301424 dashedName: write-a-react-component-from-scratch @@ -8,17 +8,17 @@ dashedName: write-a-react-component-from-scratch # --description-- -Now that you've learned the basics of JSX and React components, it's time to write a component on your own. React components are the core building blocks of React applications so it's important to become very familiar with writing them. Remember, a typical React component is an ES6 `class` which extends `React.Component`. It has a render method that returns HTML (from JSX) or `null`. This is the basic form of a React component. Once you understand this well, you will be prepared to start building more complex React projects. +Ora che hai imparato le basi dei componenti JSX e React, è il momento di scrivere un componente da solo. I componenti di React sono gli elementi fondamentali delle applicazioni React quindi è importante acquisire familiarità con la loro scrittura. Ricorda, un componente React tipico è una `class` ES6 che estende `React.Component`. Essa ha un metodo render che restituisce HTML (da JSX) o `null`. Questa è la forma di base di una componente React. Una volta che avrai capito bene questo, sarai pronto a iniziare a costruire progetti React più complessi. # --instructions-- -Define a class `MyComponent` that extends `React.Component`. Its render method should return a `div` that contains an `h1` tag with the text: `My First React Component!` in it. Use this text exactly, the case and punctuation matter. Make sure to call the constructor for your component, too. +Definisci una classe `MyComponent` che estenda `React.Component`. Il suo metodo render dovrebbe restituire un `div` che contiene un tag `h1` con il testo: `My First React Component!` in esso. Usa questo testo esattamente, le maiuscole e la punteggiatura contano. Assicurati di chiamare anche il costruttore per il tuo componente. -Render this component to the DOM using `ReactDOM.render()`. There is a `div` with `id='challenge-node'` available for you to use. +Presenta questo componente nel DOM usando `ReactDOM.render()`. C'è un `div` con `id='challenge-node'` pronto all'uso per te. # --hints-- -There should be a React component called `MyComponent`. +Ci dovrebbe essere un componente React chiamato `MyComponent`. ```js (getUserInput) => @@ -29,7 +29,7 @@ There should be a React component called `MyComponent`. ); ``` -`MyComponent` should contain an `h1` tag with text `My First React Component!` Case and punctuation matter. +`MyComponent` dovrebbe contenere un tag `h1` con testo `My First React Component!` Maiuscole e punteggiatura contano. ```js assert( @@ -40,13 +40,13 @@ assert( ); ``` -`MyComponent` should render to the DOM. +`MyComponent` dovrebbe essere presentato nel DOM. ```js assert(document.getElementById('challenge-node').childNodes.length === 1); ``` -`MyComponent` should have a constructor calling `super` with `props`. +`MyComponent` dovrebbe avere un costruttore che chiama `super` con `props`. ```js assert( diff --git a/curriculum/challenges/italian/03-front-end-libraries/react/write-a-simple-counter.md b/curriculum/challenges/italian/03-front-end-libraries/react/write-a-simple-counter.md index 9522c78e54..ff780111a5 100644 --- a/curriculum/challenges/italian/03-front-end-libraries/react/write-a-simple-counter.md +++ b/curriculum/challenges/italian/03-front-end-libraries/react/write-a-simple-counter.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036177 -title: Write a Simple Counter +title: Scrivere un semplice contatore challengeType: 6 forumTopicId: 301425 dashedName: write-a-simple-counter @@ -8,17 +8,17 @@ dashedName: write-a-simple-counter # --description-- -You can design a more complex stateful component by combining the concepts covered so far. These include initializing `state`, writing methods that set `state`, and assigning click handlers to trigger these methods. +È possibile progettare un componente stateful più complesso combinando i concetti visti finora. Questi includono l'inizializzazione dello `state`, la scrittura di metodi che impostano lo `state` e l'assegnazione di gestori di click per attivare questi metodi. # --instructions-- -The `Counter` component keeps track of a `count` value in `state`. There are two buttons which call methods `increment()` and `decrement()`. Write these methods so the counter value is incremented or decremented by 1 when the appropriate button is clicked. Also, create a `reset()` method so when the reset button is clicked, the count is set to 0. +Il componente `Counter` tiene traccia di un valore `count` nello `state`. Ci sono due bottoni che chiamano i metodi `increment()` e `decrement()`. Scrivi questi metodi in modo che il valore del contatore venga incrementato o decrementato di 1 quando viene fatto click sul bottone appropriato. Inoltre, crea un metodo `reset()` in modo che quando si clicca il pulsante reset, il conteggio venga impostato a 0. -**Note:** Make sure you don't modify the `className`s of the buttons. Also, remember to add the necessary bindings for the newly-created methods in the constructor. +**Nota:** Assicurati di non modificare le `className` dei bottoni. Inoltre, ricordati di aggiungere i legami (bindings) necessari ai metodi appena creati nel costruttore. # --hints-- -`Counter` should return a `div` element which contains three buttons with text content in this order `Increment!`, `Decrement!`, `Reset`. +`Counter` dovrebbe restituire un elemento `div` che contiene tre pulsanti con contenuto di testo nell'ordine: `Increment!`, `Decrement!`, `Reset`. ```js assert( @@ -33,14 +33,14 @@ assert( ); ``` -The state of `Counter` should initialize with a `count` property set to `0`. +Lo stato di `Counter` dovrebbe essere inizializzato con una proprietà `count` impostata a `0`. ```js const mockedComponent = Enzyme.mount(React.createElement(Counter)); assert(mockedComponent.find('h1').text() === 'Current Count: 0'); ``` -Clicking the increment button should increment the count by `1`. +Cliccando sul bottone di incremento il conteggio dovrebbe aumentare di `1`. ```js const mockedComponent = Enzyme.mount(React.createElement(Counter)); @@ -48,7 +48,7 @@ mockedComponent.find('.inc').simulate('click'); assert(mockedComponent.find('h1').text() === 'Current Count: 1'); ``` -Clicking the decrement button should decrement the count by `1`. +Cliccando sul bottone di decremento il conteggio dovrebbe diminuire di `1`. ```js const mockedComponent = Enzyme.mount(React.createElement(Counter)); @@ -56,7 +56,7 @@ mockedComponent.find('.dec').simulate('click'); assert(mockedComponent.find('h1').text() === 'Current Count: -1'); ``` -Clicking the reset button should reset the count to `0`. +Cliccando sul bottone di reset il conteggio dovrebbe essere reimpostato a `0`. ```js const mockedComponent = Enzyme.mount(React.createElement(Counter)); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md index 5be456e6e6..768ad374d3 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md @@ -1,6 +1,6 @@ --- id: 587d781b367417b2b2512abc -title: Adjust the background-color Property of Text +title: Ajustar a propriedade background-color (cor de fundo) de textos challengeType: 0 videoUrl: 'https://scrimba.com/c/cEDqwA6' forumTopicId: 301032 @@ -9,23 +9,23 @@ dashedName: adjust-the-background-color-property-of-text # --description-- -Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a `background-color` to the element holding the text you want to emphasize. This challenge uses `rgba()` instead of `hex` codes or normal `rgb()`. +Em vez de ajustar o fundo geral ou a cor do texto para tornar o primeiro plano facilmente legível, você pode adicionar a propriedade `background-color` ao elemento que contém o texto que deseja enfatizar. Este desafio usa a função `rgba()` em vez de códigos `hex` ou `rgb()` normal. -
rgba stands for:
  r = red
  g = green
  b = blue
  a = alpha/level of opacity
+
rgba significa:
r = red (vermelho)
g = green (verde)
b = blue (azul)
a = alpha (nível de opacidade)
-The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. `rgba()` is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background. +Os valores RGB podem variar de 0 a 255. O valor alpha (nível de transparência) pode variar de 1, que é totalmente opaco ou de cor sólida, a 0, que é totalmente transparente. Utilizar `rgba()` neste caso é ótimo, pois permite que você ajuste a opacidade. Isso significa que você não precisa eliminar completamente o fundo. -You'll use `background-color: rgba(45, 45, 45, 0.1)` for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1. +Você usará a propriedade `background-color: rgba(45, 45, 45, 0.1)` para este desafio. Estes valores produzem uma cor cinza escuro que é quase transparente devido ao baixo valor da opacidade - 0.1. # --instructions-- -To make the text stand out more, adjust the `background-color` of the `h4` element to the given `rgba()` value. +Para fazer o texto se destacar mais, ajuste a propriedade `background-color` do elemento `h4` para o valor `rgba()` fornecido anteriormente. -Also for the `h4`, remove the `height` property and add `padding` of 10px. +Também para o `h4`, remova a propriedade `height` e adicione `padding` de 10px. # --hints-- -Your code should add a `background-color` property to the `h4` element set to `rgba(45, 45, 45, 0.1)`. +O código deve adicionar uma propriedade `background-color` ao elemento `h4` com o valor de `rgba(45, 45, 45, 0.1)`. ```js assert( @@ -35,7 +35,7 @@ assert( ); ``` -Your code should add a `padding` property to the `h4` element and set it to 10 pixels. +O código deve adicionar uma propriedade `padding` ao elemento `h4` e configurá-lo para 10 pixels. ```js assert( @@ -46,7 +46,7 @@ assert( ); ``` -The `height` property on the `h4` element should be removed. +A propriedade `height` do elemento `h4` deve ser removida. ```js assert(!($('h4').css('height') == '25px')); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md index 430655f120..1561937f20 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md @@ -1,6 +1,6 @@ --- id: 587d78a4367417b2b2512ad3 -title: Adjust the Color of Various Elements to Complementary Colors +title: Ajustar a cor de vários elementos para cores complementares challengeType: 0 videoUrl: 'https://scrimba.com/c/cWmPpud' forumTopicId: 301033 @@ -9,33 +9,33 @@ dashedName: adjust-the-color-of-various-elements-to-complementary-colors # --description-- -The Complementary Colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page. +O desafio das Cores Complementares mostrou que cores opostas no círculo cromático podem fazer as demais cores parecerem mais vibrantes quando colocadas lado a lado. No entanto, o forte contraste visual pode ser chocante se for usado demais em um site e, às vezes, pode tornar o texto mais difícil de ler se for colocado em um fundo de cores complementares. Na prática, uma das cores geralmente é dominante e o complemento é usado para chamar a atenção visual para determinado conteúdo da página. # --instructions-- -This page will use a shade of teal (`#09A7A1`) as the dominant color, and its orange (`#FF790E`) complement to visually highlight the sign-up buttons. Change the `background-color` of both the `header` and `footer` from black to the teal color. Then change the `h2` text `color` to teal as well. Finally, change the `background-color` of the `button` to the orange color. +Esta página usará um tom de azul-petróleo (`#09A7A1`) como cor dominante Seu complemento laranja (`#FF790E`) será usado para destacar visualmente os botões de inscrição. Altere a propriedade `background-color` do `header` e do `footer` de preto para azul-petróleo. Em seguida, altere a propriedade `color` do `h2` para azul-petróleo também. Finalmente, mude a propriedade `background-color` do `button` para a cor laranja. # --hints-- -The `header` element should have a `background-color` of #09A7A1. +O elemento `header` deve ter uma propriedade `background-color` com o valor de #09A7A1. ```js assert($('header').css('background-color') == 'rgb(9, 167, 161)'); ``` -The `footer` element should have a `background-color` of #09A7A1. +O elemento `footer` deve ter uma propriedade `background-color` com o valor de #09A7A1. ```js assert($('footer').css('background-color') == 'rgb(9, 167, 161)'); ``` -The `h2` element should have a `color` of #09A7A1. +O elemento `h2` deve ter uma propriedade `color` com o valor de #09A7A1. ```js assert($('h2').css('color') == 'rgb(9, 167, 161)'); ``` -The `button` element should have a `background-color` of #FF790E. +O elemento `button` deve ter uma propriedade `background-color` com o valor de #FF790E. ```js assert($('button').css('background-color') == 'rgb(255, 121, 14)'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md index f89a363afb..3de7011552 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md @@ -1,6 +1,6 @@ --- id: 587d7791367417b2b2512ab5 -title: Adjust the Height of an Element Using the height Property +title: Ajustar a altura de um elemento usando a propriedade height challengeType: 0 videoUrl: 'https://scrimba.com/c/cEDaDTN' forumTopicId: 301034 @@ -9,7 +9,7 @@ dashedName: adjust-the-height-of-an-element-using-the-height-property # --description-- -You can specify the height of an element using the `height` property in CSS, similar to the `width` property. Here's an example that changes the height of an image to 20px: +Você pode especificar a altura de um elemento usando a propriedade `height` no CSS, semelhante à propriedade `width`. Aqui está um exemplo que muda a altura de uma imagem para 20px: ```css img { @@ -19,13 +19,13 @@ img { # --instructions-- -Add a `height` property to the `h4` tag and set it to 25px. +Adicione a propriedade `height` à tag `h4` e defina-a com um valor de 25px. -**Note:** You may need to be at 100% zoom to pass the test on this challenge. +**Observação:** talvez você precise estar com 100% de zoom para passar no teste neste desafio. # --hints-- -Your code should change the `h4` `height` property to a value of 25 pixels. +O código deve alterar a propriedade `height` da tag `h4` para um valor de 25 pixels. ```js assert( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md index 308491804b..b0bb11231b 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md @@ -1,6 +1,6 @@ --- id: 587d781d367417b2b2512ac8 -title: Adjust the Hover State of an Anchor Tag +title: Mudar o estilo de um link ao passar o mouse challengeType: 0 videoUrl: 'https://scrimba.com/c/cakRGcm' forumTopicId: 301035 @@ -9,9 +9,9 @@ dashedName: adjust-the-hover-state-of-an-anchor-tag # --description-- -This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element. +Este desafio abordará o uso de pseudo-classes. Uma pseudo-classe é uma palavra-chave que pode ser adicionada a seletores, a fim de selecionar um estado específico do elemento. -For example, the styling of an anchor tag can be changed for its hover state using the `:hover` pseudo-class selector. Here's the CSS to change the `color` of the anchor tag to red during its hover state: +Por exemplo, o estilo de um link pode ser alterado quando o cursor do mouse está sobre ele usando o seletor de pseudo-classe `:hover`. O código CSS para alterar a propriedade `color` de um link para vermelho quando o mouse está sobre ele é este: ```css a:hover { @@ -21,17 +21,17 @@ a:hover { # --instructions-- -The code editor has a CSS rule to style all `a` tags black. Add a rule so that when the user hovers over the `a` tag, the `color` is blue. +O editor de código tem uma declaração de estilo CSS que estiliza todas as tags `a` com a cor preta. Adicione uma declaração de estilo para que, quando o usuário passar o mouse sobre a tag `a`, a propriedade `color` mude para azul. # --hints-- -The anchor tag `color` should remain black, only add CSS rules for the `:hover` state. +A propriedade `color` do link deve permanecer preta. A cor do texto deve mudar apenas no estado `:hover`. ```js assert($('a').css('color') == 'rgb(0, 0, 0)'); ``` -The anchor tag should have a `color` of blue on hover. +O link deve ter a propriedade `color` de valor azul ao passar o mouse sobre ele. ```js assert( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md index 9af8149dca..27623fc32b 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md @@ -1,6 +1,6 @@ --- id: 587d78a4367417b2b2512ad4 -title: Adjust the Hue of a Color +title: Ajustar a tonalidade de uma cor challengeType: 0 videoUrl: 'https://scrimba.com/c/cPp38TZ' forumTopicId: 301036 @@ -9,55 +9,55 @@ dashedName: adjust-the-hue-of-a-color # --description-- -Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the `hsl()` property as an alternative way to pick a color by directly stating these characteristics. +As cores têm várias características, incluindo tonalidade, saturação e luminosidade. CSS3 introduziu a função `hsl()` como uma forma alternativa de escolher uma cor informando diretamente essas características. -**Hue** is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In `hsl()`, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360. +**Tonalidade** é o que as pessoas geralmente chamam de 'cor'. Se você imaginar um espectro de cores começando com o vermelho à esquerda, passando pelo verde no meio e pelo azul à direita, a tonalidade é qualquer cor que esteja dentro deste espectro. No `hsl()`, a tonalidade é definida usando o conceito de círculo cromático em vez de um espectro, onde o ângulo da cor no círculo é um valor entre 0 e 360. -**Saturation** is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated. +**Saturação** é a quantidade de cinza em uma cor. Uma cor totalmente saturada não contém cinza e uma cor minimamente saturada é quase totalmente cinza. Essa característica é definida usando porcentagem, onde 100% é totalmente saturado. -**Lightness** is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color. +**Luminosidade** é a quantidade de branco ou preto em uma cor. Um valor válido, em porcentagem, varia de 0% (preto) a 100% (branco), onde 50% é a cor normal. -Here are a few examples of using `hsl()` with fully-saturated, normal lightness colors: +Aqui estão alguns exemplos de uso do `hsl()` com cores totalmente saturadas e luminosidade normal: -
ColorHSL
redhsl(0, 100%, 50%)
yellowhsl(60, 100%, 50%)
greenhsl(120, 100%, 50%)
cyanhsl(180, 100%, 50%)
bluehsl(240, 100%, 50%)
magentahsl(300, 100%, 50%)
+
CorHSL
vermelhohsl(0, 100%, 50%)
amarelohsl(60, 100%, 50%)
verdehsl(120, 100%, 50%)
cianohsl(180, 100%, 50%)
azulhsl(240, 100%, 50%)
magentahsl(300, 100%, 50%)
# --instructions-- -Change the `background-color` of each `div` element based on the class names (`green`, `cyan`, or `blue`) using `hsl()`. All three should have full saturation and normal lightness. +Altere a propriedade `background-color` de cada elemento `div` com base nos nomes das classes (`green`, `cyan` ou `blue`) usando `hsl()`. Todos as três devem estar totalmente saturadas e ter luminosidade normal. # --hints-- -Your code should use the `hsl()` property to declare the color `green`. +Você deve usar a função `hsl()` para declarar a cor `green` (verde). ```js assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi)); ``` -Your code should use the `hsl()` property to declare the color `cyan`. +Você deve usar a função `hsl()` para declarar a cor `cyan` (ciano). ```js assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi)); ``` -Your code should use the `hsl()` property to declare the color `blue`. +Você deve usar a função `hsl()` para declarar a cor `blue` (blue). ```js assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi)); ``` -The `div` element with class `green` should have a `background-color` of green. +O elemento `div` com a classe `green` deve ter apropriedade `background-color` com o valor green (verde). ```js assert($('.green').css('background-color') == 'rgb(0, 255, 0)'); ``` -The `div` element with class `cyan` should have a `background-color` of cyan. +O elemento `div` com a classe `cyan` deve ter apropriedade `background-color` com o valor cyan (ciano). ```js assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)'); ``` -The `div` element with class `blue` should have a `background-color` of blue. +O elemento `div` com a classe `blue` deve ter apropriedade `background-color` com o valor blue (azul). ```js assert($('.blue').css('background-color') == 'rgb(0, 0, 255)'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md index 526d93f650..1fb4883d23 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md @@ -1,6 +1,6 @@ --- id: 587d781b367417b2b2512abd -title: Adjust the Size of a Header Versus a Paragraph Tag +title: Contrastar o tamanho de um título com o de um parágrafo challengeType: 0 videoUrl: 'https://scrimba.com/c/c3bRPTz' forumTopicId: 301037 @@ -9,15 +9,15 @@ dashedName: adjust-the-size-of-a-header-versus-a-paragraph-tag # --description-- -The font size of header tags (`h1` through `h6`) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the `font-size` property to adjust the size of the text in an element. +O tamanho da tipografia das tags de títulos (`h1` a `h6`) geralmente deve ser maior do que o tamanho da tipografia das tags de parágrafo. Isso torna mais fácil para o usuário entender visualmente o layout e o nível de importância de tudo na página. Você pode usar a propriedade `font-size` para ajustar o tamanho do texto de um elemento. # --instructions-- -To make the heading significantly larger than the paragraph, change the `font-size` of the `h4` tag to 27 pixels. +Para tornar o título significativamente maior do que o parágrafo, altere a propriedade `font-size` da tag `h4` para 27 pixels. # --hints-- -Your code should add a `font-size` property to the `h4` element set to 27 pixels. +Adicione ao elemento `h4` a propriedade `font-size` com o valor de 27 pixels. ```js assert($('h4').css('font-size') == '27px'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md index b8ea590246..7a76cf0e5f 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md @@ -1,6 +1,6 @@ --- id: 587d78a4367417b2b2512ad5 -title: Adjust the Tone of a Color +title: Ajustar o tom de uma cor challengeType: 0 videoUrl: 'https://scrimba.com/c/cEDJvT7' forumTopicId: 301038 @@ -9,15 +9,15 @@ dashedName: adjust-the-tone-of-a-color # --description-- -The `hsl()` option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of `hsl()` stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it. +A função `hsl()` no CSS também facilita o ajuste do tom de uma cor. A mistura de branco com uma tonalidade pura cria uma cor igual à cor que foi misturada com o branco e a adição de preto cria uma tonalidade mais escura. Como alternativa, um tom é produzido adicionando cinza ou matizando e sombreando. Lembre-se de que o 's' e 'l' de `hsl()` representam saturação e luminosidade, respectivamente. A porcentagem de saturação altera a quantidade de cinza e a porcentagem de luminosidade determina quanto de branco ou preto há na cor. Isso é útil quando você tem uma tonalidade básica de que gosta, mas precisa de diferentes variações. # --instructions-- -All elements have a default `background-color` of `transparent`. Our `nav` element currently appears to have a `cyan` background, because the element behind it has a `background-color` set to `cyan`. Add a `background-color` to the `nav` element so it uses the same `cyan` hue, but has `80%` saturation and `25%` lightness values to change its tone and shade. +Todos os elementos, por padrão, têm a propriedade `background-color` com o valor de `transparent`. O elemento `nav` atualmente parece ter um fundo `cyan`, porque o elemento por trás dele tem uma propriedade `background-color` definida com o valor `cyan`. Adicione a propriedade `background-color` ao elemento `nav` para que este elemento tenha a cor `cyan`, mas com saturação de `80%` e luminosidade de `25%` para alterar seu tom e sombreamento. # --hints-- -The `nav` element should have a `background-color` of the adjusted cyan tone using the `hsl()` property. +O elemento `nav` deve ter a propriedade `background-color` de tom ciano usando a função `hsl()`. ```js assert( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md index 7ed75a1ea5..5f2d5c4926 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md @@ -1,6 +1,6 @@ --- id: 587d7791367417b2b2512ab4 -title: Adjust the Width of an Element Using the width Property +title: Ajustar a largura de um elemento usando a propriedade width challengeType: 0 videoUrl: 'https://scrimba.com/c/cvVLPtN' forumTopicId: 301039 @@ -9,7 +9,7 @@ dashedName: adjust-the-width-of-an-element-using-the-width-property # --description-- -You can specify the width of an element using the `width` property in CSS. Values can be given in relative length units (such as `em`), absolute length units (such as `px`), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px: +Você pode especificar a largura de um elemento usando a propriedade `width` no CSS. Os valores podem ser fornecidos em unidades de comprimento relativo (como `em`), unidades de comprimento absoluto (como `px`) ou como uma porcentagem do elemento pai que o contém. Aqui está um exemplo que altera a largura de uma imagem para 220px: ```css img { @@ -19,11 +19,11 @@ img { # --instructions-- -Add a `width` property to the entire card and set it to an absolute value of 245px. Use the `fullCard` class to select the element. +Adicione a propriedade `width` com um valor absoluto de 245px ao cartão. Use a classe `fullCard` para selecionar o elemento. # --hints-- -Your code should change the `width` property of the card to 245 pixels by using the `fullCard` class selector. +Na classe `fullCard`, defina a propriedade `width` com um valor de 245 pixels. ```js const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md index da2020f4d5..c8675a4093 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md @@ -1,6 +1,6 @@ --- id: 587d78a8367417b2b2512ae5 -title: Animate Elements at Variable Rates +title: Animar elementos em diferentes momentos challengeType: 0 videoUrl: 'https://scrimba.com/c/cZ89WA4' forumTopicId: 301040 @@ -9,17 +9,17 @@ dashedName: animate-elements-at-variable-rates # --description-- -There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an `animation-iteration-count` property and setting `@keyframes` rules. +Existem várias maneiras de alterar o momento de uma animação de um elemento. Até agora, isso foi realizado aplicando a propriedade `animation-iteration-count` e definindo regras `@keyframes`. -To illustrate, the animation on the right consists of two stars that each decrease in size and opacity at the 20% mark in the `@keyframes` rule, which creates the twinkle animation. You can change the `@keyframes` rule for one of the elements so the stars twinkle at different rates. +Para ilustrar, a animação à direita consiste em duas estrelas, cada uma diminuindo em tamanho e opacidade na marca de 20% na regra `@keyframes`. Você pode alterar a regra `@keyframes` em um dos elementos para que as estrelas cintilem em momentos diferentes. # --instructions-- -Alter the animation rate for the element with the class name of `star-1` by changing its `@keyframes` rule to 50%. +Altere o momento da animação do elemento que possui a classe `star-1` trocando a regra `@keyframes` para 50%. # --hints-- -The `@keyframes` rule for the `star-1` class should be 50%. +A regra `@keyframes` para a classe `star-1` deve ter o valor de 50%. ```js assert(code.match(/twinkle-1\s*?{\s*?50%/g)); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md index f3280fddbc..0ebe583d78 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md @@ -1,6 +1,6 @@ --- id: 587d78a8367417b2b2512ae3 -title: Animate Elements Continually Using an Infinite Animation Count +title: Animar elementos infinitamente challengeType: 0 videoUrl: 'https://scrimba.com/c/cVJDVfq' forumTopicId: 301041 @@ -9,21 +9,21 @@ dashedName: animate-elements-continually-using-an-infinite-animation-count # --description-- -The previous challenges covered how to use some of the animation properties and the `@keyframes` rule. Another animation property is the `animation-iteration-count`, which allows you to control how many times you would like to loop through the animation. Here's an example: +Os desafios anteriores cobriram como usar algumas das propriedades de animação e a regra `@keyframes`. Outra propriedade da animação é `animation-iteration-count`, que permite controlar quantas vezes você gostaria de repetir a animação. Um exemplo: ```css animation-iteration-count: 3; ``` -In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to `infinite`. +Neste caso, a animação irá parar depois de repetir 3 vezes, mas é possível fazer a animação rodar infinitamente definindo esse valor para `infinite`. # --instructions-- -To keep the ball bouncing on the right on a continuous loop, change the `animation-iteration-count` property to `infinite`. +Para manter a bola quicando à direita em um loop contínuo, altere a propriedade `animation-iteration-count` para `infinite`. # --hints-- -The `animation-iteration-count` property should have a value of `infinite`. +A propriedade `animation-iteration-count` deve ter um valor de `infinite`. ```js assert($('#ball').css('animation-iteration-count') == 'infinite'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md index 7baaef275c..e242f4ea8c 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md @@ -1,6 +1,6 @@ --- id: 587d78a8367417b2b2512ae6 -title: Animate Multiple Elements at Variable Rates +title: Animar múltiplos elementos em diferentes momentos challengeType: 0 videoUrl: 'https://scrimba.com/c/cnpWZc9' forumTopicId: 301042 @@ -9,29 +9,29 @@ dashedName: animate-multiple-elements-at-variable-rates # --description-- -In the previous challenge, you changed the animation rates for two similarly animated elements by altering their `@keyframes` rules. You can achieve the same goal by manipulating the `animation-duration` of multiple elements. +No desafio anterior, você mudou o momento da animação de dois elementos com a mesma animação ao alterar a regra `@keyframes`. Você pode alcançar o mesmo resultado manipulando a propriedade `animation-duration` de vários elementos. -In the animation running in the code editor, there are three stars in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the `animation-duration` property to different values for each element. +Na animação sendo executada no editor de código, há três estrelas no céu que cintilam ao mesmo instante infinitamente. Para fazê-las brilhar com ritmos diferentes, você pode definir a propriedade `animation-duration` com valores diferentes para cada elemento. # --instructions-- -Set the `animation-duration` of the elements with the classes `star-1`, `star-2`, and `star-3` to 1s, 0.9s, and 1.1s, respectively. +Defina a propriedade `animation-duration` dos elementos com as classes `star-1`, `star-2`, e `star-3` para 1s, 0.9s, e 1.1s, respectivamente. # --hints-- -The `animation-duration` property for the star with class `star-1` should remain at 1s. +O valor da propriedade `animation-duration` da estrela com a classe `star-1` deve permanecer em 1s. ```js assert($('.star-1').css('animation-duration') == '1s'); ``` -The `animation-duration` property for the star with class `star-2` should be 0.9s. +O valor da propriedade `animation-duration` da estrela com a classe `star-2` deve ser 0.9s. ```js assert($('.star-2').css('animation-duration') == '0.9s'); ``` -The `animation-duration` property for the star with class `star-3` should be 1.1s. +O valor da propriedade `animation-duration` da estrela com a classe `star-3` deve ser 1.1s. ```js assert($('.star-3').css('animation-duration') == '1.1s'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md index 0fdf546832..03c3f845c8 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md @@ -1,6 +1,6 @@ --- id: 587d78a3367417b2b2512ad0 -title: Center an Element Horizontally Using the margin Property +title: Centralizar um elemento horizontalmente usando a propriedade margin challengeType: 0 videoUrl: 'https://scrimba.com/c/cyLJqU4' forumTopicId: 301043 @@ -9,17 +9,17 @@ dashedName: center-an-element-horizontally-using-the-margin-property # --description-- -Another positioning technique is to center a block element horizontally. One way to do this is to set its `margin` to a value of auto. +Outra técnica de posicionamento é centralizar um elemento de bloco horizontalmente. Uma maneira de fazer isso é definir a propriedade `margin` para o valor "auto". -This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the `display` property to `block`. +Esse método também funciona para imagens. Imagens são elementos inline por padrão, mas podem ser alterados para elementos de bloco caso você defina o valor da propriedade `display` para `block`. # --instructions-- -Center the `div` on the page by adding a `margin` property with a value of `auto`. +Centralize a `div` na página adicionando a propriedade `margin` com o valor `auto`. # --hints-- -The `div` should have a `margin` set to `auto`. +Esta `div` deve conter a propriedade `margin` definida com o valor `auto`. ```js assert(code.match(/margin:\s*?auto;/g)); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md index 963681932a..f67863f7bc 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aedf08808 -title: Specify How Fonts Should Degrade +title: O que fazer quando uma tipografia não estiver disponível challengeType: 0 videoUrl: 'https://scrimba.com/c/cpVKBfQ' forumTopicId: 18304 @@ -9,11 +9,11 @@ dashedName: specify-how-fonts-should-degrade # --description-- -There are several default fonts that are available in all browsers. These generic font families include `monospace`, `serif` and `sans-serif`. +Por padrão, existem várias tipografias disponíveis em todos os navegadores. As tipografias padrão são: `monospace`, `serif` e `sans-serif`. -When one font isn't available, you can tell the browser to "degrade" to another font. +Quando uma tipografia não estiver disponível, você pode dizer ao navegador para usar outra tipografia. -For example, if you wanted an element to use the `Helvetica` font, but degrade to the `sans-serif` font when `Helvetica` isn't available, you will specify it as follows: +Por exemplo, se um elemento usa a tipografia `Helvetica`, mas você quer que ele use `sans-serif` quando a `Helvetica` não estiver disponível, você pode fazer assim: ```css p { @@ -21,19 +21,19 @@ p { } ``` -Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords. +O nome dessas tipografias não diferenciam maiúsculas de minúsculas. Além disso, eles não precisam de aspas porque são palavras-chave do CSS. # --instructions-- -To begin, apply the `monospace` font to the `h2` element, so that it now has two fonts - `Lobster` and `monospace`. +Para começar, aplique a tipografia `monospace` ao elemento `h2`, fazendo com que o elemento tenha duas tipografias - `Lobster` e `monospace`. -In the last challenge, you imported the `Lobster` font using the `link` tag. Now comment out that import of the `Lobster` font (using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your `h2` element degrades to the `monospace` font. +No desafio anterior, você importou a tipografia `Lobster` usando a tag `link`. Comente a importação da tipografia `Lobster` (usando os comentários HTML que você aprendeu antes) do Google Fonts para que ela não esteja mais disponível. Note como o elemento `h2` muda para a tipografia `monospace`. -**Note:** If you have the `Lobster` font installed on your computer, you won't see the degradation because your browser is able to find the font. +**Observação:** se você tiver a tipografia `Lobster` instalada em seu computador, não verá a mudança porque seu navegador é capaz de encontrá-la. # --hints-- -Your h2 element should use the font `Lobster`. +O elemento h2 deve usar a tipografia `Lobster`. ```js assert( @@ -43,7 +43,7 @@ assert( ); ``` -Your h2 element should degrade to the font `monospace` when `Lobster` is not available. +O elemento h2 deve mudar para a tipografia `monospace` quando `Lobster` não estiver disponível. ```js assert( @@ -53,13 +53,13 @@ assert( ); ``` -You should comment out your call to Google for the `Lobster` font by putting ``. +Você deve fechar o comentário usando `-->`. ```js assert(new RegExp('[^fc]-->', 'gi').test(code)); @@ -141,9 +141,9 @@ assert(new RegExp('[^fc]-->', 'gi').test(code));

CatPhotoApp

Click here to view more cat photos.

- + A cute orange cat lying on its back. - +

Things cats love:

- +

diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md index 0db1bcf0bf..d17195703e 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aefe08806 -title: Style Multiple Elements with a CSS Class +title: Estilizar vários elementos com apenas uma classe CSS challengeType: 0 videoUrl: 'https://scrimba.com/c/cRkVbsQ' forumTopicId: 18311 @@ -9,29 +9,29 @@ dashedName: style-multiple-elements-with-a-css-class # --description-- -Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your `red-text` class to the first `p` element. +As classes permitem que você use os mesmos estilos CSS em diferentes elementos HTML. Você pode ver isso aplicando a classe `red-text` ao primeiro elemento `p`. # --hints-- -Your `h2` element should be red. +O elemento `h2` deve ser vermelho. ```js assert($('h2').css('color') === 'rgb(255, 0, 0)'); ``` -Your `h2` element should have the class `red-text`. +O elemento `h2` deve ter a classe `red-text`. ```js assert($('h2').hasClass('red-text')); ``` -Your first `p` element should be red. +O primeiro elemento `p` deve ser vermelho. ```js assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)'); ``` -Your second and third `p` elements should not be red. +O segundo e terceiro elementos `p` não devem ser vermelhos. ```js assert( @@ -40,7 +40,7 @@ assert( ); ``` -Your first `p` element should have the class `red-text`. +O primeiro elemento `p` deve ter a classe `red-text`. ```js assert($('p:eq(0)').hasClass('red-text')); @@ -102,9 +102,9 @@ assert($('p:eq(0)').hasClass('red-text'));

CatPhotoApp

Click here to view more cat photos.

- + A cute orange cat lying on its back. - +

Things cats love:

    @@ -119,7 +119,7 @@ assert($('p:eq(0)').hasClass('red-text'));
  • other cats
- +
diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-the-html-body-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-the-html-body-element.md index 26a469c1d1..d1172994ff 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-the-html-body-element.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-the-html-body-element.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aedf08736 -title: Style the HTML Body Element +title: Estilizar o elemento HTML body challengeType: 0 videoUrl: 'https://scrimba.com/c/cB77PHW' forumTopicId: 18313 @@ -9,15 +9,15 @@ dashedName: style-the-html-body-element # --description-- -Now let's start fresh and talk about CSS inheritance. +Vamos começar do início e falar sobre o conceito de herança dentro do CSS. -Every HTML page has a `body` element. +Toda página HTML possui um elemento `body`. # --instructions-- -We can prove that the `body` element exists here by giving it a `background-color` of black. +Podemos provar que o elemento `body` existe aqui definindo a propriedade `background-color` com o valor black (preto). -We can do this by adding the following to our `style` element: +Para fazer isso, adicione ao elemento `style` o seguinte código: ```css body { @@ -27,13 +27,13 @@ body { # --hints-- -Your `body` element should have the `background-color` of black. +O elemento `body` deve ter a propriedade `background-color` com o valor de preto (black). ```js assert($('body').css('background-color') === 'rgb(0, 0, 0)'); ``` -Your CSS rule should be properly formatted with both opening and closing curly brackets. +O código CSS deve ser formatado corretamente, contendo chaves de abertura e fechamento. ```js assert( @@ -41,7 +41,7 @@ assert( ); ``` -Your CSS rule should end with a semi-colon. +A declaração do estilo CSS deve terminar com um ponto e vírgula. ```js assert( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md index f9e32b8b40..69577e96bf 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md @@ -1,6 +1,6 @@ --- id: bad82fee1322bd9aedf08721 -title: Understand Absolute versus Relative Units +title: Diferenças entre unidades absolutas e relativas challengeType: 0 videoUrl: 'https://scrimba.com/c/cN66JSL' forumTopicId: 301089 @@ -9,21 +9,21 @@ dashedName: understand-absolute-versus-relative-units # --description-- -The last several challenges all set an element's margin or padding with pixels (`px`). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to `px`, CSS has a number of different length unit options that you can use. +Todos os últimos desafios definiram a margem ou preenchimento de um elemento usando pixels (`px`). Pixels são um tipo de unidade de comprimento, que informa ao navegador como dimensionar ou espaçar um item. Além do `px`, o CSS possui outras opções de unidades de comprimento que você pode usar. -The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, `in` and `mm` refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution. +Os dois principais tipos de unidades de comprimento são: absoluto e relativo. As unidades absolutas estão vinculadas às unidades físicas de comprimento. Por exemplo, `in` e `mm` referem-se a polegadas e milímetros, respectivamente. As unidades de comprimento absoluto aproximam-se da medida real em uma tela, mas existem algumas diferenças dependendo da resolução da tela. -Relative units, such as `em` or `rem`, are relative to another length value. For example, `em` is based on the size of an element's font. If you use it to set the `font-size` property itself, it's relative to the parent's `font-size`. +Unidades relativas, como `em` ou `rem`, são relativas a outro valor de comprimento. Por exemplo, `em` é baseado no tamanho da tipografia de um elemento. Se você usá-la para definir o valor da propriedade `font-size`, esse valor será relativo a propriedade `font-size` do elemento pai. -**Note:** There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section. +**Observação:** existem diversas unidades do tipo relativo que são vinculadas ao tamanho da janela do navegador (viewport). Elas serão abordadas na seção Princípios de Web Design Responsivo. # --instructions-- -Add a `padding` property to the element with class `red-box` and set it to `1.5em`. +No elemento que possui a classe `red-box`, adicione a propriedade `padding` com o valor `1.5em`. # --hints-- -Your `red-box` class should have a `padding` property. +A classe `red-box` deve ter a propriedade `padding`. ```js assert( @@ -34,7 +34,7 @@ assert( ); ``` -Your `red-box` class should give elements 1.5em of `padding`. +A classe `red-box` deve dar aos elementos 1.5em de `padding`. ```js assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi)); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md index 04afa43ecd..51be9a36d8 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aecf08806 -title: Use a CSS Class to Style an Element +title: Usar uma classe para definir o estilo de um elemento challengeType: 0 videoUrl: 'https://scrimba.com/c/c2MvDtV' forumTopicId: 18337 @@ -9,9 +9,9 @@ dashedName: use-a-css-class-to-style-an-element # --description-- -Classes are reusable styles that can be added to HTML elements. +As classes são declarações de estilos que podem ser reutilizadas em elementos HTML. -Here's an example CSS class declaration: +Aqui está um exemplo de como criar uma classe CSS: ```html ``` -You can see that we've created a CSS class called `blue-text` within the `