Object.keys() للوصول إلى البيانات والتلاعب بها."
+ "يمكن تخزين البيانات والوصول إليها بعدة طرق. أنت تعرف بالفعل بعض هياكل بيانات javascript الشائعة - القوائم والكائنات.",
+ "في هذه الدورة لهياكل البيانات الأساسية، ستتعلم المزيد عن الاختلافات بين القوائم والكائنات، وعن كيفية استخدامها في أوضاع مختلفة. سوف تتعلم أيضاً كيفية استخدام أساليب Javascript المفيدة مثل splice() و Object.keys() للوصول إلى البيانات والتلاعب بها."
]
},
"basic-algorithm-scripting": {
@@ -267,7 +267,7 @@
"intro": [
"الخوارزمية هي سلسلة من التعليمات خطوة بخطوة تصف كيفية القيام بشيء ما.",
"يساعدك تفكيك المشكلة إلى أجزاء أصغر والتفكير بعناية حول كيفية حل كل جزء علي حدي بواسطة الكود البرمجي على كتابة خوارزميات اكثر فاعلية.",
- "في هذه الدورة، ستتعلم أساسيات التفكير الخوارزمي عن طريق كتابة الخوارزميات التي تفعل كل شيء من تحويل درجات الحرارة إلى التعامل مع المصفوفات ثنائية الأبعاد 2D arrays المعقدة."
+ "في هذه الدورة، ستتعلم أساسيات التفكير الخوارزمي عن طريق كتابة خوارزميات تفعل كل شيء من تحويل درجات الحرارة إلى التعامل مع القوائم ثنائية الأبعاد 2D arrays المعقدة."
]
},
"object-oriented-programming": {
@@ -280,7 +280,7 @@
"functional-programming": {
"title": "البرمجة الوظيفية Functional Programming",
"intro": [
- "البرمجة الوظيفية هي نهج شائع آخر لتطوير البرمجيات. في البرمجة الوظيفية، يتم تنظيم الكود في وظائف أصغر وأساسية يمكن الجمع بينها لبناء برامج معقدة.",
+ "إن البرمجة الوظيفية نهج شائع آخر لتطوير البرمجيات. في البرمجة الوظيفية، ينظم الكود في وظائف أصغر وأساسية يمكن الجمع بينها لبناء برامج معقدة.",
"في هذه الدورة، ستتعلم المفاهيم الأساسية للبرمجة الوظيفية بما في تلك الوظيفة العادية، كيفية تجنب الطفرات وكيفية كتابة كود أنظف مع أساليب مثل .map() و .filter()."
]
},
@@ -305,23 +305,23 @@
"note": "",
"blocks": {
"build-a-caesars-cipher-project": {
- "title": "بناء مشروع Caesars Cipher",
+ "title": "بناء مشروع شفرة قيصر",
"intro": ["", ""]
},
"build-a-cash-register-project": {
- "title": "بناء مشروع Cash Register",
+ "title": "بناء مشروع مكنة لتسجيل النقود",
"intro": ["", ""]
},
"build-a-palindrome-checker-project": {
- "title": "بناء مشروع Palindrome Checker",
+ "title": "أنشئ مشروع مدقق لمعاكس المقطع النصي",
"intro": ["", ""]
},
"build-a-roman-numeral-converter-project": {
- "title": "بناء مشروع Roman Numeral Converter",
+ "title": "أنشئ مشروع محول للأرقام الرومانية",
"intro": ["", ""]
},
"build-a-telephone-number-validator-project": {
- "title": "بناء مشروع Telephone Number Validator",
+ "title": "بناء مشروع مدقق الأرقام الهواتف",
"intro": ["", ""]
},
"learn-basic-javascript-by-building-a-role-playing-game": {
@@ -372,7 +372,7 @@
"react": {
"title": "React",
"intro": [
- "React هي مكتبة شائعة من مكتبات JavaScript لبناء واجهة مستخدم قابلة لإعادة البناء اعتماداً على المكون لصفحات الويب أو التطبيقات.",
+ "إن React مكتبة شائعة من مكتبات JavaScript لبناء واجهة مستخدم قابلة لإعادة البناء اعتماداً على المكون لصفحات الويب أو التطبيقات.",
"يجمع React بين الـ HTML ووظائف الـ JavaScript في لغة ترميز خاصة به تدعى JSX. كما أن React يجعل من السهل إدارة تدفق البيانات في التطبيق.",
"في هذه الدورة ، ستتعلم كيفية إنشاء مكونات مختلفة من React وإدارة البيانات في شكل State و Props و استخدام أساليب دورة الحياة المختلفة مثل componentDidMount، وأكثر من ذلك بكثير."
]
@@ -389,13 +389,13 @@
"title": "React and Redux",
"intro": [
"كثيرا ما يُشار إلى React و Redux معاً، ولسبب وجيه. المطور الذي أنشأ Redux كان مطور لـ React و اراد أن يسهل مشاركة البيانات عبر المكونات المختلفة.",
- "الآن بعد أن عرفت كيفية إدارة تدفق البيانات المشتركة مع Redux، حان الوقت للجمع بين تلك المعرفة و React. في دورات React و Redux، ستبني مكون React وتتعلم كيفية إدارة الحالة state محلياً على مستوى المكون. وعبر التطبيق باكمله مع Redux."
+ "الآن بعد أن عرفت كيفية إدارة تدفق البيانات المشتركة مع Redux، حان الوقت للجمع بين تلك المعرفة و React. في دورات React و Redux، ستبني مكون React وتتعلم كيفية إدارة الحالة state محلياً على مستوى المكون. وعبر التطبيق برمته مع Redux."
]
},
"front-end-development-libraries-projects": {
"title": "مشاريع مكتبات تطوير واجهة المستخدم",
"intro": [
- "حان الوقت لوضع مهاراتك في مكتبات تطوير واجهات المستخدم للاختبار، استخدم Bootstrap, jQuery, Sass, React و Redux لبناء 5 مشاريع لتختبر كل ما تعلمته حتى هذه النقطة.",
+ "حان الوقت لوضع مهاراتك في مكتبات تطوير واجهات المستخدم للاختبار. استخدم Bootstrap, و jQuery, و Sass, و React, و Redux لبناء 5 مشروعات لتختبر ما تعلمته حتى هذه النقطة.",
"أكمل جميع المشاريع الخمسة، وستحصل على شهادة في مكتبات تطوير واجهة المستخدم."
]
}
@@ -551,9 +551,9 @@
"back-end-development-and-apis": {
"title": "تطوير الواجهات الخلفية للمواقع و واجهات برمجة التطبيقات - Back End Development and APIs",
"intro": [
- "حتى هذه النقطة، لقد استخدمت JavaScript فقط في الواجهة الأمامية لإضافة تفاعل إلى صفحة، أو حل تحديات الخوارزميات، أو بناء SPA. ولكن يمكن أيضاً استخدام JavaScript في الواجهة الخلفية back end، أو الخادم، لبناء تطبيقات ويب بأكملها.",
+ "حتى هذه النقطة، لقد استخدمت JavaScript فقط في الواجهة الأمامية لإضافة تفاعل إلى صفحة، أو حل تحديات الخوارزميات، أو بناء SPA. ولكن يمكن أيضاً استخدام JavaScript في الواجهة الخلفية back end، أو السيرفر، لبناء تطبيقات ويب برمتها.",
"واليوم، فإن إحدى الطرق الشائعة لبناء التطبيقات هي من خلال الخدمات المصّغرة microservices، وهي تطبيقات صغيرة ومحددة تعمل معاً لتشًكل وحدة اكبر.",
- "في شهادة واجهة برمجة التطبيقات والـAPIs، ستتعلم كيفية انشاء تطبيقات back end جاهزة باستخدام Node.js و npm. سوف تقوم أيضا ببناء تطبيقات ويب باستخدام إطار Express وبناء microservice لـ People Finder باستخدام MongoDB ومكتبة Mongoose."
+ "في شهادة تطوير واجهات الBack End و الAPIs، سوف تتعلم كيف تنشئ تطبيقات back end باستخدام Node.js و npm. سوف تقوم أيضا ببناء تطبيقات الويب باستخدام إطار العمل Express، و بناء microservice لإيجاد الأفراد باستخدام MongoDB ومكتبة Mongoose."
],
"note": "",
"blocks": {
@@ -584,7 +584,7 @@
"back-end-development-and-apis-projects": {
"title": "مشاريع تطوير الواجهات الخلفية للمواقع و واجهات برمجة التطبيقات APIs",
"intro": [
- "لقد عملت مع واجهة برمجة التطبيقات APIs من قبل، ولكن الآن بعد أن عرفت npm، وNode, Express، وMongoDB وMongoose، حان الوقت لبناء API بنفسك، بالاعتماد على كل ما تعلمته حتى هذه النقطة لإنشاء 5 خدمات مصغّرة microservices مختلفة، وهي تطبيقات أصغر محدودة النطاق.",
+ "لقد عملت مع واجهة برمجة التطبيقات APIs من قبل، ولكن الآن بعد أن عرفت npm، و Node, و Express، و MongoDB، و Mongoose، حان الوقت لبناء API بنفسك، بالاعتماد على ما تعلمته حتى هذه النقطة لإنشاء 5 خدمات مصغّرة microservices مختلفة، وهي تطبيقات أصغر محدودة النطاق.",
"بعد إنشاء هذه البرمجيات، سيكون لديك 5 APIs رائعة للخدمات الصغرى يمكنك عرضها للأصدقاء والعائلة وأصحاب العمل المحتملين، وستحصل أيضًا على شهادة تطوير الواجهة الخلفية وواجهات برمجة التطبيقات."
]
}
@@ -778,6 +778,10 @@
"أسناد: Rosetta Code"
]
},
+ "the-odin-project": {
+ "title": "The Odin Project",
+ "intro": ["A description is to be determined"]
+ },
"project-euler": {
"title": "مشروع Euler",
"intro": [
diff --git a/client/i18n/locales/arabic/translations.json b/client/i18n/locales/arabic/translations.json
index ca702a9f893..f2a89f3cd4f 100644
--- a/client/i18n/locales/arabic/translations.json
+++ b/client/i18n/locales/arabic/translations.json
@@ -11,6 +11,7 @@
"view": "عرض",
"view-code": "أظهار الكود",
"view-project": "إظهار المشروع",
+ "view-cert-title": "عرض {{certTitle}}",
"show-cert": "عرض الشهادة",
"claim-cert": "المطالبة بالشهادة",
"save-progress": "حفظ التقدم",
@@ -52,7 +53,7 @@
"check-code": "تيقن من كودك (Ctrl + Enter)",
"check-code-2": "تيقن من كودك",
"reset": "إعادة ضبط",
- "reset-code": "أعد جميع الكود ألى حالتهم الأولية",
+ "reset-step": "إعادة الخطوة إلى حالتها الأولية",
"help": "مساعدة",
"get-help": "الحصول على المساعدة",
"watch-video": "شاهد الفيديو",
@@ -157,7 +158,8 @@
"honesty": "سياسة الصدق الأكاديمي",
"internet": "حضورك على الإنترنت",
"portfolio": "إعدادات المحفظة",
- "privacy": "إعدادات الخصوصية"
+ "privacy": "إعدادات الخصوصية",
+ "personal-info": "Personal Information"
},
"danger": {
"heading": "منطقة الخطر",
@@ -272,6 +274,7 @@
"add-subtitles": "المساعدة في تحسين أو إضافة ترجمات",
"wrong-answer": "عذراً، هذه ليست الإجابة الصحيحة. قم بالمحاولة مرة أخرى؟",
"check-answer": "انقر على الزر أدناه للتحقق من إجابتك.",
+ "assignment-not-complete": "Please finish the assignments",
"solution-link": "رابط الحل",
"github-link": "رابط Github",
"submit-and-go": "أرسل وانتقل إلى التحدي التالي",
@@ -339,6 +342,7 @@
"title": "ادعم مؤسستنا الخيرية",
"processing": "نحن نقوم بمعالجة تبرعك.",
"redirecting": "جارٍ إعادة توجيهك...",
+ "thanks": "شكرا على التبرع",
"thank-you": "شكراً لكونك داعماً.",
"additional": "يمكنك تقديم تبرع إضافي لمرة واحدة بأي مبلغ باستخدام هذا الرابط: <0>{{url}}",
"help-more": "ساعدنا على القيام بالمزيد",
@@ -462,7 +466,8 @@
"iframe-preview": "معاينة {{title}}",
"iframe-alert": "عادة هذا الرابط من شأنه أن يجلبك إلى موقع آخر! إنه يعمل. هذا رابط: {{externalLink}}",
"iframe-form-submit-alert": "عادة سيتم تقديم هذا النموذج! إنه يعمل. سيتم إرسال هذا إلى: {{externalLink}}",
- "document-notfound": "لم يوجد المستند"
+ "document-notfound": "لم يوجد المستند",
+ "slow-load-msg": "يبدو أن هذا يستغرق وقتاً أطول من المعتاد، الرجاء محاولة تحديث الصفحة."
},
"icons": {
"gold-cup": "كأس الذهب",
@@ -507,7 +512,8 @@
"step": "الخطوة",
"steps": "الخطوات",
"steps-for": "خطوات {{blockTitle}}",
- "code-example": "{{codeName}} مثال على الكود"
+ "code-example": "{{codeName}} مثال على الكود",
+ "opens-new-window": "فتح في نافذة جديدة"
},
"flash": {
"honest-first": "للمطالبة بشهادة ، يجب عليك أولاً قبول سياسة الصدق الأكاديمي الخاصة بنا",
@@ -604,10 +610,10 @@
"source": "المصدر",
"footnote": "إذا كنت تشك في أن أيا من هذه المشاريع ينتهك <2>سياسة الأمانة الأكاديمية، يرجى <5>إبلاغ فريقنا بهذا .",
"title": {
- "Build a Personal Portfolio Webpage": "قم ببناء مشروع صفحة ويب لعرض نماذج الاعمال الشخصية",
+ "Build a Personal Portfolio Webpage": "أنشئ معرضا لأعمالك الخاصة",
"Build a Random Quote Machine": "بناء آلة عرض اقتباسات عشوائية",
"Build a 25 + 5 Clock": "بناء ساعة 25 + 5",
- "Build a JavaScript Calculator": "بناء حاسبة بإستخدام JavaScript",
+ "Build a JavaScript Calculator": "بناء آلة حاسبة باستخدام JavaScript",
"Show the Local Weather": "إظهار الطقس المحلي",
"Use the TwitchTV JSON API": "استخدام TwitchTV JSON API",
"Stylize Stories on Camper News": "نسق قصص على أخبار Camper",
@@ -641,14 +647,14 @@
"Anonymous Message Board": "لوحة الرسائل المجهولة",
"Build a Tribute Page": "بناء مشروع صفحة الثناء",
"Build a Survey Form": "بناء مشروع نموذج الدراسة الاستقصائية",
- "Build a Product Landing Page": "بناء صفحة هبوط لمنتج",
+ "Build a Product Landing Page": "أنشئ صفحة لعرض المنتج",
"Build a Technical Documentation Page": "بناء مشروع صفحة التوثيق التقني",
"Palindrome Checker": "مدقق باليندروم",
"Roman Numeral Converter": "تحويل الأرقام الرومانية",
"Caesars Cipher": "Caesars Cipher",
"Telephone Number Validator": "مدقق رقم الهاتف",
"Cash Register": "سجل النقدية",
- "Build a Drum Machine": "بناء آلة الدرامز",
+ "Build a Drum Machine": "أنشئ آلة الطبول",
"Visualize Data with a Choropleth Map": "التصوير المرئي للبيانات باستخدام خريطة التمثيل اللوني",
"Visualize Data with a Treemap Diagram": "التصوير المرئي للبيانات باستخدام الخريطة الشجرية",
"Exercise Tracker": "متعقب التمارين",
@@ -701,19 +707,19 @@
"data-analysis-with-python-v7": "شهادة تحليل البيانات باستخدام Python",
"Information Security": "أمن المعلومات",
"information-security-v7": "شهادة امن المعلومات",
- "Machine Learning with Python": "Machine Learning with Python",
- "machine-learning-with-python-v7": "Machine Learning with Python Certification",
- "Legacy Front End": "Legacy Front End",
- "legacy-front-end": "Front End Certification",
- "Legacy Back End": "Legacy Back End",
- "legacy-back-end": "Back End Certification",
- "Legacy Data Visualization": "Legacy Data Visualization",
- "legacy-data-visualization": "Data Visualization Certification",
+ "Machine Learning with Python": "تعلم الآلة باستخدام Python",
+ "machine-learning-with-python-v7": "مشاريع تعلم الآله باستخدام Python",
+ "Legacy Front End": "الواجهة الأمامية التراثية",
+ "legacy-front-end": "شهادة الواجهة الأمامية التراثية",
+ "Legacy Back End": "الواجهة الخلفية التراثية",
+ "legacy-back-end": "شهادة الواجهة الخلفية التراثية",
+ "Legacy Data Visualization": "التصوير المرئي للبيانات التراثي",
+ "legacy-data-visualization": "شهادة التصوير المرئي للبيانات",
"Legacy Information Security and Quality Assurance": "أمن المعلومات وشهادة ضمان الجودة التراثية",
"information-security-and-quality-assurance": "شهادة أمن المعلومات وشهادة ضمان الجودة",
- "Legacy Full Stack Certification": "Legacy Full Stack Certification",
- "Legacy Full Stack": "Legacy Full Stack",
- "full-stack": "Full Stack Certification"
+ "Legacy Full Stack Certification": "شهادة الشامل الخلفية التراثية",
+ "Legacy Full Stack": "الشامل الخلفية التراثية",
+ "full-stack": "شهادة الشامل الخلفية"
}
},
"certification-card": {
diff --git a/client/i18n/locales/chinese-traditional/intro.json b/client/i18n/locales/chinese-traditional/intro.json
index cf1d7d84510..8cc8822a4e6 100644
--- a/client/i18n/locales/chinese-traditional/intro.json
+++ b/client/i18n/locales/chinese-traditional/intro.json
@@ -553,7 +553,7 @@
"intro": [
"在這之前，你只是在前端使用 JavaScript 來給頁面添加交互、解決算法挑戰，或構建一個 SPA（單頁應用程序）。但 JavaScript 也可以用於後端或者服務器來構建整個 web 應用程序。",
"今天，構建應用軟件的廣受歡迎的方法之一是微服務，這些微服務是一種小型模塊化的應用，能夠共同形成一個更大的整體。",
- "在後端開發和 APIs 認證中，你將學習如何使用 Node.js 和 npm（Node 包管理工具）來寫後端。你還將使用 Express 框架構建 web 應用程序，並使用 MongoDB 和 Mongoose 庫構建一個 People Finder 微服務。"
+ "In the Back End Development and APIs Certification, you'll learn how to write back end apps with Node.js and npm. You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
],
"note": "",
"blocks": {
@@ -778,6 +778,10 @@
"屬性：Rosetta 代碼"
]
},
+ "the-odin-project": {
+ "title": "The Odin Project",
+ "intro": ["A description is to be determined"]
+ },
"project-euler": {
"title": "歐拉計劃",
"intro": [
diff --git a/client/i18n/locales/chinese-traditional/motivation.json b/client/i18n/locales/chinese-traditional/motivation.json
index d65a69bb268..12eb62efeed 100644
--- a/client/i18n/locales/chinese-traditional/motivation.json
+++ b/client/i18n/locales/chinese-traditional/motivation.json
@@ -1,819 +1,856 @@
{
"compliments": [
- "Over the top!",
- "Down the rabbit hole we go!",
- "Bring that rain!",
- "Target acquired.",
- "Feel that need for speed!",
- "You've got guts!",
- "We have liftoff!",
- "To infinity and beyond!",
- "Encore!",
- "Onward!",
- "Challenge destroyed!",
- "It's on like Donkey Kong!",
- "Power level? It's over 9000!",
- "Coding spree!",
- "Code long and prosper.",
- "The crowd goes wild!",
- "One for the Guinness book!",
- "Flawless victory!",
- "Most efficient!",
- "You've got the touch!",
- "You're on fire!",
- "The town is now red!",
- "To the nines!",
- "To the Batmobile!",
- "Pull out all the stops!",
- "You're a wizard, Harry!",
- "You're an all-star!",
- "Way to go!",
- "Outta sight!",
- "You're crushing it!",
- "What sorcery is this?",
- "The world rejoices!",
- "That's the way it's done!",
- "You rock!",
- "Woo-hoo!",
- "We knew you could do it!",
- "Hyper Combo Finish!",
- "Nothing but net!",
- "Boom-shakalaka!",
- "You're a shooting star!",
- "You're unstoppable!",
- "Way cool!",
- "Walk on that sunshine!",
- "Keep on trucking!",
- "Off the charts!",
- "There is no spoon!",
- "Cranked it up to 11!",
- "Escape velocity reached!",
- "You make this look easy!",
- "Passed with flying colors!",
- "You've got this!",
- "Happy, happy, joy, joy!",
- "Tomorrow, the world!",
- "Your powers combined!",
- "It's alive. It's alive!",
- "Sonic Boom!",
- "Here's looking at you, Code!",
- "Ride like the wind!",
- "Legen - wait for it - dary!",
- "Ludicrous Speed! Go!",
- "Most triumphant!",
- "One loop to rule them all!",
- "By the power of Grayskull!",
- "You did it!",
- "Storm that castle!",
- "Face-melting guitar solo!",
- "Checkmate!",
- "Bodacious!",
- "Tubular!",
- "You're outta sight!",
- "Keep calm and code on!",
- "Even sad panda smiles!",
- "Even grumpy cat approves!",
- "Kool Aid Man says oh yeah!",
- "Bullseye!",
- "Far out!",
- "You're heating up!",
- "Standing ovation!",
- "Nice one!",
- "All right!",
- "Hasta la vista, challenge!",
- "Terminated.",
- "Off the hook!",
- "Thundercats, Hooo!",
- "Shiver me timbers!",
- "Raise the roof!",
- "Bingo!",
- "Even Honey Badger cares!",
- "Helm, Warp Nine. Engage!",
- "Gotta code 'em all!",
- "Spool up the FTL drive!",
- "Cool beans!",
- "They're in another castle.",
- "Power UP!",
- "Pikachu chooses you!",
- "I gotta have more cowbell.",
- "Gotta go fast!",
- "Yippee!",
- "Cowabunga!",
- "Moon Prism Power!",
- "Plus Ultra!"
+ "太棒了！",
+ "我們跳進兔子洞！",
+ "雨下吧！",
+ "獲取目標。",
+ "體驗極速快感！",
+ "你有膽量！",
+ "我們升空了！",
+ "飛向無限！",
+ "再來一次！",
+ "向前進！",
+ "挑戰被摧毀！",
+ "重磅如同大金剛！",
+ "戰鬥力？超過 9000！",
+ "編碼狂潮！",
+ "編碼不息，繁榮昌盛。",
+ "人羣變得瘋狂！",
+ "一個吉尼斯世界紀錄！",
+ "完勝！",
+ "最高效率！",
+ "你有手感了！",
+ "你正在燃燒！",
+ "滿城春色！",
+ "完美！",
+ "上蝙蝠車！",
+ "全力以赴！",
+ "你是個巫師，哈利！",
+ "你是全明星隊員！",
+ "幹得好！",
+ "棒極了！",
+ "你太出色了！",
+ "這是什麼魔法？",
+ "世界歡欣鼓舞！",
+ "難題就是這樣搞定的！",
+ "你真棒！",
+ "嗚呼！",
+ "我們就知道你能行！",
+ "超級組合終結！",
+ "空心球！",
+ "炸彈-沙卡拉卡！",
+ "你是一顆流星！",
+ "你勢不可擋！",
+ "太酷了！",
+ "走在那陽光下！",
+ "堅持下去！",
+ "水平爆表！",
+ "勺子並不存在！",
+ "調到最大音量！",
+ "達到逃逸速度！",
+ "你讓這看起來很簡單！",
+ "以優異的成績通過！",
+ "你能行！",
+ "開心，開心，快樂，快樂！",
+ "明天，征服世界！",
+ "你的全部力量！",
+ "它活了。它活了！",
+ "索尼克音爆！",
+ "看着你呢，代碼！",
+ "疾馳如風！",
+ "傳——奇！",
+ "離譜的速度！出發！",
+ "高奏凱歌！",
+ "用一個循環來統治它們！",
+ "憑藉灰殼堡的神力！",
+ "你做到了！",
+ "衝進城堡！",
+ "蕩人心魄的吉他獨奏！",
+ "完全擊敗！",
+ "大有膽識！",
+ "厲害！",
+ "你真強啊！",
+ "保持冷靜，繼續編碼！",
+ "即使是悲傷的熊貓也會微笑！",
+ "即使脾氣暴躁的貓也同意！",
+ "如此感覺無以倫比。",
+ "正中靶心！",
+ "前衛！",
+ "燃燒吧，小宇宙！",
+ "起立鼓掌！",
+ "不錯！",
+ "好啊！",
+ "回見，挑戰！",
+ "終結了。",
+ "脫身！",
+ "霹靂貓顯神威！",
+ "讓我五體投地！",
+ "大顯身手！",
+ "答對了！",
+ "連蜜獾都在乎！",
+ "掌舵，第九曲速。啓動！",
+ "必須全部編碼！",
+ "發動超光速引擎！",
+ "酷豆子！",
+ "她們在另一個城堡裏。",
+ "加電！",
+ "皮卡丘選擇了你！",
+ "我要再多點牛鈴。",
+ "得快點！",
+ "了不起！",
+ "卡瓦邦嘎！",
+ "月亮棱鏡能量！",
+ "超越極致！",
+ "米爾豪斯一切都會好起來的！"
],
"motivationalQuotes": [
{
- "quote": "Whatever you are, be a good one.",
- "author": "Abraham Lincoln"
+ "quote": "不管你是誰，做個好人。",
+ "author": "亞伯拉罕·林肯"
},
{
- "quote": "A change in perspective is worth 80 IQ points.",
- "author": "Alan Kay"
+ "quote": "換一個角度看問題值80點智商。",
+ "author": "艾倫·凱"
},
{
- "quote": "The best way to predict the future is to invent it.",
- "author": "Alan Kay"
+ "quote": "預測未來的最好方法是創造未來。",
+ "author": "艾倫·凱"
},
{
- "quote": "The future is not laid out on a track. It is something that we can decide, and to the extent that we do not violate any known laws of the universe, we can probably make it work the way that we want to.",
- "author": "Alan Kay"
+ "quote": "未來不是在軌道上規劃的。這是我們可以決定的事情，只要我們不違反任何已知的宇宙法則，我們就可以讓它按我們想要的方式運行。",
+ "author": "艾倫·凱"
},
{
- "quote": "We can only see a short distance ahead, but we can see plenty there that needs to be done.",
- "author": "Alan Turing"
+ "quote": "我們只能看到前面很短的距離，但我們可以看到有很多事情需要做。",
+ "author": "艾倫·圖靈"
},
{
- "quote": "In the depth of winter, I finally learned that within me there lay an invincible summer.",
- "author": "Albert Camus"
+ "quote": "隆冬時節，我終於明白，我的內心深處有一個不可戰勝的夏天。",
+ "author": "阿爾伯特·加繆"
},
{
- "quote": "A person who never made a mistake never tried anything new.",
- "author": "Albert Einstein"
+ "quote": "從不犯錯的人從不嘗試新事物。",
+ "author": "阿爾伯特·愛因斯坦"
},
{
- "quote": "Creativity is intelligence having fun.",
- "author": "Albert Einstein"
+ "quote": "創造力是智力的樂趣。",
+ "author": "阿爾伯特·愛因斯坦"
},
{
- "quote": "I have no special talents. I am only passionately curious.",
- "author": "Albert Einstein"
+ "quote": "我沒有什麼特別的才能。我只是非常好奇。",
+ "author": "阿爾伯特·愛因斯坦"
},
{
- "quote": "Life is like riding a bicycle. To keep your balance, you must keep moving.",
- "author": "Albert Einstein"
+ "quote": "生活就像騎自行車。爲了保持平衡，你必須繼續前進。",
+ "author": "阿爾伯特·愛因斯坦"
},
{
- "quote": "Make everything as simple as possible, but not simpler.",
- "author": "Albert Einstein"
+ "quote": "事情應該力求簡單，但不能過於簡單。",
+ "author": "阿爾伯特·愛因斯坦"
},
{
- "quote": "Never memorize something that you can look up.",
- "author": "Albert Einstein"
+ "quote": "絕不要去記那些你能夠查得到的東西。",
+ "author": "阿爾伯特·愛因斯坦"
},
{
- "quote": "Once we accept our limits, we go beyond them.",
- "author": "Albert Einstein"
+ "quote": "一旦我們接受了自己的極限，我們就超越了它們。",
+ "author": "阿爾伯特·愛因斯坦"
},
{
- "quote": "Play is the highest form of research.",
- "author": "Albert Einstein"
+ "quote": "玩耍是研究的最高形式。",
+ "author": "阿爾伯特·愛因斯坦"
},
{
- "quote": "We cannot solve our problems with the same thinking we used when we created them.",
- "author": "Albert Einstein"
+ "quote": "我們不能用我們創造問題時的思維來解決問題。",
+ "author": "阿爾伯特·愛因斯坦"
},
{
- "quote": "Wisdom is not a product of schooling but of the lifelong attempt to acquire it.",
- "author": "Albert Einstein"
+ "quote": "智慧不是學校教育的產物，而是終身學習的產物。",
+ "author": "阿爾伯特·愛因斯坦"
},
{
- "quote": "Your imagination is your preview of life's coming attractions.",
- "author": "Albert Einstein"
+ "quote": "你的想像是你人生的預覽。",
+ "author": "阿爾伯特·愛因斯坦"
},
{
- "quote": "There is only one corner of the universe you can be certain of improving, and that's your own self.",
- "author": "Aldous Huxley"
+ "quote": "宇宙中只有一個角落是你可以切實改進的，那就是你自己。",
+ "author": "奧爾德斯·赫胥黎"
},
{
- "quote": "The most common way people give up their power is by thinking they don't have any.",
- "author": "Alice Walker"
+ "quote": "我感謝我的奮鬥，因爲沒有它，我就不會偶然發現自己的力量。",
+ "author": "亞歷克斯·艾爾"
},
{
- "quote": "Follow your inner moonlight. Don't hide the madness.",
- "author": "Allen Ginsberg"
+ "quote": "人們放棄權力最常見的方式是認爲自己沒有權力。",
+ "author": "艾麗絲·沃克"
},
{
- "quote": "The most difficult thing is the decision to act. The rest is merely tenacity.",
- "author": "Amelia Earhart"
+ "quote": "跟隨你內心的月光。別掩飾自己的瘋狂。",
+ "author": "艾倫·金斯伯格"
},
{
- "quote": "Life shrinks or expands in proportion with one's courage.",
- "author": "Anaïs Nin"
+ "quote": "最困難的是決定採取行動。剩下的只是堅韌。",
+ "author": "阿梅莉亞·埃爾哈特"
},
{
- "quote": "Weeks of programming can save you hours of planning.",
- "author": "Unknown"
+ "quote": "生命的縮小或擴大與一個人的勇氣成正比。",
+ "author": "阿奈斯·寧"
},
{
- "quote": "Quality is not an act, it is a habit.",
- "author": "Aristotle"
+ "quote": "數週的編程可以節省你數小時的計劃。",
+ "author": "佚名"
},
{
- "quote": "Start where you are. Use what you have. Do what you can.",
- "author": "Arthur Ashe"
+ "quote": "質量不是一種行爲，而是一種習慣。",
+ "author": "亞里士多德"
},
{
- "quote": "Nothing is impossible, the word itself says \"I'm possible\"!",
- "author": "Audrey Hepburn"
+ "quote": "從現在開始。利用你所擁有的。盡你所能。",
+ "author": "亞瑟·阿什"
},
{
- "quote": "Every strike brings me closer to the next home run.",
- "author": "Babe Ruth"
+ "quote": "沒有什麼是不可能的，連這個詞本身都說“不，可能”！",
+ "author": "奧黛麗·赫本"
},
{
- "quote": "By failing to prepare, you are preparing to fail.",
- "author": "Benjamin Franklin"
+ "quote": "每一擊都讓我離下一個本壘打越來越近。",
+ "author": "貝比·魯斯"
},
{
- "quote": "Tell me and I forget. Teach me and I remember. Involve me and I learn.",
- "author": "Benjamin Franklin"
+ "quote": "如果你沒有做好準備，你就是在準備失敗。",
+ "author": "本傑明·富蘭克林"
},
{
- "quote": "Well done is better than well said.",
- "author": "Benjamin Franklin"
+ "quote": "告訴我，我會忘記。教我，我會記住。讓我參與，我會學習。",
+ "author": "本傑明·富蘭克林"
},
{
- "quote": "There are no short cuts to any place worth going.",
- "author": "Beverly Sills"
+ "quote": "說得好不如做得好。",
+ "author": "本傑明·富蘭克林"
},
{
- "quote": "Controlling complexity is the essence of computer programming.",
- "author": "Brian Kernighan"
+ "quote": "任何值得去的地方都沒有捷徑。",
+ "author": "貝弗利·希爾斯"
},
{
- "quote": "I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.",
- "author": "Bruce Lee"
+ "quote": "控制複雜性是計算機編程的本質。",
+ "author": "布萊恩·科尼漢"
},
{
- "quote": "There are far, far better things ahead than any we leave behind.",
- "author": "C.S. Lewis"
+ "quote": "我不怕遇到練習過一萬種腿法的對手，但害怕遇到只將一種腿法練習一萬次的強敵。",
+ "author": "李小龍"
},
{
- "quote": "We are what we believe we are.",
- "author": "C.S. Lewis"
+ "quote": "比起遺落在過去的，未來還有更加美好的在等待着我們。",
+ "author": "C.S. 路易斯"
},
{
- "quote": "With the possible exception of the equator, everything begins somewhere.",
- "author": "C.S. Lewis"
+ "quote": "我們就是我們所相信的自己。",
+ "author": "C.S. 路易斯"
},
{
- "quote": "You are never too old to set another goal, or to dream a new dream.",
- "author": "C.S. Lewis"
+ "quote": "可能除了赤道以外，一切都從某處開始。",
+ "author": "C.S. 路易斯"
},
{
- "quote": "Somewhere, something incredible is waiting to be known.",
- "author": "Carl Sagan"
+ "quote": "無論年紀多大，你都可以設立新目標或擁有新夢想。",
+ "author": "C.S. 路易斯"
},
{
- "quote": "If you're not making mistakes, then you're not making decisions.",
- "author": "Catherine Cook"
+ "quote": "在某個地方，一些不可思議的事物正在等你去發現。",
+ "author": "卡爾·薩根"
},
{
- "quote": "Find what you love and let it kill you.",
- "author": "Charles Bukowski"
+ "quote": "當你有夢想時，你必須抓住它，永不放棄。",
+ "author": "卡羅爾·伯內特"
},
{
- "quote": "What matters most is how well you walk through the fire.",
- "author": "Charles Bukowski"
+ "quote": "如果你沒有犯錯誤，那麼你就沒有做決定。",
+ "author": "凱瑟琳·庫克"
},
{
- "quote": "It is not the strongest of the species that survive, nor the most intelligent, but the one most responsive to change.",
- "author": "Charles Darwin"
+ "quote": "愛我所愛，至死方休。",
+ "author": "查爾斯·布考斯基"
},
{
- "quote": "Life is 10% what happens to you and 90% how you react to it.",
- "author": "Charles R. Swindoll"
+ "quote": "最重要的是你能否赴湯蹈火。",
+ "author": "查爾斯·布考斯基"
},
{
- "quote": "You will do foolish things, but do them with enthusiasm.",
- "author": "Colette"
+ "quote": "生存下來的不是最強壯的物種，也不是最聰明的物種，而是最能適應變化的物種。",
+ "author": "查爾斯·達爾文"
},
{
- "quote": "It does not matter how slowly you go as long as you do not stop.",
- "author": "Confucius"
+ "quote": "細節不僅是細節，而且決定了設計。",
+ "author": "查爾斯·伊姆斯"
},
{
- "quote": "Real knowledge is to know the extent of one's ignorance.",
- "author": "Confucius"
+ "quote": "創造力不僅僅是與衆不同。任何人都可以做到怪誕不經，這很簡單。難的是像巴赫那樣簡單。使簡單的，非常簡單，這就是創造力。",
+ "author": "查爾斯·明格斯"
},
{
- "quote": "The past cannot be changed. The future is yet in your power.",
- "author": "Confucius"
+ "quote": "生活的 10% 是發生在你身上的事，90% 是你對它的反應。",
+ "author": "查爾斯·R·斯溫多爾"
},
{
- "quote": "Looking at code you wrote more than two weeks ago is like looking at code you are seeing for the first time.",
- "author": "Dan Hurvitz"
+ "quote": "你不免會做傻事，但熱烈地、衷心地投入做吧。",
+ "author": "科萊特"
},
{
- "quote": "Someday is not a day of the week.",
- "author": "Denise Brennan-Nelson"
+ "quote": "譬如爲山，未成一簣，止，吾止也。譬如平地，雖覆一簣，進，吾往也。",
+ "author": "孔子"
},
{
- "quote": "UNIX is simple. It just takes a genius to understand its simplicity.",
- "author": "Dennis Ritchie"
+ "quote": "知之爲知之，不知爲不知，是知也。",
+ "author": "孔子"
},
{
- "quote": "Computers are good at following instructions, but not at reading your mind.",
- "author": "Donald Knuth"
+ "quote": "往昔不可諫，來者猶可追。",
+ "author": "孔子"
},
{
- "quote": "A good programmer is someone who always looks both ways before crossing a one-way street.",
- "author": "Doug Linder"
+ "quote": "看着自己兩個多星期前編寫的代碼就像第一次看到這代碼一樣。",
+ "author": "丹·赫維茨"
},
{
- "quote": "Tough times never last, but tough people do.",
- "author": "Dr. Robert Schuller"
+ "quote": "“總有一天”不是一週中的一天。",
+ "author": "丹尼斯·布倫南-納爾遜"
},
{
- "quote": "If things start happening, don't worry, don't stew, just go right along and you'll start happening too.",
- "author": "Dr. Seuss"
+ "quote": "UNIX很簡單。不過只有天才才能理解它的簡單性。",
+ "author": "丹尼斯·裏奇"
},
{
- "quote": "Do not go gentle into that good night. Rage, rage against the dying of the light.",
- "author": "Dylan Thomas"
+ "quote": "在我看來，要想見彩虹，就得忍受風雨！",
+ "author": "多莉·帕頓"
},
{
- "quote": "The question of whether computers can think is like the question of whether submarines can swim.",
- "author": "E.W. Dijkstra"
+ "quote": "計算機善於遵循指令，但不善於理解你的思維。",
+ "author": "唐納德·克努特"
},
{
- "quote": "Any code of your own that you haven't looked at for six or more months might as well have been written by someone else.",
- "author": "Eagleson's Law"
+ "quote": "優秀的程序員總是在過單行道之前兩邊都看一下。",
+ "author": "道格·林德"
},
{
- "quote": "Do one thing every day that scares you.",
- "author": "Eleanor Roosevelt"
+ "quote": "創造力是狂野的頭腦和訓練有素的眼睛。",
+ "author": "多蘿西·帕克"
},
{
- "quote": "With the new day comes new strength and new thoughts.",
- "author": "Eleanor Roosevelt"
+ "quote": "艱苦的時光終將過去，堅強的人們必將苦盡甘來。",
+ "author": "羅伯特·舒勒博士"
},
{
- "quote": "You must do the things you think you cannot do.",
- "author": "Eleanor Roosevelt"
+ "quote": "如果事情開始發生，不要發愁，不要擔憂，只要一直走下去，你也會開始發生的。",
+ "author": "蘇斯博士"
},
{
- "quote": "Light tomorrow with today.",
- "author": "Elizabeth Barrett Browning"
+ "quote": "不要溫和地走進那良夜。怒斥，怒斥光明的消逝。",
+ "author": "狄蘭·托馬斯"
},
{
- "quote": "Forever is composed of nows.",
- "author": "Emily Dickinson"
+ "quote": "計算機能否思考的問題就像潛艇能否游泳的問題一樣。",
+ "author": "E·W·迪科斯徹"
},
{
- "quote": "Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter.",
- "author": "Eric Raymond"
+ "quote": "自己寫的代碼，只要有六個月沒有看過，就像是別人寫的一樣。",
+ "author": "伊格爾森定律"
},
{
- "quote": "If you don't risk anything, you risk even more.",
- "author": "Erica Jong"
+ "quote": "每天做一件讓你害怕的事。",
+ "author": "埃莉諾·羅斯福"
},
{
- "quote": "The world breaks everyone, and afterward, many are strong at the broken places.",
- "author": "Ernest Hemingway"
+ "quote": "新的一天帶來了新的力量和新的思想。",
+ "author": "埃莉諾·羅斯福"
},
{
- "quote": "There is nothing noble in being superior to your fellow man; true nobility is being superior to your former self.",
- "author": "Ernest Hemingway"
+ "quote": "你必須做你自己認爲做不到的事。",
+ "author": "埃莉諾·羅斯福"
},
{
- "quote": "Never confuse a single defeat with a final defeat.",
- "author": "F. Scott Fitzgerald"
+ "quote": "用今天照亮明天。",
+ "author": "伊麗莎白·巴雷特·布朗寧"
},
{
- "quote": "I attribute my success to this - I never gave or took any excuse.",
- "author": "Florence Nightingale"
+ "quote": "如果你的夢想沒有嚇到你，那是因爲你夢想得還不夠大。",
+ "author": "愛倫·約翰森·希爾麗夫"
},
{
- "quote": "The best revenge is massive success.",
- "author": "Frank Sinatra"
+ "quote": "永遠是由現在組成的。",
+ "author": "艾米莉·狄金森"
},
{
- "quote": "The only limit to our realization of tomorrow, will be our doubts of today.",
- "author": "Franklin D. Roosevelt"
+ "quote": "計算機科學教育不能使任何人成爲專家程序員，正如學習畫筆和顏料無法讓人成爲繪畫專家一樣。",
+ "author": "埃裏克·雷蒙德"
},
{
- "quote": "Right or wrong, it's very pleasant to break something from time to time.",
- "author": "Fyodor Dostoevsky"
+ "quote": "如果你不冒任何風險，你的風險就更大。",
+ "author": "艾瑞卡·瓊"
},
{
- "quote": "The harder I work, the luckier I get.",
- "author": "Gary Player"
+ "quote": "生活總是讓我們遍體鱗傷，但到後來，那些受傷的地方會變得更堅強。",
+ "author": "厄內斯特·海明威"
},
{
- "quote": "Giving up is the only sure way to fail.",
- "author": "Gena Showalter"
+ "quote": "優於別人，並不高貴，真正的高貴應該是優於過去的自己。",
+ "author": "厄內斯特·海明威"
},
{
- "quote": "The only truly secure system is one that is powered off, cast in a block of concrete and sealed in a lead-lined room with armed guards.",
- "author": "Gene Spafford"
+ "quote": "永遠不要將一次失敗與最終失敗混淆。",
+ "author": "F. 斯科特·菲茨傑拉德"
},
{
- "quote": "A life spent making mistakes is not only more honorable, but more useful than a life spent doing nothing.",
- "author": "George Bernard Shaw"
+ "quote": "我將我的成功歸功於此——我從不找，也不接受任何藉口。",
+ "author": "弗洛倫斯·南丁格爾"
},
{
- "quote": "First learn computer science and all the theory. Next develop a programming style. Then forget all that and just hack.",
- "author": "George Carrette"
+ "quote": "最好的報復是巨大的成功。",
+ "author": "弗蘭克·西納特拉"
},
{
- "quote": "Discovering the unexpected is more important than confirming the known.",
- "author": "George Box"
+ "quote": "我們實現明天的唯一限制是我們對今天的懷疑。",
+ "author": "富蘭克林·羅斯福"
},
{
- "quote": "We only see what we know.",
- "author": "Goethe"
+ "quote": "不管是對是錯，時不時弄壞點東西是一件非常愉快的事情。",
+ "author": "陀思妥耶夫斯基"
},
{
- "quote": "Without hard work, nothing grows but weeds.",
- "author": "Gordon B. Hinckley"
+ "quote": "我越努力，就越幸運。",
+ "author": "蓋瑞·普萊爾"
},
{
- "quote": "The function of good software is to make the complex appear to be simple.",
- "author": "Grady Booch"
+ "quote": "放棄是失敗的唯一可靠途徑。",
+ "author": "吉娜·肖沃爾特"
},
{
- "quote": "When you know that you're capable of dealing with whatever comes, you have the only security the world has to offer.",
- "author": "Harry Browne"
+ "quote": "唯一真正安全的系統是斷了電、澆鑄在混凝土塊中、並密封在有武裝警衛的鉛襯房間內的系統。",
+ "author": "金·斯帕福德"
},
{
- "quote": "Pain is inevitable. Suffering is optional.",
- "author": "Haruki Murakami"
+ "quote": "一生犯錯誤不僅比一生無所事事更光榮，而且更有用。",
+ "author": "蕭伯納"
},
{
- "quote": "Optimism is the faith that leads to achievement. Nothing can be done without hope and confidence.",
- "author": "Helen Keller"
+ "quote": "首先學會計算機科學和所有的理論。 然後發展出一個編程風格。之後便要忘掉所有這些，自由地編碼。",
+ "author": "喬治·卡雷特"
},
{
- "quote": "The price of anything is the amount of life you exchange for it.",
- "author": "Henry David Thoreau"
+ "quote": "發現意想不到的比確認已知的更重要。",
+ "author": "喬治·博克斯"
},
{
- "quote": "Whether you think you can or think you can't, you're right.",
- "author": "Henry Ford"
+ "quote": "我們只能看到自己所知的。",
+ "author": "歌德"
},
{
- "quote": "The most exciting phrase to hear in science, the one that heralds discoveries, is not 'Eureka!' but 'Now that's funny…'",
- "author": "Isaac Asimov"
+ "quote": "不努力耕耘，只會長出雜草。",
+ "author": "戈登·B·欣克利"
},
{
- "quote": "We are all failures. At least the best of us are.",
- "author": "J.M. Barrie"
+ "quote": "好的軟件的功能就是化繁爲簡。",
+ "author": "格雷迪·布奇"
},
{
- "quote": "You can't wait for inspiration. You have to go after it with a club.",
- "author": "Jack London"
+ "quote": "當你知道自己有能力應對任何事情時，你就擁有了世界所能提供的唯一安全感。",
+ "author": "哈利·布朗"
},
{
- "quote": "Don't wish it were easier, wish you were better.",
- "author": "Jim Rohn"
+ "quote": "痛苦不可避免，但可以選擇是否受苦。",
+ "author": "村上春樹"
},
{
- "quote": "By seeking and blundering we learn.",
- "author": "Johann Wolfgang von Goethe"
+ "quote": "樂觀是導致成就的信念。沒有希望和信心，就什麼都做不了。",
+ "author": "海倫·凱勒"
},
{
- "quote": "Knowing is not enough; we must apply. Wishing is not enough; we must do.",
- "author": "Johann Wolfgang von Goethe"
+ "quote": "任何東西的價格都等於你用多少生命去換取它。",
+ "author": "亨利·大衛·梭羅"
},
{
- "quote": "We first make our habits, then our habits make us.",
- "author": "John Dryden"
+ "quote": "不管你認爲你能還是不能，你都是對的。",
+ "author": "亨利·福特"
},
{
- "quote": "The power of imagination makes us infinite.",
- "author": "John Muir"
+ "quote": "在科學中聽到的最令人興奮的短語，即預示着發現的短語，不是“找到了！” 而是“這很有趣……”",
+ "author": "艾薩克·阿西莫夫"
},
{
- "quote": "May you live every day of your life.",
- "author": "Jonathan Swift"
+ "quote": "你所做的會有影響。你必須決定你想要做出什麼樣的改變。",
+ "author": "簡·古道爾"
},
{
- "quote": "Perseverance is failing 19 times and succeeding the 20th.",
- "author": "Julie Andrews"
+ "quote": "我們都是失敗者。至少我們中最好的人是。",
+ "author": "J.M.巴里"
},
{
- "quote": "The work of today is the history of tomorrow, and we are its makers.",
- "author": "Juliette Gordon Low"
+ "quote": "你不能等待靈感。你必須提着木棒去追求它。",
+ "author": "傑克·倫敦"
},
{
- "quote": "If you reveal your secrets to the wind, you should not blame the wind for revealing them to the trees.",
- "author": "Kahlil Gibran"
+ "quote": "不要希望事情更容易，希望你更有能力。",
+ "author": "吉姆·羅恩"
},
{
- "quote": "Optimism is an occupational hazard of programming; feedback is the treatment.",
- "author": "Kent Beck"
+ "quote": "我們通過尋找和犯錯誤來學習。",
+ "author": "約翰·沃爾夫岡·馮·歌德"
},
{
- "quote": "Opportunity does not knock, it presents itself when you beat down the door.",
- "author": "Kyle Chandler"
+ "quote": "知道是不夠的；我們必須應用。希望是不夠的；我們必須行動。",
+ "author": "約翰·沃爾夫岡·馮·歌德"
},
{
- "quote": "To iterate is human, to recurse divine.",
- "author": "Peter Deutsch"
+ "quote": "我們先養成習慣，然後習慣造就我們。",
+ "author": "約翰·德萊登"
},
{
- "quote": "A good traveler has no fixed plans and is not intent on arriving.",
- "author": "Lao Tzu"
+ "quote": "想象力使我們無限。",
+ "author": "約翰·繆爾"
},
{
- "quote": "An ant on the move does more than a dozing ox.",
- "author": "Lao Tzu"
+ "quote": "願你過好每一天。",
+ "author": "喬納森·斯威夫特"
},
{
- "quote": "Do the difficult things while they are easy and do the great things while they are small. A journey of a thousand miles must begin with a single step.",
- "author": "Lao Tzu"
+ "quote": "堅持就是前 19 次失敗，第 20 次成功。",
+ "author": "朱莉·安德魯斯"
},
{
- "quote": "That's the thing about people who think they hate computers. What they really hate is lousy programmers.",
- "author": "Larry Niven"
+ "quote": "今天的工作就是明天的歷史，我們是它的創造者。",
+ "author": "朱麗葉·戈登·洛"
},
{
- "quote": "It had long since come to my attention that people of accomplishment rarely sat back and let things happen to them. They went out and happened to things.",
- "author": "Leonardo da Vinci"
+ "quote": "如果你向風泄露了你的祕密，你不應該責怪風將它們泄露給樹木。",
+ "author": "紀伯倫"
},
{
- "quote": "If you're any good at all, you know you can be better.",
- "author": "Lindsay Buckingham"
+ "quote": "樂觀是編程的職業病；反饋就是治療。",
+ "author": "肯特·貝克"
},
{
- "quote": "If people never did silly things, nothing intelligent would ever get done.",
- "author": "Ludwig Wittgenstein"
+ "quote": "機會不會敲門，它會在你敲門的時候出現。",
+ "author": "凱爾·錢德勒"
},
{
- "quote": "You only live once, but if you do it right, once is enough.",
- "author": "Mae West"
+ "quote": "迭代的是人，遞歸的是神。",
+ "author": "彼得·多伊奇"
},
{
- "quote": "Live as if you were to die tomorrow. Learn as if you were to live forever.",
- "author": "Mahatma Gandhi"
+ "quote": "善行無轍跡，善言無瑕謫。",
+ "author": "老子"
},
{
- "quote": "Strength does not come from physical capacity. It comes from an indomitable will.",
- "author": "Mahatma Gandhi"
+ "quote": "合抱之木，生於毫末；九層之臺，起於累土；千里之行，始於足下。",
+ "author": "老子"
},
{
- "quote": "One person's 'paranoia' is another person's 'engineering redundancy'.",
- "author": "Marcus J. Ranum"
+ "quote": "那些認爲自己討厭電腦的人就是這樣。他們真正討厭的是糟糕的程序員。",
+ "author": "拉里·尼文"
},
{
- "quote": "Nothing in life is to be feared, it is only to be understood. Now is the time to understand more, so that we may fear less.",
- "author": "Marie Curie"
+ "quote": "我早就發現，成功的人很少坐以待斃，讓事情發生在他們身上。他們出去主動去做事。",
+ "author": "達芬奇"
},
{
- "quote": "If you have everything under control, you're not moving fast enough.",
- "author": "Mario Andretti"
+ "quote": "如果你有一點才能，你就會知道你還可以做得更好。",
+ "author": "林賽·白金漢"
},
{
- "quote": "Education: the path from cocky ignorance to miserable uncertainty.",
- "author": "Mark Twain"
+ "quote": "如果人們從不做傻事，就什麼都不會做得聰明。",
+ "author": "路德維希·維特根斯坦"
},
{
- "quote": "It ain't what you don't know that gets you into trouble. It's what you know for sure that just ain't so.",
- "author": "Mark Twain"
+ "quote": "人只活一次，但若活得其所一次已足夠。",
+ "author": "梅·韋斯特"
},
{
- "quote": "The secret of getting ahead is getting started.",
- "author": "Mark Twain"
+ "quote": "像明天就要死一樣生活，像永遠活着一樣學習。",
+ "author": "聖雄甘地"
},
{
- "quote": "The two most important days in your life are the day you are born and the day you find out why.",
- "author": "Mark Twain"
+ "quote": "力量不是來自身體能力。它來自不屈不撓的意志。",
+ "author": "聖雄甘地"
},
{
- "quote": "Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails.",
- "author": "Mark Twain"
+ "quote": "一個人的“偏執狂”是另一個人的“工程冗餘”。",
+ "author": "馬庫斯·拉納姆"
},
{
- "quote": "Any fool can write code that a computer can understand. Good programmers write code that humans can understand.",
- "author": "Martin Fowler"
+ "quote": "生活中沒有什麼可怕的，只有需要理解的。現在是時候多去理解，這樣我們就會少一些恐懼。",
+ "author": "瑪麗·居里"
},
{
- "quote": "I know, somehow, that only when it is dark enough can you see the stars.",
- "author": "Martin Luther King Jr."
+ "quote": "如果一切都在你的掌控之中，那麼你的行動還不夠快。",
+ "author": "馬里奧·安德雷蒂"
},
{
- "quote": "It is never too late to be what you might have been.",
- "author": "Mary Anne Evans"
+ "quote": "教育：從自大的無知到悲慘的不確定性的道路。",
+ "author": "馬克·吐溫"
},
{
- "quote": "Nothing will work unless you do.",
- "author": "Maya Angelou"
+ "quote": "讓你陷入麻煩的不是你不知道的東西，而是你確信的、其實並不是真的東西。",
+ "author": "馬克·吐溫"
},
{
- "quote": "We delight in the beauty of the butterfly, but rarely admit the changes it has gone through to achieve that beauty.",
- "author": "Maya Angelou"
+ "quote": "取得成功的祕訣就是開始。",
+ "author": "馬克·吐溫"
},
{
- "quote": "We may encounter many defeats, but we must not be defeated.",
- "author": "Maya Angelou"
+ "quote": "你生命中最重要的兩天是你出生的那一天和你找到意義的那一天。",
+ "author": "馬克·吐溫"
},
{
- "quote": "Everybody has talent, but ability takes hard work.",
- "author": "Michael Jordan"
+ "quote": "二十年後，你會因自己沒做的事情而更加失望，而不是做過的事情。所以，請解開繩索，駛離安全的港灣，揚帆起航吧。",
+ "author": "馬克·吐溫"
},
{
- "quote": "I've missed more than 9,000 shots during my career. I've lost almost 300 games. 26 times, I've been trusted to take the game winning shot and missed. I've failed over and over and over again in my life. And that is why I succeed.",
- "author": "Michael Jordan"
+ "quote": "任何傻瓜都可以編寫計算機可以理解的代碼。優秀的程序員編寫人類可以理解的代碼。",
+ "author": "馬丁·福勒"
},
{
- "quote": "Impossible is just a big word thrown around by small men who find it easier to live in the world they've been given than to explore the power they have to change it. Impossible is not a fact. It's an opinion. Impossible is not a declaration. It's a dare. Impossible is potential. Impossible is temporary. Impossible is nothing.",
- "author": "Muhammad Ali"
+ "quote": "我知道，不知何故，只有當天足夠黑時，你才能看到星星。",
+ "author": "馬丁·路德·金"
},
{
- "quote": "A winner is a dreamer who never gives up.",
- "author": "Nelson Mandela"
+ "quote": "永遠不會太晚去成爲你可能成爲的人。",
+ "author": "瑪麗·安妮·埃文斯"
},
{
- "quote": "It always seems impossible until it's done.",
- "author": "Nelson Mandela"
+ "quote": "除非你行動起來，否則什麼都不會改變。",
+ "author": "瑪雅·安傑洛"
},
{
- "quote": "Failure will never overtake me if my determination to succeed is strong enough.",
- "author": "Og Mandino"
+ "quote": "你無法用盡創造力。使用得越多，就會有越多。",
+ "author": "瑪雅·安傑洛"
},
{
- "quote": "I am not young enough to know everything.",
- "author": "Oscar Wilde"
+ "quote": "我們喜歡蝴蝶的美麗，但很少承認它爲實現這種美麗所經歷的變化。",
+ "author": "瑪雅·安傑洛"
},
{
- "quote": "There is only one thing that makes a dream impossible to achieve: the fear of failure.",
- "author": "Paulo Coelho"
+ "quote": "我們可能會遇到很多失敗，但我們絕不能被擊敗。",
+ "author": "瑪雅·安傑洛"
},
{
- "quote": "Never go to bed mad. Stay up and fight.",
- "author": "Phyllis Diller"
+ "quote": "每個人都有天賦，但能力需要努力。",
+ "author": "邁克爾·喬丹"
},
{
- "quote": "You can't cross the sea merely by standing and staring at the water.",
- "author": "Rabindranath Tagore"
+ "quote": "在我的職業生涯中，我錯過了 9000 多次投籃。我輸掉了近 300 場比賽。26 次，我被信任去投決勝一投，但都沒有命中。我一次又一次地失敗。但正因如此，我才獲得了成功。",
+ "author": "邁克爾·喬丹"
},
{
- "quote": "The only person you are destined to become is the person you decide to be.",
- "author": "Ralph Waldo Emerson"
+ "quote": "“不可能”只是小人物們輕易拋出的大詞，他們寧願留在自己被賦予的世界裏，也不願探索自己改變它的力量。“不可能”不是事實，而是意見。“不可能”不是宣言，而是挑戰。“不可能”是潛力。“不可能”是暫時的。“不可能”什麼也不是。",
+ "author": "穆罕默德·阿里"
},
{
- "quote": "What you do speaks so loudly that I cannot hear what you say.",
- "author": "Ralph Waldo Emerson"
+ "quote": "勝利者是永不放棄的夢想家。",
+ "author": "納爾遜·曼德拉"
},
{
- "quote": "People who are crazy enough to think they can change the world, are the ones who do.",
- "author": "Rob Siltanen"
+ "quote": "看起來總是不可能，直到它被做到。",
+ "author": "納爾遜·曼德拉"
},
{
- "quote": "The best way out is always through.",
- "author": "Robert Frost"
+ "quote": "如果我成功的決心足夠堅定，失敗永遠不會壓倒我。",
+ "author": "奧格·曼狄諾"
},
{
- "quote": "Today's accomplishments were yesterday's impossibilities.",
- "author": "Robert H. Schuller"
+ "quote": "我還不夠年輕，不可能瞭解所有的事情。",
+ "author": "奧斯卡·王爾德"
},
{
- "quote": "Don't be satisfied with stories, how things have gone with others. Unfold your own myth.",
- "author": "Rumi"
+ "quote": "只有一件事使夢想無法實現：對失敗的恐懼。",
+ "author": "保羅·柯艾略"
},
{
- "quote": "Forget safety. Live where you fear to live. Destroy your reputation. Be notorious.",
- "author": "Rumi"
+ "quote": "光是站着看水是無法渡海的。",
+ "author": "羅賓德拉納特·泰戈爾"
},
{
- "quote": "Sell your cleverness and buy bewilderment.",
- "author": "Rumi"
+ "quote": "你註定要成爲的唯一的人，就是你決定成爲的人。",
+ "author": "拉爾夫·沃爾多·愛默生"
},
{
- "quote": "The cure for pain is in the pain.",
- "author": "Rumi"
+ "quote": "你的所作所爲聲音很大，我聽不見你在說什麼。",
+ "author": "拉爾夫·沃爾多·愛默生"
},
{
- "quote": "Have no fear of perfection - you'll never reach it.",
- "author": "Salvador Dalí"
+ "quote": "那些足夠瘋狂以爲自己可以改變世界的人，纔是真正改變世界的人。",
+ "author": "羅伯·西塔寧"
},
{
- "quote": "Don't watch the clock. Do what it does. Keep going.",
- "author": "Sam Levenson"
+ "quote": "最好的出路是有始有終。",
+ "author": "羅伯特·弗羅斯特"
},
{
- "quote": "Ever Tried. Ever failed. No matter. Try again. Fail again. Fail better.",
- "author": "Samuel Beckett"
+ "quote": "今天的成就是昨天的不可能。",
+ "author": "羅伯特·舒樂"
},
{
- "quote": "The more you know, the more you realize you know nothing.",
- "author": "Socrates"
+ "quote": "不要滿足於故事，不要滿足於別人的經歷。揭開你自己的神話。",
+ "author": "魯米"
},
{
- "quote": "The greatest enemy of knowledge is not ignorance, it is the illusion of knowledge.",
- "author": "Stephen Hawking"
+ "quote": "忘掉安全感，到你所害怕的地方去生活。摧毀你的名聲，做一個聲名狼藉的人。",
+ "author": "魯米"
},
{
- "quote": "The universe doesn't allow perfection.",
- "author": "Stephen Hawking"
+ "quote": "賣掉你的聰明，買下困惑。",
+ "author": "魯米"
},
{
- "quote": "Whether you want to uncover the secrets of the universe, or you want to pursue a career in the 21st century, basic computer programming is an essential skill to learn.",
- "author": "Stephen Hawking"
+ "quote": "治療疼痛的方法是在疼痛中。",
+ "author": "魯米"
},
{
- "quote": "The scariest moment is always just before you start.",
- "author": "Stephen King"
+ "quote": "不要害怕完美——你永遠達不到完美。",
+ "author": "薩爾瓦多·達利"
},
{
- "quote": "You can, you should, and if you're brave enough to start, you will.",
- "author": "Stephen King"
+ "quote": "不要看時鐘。做它做的事情。繼續前進。",
+ "author": "山姆·李文生"
},
{
- "quote": "Arise, Awake and Stop not until the goal is reached.",
- "author": "Swami Vivekananda"
+ "quote": "曾經嘗試過。曾經失敗過。沒關係。再嘗試一次。再失敗一次。做得更好。",
+ "author": "塞繆爾·貝克特"
},
{
- "quote": "It is said that your life flashes before your eyes just before you die. That is true, it's called Life.",
- "author": "Terry Pratchett"
+ "quote": "你知道的越多，你就越發現你什麼都不知道。",
+ "author": "蘇格拉底"
},
{
- "quote": "Believe you can and you're halfway there.",
- "author": "Theodore Roosevelt"
+ "quote": "知識最大的敵人不是無知，而是知識的幻覺。",
+ "author": "史蒂芬·霍金"
},
{
- "quote": "I have not failed. I've just found 10,000 ways that won't work.",
- "author": "Thomas A. Edison"
+ "quote": "宇宙不允許完美。",
+ "author": "史蒂芬·霍金"
},
{
- "quote": "Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.",
- "author": "Thomas A. Edison"
+ "quote": "無論你是想揭開宇宙的祕密，還是想在 21 世紀謀求職業，基礎計算機編程是必學的技能。",
+ "author": "史蒂芬·霍金"
},
{
- "quote": "The harder the conflict, the more glorious the triumph.",
- "author": "Thomas Paine"
+ "quote": "最可怕的時刻總是在你開始之前。",
+ "author": "史蒂芬.金"
},
{
- "quote": "The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.",
- "author": "Tim Berners-Lee"
+ "quote": "你可以，你應該，如果你有足夠的勇氣開始，你會的。",
+ "author": "史蒂芬.金"
},
{
- "quote": "Failure is the condiment that gives success its flavor.",
- "author": "Truman Capote"
+ "quote": "起牀，醒來，直到達到目標才停下來。",
+ "author": "斯瓦米·維韋卡南達"
},
{
- "quote": "Those who says it cannot be done should not interrupt the person doing it.",
- "author": "Unknown"
+ "quote": "據說，就在你死之前，你的生命在你眼前閃過。沒錯，這就是所謂的生活。",
+ "author": "泰瑞·普萊契"
},
{
- "quote": "Even if you fall on your face, you're still moving forward.",
- "author": "Victor Kiam"
+ "quote": "相信你可以，你就成功了一半。",
+ "author": "西奧多·羅斯福"
},
{
- "quote": "It's not whether you get knocked down, it's whether you get up.",
- "author": "Vince Lombardi"
+ "quote": "我沒有失敗。我只是找到了一萬種行不通的方法。",
+ "author": "愛迪生"
},
{
- "quote": "I dream my painting and I paint my dream.",
- "author": "Vincent van Gogh"
+ "quote": "我們最大的弱點在於放棄。最確定的成功方法永遠是再試一次。",
+ "author": "愛迪生"
},
{
- "quote": "Let us cultivate our garden.",
- "author": "Voltaire"
+ "quote": "衝突越激烈，勝利就越光榮。",
+ "author": "托馬斯·潘恩"
},
{
- "quote": "Aim for the moon. If you miss, you may hit a star.",
- "author": "W. Clement Stone"
+ "quote": "我所設想的網絡，我們還沒有看到。未來仍然比過去要大得多。",
+ "author": "蒂姆·伯納斯-李"
},
{
- "quote": "The way to get started is to quit talking and begin doing.",
- "author": "Walt Disney"
+ "quote": "失敗是給成功增添風味的調味品。",
+ "author": "杜魯門·卡波特"
},
{
- "quote": "You miss 100% of the shots you don't take.",
- "author": "Wayne Gretzky"
+ "quote": "那些說這是不可能的人，不應該打斷正在做這件事的人。",
+ "author": "佚名"
},
{
- "quote": "Don't let yesterday take up too much of today.",
- "author": "Will Rogers"
+ "quote": "用不同的眼光看待平常的事物。",
+ "author": "維科·馬吉斯泰蒂"
},
{
- "quote": "Even if you're on the right track, you'll get run over if you just sit there.",
- "author": "Will Rogers"
+ "quote": "即使你摔倒在地，你仍然在前進。",
+ "author": "維克托·基亞姆"
},
{
- "quote": "Do not wait to strike till the iron is hot; but make it hot by striking.",
- "author": "William Butler Yeats"
+ "quote": "重要的不是你是否被擊倒，而是你是否爬起來。",
+ "author": "文斯·隆巴迪"
},
{
- "quote": "You cannot swim for new horizons until you have courage to lose sight of the shore.",
- "author": "William Faulkner"
+ "quote": "我夢想我的畫，我畫我的夢。",
+ "author": "文森特·梵高"
},
{
- "quote": "Be not afraid of greatness. Some are born great, some achieve greatness, and others have greatness thrust upon them.",
- "author": "William Shakespeare"
+ "quote": "偉大的事情是由一系列小事情匯聚而成的。",
+ "author": "文森特·梵高"
},
{
- "quote": "We know what we are, but not what we may be.",
- "author": "William Shakespeare"
+ "quote": "讓我們耕種我們的花園。",
+ "author": "伏爾泰"
},
{
- "quote": "In theory there is no difference between theory and practice. In practice there is.",
- "author": "Yogi Berra"
+ "quote": "瞄準月亮。如果你錯失目標，你可能會擊中一顆恆星。",
+ "author": "克萊門特·斯通"
},
{
- "quote": "You can see a lot by just looking.",
- "author": "Yogi Berra"
+ "quote": "開始的方法是停止說話，開始行動。",
+ "author": "沃爾特·迪斯尼"
},
{
- "quote": "There is no elevator to success, you have to take the stairs.",
- "author": "Zig Ziglar"
+ "quote": "你不嘗試的話，就有 100% 的機會失敗。",
+ "author": "韋恩·格雷茨基"
},
{
- "quote": "You don't have to be great to start, but you have to start to be great.",
- "author": "Zig Ziglar"
+ "quote": "不要讓昨天佔據太多的今天。",
+ "author": "威爾·羅傑斯"
+ },
+ {
+ "quote": "即使你是在正確的路上，如果你只是坐在那裏，你也會被撞倒。",
+ "author": "威爾·羅傑斯"
+ },
+ {
+ "quote": "不要等鐵熱了再打；要用敲打使它變熱。",
+ "author": "威廉·巴特勒·葉芝"
+ },
+ {
+ "quote": "除非你有勇氣離開海岸，否則你無法遊向新的地平線。",
+ "author": "威廉·福克納"
+ },
+ {
+ "quote": "不要害怕偉大。 有些人天生偉大，有些人成就偉大，而另一些人則被推向偉大。",
+ "author": "威廉·莎士比亞"
+ },
+ {
+ "quote": "我們知道我們是什麼，但不知道我們可能成爲什麼。",
+ "author": "威廉·莎士比亞"
+ },
+ {
+ "quote": "從理論上講，理論和實踐之間沒有區別。在實踐中是有的。",
+ "author": "約吉·貝拉"
+ },
+ {
+ "quote": "通過看，你就可以覺察到很多東西。",
+ "author": "約吉·貝拉"
+ },
+ {
+ "quote": "成功沒有電梯，你必須走樓梯。",
+ "author": "齊格·齊格勒"
+ },
+ {
+ "quote": "你不一定要很偉大才能開始，但你必須開始才能變得偉大。",
+ "author": "齊格·齊格勒"
}
]
}
diff --git a/client/i18n/locales/chinese-traditional/translations.json b/client/i18n/locales/chinese-traditional/translations.json
index 68a3d3706e5..643c5b0bc15 100644
--- a/client/i18n/locales/chinese-traditional/translations.json
+++ b/client/i18n/locales/chinese-traditional/translations.json
@@ -11,6 +11,7 @@
"view": "查看",
"view-code": "查看代碼",
"view-project": "查看項目",
+ "view-cert-title": "View {{certTitle}}",
"show-cert": "顯示認證",
"claim-cert": "申請認證",
"save-progress": "保存進度",
@@ -52,7 +53,7 @@
"check-code": "檢查您的代碼 (Ctrl + Enter)",
"check-code-2": "檢查你的代碼",
"reset": "重置",
- "reset-code": "重置所有代碼",
+ "reset-step": "Reset This Step",
"help": "幫助",
"get-help": "獲得幫助",
"watch-video": "觀看視頻",
@@ -157,7 +158,8 @@
"honesty": "學術誠信條例",
"internet": "你在各平臺的賬號",
"portfolio": "作品集設置",
- "privacy": "隱私設置"
+ "privacy": "隱私設置",
+ "personal-info": "Personal Information"
},
"danger": {
"heading": "危險區域",
@@ -272,6 +274,7 @@
"add-subtitles": "幫助我們完善或添加字幕",
"wrong-answer": "抱歉，這個答案不正確。再試一次？",
"check-answer": "點擊下方按鈕，查看你的答案。",
+ "assignment-not-complete": "Please finish the assignments",
"solution-link": "解決方案鏈接",
"github-link": "GitHub 鏈接",
"submit-and-go": "提交併訪問下一個挑戰",
@@ -339,6 +342,7 @@
"title": "支持我們的慈善組織",
"processing": "我們正在處理你的捐款。",
"redirecting": "重新引導中...",
+ "thanks": "Thanks for donating",
"thank-you": "謝謝你成爲我們的支持者。",
"additional": "你可以使用這個鏈接 <0>{{url}} 額外進行一次性捐款：",
"help-more": "幫助我們做更多",
@@ -462,7 +466,8 @@
"iframe-preview": "{{title}} 預覽",
"iframe-alert": "通常，此鏈接會將你帶到另一個網站！一切正常，這個鏈接指向：{{externalLink}}。",
"iframe-form-submit-alert": "通常這個表單將被提交！工作正常，這將被提交到：{{externalLink}}",
- "document-notfound": "找不到文件"
+ "document-notfound": "找不到文件",
+ "slow-load-msg": "Looks like this is taking longer than usual, please try refreshing the page."
},
"icons": {
"gold-cup": "金獎盃",
@@ -507,7 +512,8 @@
"step": "步驟",
"steps": "步驟",
"steps-for": "{{blockTitle}} 的步驟",
- "code-example": "{{codeName}} 代碼示例"
+ "code-example": "{{codeName}} 代碼示例",
+ "opens-new-window": "Opens in new window"
},
"flash": {
"honest-first": "申請認證之前，你必須先接受我們的《學術誠信條例》",
diff --git a/client/i18n/locales/chinese/intro.json b/client/i18n/locales/chinese/intro.json
index bf8b57ea863..a6d7caaafa7 100644
--- a/client/i18n/locales/chinese/intro.json
+++ b/client/i18n/locales/chinese/intro.json
@@ -553,7 +553,7 @@
"intro": [
"在这之前，你只是在前端使用 JavaScript 来给页面添加交互、解决算法挑战，或构建一个 SPA（单页应用程序）。但 JavaScript 也可以用于后端或者服务器来构建整个 web 应用程序。",
"今天，构建应用软件的广受欢迎的方法之一是微服务，这些微服务是一种小型模块化的应用，能够共同形成一个更大的整体。",
- "在后端开发和 APIs 认证中，你将学习如何使用 Node.js 和 npm（Node 包管理工具）来写后端。你还将使用 Express 框架构建 web 应用程序，并使用 MongoDB 和 Mongoose 库构建一个 People Finder 微服务。"
+ "In the Back End Development and APIs Certification, you'll learn how to write back end apps with Node.js and npm. You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
],
"note": "",
"blocks": {
@@ -778,6 +778,10 @@
"属性：Rosetta 代码"
]
},
+ "the-odin-project": {
+ "title": "The Odin Project",
+ "intro": ["A description is to be determined"]
+ },
"project-euler": {
"title": "欧拉计划",
"intro": [
diff --git a/client/i18n/locales/chinese/motivation.json b/client/i18n/locales/chinese/motivation.json
index d65a69bb268..43aba58e9b9 100644
--- a/client/i18n/locales/chinese/motivation.json
+++ b/client/i18n/locales/chinese/motivation.json
@@ -1,819 +1,856 @@
{
"compliments": [
- "Over the top!",
- "Down the rabbit hole we go!",
- "Bring that rain!",
- "Target acquired.",
- "Feel that need for speed!",
- "You've got guts!",
- "We have liftoff!",
- "To infinity and beyond!",
- "Encore!",
- "Onward!",
- "Challenge destroyed!",
- "It's on like Donkey Kong!",
- "Power level? It's over 9000!",
- "Coding spree!",
- "Code long and prosper.",
- "The crowd goes wild!",
- "One for the Guinness book!",
- "Flawless victory!",
- "Most efficient!",
- "You've got the touch!",
- "You're on fire!",
- "The town is now red!",
- "To the nines!",
- "To the Batmobile!",
- "Pull out all the stops!",
- "You're a wizard, Harry!",
- "You're an all-star!",
- "Way to go!",
- "Outta sight!",
- "You're crushing it!",
- "What sorcery is this?",
- "The world rejoices!",
- "That's the way it's done!",
- "You rock!",
- "Woo-hoo!",
- "We knew you could do it!",
- "Hyper Combo Finish!",
- "Nothing but net!",
- "Boom-shakalaka!",
- "You're a shooting star!",
- "You're unstoppable!",
- "Way cool!",
- "Walk on that sunshine!",
- "Keep on trucking!",
- "Off the charts!",
- "There is no spoon!",
- "Cranked it up to 11!",
- "Escape velocity reached!",
- "You make this look easy!",
- "Passed with flying colors!",
- "You've got this!",
- "Happy, happy, joy, joy!",
- "Tomorrow, the world!",
- "Your powers combined!",
- "It's alive. It's alive!",
- "Sonic Boom!",
- "Here's looking at you, Code!",
- "Ride like the wind!",
- "Legen - wait for it - dary!",
- "Ludicrous Speed! Go!",
- "Most triumphant!",
- "One loop to rule them all!",
- "By the power of Grayskull!",
- "You did it!",
- "Storm that castle!",
- "Face-melting guitar solo!",
- "Checkmate!",
- "Bodacious!",
- "Tubular!",
- "You're outta sight!",
- "Keep calm and code on!",
- "Even sad panda smiles!",
- "Even grumpy cat approves!",
- "Kool Aid Man says oh yeah!",
- "Bullseye!",
- "Far out!",
- "You're heating up!",
- "Standing ovation!",
- "Nice one!",
- "All right!",
- "Hasta la vista, challenge!",
- "Terminated.",
- "Off the hook!",
- "Thundercats, Hooo!",
- "Shiver me timbers!",
- "Raise the roof!",
- "Bingo!",
- "Even Honey Badger cares!",
- "Helm, Warp Nine. Engage!",
- "Gotta code 'em all!",
- "Spool up the FTL drive!",
- "Cool beans!",
- "They're in another castle.",
- "Power UP!",
- "Pikachu chooses you!",
- "I gotta have more cowbell.",
- "Gotta go fast!",
- "Yippee!",
- "Cowabunga!",
- "Moon Prism Power!",
- "Plus Ultra!"
+ "太棒了！",
+ "我们跳进兔子洞！",
+ "雨下吧！",
+ "获取目标。",
+ "体验极速快感！",
+ "你有胆量！",
+ "我们升空了！",
+ "飞向无限！",
+ "再来一次！",
+ "向前进！",
+ "挑战被摧毁！",
+ "重磅如同大金刚！",
+ "战斗力？超过 9000！",
+ "编码狂潮！",
+ "编码不息，繁荣昌盛。",
+ "人群变得疯狂！",
+ "一个吉尼斯世界纪录！",
+ "完胜！",
+ "最高效率！",
+ "你有手感了！",
+ "你正在燃烧！",
+ "满城春色！",
+ "完美！",
+ "上蝙蝠车！",
+ "全力以赴！",
+ "你是个巫师，哈利！",
+ "你是全明星队员！",
+ "干得好！",
+ "棒极了！",
+ "你太出色了！",
+ "这是什么魔法？",
+ "世界欢欣鼓舞！",
+ "难题就是这样搞定的！",
+ "你真棒！",
+ "呜呼！",
+ "我们就知道你能行！",
+ "超级组合终结！",
+ "空心球！",
+ "炸弹-沙卡拉卡！",
+ "你是一颗流星！",
+ "你势不可挡！",
+ "太酷了！",
+ "走在那阳光下！",
+ "坚持下去！",
+ "水平爆表！",
+ "勺子并不存在！",
+ "调到最大音量！",
+ "达到逃逸速度！",
+ "你让这看起来很简单！",
+ "以优异的成绩通过！",
+ "你能行！",
+ "开心，开心，快乐，快乐！",
+ "明天，征服世界！",
+ "你的全部力量！",
+ "它活了。它活了！",
+ "索尼克音爆！",
+ "看着你呢，代码！",
+ "疾驰如风！",
+ "传——奇！",
+ "离谱的速度！出发！",
+ "高奏凯歌！",
+ "用一个循环来统治它们！",
+ "凭借灰壳堡的神力！",
+ "你做到了！",
+ "冲进城堡！",
+ "荡人心魄的吉他独奏！",
+ "完全击败！",
+ "大有胆识！",
+ "厉害！",
+ "你真强啊！",
+ "保持冷静，继续编码！",
+ "即使是悲伤的熊猫也会微笑！",
+ "即使脾气暴躁的猫也同意！",
+ "如此感觉无以伦比。",
+ "正中靶心！",
+ "前卫！",
+ "燃烧吧，小宇宙！",
+ "起立鼓掌！",
+ "不错！",
+ "好啊！",
+ "回见，挑战！",
+ "终结了。",
+ "脱身！",
+ "霹雳猫显神威！",
+ "让我五体投地！",
+ "大显身手！",
+ "答对了！",
+ "连蜜獾都在乎！",
+ "掌舵，第九曲速。启动！",
+ "必须全部编码！",
+ "发动超光速引擎！",
+ "酷豆子！",
+ "她们在另一个城堡里。",
+ "加电！",
+ "皮卡丘选择了你！",
+ "我要再多点牛铃。",
+ "得快点！",
+ "了不起！",
+ "卡瓦邦嘎！",
+ "月亮棱镜能量！",
+ "超越极致！",
+ "米尔豪斯一切都会好起来的！"
],
"motivationalQuotes": [
{
- "quote": "Whatever you are, be a good one.",
- "author": "Abraham Lincoln"
+ "quote": "不管你是谁，做个好人。",
+ "author": "亚伯拉罕·林肯"
},
{
- "quote": "A change in perspective is worth 80 IQ points.",
- "author": "Alan Kay"
+ "quote": "换一个角度看问题值80点智商。",
+ "author": "艾伦·凯"
},
{
- "quote": "The best way to predict the future is to invent it.",
- "author": "Alan Kay"
+ "quote": "预测未来的最好方法是创造未来。",
+ "author": "艾伦·凯"
},
{
- "quote": "The future is not laid out on a track. It is something that we can decide, and to the extent that we do not violate any known laws of the universe, we can probably make it work the way that we want to.",
- "author": "Alan Kay"
+ "quote": "未来不是在轨道上规划的。这是我们可以决定的事情，只要我们不违反任何已知的宇宙法则，我们就可以让它按我们想要的方式运行。",
+ "author": "艾伦·凯"
},
{
- "quote": "We can only see a short distance ahead, but we can see plenty there that needs to be done.",
- "author": "Alan Turing"
+ "quote": "我们只能看到前面很短的距离，但我们可以看到有很多事情需要做。",
+ "author": "艾伦·图灵"
},
{
- "quote": "In the depth of winter, I finally learned that within me there lay an invincible summer.",
- "author": "Albert Camus"
+ "quote": "隆冬时节，我终于明白，我的内心深处有一个不可战胜的夏天。",
+ "author": "阿尔伯特·加缪"
},
{
- "quote": "A person who never made a mistake never tried anything new.",
- "author": "Albert Einstein"
+ "quote": "从不犯错的人从不尝试新事物。",
+ "author": "阿尔伯特·爱因斯坦"
},
{
- "quote": "Creativity is intelligence having fun.",
- "author": "Albert Einstein"
+ "quote": "创造力是智力的乐趣。",
+ "author": "阿尔伯特·爱因斯坦"
},
{
- "quote": "I have no special talents. I am only passionately curious.",
- "author": "Albert Einstein"
+ "quote": "我没有什么特别的才能。我只是非常好奇。",
+ "author": "阿尔伯特·爱因斯坦"
},
{
- "quote": "Life is like riding a bicycle. To keep your balance, you must keep moving.",
- "author": "Albert Einstein"
+ "quote": "生活就像骑自行车。为了保持平衡，你必须继续前进。",
+ "author": "阿尔伯特·爱因斯坦"
},
{
- "quote": "Make everything as simple as possible, but not simpler.",
- "author": "Albert Einstein"
+ "quote": "事情应该力求简单，但不能过于简单。",
+ "author": "阿尔伯特·爱因斯坦"
},
{
- "quote": "Never memorize something that you can look up.",
- "author": "Albert Einstein"
+ "quote": "绝不要去记那些你能够查得到的东西。",
+ "author": "阿尔伯特·爱因斯坦"
},
{
- "quote": "Once we accept our limits, we go beyond them.",
- "author": "Albert Einstein"
+ "quote": "一旦我们接受了自己的极限，我们就超越了它们。",
+ "author": "阿尔伯特·爱因斯坦"
},
{
- "quote": "Play is the highest form of research.",
- "author": "Albert Einstein"
+ "quote": "玩耍是研究的最高形式。",
+ "author": "阿尔伯特·爱因斯坦"
},
{
- "quote": "We cannot solve our problems with the same thinking we used when we created them.",
- "author": "Albert Einstein"
+ "quote": "我们不能用我们创造问题时的思维来解决问题。",
+ "author": "阿尔伯特·爱因斯坦"
},
{
- "quote": "Wisdom is not a product of schooling but of the lifelong attempt to acquire it.",
- "author": "Albert Einstein"
+ "quote": "智慧不是学校教育的产物，而是终身学习的产物。",
+ "author": "阿尔伯特·爱因斯坦"
},
{
- "quote": "Your imagination is your preview of life's coming attractions.",
- "author": "Albert Einstein"
+ "quote": "你的想像是你人生的预览。",
+ "author": "阿尔伯特·爱因斯坦"
},
{
- "quote": "There is only one corner of the universe you can be certain of improving, and that's your own self.",
- "author": "Aldous Huxley"
+ "quote": "宇宙中只有一个角落是你可以切实改进的，那就是你自己。",
+ "author": "奥尔德斯·赫胥黎"
},
{
- "quote": "The most common way people give up their power is by thinking they don't have any.",
- "author": "Alice Walker"
+ "quote": "我感谢我的奋斗，因为没有它，我就不会偶然发现自己的力量。",
+ "author": "亚历克斯·艾尔"
},
{
- "quote": "Follow your inner moonlight. Don't hide the madness.",
- "author": "Allen Ginsberg"
+ "quote": "人们放弃权力最常见的方式是认为自己没有权力。",
+ "author": "艾丽丝·沃克"
},
{
- "quote": "The most difficult thing is the decision to act. The rest is merely tenacity.",
- "author": "Amelia Earhart"
+ "quote": "跟随你内心的月光。别掩饰自己的疯狂。",
+ "author": "艾伦·金斯伯格"
},
{
- "quote": "Life shrinks or expands in proportion with one's courage.",
- "author": "Anaïs Nin"
+ "quote": "最困难的是决定采取行动。剩下的只是坚韧。",
+ "author": "阿梅莉亚·埃尔哈特"
},
{
- "quote": "Weeks of programming can save you hours of planning.",
- "author": "Unknown"
+ "quote": "生命的缩小或扩大与一个人的勇气成正比。",
+ "author": "阿奈斯·宁"
},
{
- "quote": "Quality is not an act, it is a habit.",
- "author": "Aristotle"
+ "quote": "数周的编程可以节省你数小时的计划。",
+ "author": "佚名"
},
{
- "quote": "Start where you are. Use what you have. Do what you can.",
- "author": "Arthur Ashe"
+ "quote": "质量不是一种行为，而是一种习惯。",
+ "author": "亚里士多德"
},
{
- "quote": "Nothing is impossible, the word itself says \"I'm possible\"!",
- "author": "Audrey Hepburn"
+ "quote": "从现在开始。利用你所拥有的。尽你所能。",
+ "author": "亚瑟·阿什"
},
{
- "quote": "Every strike brings me closer to the next home run.",
- "author": "Babe Ruth"
+ "quote": "没有什么是不可能的，连这个词本身都说“不，可能”！",
+ "author": "奥黛丽·赫本"
},
{
- "quote": "By failing to prepare, you are preparing to fail.",
- "author": "Benjamin Franklin"
+ "quote": "每一击都让我离下一个本垒打越来越近。",
+ "author": "贝比·鲁斯"
},
{
- "quote": "Tell me and I forget. Teach me and I remember. Involve me and I learn.",
- "author": "Benjamin Franklin"
+ "quote": "如果你没有做好准备，你就是在准备失败。",
+ "author": "本杰明·富兰克林"
},
{
- "quote": "Well done is better than well said.",
- "author": "Benjamin Franklin"
+ "quote": "告诉我，我会忘记。教我，我会记住。让我参与，我会学习。",
+ "author": "本杰明·富兰克林"
},
{
- "quote": "There are no short cuts to any place worth going.",
- "author": "Beverly Sills"
+ "quote": "说得好不如做得好。",
+ "author": "本杰明·富兰克林"
},
{
- "quote": "Controlling complexity is the essence of computer programming.",
- "author": "Brian Kernighan"
+ "quote": "任何值得去的地方都没有捷径。",
+ "author": "贝弗利·希尔斯"
},
{
- "quote": "I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.",
- "author": "Bruce Lee"
+ "quote": "控制复杂性是计算机编程的本质。",
+ "author": "布莱恩·科尼汉"
},
{
- "quote": "There are far, far better things ahead than any we leave behind.",
- "author": "C.S. Lewis"
+ "quote": "我不怕遇到练习过一万种腿法的对手，但害怕遇到只将一种腿法练习一万次的强敌。",
+ "author": "李小龙"
},
{
- "quote": "We are what we believe we are.",
- "author": "C.S. Lewis"
+ "quote": "比起遗落在过去的，未来还有更加美好的在等待着我们。",
+ "author": "C.S. 路易斯"
},
{
- "quote": "With the possible exception of the equator, everything begins somewhere.",
- "author": "C.S. Lewis"
+ "quote": "我们就是我们所相信的自己。",
+ "author": "C.S. 路易斯"
},
{
- "quote": "You are never too old to set another goal, or to dream a new dream.",
- "author": "C.S. Lewis"
+ "quote": "可能除了赤道以外，一切都从某处开始。",
+ "author": "C.S. 路易斯"
},
{
- "quote": "Somewhere, something incredible is waiting to be known.",
- "author": "Carl Sagan"
+ "quote": "无论年纪多大，你都可以设立新目标或拥有新梦想。",
+ "author": "C.S. 路易斯"
},
{
- "quote": "If you're not making mistakes, then you're not making decisions.",
- "author": "Catherine Cook"
+ "quote": "在某个地方，一些不可思议的事物正在等你去发现。",
+ "author": "卡尔·萨根"
},
{
- "quote": "Find what you love and let it kill you.",
- "author": "Charles Bukowski"
+ "quote": "当你有梦想时，你必须抓住它，永不放弃。",
+ "author": "卡罗尔·伯内特"
},
{
- "quote": "What matters most is how well you walk through the fire.",
- "author": "Charles Bukowski"
+ "quote": "如果你没有犯错误，那么你就没有做决定。",
+ "author": "凯瑟琳·库克"
},
{
- "quote": "It is not the strongest of the species that survive, nor the most intelligent, but the one most responsive to change.",
- "author": "Charles Darwin"
+ "quote": "爱我所爱，至死方休。",
+ "author": "查尔斯·布考斯基"
},
{
- "quote": "Life is 10% what happens to you and 90% how you react to it.",
- "author": "Charles R. Swindoll"
+ "quote": "最重要的是你能否赴汤蹈火。",
+ "author": "查尔斯·布考斯基"
},
{
- "quote": "You will do foolish things, but do them with enthusiasm.",
- "author": "Colette"
+ "quote": "生存下来的不是最强壮的物种，也不是最聪明的物种，而是最能适应变化的物种。",
+ "author": "查尔斯·达尔文"
},
{
- "quote": "It does not matter how slowly you go as long as you do not stop.",
- "author": "Confucius"
+ "quote": "细节不仅是细节，而且决定了设计。",
+ "author": "查尔斯·伊姆斯"
},
{
- "quote": "Real knowledge is to know the extent of one's ignorance.",
- "author": "Confucius"
+ "quote": "创造力不仅仅是与众不同。任何人都可以做到怪诞不经，这很简单。难的是像巴赫那样简单。使简单的，非常简单，这就是创造力。",
+ "author": "查尔斯·明格斯"
},
{
- "quote": "The past cannot be changed. The future is yet in your power.",
- "author": "Confucius"
+ "quote": "生活的 10% 是发生在你身上的事，90% 是你对它的反应。",
+ "author": "查尔斯·R·斯温多尔"
},
{
- "quote": "Looking at code you wrote more than two weeks ago is like looking at code you are seeing for the first time.",
- "author": "Dan Hurvitz"
+ "quote": "你不免会做傻事，但热烈地、衷心地投入做吧。",
+ "author": "科莱特"
},
{
- "quote": "Someday is not a day of the week.",
- "author": "Denise Brennan-Nelson"
+ "quote": "譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。",
+ "author": "孔子"
},
{
- "quote": "UNIX is simple. It just takes a genius to understand its simplicity.",
- "author": "Dennis Ritchie"
+ "quote": "知之为知之，不知为不知，是知也。",
+ "author": "孔子"
},
{
- "quote": "Computers are good at following instructions, but not at reading your mind.",
- "author": "Donald Knuth"
+ "quote": "往昔不可谏，来者犹可追。",
+ "author": "孔子"
},
{
- "quote": "A good programmer is someone who always looks both ways before crossing a one-way street.",
- "author": "Doug Linder"
+ "quote": "看着自己两个多星期前编写的代码就像第一次看到这代码一样。",
+ "author": "丹·赫维茨"
},
{
- "quote": "Tough times never last, but tough people do.",
- "author": "Dr. Robert Schuller"
+ "quote": "“总有一天”不是一周中的一天。",
+ "author": "丹尼斯·布伦南-纳尔逊"
},
{
- "quote": "If things start happening, don't worry, don't stew, just go right along and you'll start happening too.",
- "author": "Dr. Seuss"
+ "quote": "UNIX很简单。不过只有天才才能理解它的简单性。",
+ "author": "丹尼斯·里奇"
},
{
- "quote": "Do not go gentle into that good night. Rage, rage against the dying of the light.",
- "author": "Dylan Thomas"
+ "quote": "在我看来，要想见彩虹，就得忍受风雨！",
+ "author": "多莉·帕顿"
},
{
- "quote": "The question of whether computers can think is like the question of whether submarines can swim.",
- "author": "E.W. Dijkstra"
+ "quote": "计算机善于遵循指令，但不善于理解你的思维。",
+ "author": "唐纳德·克努特"
},
{
- "quote": "Any code of your own that you haven't looked at for six or more months might as well have been written by someone else.",
- "author": "Eagleson's Law"
+ "quote": "优秀的程序员总是在过单行道之前两边都看一下。",
+ "author": "道格·林德"
},
{
- "quote": "Do one thing every day that scares you.",
- "author": "Eleanor Roosevelt"
+ "quote": "创造力是狂野的头脑和训练有素的眼睛。",
+ "author": "多萝西·帕克"
},
{
- "quote": "With the new day comes new strength and new thoughts.",
- "author": "Eleanor Roosevelt"
+ "quote": "艰苦的时光终将过去，坚强的人们必将苦尽甘来。",
+ "author": "罗伯特·舒勒博士"
},
{
- "quote": "You must do the things you think you cannot do.",
- "author": "Eleanor Roosevelt"
+ "quote": "如果事情开始发生，不要发愁，不要担忧，只要一直走下去，你也会开始发生的。",
+ "author": "苏斯博士"
},
{
- "quote": "Light tomorrow with today.",
- "author": "Elizabeth Barrett Browning"
+ "quote": "不要温和地走进那良夜。怒斥，怒斥光明的消逝。",
+ "author": "狄兰·托马斯"
},
{
- "quote": "Forever is composed of nows.",
- "author": "Emily Dickinson"
+ "quote": "计算机能否思考的问题就像潜艇能否游泳的问题一样。",
+ "author": "E·W·迪科斯彻"
},
{
- "quote": "Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter.",
- "author": "Eric Raymond"
+ "quote": "自己写的代码，只要有六个月没有看过，就像是别人写的一样。",
+ "author": "伊格尔森定律"
},
{
- "quote": "If you don't risk anything, you risk even more.",
- "author": "Erica Jong"
+ "quote": "每天做一件让你害怕的事。",
+ "author": "埃莉诺·罗斯福"
},
{
- "quote": "The world breaks everyone, and afterward, many are strong at the broken places.",
- "author": "Ernest Hemingway"
+ "quote": "新的一天带来了新的力量和新的思想。",
+ "author": "埃莉诺·罗斯福"
},
{
- "quote": "There is nothing noble in being superior to your fellow man; true nobility is being superior to your former self.",
- "author": "Ernest Hemingway"
+ "quote": "你必须做你自己认为做不到的事。",
+ "author": "埃莉诺·罗斯福"
},
{
- "quote": "Never confuse a single defeat with a final defeat.",
- "author": "F. Scott Fitzgerald"
+ "quote": "用今天照亮明天。",
+ "author": "伊丽莎白·巴雷特·布朗宁"
},
{
- "quote": "I attribute my success to this - I never gave or took any excuse.",
- "author": "Florence Nightingale"
+ "quote": "如果你的梦想没有吓到你，那是因为你梦想得还不够大。",
+ "author": "爱伦·约翰森·希尔丽夫"
},
{
- "quote": "The best revenge is massive success.",
- "author": "Frank Sinatra"
+ "quote": "永远是由现在组成的。",
+ "author": "艾米莉·狄金森"
},
{
- "quote": "The only limit to our realization of tomorrow, will be our doubts of today.",
- "author": "Franklin D. Roosevelt"
+ "quote": "计算机科学教育不能使任何人成为专家程序员，正如学习画笔和颜料无法让人成为绘画专家一样。",
+ "author": "埃里克·雷蒙德"
},
{
- "quote": "Right or wrong, it's very pleasant to break something from time to time.",
- "author": "Fyodor Dostoevsky"
+ "quote": "如果你不冒任何风险，你的风险就更大。",
+ "author": "艾瑞卡·琼"
},
{
- "quote": "The harder I work, the luckier I get.",
- "author": "Gary Player"
+ "quote": "生活总是让我们遍体鳞伤，但到后来，那些受伤的地方会变得更坚强。",
+ "author": "厄内斯特·海明威"
},
{
- "quote": "Giving up is the only sure way to fail.",
- "author": "Gena Showalter"
+ "quote": "优于别人，并不高贵，真正的高贵应该是优于过去的自己。",
+ "author": "厄内斯特·海明威"
},
{
- "quote": "The only truly secure system is one that is powered off, cast in a block of concrete and sealed in a lead-lined room with armed guards.",
- "author": "Gene Spafford"
+ "quote": "永远不要将一次失败与最终失败混淆。",
+ "author": "F. 斯科特·菲茨杰拉德"
},
{
- "quote": "A life spent making mistakes is not only more honorable, but more useful than a life spent doing nothing.",
- "author": "George Bernard Shaw"
+ "quote": "我将我的成功归功于此——我从不找，也不接受任何借口。",
+ "author": "弗洛伦斯·南丁格尔"
},
{
- "quote": "First learn computer science and all the theory. Next develop a programming style. Then forget all that and just hack.",
- "author": "George Carrette"
+ "quote": "最好的报复是巨大的成功。",
+ "author": "弗兰克·西纳特拉"
},
{
- "quote": "Discovering the unexpected is more important than confirming the known.",
- "author": "George Box"
+ "quote": "我们实现明天的唯一限制是我们对今天的怀疑。",
+ "author": "富兰克林·罗斯福"
},
{
- "quote": "We only see what we know.",
- "author": "Goethe"
+ "quote": "不管是对是错，时不时弄坏点东西是一件非常愉快的事情。",
+ "author": "陀思妥耶夫斯基"
},
{
- "quote": "Without hard work, nothing grows but weeds.",
- "author": "Gordon B. Hinckley"
+ "quote": "我越努力，就越幸运。",
+ "author": "盖瑞·普莱尔"
},
{
- "quote": "The function of good software is to make the complex appear to be simple.",
- "author": "Grady Booch"
+ "quote": "放弃是失败的唯一可靠途径。",
+ "author": "吉娜·肖沃尔特"
},
{
- "quote": "When you know that you're capable of dealing with whatever comes, you have the only security the world has to offer.",
- "author": "Harry Browne"
+ "quote": "唯一真正安全的系统是断了电、浇铸在混凝土块中、并密封在有武装警卫的铅衬房间内的系统。",
+ "author": "金·斯帕福德"
},
{
- "quote": "Pain is inevitable. Suffering is optional.",
- "author": "Haruki Murakami"
+ "quote": "一生犯错误不仅比一生无所事事更光荣，而且更有用。",
+ "author": "萧伯纳"
},
{
- "quote": "Optimism is the faith that leads to achievement. Nothing can be done without hope and confidence.",
- "author": "Helen Keller"
+ "quote": "首先学会计算机科学和所有的理论。 然后发展出一个编程风格。之后便要忘掉所有这些，自由地编码。",
+ "author": "乔治·卡雷特"
},
{
- "quote": "The price of anything is the amount of life you exchange for it.",
- "author": "Henry David Thoreau"
+ "quote": "发现意想不到的比确认已知的更重要。",
+ "author": "乔治·博克斯"
},
{
- "quote": "Whether you think you can or think you can't, you're right.",
- "author": "Henry Ford"
+ "quote": "我们只能看到自己所知的。",
+ "author": "歌德"
},
{
- "quote": "The most exciting phrase to hear in science, the one that heralds discoveries, is not 'Eureka!' but 'Now that's funny…'",
- "author": "Isaac Asimov"
+ "quote": "不努力耕耘，只会长出杂草。",
+ "author": "戈登·B·欣克利"
},
{
- "quote": "We are all failures. At least the best of us are.",
- "author": "J.M. Barrie"
+ "quote": "好的软件的功能就是化繁为简。",
+ "author": "格雷迪·布奇"
},
{
- "quote": "You can't wait for inspiration. You have to go after it with a club.",
- "author": "Jack London"
+ "quote": "当你知道自己有能力应对任何事情时，你就拥有了世界所能提供的唯一安全感。",
+ "author": "哈利·布朗"
},
{
- "quote": "Don't wish it were easier, wish you were better.",
- "author": "Jim Rohn"
+ "quote": "痛苦不可避免，但可以选择是否受苦。",
+ "author": "村上春树"
},
{
- "quote": "By seeking and blundering we learn.",
- "author": "Johann Wolfgang von Goethe"
+ "quote": "乐观是导致成就的信念。没有希望和信心，就什么都做不了。",
+ "author": "海伦·凯勒"
},
{
- "quote": "Knowing is not enough; we must apply. Wishing is not enough; we must do.",
- "author": "Johann Wolfgang von Goethe"
+ "quote": "任何东西的价格都等于你用多少生命去换取它。",
+ "author": "亨利·大卫·梭罗"
},
{
- "quote": "We first make our habits, then our habits make us.",
- "author": "John Dryden"
+ "quote": "不管你认为你能还是不能，你都是对的。",
+ "author": "亨利·福特"
},
{
- "quote": "The power of imagination makes us infinite.",
- "author": "John Muir"
+ "quote": "在科学中听到的最令人兴奋的短语，即预示着发现的短语，不是“找到了！” 而是“这很有趣……”",
+ "author": "艾萨克·阿西莫夫"
},
{
- "quote": "May you live every day of your life.",
- "author": "Jonathan Swift"
+ "quote": "你所做的会有影响。你必须决定你想要做出什么样的改变。",
+ "author": "简·古道尔"
},
{
- "quote": "Perseverance is failing 19 times and succeeding the 20th.",
- "author": "Julie Andrews"
+ "quote": "我们都是失败者。至少我们中最好的人是。",
+ "author": "J.M.巴里"
},
{
- "quote": "The work of today is the history of tomorrow, and we are its makers.",
- "author": "Juliette Gordon Low"
+ "quote": "你不能等待灵感。你必须提着木棒去追求它。",
+ "author": "杰克·伦敦"
},
{
- "quote": "If you reveal your secrets to the wind, you should not blame the wind for revealing them to the trees.",
- "author": "Kahlil Gibran"
+ "quote": "不要希望事情更容易，希望你更有能力。",
+ "author": "吉姆·罗恩"
},
{
- "quote": "Optimism is an occupational hazard of programming; feedback is the treatment.",
- "author": "Kent Beck"
+ "quote": "我们通过寻找和犯错误来学习。",
+ "author": "约翰·沃尔夫冈·冯·歌德"
},
{
- "quote": "Opportunity does not knock, it presents itself when you beat down the door.",
- "author": "Kyle Chandler"
+ "quote": "知道是不够的；我们必须应用。希望是不够的；我们必须行动。",
+ "author": "约翰·沃尔夫冈·冯·歌德"
},
{
- "quote": "To iterate is human, to recurse divine.",
- "author": "Peter Deutsch"
+ "quote": "我们先养成习惯，然后习惯造就我们。",
+ "author": "约翰·德莱登"
},
{
- "quote": "A good traveler has no fixed plans and is not intent on arriving.",
- "author": "Lao Tzu"
+ "quote": "想象力使我们无限。",
+ "author": "约翰·缪尔"
},
{
- "quote": "An ant on the move does more than a dozing ox.",
- "author": "Lao Tzu"
+ "quote": "愿你过好每一天。",
+ "author": "乔纳森·斯威夫特"
},
{
- "quote": "Do the difficult things while they are easy and do the great things while they are small. A journey of a thousand miles must begin with a single step.",
- "author": "Lao Tzu"
+ "quote": "坚持就是前 19 次失败，第 20 次成功。",
+ "author": "朱莉·安德鲁斯"
},
{
- "quote": "That's the thing about people who think they hate computers. What they really hate is lousy programmers.",
- "author": "Larry Niven"
+ "quote": "今天的工作就是明天的历史，我们是它的创造者。",
+ "author": "朱丽叶·戈登·洛"
},
{
- "quote": "It had long since come to my attention that people of accomplishment rarely sat back and let things happen to them. They went out and happened to things.",
- "author": "Leonardo da Vinci"
+ "quote": "如果你向风泄露了你的秘密，你不应该责怪风将它们泄露给树木。",
+ "author": "纪伯伦"
},
{
- "quote": "If you're any good at all, you know you can be better.",
- "author": "Lindsay Buckingham"
+ "quote": "乐观是编程的职业病；反馈就是治疗。",
+ "author": "肯特·贝克"
},
{
- "quote": "If people never did silly things, nothing intelligent would ever get done.",
- "author": "Ludwig Wittgenstein"
+ "quote": "机会不会敲门，它会在你敲门的时候出现。",
+ "author": "凯尔·钱德勒"
},
{
- "quote": "You only live once, but if you do it right, once is enough.",
- "author": "Mae West"
+ "quote": "迭代的是人，递归的是神。",
+ "author": "彼得·多伊奇"
},
{
- "quote": "Live as if you were to die tomorrow. Learn as if you were to live forever.",
- "author": "Mahatma Gandhi"
+ "quote": "善行无辙迹，善言无瑕谪。",
+ "author": "老子"
},
{
- "quote": "Strength does not come from physical capacity. It comes from an indomitable will.",
- "author": "Mahatma Gandhi"
+ "quote": "合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。",
+ "author": "老子"
},
{
- "quote": "One person's 'paranoia' is another person's 'engineering redundancy'.",
- "author": "Marcus J. Ranum"
+ "quote": "那些认为自己讨厌电脑的人就是这样。他们真正讨厌的是糟糕的程序员。",
+ "author": "拉里·尼文"
},
{
- "quote": "Nothing in life is to be feared, it is only to be understood. Now is the time to understand more, so that we may fear less.",
- "author": "Marie Curie"
+ "quote": "我早就发现，成功的人很少坐以待毙，让事情发生在他们身上。他们出去主动去做事。",
+ "author": "达芬奇"
},
{
- "quote": "If you have everything under control, you're not moving fast enough.",
- "author": "Mario Andretti"
+ "quote": "如果你有一点才能，你就会知道你还可以做得更好。",
+ "author": "林赛·白金汉"
},
{
- "quote": "Education: the path from cocky ignorance to miserable uncertainty.",
- "author": "Mark Twain"
+ "quote": "如果人们从不做傻事，就什么都不会做得聪明。",
+ "author": "路德维希·维特根斯坦"
},
{
- "quote": "It ain't what you don't know that gets you into trouble. It's what you know for sure that just ain't so.",
- "author": "Mark Twain"
+ "quote": "人只活一次，但若活得其所一次已足够。",
+ "author": "梅·韦斯特"
},
{
- "quote": "The secret of getting ahead is getting started.",
- "author": "Mark Twain"
+ "quote": "像明天就要死一样生活，像永远活着一样学习。",
+ "author": "圣雄甘地"
},
{
- "quote": "The two most important days in your life are the day you are born and the day you find out why.",
- "author": "Mark Twain"
+ "quote": "力量不是来自身体能力。它来自不屈不挠的意志。",
+ "author": "圣雄甘地"
},
{
- "quote": "Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails.",
- "author": "Mark Twain"
+ "quote": "一个人的“偏执狂”是另一个人的“工程冗余”。",
+ "author": "马库斯·拉纳姆"
},
{
- "quote": "Any fool can write code that a computer can understand. Good programmers write code that humans can understand.",
- "author": "Martin Fowler"
+ "quote": "生活中没有什么可怕的，只有需要理解的。现在是时候多去理解，这样我们就会少一些恐惧。",
+ "author": "玛丽·居里"
},
{
- "quote": "I know, somehow, that only when it is dark enough can you see the stars.",
- "author": "Martin Luther King Jr."
+ "quote": "如果一切都在你的掌控之中，那么你的行动还不够快。",
+ "author": "马里奥·安德雷蒂"
},
{
- "quote": "It is never too late to be what you might have been.",
- "author": "Mary Anne Evans"
+ "quote": "教育：从自大的无知到悲惨的不确定性的道路。",
+ "author": "马克·吐温"
},
{
- "quote": "Nothing will work unless you do.",
- "author": "Maya Angelou"
+ "quote": "让你陷入麻烦的不是你不知道的东西，而是你确信的、其实并不是真的东西。",
+ "author": "马克·吐温"
},
{
- "quote": "We delight in the beauty of the butterfly, but rarely admit the changes it has gone through to achieve that beauty.",
- "author": "Maya Angelou"
+ "quote": "取得成功的秘诀就是开始。",
+ "author": "马克·吐温"
},
{
- "quote": "We may encounter many defeats, but we must not be defeated.",
- "author": "Maya Angelou"
+ "quote": "你生命中最重要的两天是你出生的那一天和你找到意义的那一天。",
+ "author": "马克·吐温"
},
{
- "quote": "Everybody has talent, but ability takes hard work.",
- "author": "Michael Jordan"
+ "quote": "二十年后，你会因自己没做的事情而更加失望，而不是做过的事情。所以，请解开绳索，驶离安全的港湾，扬帆起航吧。",
+ "author": "马克·吐温"
},
{
- "quote": "I've missed more than 9,000 shots during my career. I've lost almost 300 games. 26 times, I've been trusted to take the game winning shot and missed. I've failed over and over and over again in my life. And that is why I succeed.",
- "author": "Michael Jordan"
+ "quote": "任何傻瓜都可以编写计算机可以理解的代码。优秀的程序员编写人类可以理解的代码。",
+ "author": "马丁·福勒"
},
{
- "quote": "Impossible is just a big word thrown around by small men who find it easier to live in the world they've been given than to explore the power they have to change it. Impossible is not a fact. It's an opinion. Impossible is not a declaration. It's a dare. Impossible is potential. Impossible is temporary. Impossible is nothing.",
- "author": "Muhammad Ali"
+ "quote": "我知道，不知何故，只有当天足够黑时，你才能看到星星。",
+ "author": "马丁·路德·金"
},
{
- "quote": "A winner is a dreamer who never gives up.",
- "author": "Nelson Mandela"
+ "quote": "永远不会太晚去成为你可能成为的人。",
+ "author": "玛丽·安妮·埃文斯"
},
{
- "quote": "It always seems impossible until it's done.",
- "author": "Nelson Mandela"
+ "quote": "除非你行动起来，否则什么都不会改变。",
+ "author": "玛雅·安杰洛"
},
{
- "quote": "Failure will never overtake me if my determination to succeed is strong enough.",
- "author": "Og Mandino"
+ "quote": "你无法用尽创造力。使用得越多，就会有越多。",
+ "author": "玛雅·安杰洛"
},
{
- "quote": "I am not young enough to know everything.",
- "author": "Oscar Wilde"
+ "quote": "我们喜欢蝴蝶的美丽，但很少承认它为实现这种美丽所经历的变化。",
+ "author": "玛雅·安杰洛"
},
{
- "quote": "There is only one thing that makes a dream impossible to achieve: the fear of failure.",
- "author": "Paulo Coelho"
+ "quote": "我们可能会遇到很多失败，但我们绝不能被击败。",
+ "author": "玛雅·安杰洛"
},
{
- "quote": "Never go to bed mad. Stay up and fight.",
- "author": "Phyllis Diller"
+ "quote": "每个人都有天赋，但能力需要努力。",
+ "author": "迈克尔·乔丹"
},
{
- "quote": "You can't cross the sea merely by standing and staring at the water.",
- "author": "Rabindranath Tagore"
+ "quote": "在我的职业生涯中，我错过了 9000 多次投篮。我输掉了近 300 场比赛。26 次，我被信任去投决胜一投，但都没有命中。我一次又一次地失败。但正因如此，我才获得了成功。",
+ "author": "迈克尔·乔丹"
},
{
- "quote": "The only person you are destined to become is the person you decide to be.",
- "author": "Ralph Waldo Emerson"
+ "quote": "“不可能”只是小人物们轻易抛出的大词，他们宁愿留在自己被赋予的世界里，也不愿探索自己改变它的力量。“不可能”不是事实，而是意见。“不可能”不是宣言，而是挑战。“不可能”是潜力。“不可能”是暂时的。“不可能”什么也不是。",
+ "author": "穆罕默德·阿里"
},
{
- "quote": "What you do speaks so loudly that I cannot hear what you say.",
- "author": "Ralph Waldo Emerson"
+ "quote": "胜利者是永不放弃的梦想家。",
+ "author": "纳尔逊·曼德拉"
},
{
- "quote": "People who are crazy enough to think they can change the world, are the ones who do.",
- "author": "Rob Siltanen"
+ "quote": "看起来总是不可能，直到它被做到。",
+ "author": "纳尔逊·曼德拉"
},
{
- "quote": "The best way out is always through.",
- "author": "Robert Frost"
+ "quote": "如果我成功的决心足够坚定，失败永远不会压倒我。",
+ "author": "奥格·曼狄诺"
},
{
- "quote": "Today's accomplishments were yesterday's impossibilities.",
- "author": "Robert H. Schuller"
+ "quote": "我还不够年轻，不可能了解所有的事情。",
+ "author": "奥斯卡·王尔德"
},
{
- "quote": "Don't be satisfied with stories, how things have gone with others. Unfold your own myth.",
- "author": "Rumi"
+ "quote": "只有一件事使梦想无法实现：对失败的恐惧。",
+ "author": "保罗·柯艾略"
},
{
- "quote": "Forget safety. Live where you fear to live. Destroy your reputation. Be notorious.",
- "author": "Rumi"
+ "quote": "光是站着看水是无法渡海的。",
+ "author": "罗宾德拉纳特·泰戈尔"
},
{
- "quote": "Sell your cleverness and buy bewilderment.",
- "author": "Rumi"
+ "quote": "你注定要成为的唯一的人，就是你决定成为的人。",
+ "author": "拉尔夫·沃尔多·爱默生"
},
{
- "quote": "The cure for pain is in the pain.",
- "author": "Rumi"
+ "quote": "你的所作所为声音很大，我听不见你在说什么。",
+ "author": "拉尔夫·沃尔多·爱默生"
},
{
- "quote": "Have no fear of perfection - you'll never reach it.",
- "author": "Salvador Dalí"
+ "quote": "那些足够疯狂以为自己可以改变世界的人，才是真正改变世界的人。",
+ "author": "罗伯·西塔宁"
},
{
- "quote": "Don't watch the clock. Do what it does. Keep going.",
- "author": "Sam Levenson"
+ "quote": "最好的出路是有始有终。",
+ "author": "罗伯特·弗罗斯特"
},
{
- "quote": "Ever Tried. Ever failed. No matter. Try again. Fail again. Fail better.",
- "author": "Samuel Beckett"
+ "quote": "今天的成就是昨天的不可能。",
+ "author": "罗伯特·舒乐"
},
{
- "quote": "The more you know, the more you realize you know nothing.",
- "author": "Socrates"
+ "quote": "不要满足于故事，不要满足于别人的经历。揭开你自己的神话。",
+ "author": "鲁米"
},
{
- "quote": "The greatest enemy of knowledge is not ignorance, it is the illusion of knowledge.",
- "author": "Stephen Hawking"
+ "quote": "忘掉安全感，到你所害怕的地方去生活。摧毁你的名声，做一个声名狼藉的人。",
+ "author": "鲁米"
},
{
- "quote": "The universe doesn't allow perfection.",
- "author": "Stephen Hawking"
+ "quote": "卖掉你的聪明，买下困惑。",
+ "author": "鲁米"
},
{
- "quote": "Whether you want to uncover the secrets of the universe, or you want to pursue a career in the 21st century, basic computer programming is an essential skill to learn.",
- "author": "Stephen Hawking"
+ "quote": "治疗疼痛的方法是在疼痛中。",
+ "author": "鲁米"
},
{
- "quote": "The scariest moment is always just before you start.",
- "author": "Stephen King"
+ "quote": "不要害怕完美——你永远达不到完美。",
+ "author": "萨尔瓦多·达利"
},
{
- "quote": "You can, you should, and if you're brave enough to start, you will.",
- "author": "Stephen King"
+ "quote": "不要看时钟。做它做的事情。继续前进。",
+ "author": "山姆·李文生"
},
{
- "quote": "Arise, Awake and Stop not until the goal is reached.",
- "author": "Swami Vivekananda"
+ "quote": "曾经尝试过。曾经失败过。没关系。再尝试一次。再失败一次。做得更好。",
+ "author": "塞缪尔·贝克特"
},
{
- "quote": "It is said that your life flashes before your eyes just before you die. That is true, it's called Life.",
- "author": "Terry Pratchett"
+ "quote": "你知道的越多，你就越发现你什么都不知道。",
+ "author": "苏格拉底"
},
{
- "quote": "Believe you can and you're halfway there.",
- "author": "Theodore Roosevelt"
+ "quote": "知识最大的敌人不是无知，而是知识的幻觉。",
+ "author": "史蒂芬·霍金"
},
{
- "quote": "I have not failed. I've just found 10,000 ways that won't work.",
- "author": "Thomas A. Edison"
+ "quote": "宇宙不允许完美。",
+ "author": "史蒂芬·霍金"
},
{
- "quote": "Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.",
- "author": "Thomas A. Edison"
+ "quote": "无论你是想揭开宇宙的秘密，还是想在 21 世纪谋求职业，基础计算机编程是必学的技能。",
+ "author": "史蒂芬·霍金"
},
{
- "quote": "The harder the conflict, the more glorious the triumph.",
- "author": "Thomas Paine"
+ "quote": "最可怕的时刻总是在你开始之前。",
+ "author": "史蒂芬.金"
},
{
- "quote": "The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.",
- "author": "Tim Berners-Lee"
+ "quote": "你可以，你应该，如果你有足够的勇气开始，你会的。",
+ "author": "史蒂芬.金"
},
{
- "quote": "Failure is the condiment that gives success its flavor.",
- "author": "Truman Capote"
+ "quote": "起床，醒来，直到达到目标才停下来。",
+ "author": "斯瓦米·维韦卡南达"
},
{
- "quote": "Those who says it cannot be done should not interrupt the person doing it.",
- "author": "Unknown"
+ "quote": "据说，就在你死之前，你的生命在你眼前闪过。没错，这就是所谓的生活。",
+ "author": "泰瑞·普莱契"
},
{
- "quote": "Even if you fall on your face, you're still moving forward.",
- "author": "Victor Kiam"
+ "quote": "相信你可以，你就成功了一半。",
+ "author": "西奥多·罗斯福"
},
{
- "quote": "It's not whether you get knocked down, it's whether you get up.",
- "author": "Vince Lombardi"
+ "quote": "我没有失败。我只是找到了一万种行不通的方法。",
+ "author": "爱迪生"
},
{
- "quote": "I dream my painting and I paint my dream.",
- "author": "Vincent van Gogh"
+ "quote": "我们最大的弱点在于放弃。最确定的成功方法永远是再试一次。",
+ "author": "爱迪生"
},
{
- "quote": "Let us cultivate our garden.",
- "author": "Voltaire"
+ "quote": "冲突越激烈，胜利就越光荣。",
+ "author": "托马斯·潘恩"
},
{
- "quote": "Aim for the moon. If you miss, you may hit a star.",
- "author": "W. Clement Stone"
+ "quote": "我所设想的网络，我们还没有看到。未来仍然比过去要大得多。",
+ "author": "蒂姆·伯纳斯-李"
},
{
- "quote": "The way to get started is to quit talking and begin doing.",
- "author": "Walt Disney"
+ "quote": "失败是给成功增添风味的调味品。",
+ "author": "杜鲁门·卡波特"
},
{
- "quote": "You miss 100% of the shots you don't take.",
- "author": "Wayne Gretzky"
+ "quote": "那些说这是不可能的人，不应该打断正在做这件事的人。",
+ "author": "佚名"
},
{
- "quote": "Don't let yesterday take up too much of today.",
- "author": "Will Rogers"
+ "quote": "用不同的眼光看待平常的事物。",
+ "author": "维科·马吉斯泰蒂"
},
{
- "quote": "Even if you're on the right track, you'll get run over if you just sit there.",
- "author": "Will Rogers"
+ "quote": "即使你摔倒在地，你仍然在前进。",
+ "author": "维克托·基亚姆"
},
{
- "quote": "Do not wait to strike till the iron is hot; but make it hot by striking.",
- "author": "William Butler Yeats"
+ "quote": "重要的不是你是否被击倒，而是你是否爬起来。",
+ "author": "文斯·隆巴迪"
},
{
- "quote": "You cannot swim for new horizons until you have courage to lose sight of the shore.",
- "author": "William Faulkner"
+ "quote": "我梦想我的画，我画我的梦。",
+ "author": "文森特·梵高"
},
{
- "quote": "Be not afraid of greatness. Some are born great, some achieve greatness, and others have greatness thrust upon them.",
- "author": "William Shakespeare"
+ "quote": "伟大的事情是由一系列小事情汇聚而成的。",
+ "author": "文森特·梵高"
},
{
- "quote": "We know what we are, but not what we may be.",
- "author": "William Shakespeare"
+ "quote": "让我们耕种我们的花园。",
+ "author": "伏尔泰"
},
{
- "quote": "In theory there is no difference between theory and practice. In practice there is.",
- "author": "Yogi Berra"
+ "quote": "瞄准月亮。如果你错失目标，你可能会击中一颗恒星。",
+ "author": "克莱门特·斯通"
},
{
- "quote": "You can see a lot by just looking.",
- "author": "Yogi Berra"
+ "quote": "开始的方法是停止说话，开始行动。",
+ "author": "沃尔特·迪斯尼"
},
{
- "quote": "There is no elevator to success, you have to take the stairs.",
- "author": "Zig Ziglar"
+ "quote": "你不尝试的话，就有 100% 的机会失败。",
+ "author": "韦恩·格雷茨基"
},
{
- "quote": "You don't have to be great to start, but you have to start to be great.",
- "author": "Zig Ziglar"
+ "quote": "不要让昨天占据太多的今天。",
+ "author": "威尔·罗杰斯"
+ },
+ {
+ "quote": "即使你是在正确的路上，如果你只是坐在那里，你也会被撞倒。",
+ "author": "威尔·罗杰斯"
+ },
+ {
+ "quote": "不要等铁热了再打；要用敲打使它变热。",
+ "author": "威廉·巴特勒·叶芝"
+ },
+ {
+ "quote": "除非你有勇气离开海岸，否则你无法游向新的地平线。",
+ "author": "威廉·福克纳"
+ },
+ {
+ "quote": "不要害怕伟大。 有些人天生伟大，有些人成就伟大，而另一些人则被推向伟大。",
+ "author": "威廉·莎士比亚"
+ },
+ {
+ "quote": "我们知道我们是什么，但不知道我们可能成为什么。",
+ "author": "威廉·莎士比亚"
+ },
+ {
+ "quote": "从理论上讲，理论和实践之间没有区别。在实践中是有的。",
+ "author": "约吉·贝拉"
+ },
+ {
+ "quote": "通过看，你就可以觉察到很多东西。",
+ "author": "约吉·贝拉"
+ },
+ {
+ "quote": "成功没有电梯，你必须走楼梯。",
+ "author": "齐格·齐格勒"
+ },
+ {
+ "quote": "你不一定要很伟大才能开始，但你必须开始才能变得伟大。",
+ "author": "齐格·齐格勒"
}
]
}
diff --git a/client/i18n/locales/chinese/translations.json b/client/i18n/locales/chinese/translations.json
index 967982d023f..91cf2f1c245 100644
--- a/client/i18n/locales/chinese/translations.json
+++ b/client/i18n/locales/chinese/translations.json
@@ -11,6 +11,7 @@
"view": "查看",
"view-code": "查看代码",
"view-project": "查看项目",
+ "view-cert-title": "View {{certTitle}}",
"show-cert": "显示认证",
"claim-cert": "申请认证",
"save-progress": "保存进度",
@@ -52,7 +53,7 @@
"check-code": "检查您的代码 (Ctrl + Enter)",
"check-code-2": "检查你的代码",
"reset": "重置",
- "reset-code": "重置所有代码",
+ "reset-step": "Reset This Step",
"help": "帮助",
"get-help": "获得帮助",
"watch-video": "观看视频",
@@ -157,7 +158,8 @@
"honesty": "学术诚信条例",
"internet": "你在各平台的账号",
"portfolio": "作品集设置",
- "privacy": "隐私设置"
+ "privacy": "隐私设置",
+ "personal-info": "Personal Information"
},
"danger": {
"heading": "危险区域",
@@ -272,6 +274,7 @@
"add-subtitles": "帮助我们完善或添加字幕",
"wrong-answer": "抱歉，这个答案不正确。再试一次？",
"check-answer": "点击下方按钮，查看你的答案。",
+ "assignment-not-complete": "Please finish the assignments",
"solution-link": "解决方案链接",
"github-link": "GitHub 链接",
"submit-and-go": "提交并访问下一个挑战",
@@ -339,6 +342,7 @@
"title": "支持我们的慈善组织",
"processing": "我们正在处理你的捐款。",
"redirecting": "重新引导中...",
+ "thanks": "Thanks for donating",
"thank-you": "谢谢你成为我们的支持者。",
"additional": "你可以使用这个链接 <0>{{url}} 额外进行一次性捐款：",
"help-more": "帮助我们做更多",
@@ -462,7 +466,8 @@
"iframe-preview": "{{title}} 预览",
"iframe-alert": "通常，此链接会将你带到另一个网站！一切正常，这个链接指向：{{externalLink}}。",
"iframe-form-submit-alert": "通常这个表单将被提交！工作正常，这将被提交到：{{externalLink}}",
- "document-notfound": "找不到文件"
+ "document-notfound": "找不到文件",
+ "slow-load-msg": "Looks like this is taking longer than usual, please try refreshing the page."
},
"icons": {
"gold-cup": "金奖杯",
@@ -507,7 +512,8 @@
"step": "步骤",
"steps": "步骤",
"steps-for": "{{blockTitle}} 的步骤",
- "code-example": "{{codeName}} 代码示例"
+ "code-example": "{{codeName}} 代码示例",
+ "opens-new-window": "Opens in new window"
},
"flash": {
"honest-first": "申请认证之前，你必须先接受我们的《学术诚信条例》",
diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index f6f66d32d27..dd6e626afdb 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -553,7 +553,7 @@
"intro": [
"Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
"Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
- "In the Back End Development and APIs Certification, you'll learn how to write back end apps with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
+ "In the Back End Development and APIs Certification, you'll learn how to write back end apps with Node.js and npm. You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
],
"note": "",
"blocks": {
@@ -778,6 +778,10 @@
"Attribute: Rosetta Code"
]
},
+ "the-odin-project": {
+ "title": "The Odin Project",
+ "intro": ["A description is to be determined"]
+ },
"project-euler": {
"title": "Project Euler",
"intro": [
diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index afee76b2d58..165fa0c6146 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -11,6 +11,7 @@
"view": "View",
"view-code": "View Code",
"view-project": "View Project",
+ "view-cert-title": "View {{certTitle}}",
"show-cert": "Show Certification",
"claim-cert": "Claim Certification",
"save-progress": "Save Progress",
@@ -52,7 +53,7 @@
"check-code": "Check Your Code (Ctrl + Enter)",
"check-code-2": "Check Your Code",
"reset": "Reset",
- "reset-code": "Reset All Code",
+ "reset-step": "Reset This Step",
"help": "Help",
"get-help": "Get Help",
"watch-video": "Watch a Video",
@@ -157,7 +158,8 @@
"honesty": "Academic Honesty Policy",
"internet": "Your Internet Presence",
"portfolio": "Portfolio Settings",
- "privacy": "Privacy Settings"
+ "privacy": "Privacy Settings",
+ "personal-info": "Personal Information"
},
"danger": {
"heading": "Danger Zone",
@@ -272,6 +274,7 @@
"add-subtitles": "Help improve or add subtitles",
"wrong-answer": "Sorry, that's not the right answer. Give it another try?",
"check-answer": "Click the button below to check your answer.",
+ "assignment-not-complete": "Please finish the assignments",
"solution-link": "Solution Link",
"github-link": "GitHub Link",
"submit-and-go": "Submit and go to my next challenge",
@@ -463,7 +466,8 @@
"iframe-preview": "{{title}} preview",
"iframe-alert": "Normally this link would bring you to another website! It works. This is a link to: {{externalLink}}",
"iframe-form-submit-alert": "Normally this form would be submitted! It works. This will be submitted to: {{externalLink}}",
- "document-notfound": "document not found"
+ "document-notfound": "document not found",
+ "slow-load-msg": "Looks like this is taking longer than usual, please try refreshing the page."
},
"icons": {
"gold-cup": "Gold Cup",
@@ -508,7 +512,8 @@
"step": "Step",
"steps": "Steps",
"steps-for": "Steps for {{blockTitle}}",
- "code-example": "{{codeName}} code example"
+ "code-example": "{{codeName}} code example",
+ "opens-new-window": "Opens in new window"
},
"flash": {
"honest-first": "To claim a certification, you must first accept our academic honesty policy",
diff --git a/client/i18n/locales/espanol/intro.json b/client/i18n/locales/espanol/intro.json
index 938a114868e..c4aab96d457 100644
--- a/client/i18n/locales/espanol/intro.json
+++ b/client/i18n/locales/espanol/intro.json
@@ -553,7 +553,7 @@
"intro": [
"Hasta este punto, solo has usado JavaScript en la parte de front-end para agregar interactividad a una página, resolver los desafíos de algoritmos o construir un SPA. Pero JavaScript también se puede utilizar en el back-end, o servidor, para construir aplicaciones web completas.",
"Hoy en día, una de las formas populares para construir aplicaciones es a través de microservicios, que son pequeñas aplicaciones modulares que trabajan juntas para formar una aplicación más grande.",
- "En la Certificación Desarrollo de Back End y APIs, aprenderás cómo escribir aplicaciones de back-end con Node.js y npm (Node Package Manager). También construirás aplicaciones web con el framework Express, y un microservicio \"People Finder\" con MongoDB y la biblioteca Mongoose."
+ "In the Back End Development and APIs Certification, you'll learn how to write back end apps with Node.js and npm. You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
],
"note": "",
"blocks": {
@@ -778,6 +778,10 @@
"Atributo: Código Rosetta"
]
},
+ "the-odin-project": {
+ "title": "The Odin Project",
+ "intro": ["A description is to be determined"]
+ },
"project-euler": {
"title": "Project Euler",
"intro": [
diff --git a/client/i18n/locales/espanol/translations.json b/client/i18n/locales/espanol/translations.json
index 7d706029cd4..121d851d193 100644
--- a/client/i18n/locales/espanol/translations.json
+++ b/client/i18n/locales/espanol/translations.json
@@ -11,6 +11,7 @@
"view": "Ver",
"view-code": "Mostrar Código",
"view-project": "Mostrar Proyecto",
+ "view-cert-title": "View {{certTitle}}",
"show-cert": "Mostrar certificación",
"claim-cert": "Solicitar certificación",
"save-progress": "Guardar progreso",
@@ -52,7 +53,7 @@
"check-code": "Comprueba tu código (Ctrl + Enter)",
"check-code-2": "Comprueba tu código",
"reset": "Restablecer",
- "reset-code": "Restablecer todo el código",
+ "reset-step": "Reset This Step",
"help": "Ayuda",
"get-help": "Obtener ayuda",
"watch-video": "Ver un Video",
@@ -157,7 +158,8 @@
"honesty": "Política de Honestidad Académica",
"internet": "Tu presencia en Internet",
"portfolio": "Ajustes de portafolio",
- "privacy": "Ajustes de privacidad"
+ "privacy": "Ajustes de privacidad",
+ "personal-info": "Personal Information"
},
"danger": {
"heading": "Zona de peligro",
@@ -272,6 +274,7 @@
"add-subtitles": "Ayudar a mejorar o agregar subtítulos",
"wrong-answer": "Lo siento, esa no es la respuesta correcta. ¡Vuelve a intentarlo!",
"check-answer": "Haz clic en el botón de abajo para verificar tu respuesta.",
+ "assignment-not-complete": "Please finish the assignments",
"solution-link": "Enlace a la solución",
"github-link": "Enlace de GitHub",
"submit-and-go": "Enviar y pasar a mi siguiente desafío",
@@ -339,6 +342,7 @@
"title": "Support our charity",
"processing": "Estamos procesando tu donación.",
"redirecting": "Redirigiendo...",
+ "thanks": "Thanks for donating",
"thank-you": "Gracias por tu apoyo.",
"additional": "Puede hacer una donación adicional única de cualquier monto utilizando este enlace: <0>{{url}}",
"help-more": "Ayúdanos a hacer más",
@@ -462,7 +466,8 @@
"iframe-preview": "{{title}} Vista previa",
"iframe-alert": "¡Normalmente este link te llevaría a otro sitio web! Funciona. Este es un enlace a: {{externalLink}}",
"iframe-form-submit-alert": "¡Normalmente, se enviaría este formulario! Funciona. Esto se enviará a: {{externalLink}}",
- "document-notfound": "documento no encontrado"
+ "document-notfound": "documento no encontrado",
+ "slow-load-msg": "Looks like this is taking longer than usual, please try refreshing the page."
},
"icons": {
"gold-cup": "Copa de Oro",
@@ -507,7 +512,8 @@
"step": "Paso",
"steps": "Pasos",
"steps-for": "Pasos para {{blockTitle}}",
- "code-example": "ejemplo de código de {{codeName}}"
+ "code-example": "ejemplo de código de {{codeName}}",
+ "opens-new-window": "Opens in new window"
},
"flash": {
"honest-first": "Para reclamar una certificación, primero debes aceptar nuestra política de honestidad académica.",
diff --git a/client/i18n/locales/german/intro.json b/client/i18n/locales/german/intro.json
index c7337e2d451..2c100257f3b 100644
--- a/client/i18n/locales/german/intro.json
+++ b/client/i18n/locales/german/intro.json
@@ -553,7 +553,7 @@
"intro": [
"Bis zu diesem Punkt hast du JavaScript nur im Front-End verwendet, um einer Seite Interaktivität hinzuzufügen, Aufgaben mit Algorithmen zu lösen oder eine SPA zu bauen. Aber JavaScript kann auch im Back-End, also auf dem Server, verwendet werden, um ganze Webanwendungen zu erstellen.",
"Heutzutage ist eine der beliebtesten Arten, Anwendungen zu erstellen, Microservices. Das sind kleine, modulare Anwendungen, die zusammenarbeiten und ein größeres Ganzes bilden.",
- "In der Zertifizierung für Back-End-Entwicklung und APIs lernst du, wie du Back-End-Apps mit Node.js und npm (Node Package Manager) schreibst. Du wirst auch Webanwendungen mit dem Express-Framework erstellen und einen Personensuche-Microservice mit MongoDB und der Mongoose-Bibliothek bauen."
+ "In the Back End Development and APIs Certification, you'll learn how to write back end apps with Node.js and npm. You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
],
"note": "",
"blocks": {
@@ -778,6 +778,10 @@
"Attribut: Rosetta Code"
]
},
+ "the-odin-project": {
+ "title": "The Odin Project",
+ "intro": ["A description is to be determined"]
+ },
"project-euler": {
"title": "Projekt Euler",
"intro": [
diff --git a/client/i18n/locales/german/translations.json b/client/i18n/locales/german/translations.json
index fc9518f3983..cb6f8aa2da9 100644
--- a/client/i18n/locales/german/translations.json
+++ b/client/i18n/locales/german/translations.json
@@ -11,6 +11,7 @@
"view": "Anzeigen",
"view-code": "Code anschauen",
"view-project": "Projekt anschauen",
+ "view-cert-title": "View {{certTitle}}",
"show-cert": "Zertifikat anzeigen",
"claim-cert": "Zertifizierung anfordern",
"save-progress": "Fortschritt speichern",
@@ -52,7 +53,7 @@
"check-code": "Überprüfe deinen Code (Strg + Enter)",
"check-code-2": "Prüfe deinen Code",
"reset": "Zurücksetzen",
- "reset-code": "Den Quellcode zurücksetzen",
+ "reset-step": "Reset This Step",
"help": "Hilfe",
"get-help": "Hilfe bekommen",
"watch-video": "Ein Video ansehen",
@@ -157,7 +158,8 @@
"honesty": "Akademischer Ehrlichkeitskodex",
"internet": "Dein Internetauftritt",
"portfolio": "Portfolio-Einstellungen",
- "privacy": "Privatsphäre-Einstellungen"
+ "privacy": "Privatsphäre-Einstellungen",
+ "personal-info": "Personal Information"
},
"danger": {
"heading": "Gefahrenzone",
@@ -272,6 +274,7 @@
"add-subtitles": "Hilf mit Untertitel hinzuzufügen oder zu verbessern",
"wrong-answer": "Sorry, das ist nicht die richtige Antwort. Möchtest du noch einen Anlauf wagen?",
"check-answer": "Klick unten auf den Button, um deine Antwort zu überprüfen.",
+ "assignment-not-complete": "Please finish the assignments",
"solution-link": "Lösungs-Link",
"github-link": "GitHub Link",
"submit-and-go": "Absenden und zur nächsten Herausforderung gehen",
@@ -339,6 +342,7 @@
"title": "Support our charity",
"processing": "Wir bearbeiten deine Spende.",
"redirecting": "Weiterleiten...",
+ "thanks": "Thanks for donating",
"thank-you": "Vielen Dank für deine Unterstützung.",
"additional": "Du kannst eine zusätzliche einmalige Spende in beliebiger Höhe über diesen Link tätigen: <0>{{url}}",
"help-more": "Hilf uns, mehr zu tun",
@@ -462,7 +466,8 @@
"iframe-preview": "{{title}} Vorschau",
"iframe-alert": "Normalerweise würde dieser Link dich auf eine andere Website führen! Er funktioniert. Dies ist ein Link zu: {{externalLink}}",
"iframe-form-submit-alert": "Normalerweise würde dieses Formular übermittelt werden! Es funktioniert. Dies wird übermittelt an: {{externalLink}}",
- "document-notfound": "Dokument wurde nicht gefunden"
+ "document-notfound": "Dokument wurde nicht gefunden",
+ "slow-load-msg": "Looks like this is taking longer than usual, please try refreshing the page."
},
"icons": {
"gold-cup": "Goldpokal",
@@ -507,7 +512,8 @@
"step": "Schritt",
"steps": "Schritte",
"steps-for": "Schritte für {{blockTitle}}",
- "code-example": "{{codeName}} code example"
+ "code-example": "{{codeName}} code example",
+ "opens-new-window": "Opens in new window"
},
"flash": {
"honest-first": "Um eine Zertifizierung zu erlangen, musst du zunächst unsere Richtlinie zur akademischen Ehrlichkeit akzeptieren",
diff --git a/client/i18n/locales/italian/intro.json b/client/i18n/locales/italian/intro.json
index 8145eb32773..ea8ec10c6ef 100644
--- a/client/i18n/locales/italian/intro.json
+++ b/client/i18n/locales/italian/intro.json
@@ -553,7 +553,7 @@
"intro": [
"Fino a questo punto, hai usato solo JavaScript sul front-end per aggiungere interattività a una pagina, risolvere sfide algoritmiche o costruire una Single Page Application. Ma JavaScript può essere utilizzato anche nel backend (cioè lato server), per costruire intere applicazioni web.",
"Oggi, uno dei modi più popolari per costruire applicazioni è attraverso i microservizi, che sono piccole applicazioni modulari che lavorano insieme per formare qualcosa di più grande.",
- "Nella Certificazione Sviluppo Back End e API, imparerai a scrivere app per il backend con Node.js e npm (Node Package Manager). Costruirai anche applicazioni web con il framework Express, e costruirai un microservizio Trova Persone con MongoDB e la libreria Mongoose."
+ "Nella Certificazione Sviluppo Back End e API, imparerai a scrivere app per il backend con Node.js e npm. Costruirai anche applicazioni web con il framework Express, e costruirai un microservizio Trova Persone con MongoDB e la libreria Mongoose."
],
"note": "",
"blocks": {
@@ -778,6 +778,10 @@
"Fonte: Codice Rosetta"
]
},
+ "the-odin-project": {
+ "title": "The Odin Project",
+ "intro": ["A description is to be determined"]
+ },
"project-euler": {
"title": "Progetto Eulero",
"intro": [
diff --git a/client/i18n/locales/italian/translations.json b/client/i18n/locales/italian/translations.json
index 3a5a9a7bbcb..1ef85aff2f3 100644
--- a/client/i18n/locales/italian/translations.json
+++ b/client/i18n/locales/italian/translations.json
@@ -11,6 +11,7 @@
"view": "Visualizza",
"view-code": "Visualizza il Codice",
"view-project": "Visualizza il Progetto",
+ "view-cert-title": "Visualizza {{certTitle}}",
"show-cert": "Mostra la Certificazione",
"claim-cert": "Richiedi la Certificazione",
"save-progress": "Salva l'avanzamento",
@@ -52,7 +53,7 @@
"check-code": "Verifica il tuo codice (Ctrl + Invio)",
"check-code-2": "Verifica il tuo codice",
"reset": "Resetta",
- "reset-code": "Resetta tutto il codice",
+ "reset-step": "Resetta questo step",
"help": "Guida",
"get-help": "Ottieni Aiuto",
"watch-video": "Guarda un video",
@@ -80,7 +81,7 @@
"big-heading-1": "Impara a programmare — gratis.",
"big-heading-2": "Costruisci progetti.",
"big-heading-3": "Ottieni certificazioni.",
- "h2-heading": "Dal 2014, più di 40.000 laureati di freeCodeCamp.org hanno ottenuto posti di lavoro presso aziende tecnologiche, tra cui:",
+ "h2-heading": "Dal 2014, più di 40.000 studenti di freeCodeCamp.org hanno ottenuto posti di lavoro presso aziende tecnologiche, tra cui:",
"hero-img-description": "Studenti di un gruppo di studio locale di freeCodeCamp in Corea del Sud.",
"as-seen-in": "Hanno parlato di noi:",
"testimonials": {
@@ -157,7 +158,8 @@
"honesty": "Politica di Onestà Accademica",
"internet": "La Tua presenza su Internet",
"portfolio": "Impostazioni Portfolio",
- "privacy": "Impostazioni Privacy"
+ "privacy": "Impostazioni Privacy",
+ "personal-info": "Personal Information"
},
"danger": {
"heading": "Zona di Pericolo",
@@ -272,6 +274,7 @@
"add-subtitles": "Aiuta a migliorare o aggiungi sottotitoli",
"wrong-answer": "Siamo spiacenti, non è la risposta giusta. Vuoi riprovare?",
"check-answer": "Fai clic sul pulsante qui sotto per controllare la tua risposta.",
+ "assignment-not-complete": "Please finish the assignments",
"solution-link": "Link alla soluzione",
"github-link": "Link GitHub",
"submit-and-go": "Invia e vai alla prossima sfida",
@@ -339,6 +342,7 @@
"title": "Supporta il nostro ente",
"processing": "Stiamo elaborando la tua donazione.",
"redirecting": "Reindirizzamento...",
+ "thanks": "Grazie per la donazione",
"thank-you": "Grazie per essere un sostenitore.",
"additional": "Puoi effettuare una donazione una tantum aggiuntiva di qualsiasi importo utilizzando questo link: <0>{{url}}",
"help-more": "Aiutaci a fare di più",
@@ -462,7 +466,8 @@
"iframe-preview": "Anteprima {{title}}",
"iframe-alert": "Solitamente questo link ti porterebbe su un altro sito web! Funziona. Questo è un link per {{externalLink}}",
"iframe-form-submit-alert": "Normalmente questo modulo sarebbe stato inviato! Funziona. Sarà inviato a: {{externalLink}}",
- "document-notfound": "documento non trovato"
+ "document-notfound": "documento non trovato",
+ "slow-load-msg": "Sembra che sia necessario più tempo del solito, per favore prova ad aggiornare la pagina."
},
"icons": {
"gold-cup": "Coppa d'Oro",
@@ -507,7 +512,8 @@
"step": "Step",
"steps": "Step",
"steps-for": "Step per {{blockTitle}}",
- "code-example": "{{codeName}} esempio di codice"
+ "code-example": "{{codeName}} esempio di codice",
+ "opens-new-window": "Apri in una nuova finestra"
},
"flash": {
"honest-first": "Per richiedere una certificazione, è necessario prima accettare la nostra politica di onestà accademica",
diff --git a/client/i18n/locales/japanese/intro.json b/client/i18n/locales/japanese/intro.json
index 3331222240a..1238c190923 100644
--- a/client/i18n/locales/japanese/intro.json
+++ b/client/i18n/locales/japanese/intro.json
@@ -553,7 +553,7 @@
"intro": [
"ここまでは、JavaScript をフロントエンドで使用して、ページに対話性を加えたり、アルゴリズムチャレンジを解決したり、SPA を構築したりしてきました。しかし JavaScript は、バックエンド (サーバー) でも使用でき、ウェブアプリケーション全体を構築することができます。",
"現在、アプリケーションを構築する一般的な方法の一つはマイクロサービスを使用する方法です。これは、小さなモジュール式のアプリケーションを組み合わせて、より大きな全体を形成する方法です。",
- "バックエンド開発と API 認定講座では、Node.js と npm (Node Package Manager) を使用してバックエンドアプリを記述する方法を学習します。また、Express フレームワークでウェブアプリケーションを構築し、そして MongoDB と Mongoose ライブラリで People Finder マイクロサービスを構築します。"
+ "バックエンド開発と API 認定講座では、Node.js と npm を使用してバックエンドアプリを記述する方法を学習します。Express フレームワークでウェブアプリケーションを構築し、MongoDB と Mongoose ライブラリで People Finder マイクロサービスを構築します。"
],
"note": "",
"blocks": {
@@ -778,6 +778,10 @@
"作: Rosetta Code"
]
},
+ "the-odin-project": {
+ "title": "The Odin Project",
+ "intro": ["A description is to be determined"]
+ },
"project-euler": {
"title": "プロジェクト・オイラー",
"intro": [
diff --git a/client/i18n/locales/japanese/translations.json b/client/i18n/locales/japanese/translations.json
index 00b9053b9c4..6564dca5525 100644
--- a/client/i18n/locales/japanese/translations.json
+++ b/client/i18n/locales/japanese/translations.json
@@ -11,6 +11,7 @@
"view": "表示",
"view-code": "コードを表示",
"view-project": "プロジェクトを表示",
+ "view-cert-title": "{{certTitle}}を表示",
"show-cert": "認定証を表示",
"claim-cert": "認定証を取得",
"save-progress": "進行状況を保存",
@@ -52,7 +53,7 @@
"check-code": "コードをチェック (Ctrl + Enter)",
"check-code-2": "コードをチェック",
"reset": "リセット",
- "reset-code": "全てのコードをリセット",
+ "reset-step": "Reset This Step",
"help": "ヘルプ",
"get-help": "助けを求める",
"watch-video": "動画を見る",
@@ -157,7 +158,8 @@
"honesty": "学問的誠実性ポリシー",
"internet": "他サービスのリンク",
"portfolio": "ポートフォリオ設定",
- "privacy": "プライバシー設定"
+ "privacy": "プライバシー設定",
+ "personal-info": "Personal Information"
},
"danger": {
"heading": "危険な操作",
@@ -272,6 +274,7 @@
"add-subtitles": "字幕の改善や追加を支援する",
"wrong-answer": "残念、正しい答えではありません。もう一度挑戦してみましょう。",
"check-answer": "以下のボタンをクリックして解答を確認してください。",
+ "assignment-not-complete": "Please finish the assignments",
"solution-link": "回答のリンク",
"github-link": "GitHub のリンク",
"submit-and-go": "提出して次のチャレンジに進む",
@@ -339,6 +342,7 @@
"title": "当団体への支援",
"processing": "いただいた寄付を処理中です。",
"redirecting": "リダイレクト中...",
+ "thanks": "寄付ありがとうございます",
"thank-you": "サポーターとなってくださり、ありがとうございます。",
"additional": "任意の金額を、追加で 1 回ずつご寄付いただけるリンクはこちら: <0>{{url}}",
"help-more": "私たちのさらなる活動をご支援ください",
@@ -375,8 +379,8 @@
"need-help": "現在または過去の寄付についてお困りでしょうか？",
"forward-receipt": "寄付の領収書のコピーを添えて、お問い合わせ内容を donors@freecodecamp.org までお送りください。",
"efficiency": "freeCodeCamp は非常に効率的な、教育分野の慈善団体です。",
- "why-donate-1": "freeCodeCamp にご寄付いただくことにより、新しい技能を学習して家族を支えようとしている人々を助けることに繋がります。",
- "why-donate-2": "また、あなた自身の技術スキルを高めるための、学習リソースの作成を支援することにもなります。",
+ "why-donate-1": "freeCodeCamp への寄付を通して、新しい技能を習得して家計を支えようと努力している人々を支援できます。",
+ "why-donate-2": "また、あなた自身の技術スキルを高める学習リソースの作成を支援することにもなります。",
"bigger-donation": "より多くの金額による一回の寄付や、小切手の送付、または他の方法をお考えでしょうか？",
"other-ways": "<0>当団体の使命を支援する方法 は他にも多数ございます。",
"failed-pay": "処理が完了しませんでした。再度お試しください。",
@@ -462,7 +466,8 @@
"iframe-preview": "{{title}} のプレビュー",
"iframe-alert": "このリンクは通常の環境では他のウェブサイトを開きます。正しく動作しています。これは {{externalLink}} へのリンクです。",
"iframe-form-submit-alert": "通常はこれでフォームが送信されます。正しく動作しています。フォームは {{externalLink}} へ送信されます。",
- "document-notfound": "ドキュメントが見つかりませんでした"
+ "document-notfound": "ドキュメントが見つかりませんでした",
+ "slow-load-msg": "通常より処理に時間がかかっているようです。ページの再読み込みをお試しください。"
},
"icons": {
"gold-cup": "ゴールドカップ",
@@ -477,7 +482,7 @@
"hint": "ヒント",
"heart": "ハート",
"initial": "初期状態",
- "input-reset": "Clear search terms",
+ "input-reset": "検索キーワードをクリア",
"info": "導入情報",
"spacer": "スペーサー",
"toggle": "トグルチェックマーク",
@@ -507,7 +512,8 @@
"step": "ステップ",
"steps": "ステップ一覧",
"steps-for": "「{{blockTitle}}」のステップ一覧",
- "code-example": "{{codeName}} のコード例"
+ "code-example": "{{codeName}} のコード例",
+ "opens-new-window": "新しいウィンドウで開く"
},
"flash": {
"honest-first": "認定証を請求するには、まず学問的誠実性ポリシーに同意する必要があります。",
@@ -708,7 +714,7 @@
"Legacy Back End": "(レガシー) バックエンド",
"legacy-back-end": "バックエンド認定証",
"Legacy Data Visualization": "(レガシー) データ可視化",
- "legacy-data-visualization": "Data Visualization Certification",
+ "legacy-data-visualization": "データ可視化認定証",
"Legacy Information Security and Quality Assurance": "(レガシー) 情報セキュリティと品質保証認定証",
"information-security-and-quality-assurance": "情報セキュリティと品質保証認定証",
"Legacy Full Stack Certification": "(レガシー) フルスタック認定証",
@@ -769,7 +775,7 @@
},
"signout": {
"heading": "アカウントからサインアウト",
- "p1": "注意: サインアウト後は進行状況が保存されません。",
+ "p1": "注意: サインアウト状態では進行状況が保存されません。",
"p2": "この操作では、このデバイスおよびブラウザーセッションのみを対象にサインアウトされます。サインアウトしてよろしいですか？",
"certain": "はい、サインアウトします",
"nevermind": "いいえ、サインアウトしません"
diff --git a/client/i18n/locales/portuguese/intro.json b/client/i18n/locales/portuguese/intro.json
index e6e28507998..f0e6bc8c734 100644
--- a/client/i18n/locales/portuguese/intro.json
+++ b/client/i18n/locales/portuguese/intro.json
@@ -553,7 +553,7 @@
"intro": [
"Até esse ponto, você usou JavaScript apenas no front-end para adicionar interatividade a uma página, resolver desafios de algoritmos ou construir uma SPA. Mas o JavaScript também pode ser usado no back-end, ou servidor, para construir aplicações web inteiras.",
"Hoje em dia, uma das formas populares de se criar aplicações é através do uso de microsserviços, que são pequenas aplicações modulares que trabalham em conjunto para formar uma aplicação maior inteira.",
- "Na certificação de APIs e desenvolvimento de back-end, você aprenderá a escrever aplicações de back-end com o Node.js e o npm (Node Package Manager). Você também vai construir aplicações web com o framework Express e criará um microsserviço de localização de pessoas com o MongoDB e com a biblioteca Mongoose."
+ "Na certificação de APIs e desenvolvimento de back-end, você aprenderá a escrever aplicações de back-end com o Node.js e o npm. Você também vai construir aplicações web com o framework Express e criará um microsserviço de localização de pessoas com o MongoDB e com a biblioteca Mongoose."
],
"note": "",
"blocks": {
@@ -778,6 +778,10 @@
"Attribute: Rosetta Code"
]
},
+ "the-odin-project": {
+ "title": "The Odin Project",
+ "intro": ["A description is to be determined"]
+ },
"project-euler": {
"title": "Projeto Euler",
"intro": [
diff --git a/client/i18n/locales/portuguese/translations.json b/client/i18n/locales/portuguese/translations.json
index debb22e2fb3..6ab7599a83c 100644
--- a/client/i18n/locales/portuguese/translations.json
+++ b/client/i18n/locales/portuguese/translations.json
@@ -11,6 +11,7 @@
"view": "Visualizar",
"view-code": "Ver código",
"view-project": "Ver o projeto",
+ "view-cert-title": "Ver {{certTitle}}",
"show-cert": "Exibir certificado",
"claim-cert": "Solicitar certificação",
"save-progress": "Salvar progresso",
@@ -52,7 +53,7 @@
"check-code": "Verifique seu código (Ctrl + Enter)",
"check-code-2": "Verifique seu código",
"reset": "Redefinir",
- "reset-code": "Redefinir todo o código",
+ "reset-step": "Reiniciar este passo",
"help": "Ajuda",
"get-help": "Obter ajuda",
"watch-video": "Assistir a um vídeo",
@@ -157,7 +158,8 @@
"honesty": "Política de honestidade acadêmica",
"internet": "Sua presença na internet",
"portfolio": "Configurações do portfólio",
- "privacy": "Configurações de privacidade"
+ "privacy": "Configurações de privacidade",
+ "personal-info": "Personal Information"
},
"danger": {
"heading": "Zona de perigo",
@@ -272,6 +274,7 @@
"add-subtitles": "Ajudar a melhorar ou adicionar legendas",
"wrong-answer": "Desculpe, essa não é a resposta correta. Quer tentar novamente?",
"check-answer": "Clique no botão abaixo para verificar sua resposta.",
+ "assignment-not-complete": "Please finish the assignments",
"solution-link": "Link da solução",
"github-link": "Link do GitHub",
"submit-and-go": "Enviar e ir para o meu próximo desafio",
@@ -339,6 +342,7 @@
"title": "Ajude nossa instituição",
"processing": "Estamos processando a sua doação.",
"redirecting": "Redirecionando...",
+ "thanks": "Agradecemos por sua doação",
"thank-you": "Obrigado pelo seu apoio.",
"additional": "Você pode fazer uma doação adicional de qualquer valor usando este link: <0>{{url}}",
"help-more": "Ajude-nos a fazer mais",
@@ -462,7 +466,8 @@
"iframe-preview": "Visualização de {{title}}",
"iframe-alert": "Normalmente, este link levaria você para outro site da web! Funciona. Esse é um link para: {{externalLink}}",
"iframe-form-submit-alert": "Normalmente, esse formulário seria enviado! Funciona. Ele será enviado para: {{externalLink}}",
- "document-notfound": "documento não encontrado"
+ "document-notfound": "documento não encontrado",
+ "slow-load-msg": "Parece que está demorando mais do que o normal. Tente atualizar a página."
},
"icons": {
"gold-cup": "Taça de ouro",
@@ -507,7 +512,8 @@
"step": "Passo",
"steps": "Passos",
"steps-for": "Passos para {{blockTitle}}",
- "code-example": "Exemplo de código de {{codeName}}"
+ "code-example": "Exemplo de código de {{codeName}}",
+ "opens-new-window": "Abre em uma nova janela"
},
"flash": {
"honest-first": "Para solicitar uma certificação, você precisa primeiro aceitar nossa política de honestidade acadêmica",
diff --git a/client/i18n/locales/ukrainian/intro.json b/client/i18n/locales/ukrainian/intro.json
index b725c1a96c7..8dfc2308bb9 100644
--- a/client/i18n/locales/ukrainian/intro.json
+++ b/client/i18n/locales/ukrainian/intro.json
@@ -553,7 +553,7 @@
"intro": [
"До цього моменту ви використовували JavaScript тільки для фронтенду, аби зробити вебсторінку інтерактивнішою, розв'язати завдання з алгоритмами, або створити SPA. Але JavaScript можна використовувати й в бекенд, або на сервері, для створення цілих вебзастосунків.",
"Сьогодні один із найпопулярніших способів створення застосунків – за допомогою мікросервісів, маленьких модульних застосунків, які разом формують єдине ціле.",
- "У сертифікації «Розробка Back End та API» ви навчитеся писати бекенд програми за допомогою Node.js та npm (Node Package Manager). Також, ви створите вебзастосунок за допомогою фреймворку Express та мікросервіс для пошуку людей за допомогою MongoDB і Mongoose library."
+ "У сертифікації «Розробка Back End та API» ви навчитеся писати бекенд програми за допомогою Node.js та npm. Ви також створите вебзастосунок за допомогою фреймворку Express та мікросервіс для пошуку людей за допомогою MongoDB і бібліотеки Mongoose."
],
"note": "",
"blocks": {
@@ -778,6 +778,10 @@
"Атрибут: Rosetta Code"
]
},
+ "the-odin-project": {
+ "title": "The Odin Project",
+ "intro": ["A description is to be determined"]
+ },
"project-euler": {
"title": "Проєкт «Ейлер»",
"intro": [
diff --git a/client/i18n/locales/ukrainian/translations.json b/client/i18n/locales/ukrainian/translations.json
index 2b906fac215..a6a44d0b8f4 100644
--- a/client/i18n/locales/ukrainian/translations.json
+++ b/client/i18n/locales/ukrainian/translations.json
@@ -11,6 +11,7 @@
"view": "Перегляд",
"view-code": "Переглянути код",
"view-project": "Переглянути проєкт",
+ "view-cert-title": "Переглянути {{certTitle}}",
"show-cert": "Показати сертифікацію",
"claim-cert": "Отримати сертифікацію",
"save-progress": "Зберегти прогрес",
@@ -52,7 +53,7 @@
"check-code": "Перевірити код (Ctrl + Enter)",
"check-code-2": "Перевірити код",
"reset": "Скинути",
- "reset-code": "Скинути весь код",
+ "reset-step": "Скинути цей крок",
"help": "Допомога",
"get-help": "Отримати допомогу",
"watch-video": "Подивитися відео",
@@ -157,7 +158,8 @@
"honesty": "Політика академічної доброчесності",
"internet": "Ваші соціальні мережі",
"portfolio": "Налаштування портфоліо",
- "privacy": "Налаштування конфіденційності"
+ "privacy": "Налаштування конфіденційності",
+ "personal-info": "Personal Information"
},
"danger": {
"heading": "Небезпечна зона",
@@ -272,6 +274,7 @@
"add-subtitles": "Допомогти покращити або додати субтитри",
"wrong-answer": "Нам шкода, але це неправильна відповідь. Спробуєте ще раз?",
"check-answer": "Натисніть кнопку нижче, щоб перевірити свою відповідь.",
+ "assignment-not-complete": "Please finish the assignments",
"solution-link": "Посилання на рішення",
"github-link": "Посилання на GitHub",
"submit-and-go": "Відправити та перейти до мого наступного завдання",
@@ -339,6 +342,7 @@
"title": "Підтримайте нашу організацію",
"processing": "Ми опрацьовуємо ваш внесок.",
"redirecting": "Переадресація...",
+ "thanks": "Дякуємо за внесок",
"thank-you": "Дякуємо за вашу підтримку.",
"additional": "Ви можете зробити додатковий одноразовий внесок на будь-яку суму за цим посиланням: <0>{{url}}",
"help-more": "Допоможіть нам розвиватися",
@@ -462,7 +466,8 @@
"iframe-preview": "Передперегляд {{title}}",
"iframe-alert": "Зазвичай це посилання перенесло б вас на інший вебсайт! Воно працює. Це посилання на: {{externalLink}}",
"iframe-form-submit-alert": "Зазвичай ця форма буде відправлена! Вона буде відправлена на: {{externalLink}}",
- "document-notfound": "документ не знайдено"
+ "document-notfound": "документ не знайдено",
+ "slow-load-msg": "Схоже, це займає більше часу, ніж зазвичай. Будь ласка, спробуйте оновити сторінку."
},
"icons": {
"gold-cup": "Золотий кубок",
@@ -507,7 +512,8 @@
"step": "Крок",
"steps": "Кроки",
"steps-for": "Кроки для {{blockTitle}}",
- "code-example": "Приклад коду {{codeName}}"
+ "code-example": "Приклад коду {{codeName}}",
+ "opens-new-window": "Відкривається у новому вікні"
},
"flash": {
"honest-first": "Щоб отримати сертифікацію, ви повинні спочатку прийняти нашу політику академічної доброчесності",
diff --git a/client/package.json b/client/package.json
index 70667dc73e3..59974c2b79b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -38,7 +38,7 @@
"@babel/polyfill": "7.12.1",
"@babel/preset-env": "7.20.2",
"@babel/preset-react": "7.18.6",
- "@babel/standalone": "7.20.11",
+ "@babel/standalone": "7.20.12",
"@fortawesome/fontawesome-svg-core": "6.2.1",
"@fortawesome/free-brands-svg-icons": "6.2.1",
"@fortawesome/free-solid-svg-icons": "6.2.1",
@@ -52,7 +52,7 @@
"@loadable/component": "5.15.2",
"@reach/router": "1.3.4",
"@sentry/gatsby": "6.19.7",
- "@stripe/react-stripe-js": "1.16.1",
+ "@stripe/react-stripe-js": "1.16.3",
"@stripe/stripe-js": "1.46.0",
"@types/react-scrollable-anchor": "0.6.1",
"algoliasearch": "4.14.3",
@@ -67,9 +67,10 @@
"date-fns": "2.27.0",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.7",
- "final-form": "4.20.7",
+ "final-form": "4.20.8",
"gatsby": "3.15.0",
"gatsby-cli": "3.15.0",
+ "gatsby-link": "3.15.0",
"gatsby-plugin-advanced-sitemap": "2.1.0",
"gatsby-plugin-create-client-paths": "3.15.0",
"gatsby-plugin-manifest": "3.15.0",
@@ -87,7 +88,7 @@
"nanoid": "3.3.4",
"normalize-url": "4.5.1",
"path-browserify": "1.0.1",
- "postcss": "8.4.20",
+ "postcss": "8.4.21",
"prismjs": "1.29.0",
"process": "0.11.10",
"prop-types": "15.8.1",
@@ -96,11 +97,12 @@
"react": "16.14.0",
"react-dom": "16.14.0",
"react-final-form": "6.5.9",
- "react-ga": "3.3.1",
+ "react-gtm-module": "2.0.11",
"react-helmet": "6.1.0",
"react-hotkeys": "2.0.0",
"react-i18next": "11.18.6",
- "react-instantsearch-dom": "6.38.1",
+ "react-instantsearch-core": "6.38.3",
+ "react-instantsearch-dom": "6.38.3",
"react-lazy-load": "3.1.14",
"react-monaco-editor": "0.40.0",
"react-redux": "5.1.2",
@@ -131,10 +133,11 @@
},
"devDependencies": {
"@babel/types": "7.20.7",
- "@codesee/babel-plugin-instrument": "0.470.0",
- "@codesee/tracker": "0.470.0",
+ "@codesee/babel-plugin-instrument": "0.479.0",
+ "@codesee/tracker": "0.479.0",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "12.1.5",
+ "@types/react-gtm-module": "2.0.1",
"autoprefixer": "10.4.13",
"babel-plugin-transform-imports": "2.0.0",
"chokidar": "3.5.3",
diff --git a/client/src/analytics/index.ts b/client/src/analytics/index.ts
new file mode 100644
index 00000000000..32a21405122
--- /dev/null
+++ b/client/src/analytics/index.ts
@@ -0,0 +1,25 @@
+import TagManager from 'react-gtm-module';
+
+import {
+ devAnalyticsId,
+ prodAnalyticsId,
+ prodAnalyticsESId
+} from '../../../config/analytics-settings';
+
+import envData from '../../../config/env.json';
+
+const { deploymentEnv, clientLocale } = envData;
+
+const analyticsIDSelector = () => {
+ if (deploymentEnv === 'staging') return devAnalyticsId;
+ else if (clientLocale === 'espanol') return prodAnalyticsESId;
+ else return prodAnalyticsId;
+};
+
+const gtmId = analyticsIDSelector();
+
+if (typeof document !== `undefined`) {
+ TagManager.initialize({ gtmId });
+}
+
+export default TagManager;
diff --git a/client/src/analytics/index.tsx b/client/src/analytics/index.tsx
deleted file mode 100644
index 79791770228..00000000000
--- a/client/src/analytics/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import ReactGA from 'react-ga';
-import {
- devAnalyticsId,
- prodAnalyticsId
-} from '../../../config/analytics-settings';
-import envData from '../../../config/env.json';
-
-const { deploymentEnv } = envData;
-
-const analyticsId =
- deploymentEnv === 'staging' ? devAnalyticsId : prodAnalyticsId;
-
-ReactGA.initialize(analyticsId);
-
-export default ReactGA;
diff --git a/client/src/client-only-routes/show-certification.tsx b/client/src/client-only-routes/show-certification.tsx
index eeaeebbea55..6ac89c242ed 100644
--- a/client/src/client-only-routes/show-certification.tsx
+++ b/client/src/client-only-routes/show-certification.tsx
@@ -155,12 +155,8 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
) {
setIsDonationDisplayed(true);
executeGA({
- type: 'event',
- data: {
- category: 'Donation View',
- action: 'Displayed Certificate Donation',
- nonInteraction: true
- }
+ event: 'donationview',
+ action: 'Displayed Certificate Donation'
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/client/src/client-only-routes/show-project-links.tsx b/client/src/client-only-routes/show-project-links.tsx
index 30df99a8843..94d8a603759 100644
--- a/client/src/client-only-routes/show-project-links.tsx
+++ b/client/src/client-only-routes/show-project-links.tsx
@@ -83,6 +83,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
-
diff --git a/client/src/components/Header/components/nav-links.tsx b/client/src/components/Header/components/nav-links.tsx
index dc9bd246338..3de9d1c1063 100644
--- a/client/src/components/Header/components/nav-links.tsx
+++ b/client/src/components/Header/components/nav-links.tsx
@@ -65,7 +65,7 @@ const mapDispatchToProps = {
openSignoutModal
};
-export class NavLinks extends Component {
+class NavLinks extends Component {
static displayName: string;
langButtonRef: React.RefObject;
firstLangOptionRef: React.RefObject;
diff --git a/client/src/components/Header/components/universal-nav.css b/client/src/components/Header/components/universal-nav.css
index 709432a5eca..83d8dec691c 100644
--- a/client/src/components/Header/components/universal-nav.css
+++ b/client/src/components/Header/components/universal-nav.css
@@ -449,9 +449,7 @@ button.nav-link[aria-disabled='true'] {
}
.universal-nav-right .fcc_searchBar .ais-SearchBox-form {
- width: 100vw;
max-width: unset;
- padding: 0 15px;
}
/* In mobile layout, prevent search input from hanging around if the
@@ -472,12 +470,9 @@ button.nav-link[aria-disabled='true'] {
display: none;
}
-.universal-nav-right .ais-SearchBox-input {
+.universal-nav-right .ais-SearchBox-form {
width: calc(100vw - 17rem);
-}
-
-.universal-nav-right .ais-SearchBox-reset {
- right: 291px;
+ margin-inline-start: 15px;
}
.universal-nav-right .fcc_searchBar .ais-Hits {
@@ -485,6 +480,9 @@ button.nav-link[aria-disabled='true'] {
}
.ais-SearchBox-input:focus {
+ box-sizing: content-box;
+ margin-inline-start: -30px;
+ padding-inline: 35px;
outline: 3px solid var(--blue-mid);
}
@@ -523,8 +521,6 @@ button.nav-link[aria-disabled='true'] {
}
.fcc_searchBar .ais-SearchBox-form {
- display: flex;
- justify-content: flex-end;
max-width: calc(100vw - 350px);
}
@@ -553,21 +549,13 @@ button.nav-link[aria-disabled='true'] {
}
.universal-nav-right .fcc_searchBar .ais-SearchBox-form {
- width: 100%;
+ width: calc(100% - 30px);
}
.display-menu {
max-height: calc(100vh - var(--header-height) * 2);
}
- .universal-nav-right .ais-SearchBox-input {
- width: calc(100vw - 30px);
- }
-
- .universal-nav-right .ais-SearchBox-reset {
- right: 15px;
- }
-
.universal-nav-right .fcc_searchBar .ais-Hits {
width: calc(100% - 30px);
}
diff --git a/client/src/components/app-mount-notifier.test.tsx b/client/src/components/app-mount-notifier.test.tsx
index 78c83e1ba8b..94121daba6c 100644
--- a/client/src/components/app-mount-notifier.test.tsx
+++ b/client/src/components/app-mount-notifier.test.tsx
@@ -8,7 +8,6 @@ import i18nTestConfig from '../../i18n/config-for-tests';
import { createStore } from '../redux/createStore';
import AppMountNotifier from './app-mount-notifier';
-jest.mock('react-ga');
jest.unmock('react-i18next');
type Language = keyof typeof i18nextCodes;
diff --git a/client/src/components/helpers/__snapshots__/loader.test.tsx.snap b/client/src/components/helpers/__snapshots__/loader.test.tsx.snap
index 6dab24a5651..d754d42ea67 100644
--- a/client/src/components/helpers/__snapshots__/loader.test.tsx.snap
+++ b/client/src/components/helpers/__snapshots__/loader.test.tsx.snap
@@ -14,6 +14,12 @@ exports[`
+ +
+ misc.slow-load-msg +
`; diff --git a/client/src/components/helpers/loader.css b/client/src/components/helpers/loader.css index 5acf705bd85..2182772d777 100644 --- a/client/src/components/helpers/loader.css +++ b/client/src/components/helpers/loader.css @@ -2,8 +2,10 @@ height: 100%; width: 100%; display: flex; + flex-direction: column; justify-content: center; align-items: center; + gap: 1em; } .fcc-loader .sk-spinner, diff --git a/client/src/components/helpers/loader.tsx b/client/src/components/helpers/loader.tsx index 9e5aa9b2aa4..dd265c19e56 100644 --- a/client/src/components/helpers/loader.tsx +++ b/client/src/components/helpers/loader.tsx @@ -1,27 +1,49 @@ import React, { useState, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; import Spinner from 'react-spinkit'; import './loader.css'; interface LoaderProps { fullScreen?: boolean; - timeout?: number; + loaderDelay?: number; + messageDelay?: number; } -function Loader({ fullScreen, timeout }: LoaderProps): JSX.Element { - const [showSpinner, setShowSpinner] = useState(!timeout); +function Loader({ + fullScreen, + loaderDelay, + messageDelay +}: LoaderProps): JSX.Element { + const { t } = useTranslation(); + + const [showSpinner, setShowSpinner] = useState(!loaderDelay); + const [showMessage, setShowMessage] = useState(!messageDelay); useEffect(() => { - let timerId: ReturnType
{showSpinner &&
+
);
}
diff --git a/client/src/components/layouts/certification.tsx b/client/src/components/layouts/certification.tsx
index 74e13244146..2469b0c2d77 100644
--- a/client/src/components/layouts/certification.tsx
+++ b/client/src/components/layouts/certification.tsx
@@ -3,12 +3,11 @@ import Helmet from 'react-helmet';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
-import { fetchUser, executeGA } from '../../redux/actions';
+import { fetchUser } from '../../redux/actions';
import { isSignedInSelector } from '../../redux/selectors';
interface CertificationProps {
children?: React.ReactNode;
- executeGA?: (args: { type: string; data: string }) => void;
fetchUser: () => void;
isSignedIn?: boolean;
pathname: string;
@@ -18,18 +17,15 @@ const mapStateToProps = createSelector(isSignedInSelector, isSignedIn => ({
isSignedIn
}));
-const mapDispatchToProps = { fetchUser, executeGA };
+const mapDispatchToProps = { fetchUser };
class CertificationLayout extends Component+
{t('misc.slow-load-msg')}
+ + )}+
- handleChallengeClick(firstIncompleteChallenge.fields.slug)
- }
to={firstIncompleteChallenge.fields.slug}
>
{!isChallengeStarted
@@ -88,7 +74,6 @@ function Challenges({
>
{!isProjectBlock ? (
handleChallengeClick(challenge.fields.slug)}
to={challenge.fields.slug}
className={`map-grid-item ${
+challenge.isCompleted ? 'challenge-completed' : ''
@@ -103,10 +88,7 @@ function Challenges({
) : (
- handleChallengeClick(challenge.fields.slug)}
- to={challenge.fields.slug}
- >
+
{challenge.title}
{renderCheckMark(challenge.isCompleted)}
@@ -129,20 +111,14 @@ function Challenges({
key={'map-challenge' + challenge.fields.slug}
>
{!isProjectBlock ? (
- handleChallengeClick(challenge.fields.slug)}
- to={challenge.fields.slug}
- >
+
{renderCheckMark(challenge.isCompleted)}
{challenge.title}
) : (
- handleChallengeClick(challenge.fields.slug)}
- to={challenge.fields.slug}
- >
+
{challenge.title}
{renderCheckMark(challenge.isCompleted)}
diff --git a/client/src/utils/A-B-tester.test.ts b/client/src/utils/A-B-tester.test.ts
deleted file mode 100644
index df932ff6abd..00000000000
--- a/client/src/utils/A-B-tester.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import faker from 'faker';
-import { emailToABVariant } from './A-B-tester';
-
-describe('client/src is-email-variation-a', () => {
- it('Consistently returns the same result for the same input', () => {
- const preSavedResult = {
- hash: '23e3cacb302b0c759531faa8b414b23709c26029',
- isVariantA: true,
- hashInt: 2
- };
- const result = emailToABVariant('foo@freecodecamp.org');
- expect(result).toEqual(preSavedResult);
- });
- it('Distributes A and B variations equaly for 100K random emails', () => {
- let A = 0;
- let B = 0;
- const sampleSize = 100000;
- faker.seed(123);
-
- for (let i = 0; i < sampleSize; i++) {
- if (emailToABVariant(faker.internet.email()).isVariantA) A++;
- else B++;
- }
-
- const isBucketWellDistributed = (variant: number): boolean =>
- variant > 0.99 * (sampleSize / 2);
-
- expect(isBucketWellDistributed(A) && isBucketWellDistributed(B)).toEqual(
- true
- );
- });
-});
diff --git a/client/src/utils/A-B-tester.ts b/client/src/utils/A-B-tester.ts
deleted file mode 100644
index d78141ebad8..00000000000
--- a/client/src/utils/A-B-tester.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import sha1 from 'sha-1';
-
-// This function turns an email to a hash and decides if it should be
-// an A or B variant for A/B testing
-
-export function emailToABVariant(email: string): {
- hash: string;
- isVariantA: boolean;
- hashInt: number;
-} {
- // turn the email into a number
- const hash: string = sha1(email);
- const hashInt = parseInt(hash.slice(0, 1), 16);
- // turn the number to A or B variant
- const isVariantA = hashInt % 2 === 0;
- return {
- hash,
- isVariantA,
- hashInt
- };
-}
diff --git a/client/src/utils/path-parsers.ts b/client/src/utils/path-parsers.ts
index 587606f409c..11f23e452db 100644
--- a/client/src/utils/path-parsers.ts
+++ b/client/src/utils/path-parsers.ts
@@ -31,6 +31,3 @@ export const isLocationSuperBlock = (
): boolean => {
return /^\/learn\/[\w-]+\/$/.test(location?.pathname ?? '');
};
-
-const pathParsers = { isLanding, isChallenge };
-export default pathParsers;
diff --git a/client/src/utils/tone/index.ts b/client/src/utils/tone/index.ts
index e146073809e..103ea6c46d2 100644
--- a/client/src/utils/tone/index.ts
+++ b/client/src/utils/tone/index.ts
@@ -62,20 +62,16 @@ type ToneStates = keyof typeof toneUrls;
export async function playTone(state: ToneStates): Promise {
const playSound = !!store.get('fcc-sound');
if (playSound && toneUrls[state]) {
- const tone = await import('tone');
+ const Tone = await import('tone');
- if (tone.context.state !== 'running') {
- tone.context.resume().catch(err => {
- console.error('Error resuming audio context', err);
- });
- }
- const player = new tone.Player(toneUrls[state]).toDestination();
+ const player = new Tone.Player(toneUrls[state]).toDestination();
const storedVolume = (store.get('soundVolume') as number) ?? 50;
const calculateDecibel = -60 * (1 - storedVolume / 100);
player.volume.value = calculateDecibel;
- player.autostart = true;
+ await Tone.loaded();
+ player.start();
}
}
diff --git a/client/utils/challenge-types.js b/client/utils/challenge-types.js
index 5cbc1d59f66..d0c665e1ade 100644
--- a/client/utils/challenge-types.js
+++ b/client/utils/challenge-types.js
@@ -14,6 +14,7 @@ const video = 11;
const codeAllyPractice = 12;
const codeAllyCert = 13;
const multifileCertProject = 14;
+const theOdinProject = 15;
// individual exports
exports.backend = backend;
@@ -38,7 +39,8 @@ exports.challengeTypes = {
video,
codeAllyPractice,
codeAllyCert,
- multifileCertProject
+ multifileCertProject,
+ theOdinProject
};
exports.isFinalProject = challengeType => {
@@ -60,12 +62,6 @@ exports.isCodeAllyPractice = challengeType => {
return challengeType === codeAllyPractice;
};
-// turn challengeType to file ext
-exports.pathsMap = {
- [html]: 'html',
- [js]: 'js',
- [jsProject]: 'js'
-};
// determine the component view for each challenge
exports.viewTypes = {
[html]: 'classic',
@@ -81,7 +77,8 @@ exports.viewTypes = {
[video]: 'video',
[codeAllyPractice]: 'codeAlly',
[codeAllyCert]: 'codeAlly',
- [multifileCertProject]: 'classic'
+ [multifileCertProject]: 'classic',
+ [theOdinProject]: 'odin'
};
// determine the type of submit function to use for the challenge on completion
@@ -103,7 +100,8 @@ exports.submitTypes = {
[modern]: 'tests',
[video]: 'tests',
[codeAllyCert]: 'project.frontEnd',
- [multifileCertProject]: 'tests'
+ [multifileCertProject]: 'tests',
+ [theOdinProject]: 'tests'
};
// determine which help forum questions should be posted to
diff --git a/client/utils/gatsby/challenge-page-creator.js b/client/utils/gatsby/challenge-page-creator.js
index bcc334f56ec..13fdefe5116 100644
--- a/client/utils/gatsby/challenge-page-creator.js
+++ b/client/utils/gatsby/challenge-page-creator.js
@@ -32,13 +32,19 @@ const video = path.resolve(
'../../src/templates/Challenges/video/Show.tsx'
);
+const odin = path.resolve(
+ __dirname,
+ '../../src/templates/Challenges/odin/Show.tsx'
+);
+
const views = {
backend,
classic,
modern: classic,
frontend,
video,
- codeAlly
+ codeAlly,
+ odin
// quiz: Quiz
};
diff --git a/client/utils/help-category-map.json b/client/utils/help-category-map.json
index 2452d3146bb..0a7f4eac9d0 100644
--- a/client/utils/help-category-map.json
+++ b/client/utils/help-category-map.json
@@ -42,6 +42,7 @@
"algorithms": "JavaScript",
"data-structures": "JavaScript",
"take-home-projects": "JavaScript",
+ "the-odin-project": "JavaScript",
"rosetta-code": "JavaScript",
"project-euler": "JavaScript",
"scientific-computing-with-python": "Python",
diff --git a/config/analytics-settings.js b/config/analytics-settings.js
index 106725cc3b6..68f63dba39b 100644
--- a/config/analytics-settings.js
+++ b/config/analytics-settings.js
@@ -1,2 +1,5 @@
-exports.prodAnalyticsId = 'UA-55446531-10';
-exports.devAnalyticsId = 'UA-55446531-19';
+exports.prodAnalyticsId = 'GTM-57R6KJM';
+exports.devAnalyticsId = 'GTM-WSS47LM';
+
+// this id includes a stream for the spanish learn platform
+exports.prodAnalyticsESId = 'GTM-KCS6GSD';
diff --git a/config/knip/knip.dev.json b/config/knip/knip.dev.json
deleted file mode 100644
index 7970a93f047..00000000000
--- a/config/knip/knip.dev.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "client":{
- "dev": true,
- "exclude": ["dependencies"],
- "entryFiles": [
- "gatsby-*.js",
- "src/pages/*.tsx",
- "src/templates/Challenges/**/{s,S}how.tsx",
- "src/templates/Introduction/**/{intro,super-block-intro}.tsx",
- "src/**/*.test.{js,ts,tsx}"
- ],
- "projectFiles": [
- "src/**/*.{js,ts,tsx}",
- "!static/misc/*.js",
- "!i18n/schema-validation.ts",
- "!plugins/**",
- "!postcss.config.js",
- "!src/client/frame-runner.ts",
- "!src/client/workers/**",
- "!webpack-workers.js",
- "!**/i18n/config-for-tests.ts",
- "!**/__mocks__/**",
- "!**/__fixtures/**",
- "!**/node_modules/**"
- ]
- }
-}
diff --git a/config/knip/knip.json b/config/knip/knip.json
deleted file mode 100644
index cdb79eb4b6c..00000000000
--- a/config/knip/knip.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "client":{
- "exclude": ["dependencies"],
- "entryFiles": [
- "gatsby-*.js",
- "src/html.tsx",
- "src/pages/*.tsx",
- "src/templates/Challenges/**/{s,S}how.tsx",
- "src/templates/Introduction/**/{intro,super-block-intro}.tsx"
- ],
- "projectFiles": [
- "**/*.{js,ts,tsx}",
- "!static/misc/*.js",
- "!i18n/schema-validation.ts",
- "!plugins/**",
- "!postcss.config.js",
- "!src/client/frame-runner.ts",
- "!src/client/workers/**",
- "!webpack-workers.js",
- "!**/*.test.{js,ts,tsx}",
- "!**/i18n/config-for-tests.ts",
- "!**/__mocks__/**",
- "!**/__fixtures/**",
- "!**/node_modules/**",
- "!**/*.d.ts"
- ]
- }
-}
diff --git a/curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json b/curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json
index cf0d7d963a4..a647ab21730 100644
--- a/curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json
+++ b/curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json
@@ -135,144 +135,148 @@
"Step 31"
],
[
- "615f5486b8fd4b71633f69b0",
+ "6395d33ab5d91bf317107c48",
"Step 32"
],
[
- "615f575b50b91e72af079480",
+ "615f5486b8fd4b71633f69b0",
"Step 33"
],
[
- "615f5af373a68e744a3c5a76",
+ "6396e33fe478dd264ebbf278",
"Step 34"
],
[
- "615f5c1cb7575c7551ed8a40",
+ "615f575b50b91e72af079480",
"Step 35"
],
[
- "615f5fd85d0062761f288364",
+ "615f5af373a68e744a3c5a76",
"Step 36"
],
[
- "615f61338c8ca176d6445574",
+ "615f5fd85d0062761f288364",
"Step 37"
],
[
- "615f666ac5edea782feb7e75",
+ "615f61338c8ca176d6445574",
"Step 38"
],
[
- "615f671b6d1919792745aa5d",
+ "615f666ac5edea782feb7e75",
"Step 39"
],
[
- "615f6823d0815b7a991f2a75",
+ "615f671b6d1919792745aa5d",
"Step 40"
],
[
- "615f6a7d4ba8037bc086c2c7",
+ "635bde33c91c80540eae239b",
"Step 41"
],
[
- "615f6b2d164f81809efd9bdc",
+ "615f6823d0815b7a991f2a75",
"Step 42"
],
[
- "615f6cc778f7698258467596",
+ "615f6b2d164f81809efd9bdc",
"Step 43"
],
[
- "615f6fddaac1e083502d3e6a",
+ "615f6cc778f7698258467596",
"Step 44"
],
[
- "615f70077a4ff98424236c1e",
+ "615f6fddaac1e083502d3e6a",
"Step 45"
],
[
- "615f72a872354a850d4f533e",
+ "615f70077a4ff98424236c1e",
"Step 46"
],
[
- "615f74a71f1e498619e38ee8",
+ "615f72a872354a850d4f533e",
"Step 47"
],
[
- "615f7ad94380408d971d14f6",
+ "615f74a71f1e498619e38ee8",
"Step 48"
],
[
- "615f7bc680f7168ea01ebf99",
+ "615f7ad94380408d971d14f6",
"Step 49"
],
[
- "615f7c71eab8218f846e4503",
+ "615f7bc680f7168ea01ebf99",
"Step 50"
],
[
- "615f7d489a581590d1350288",
+ "615f7c71eab8218f846e4503",
"Step 51"
],
[
- "615f7de4487b64919bb4aa5e",
+ "615f7d489a581590d1350288",
"Step 52"
],
[
- "615f7e7281626a92bbd62da8",
+ "615f7de4487b64919bb4aa5e",
"Step 53"
],
[
- "615f7ecb09de9a938ef94756",
+ "615f7e7281626a92bbd62da8",
"Step 54"
],
[
- "615f7fa959ab75948f96a0d6",
+ "615f7ecb09de9a938ef94756",
"Step 55"
],
[
- "615f808d85793195b0f53be9",
+ "615f7fa959ab75948f96a0d6",
"Step 56"
],
[
- "615f829d07b18f96f6f6684b",
+ "615f808d85793195b0f53be9",
"Step 57"
],
[
- "615f83ef928ec9982b785b6a",
+ "615f829d07b18f96f6f6684b",
"Step 58"
],
[
- "615f84f246e8ba98e3cd97be",
+ "615f83ef928ec9982b785b6a",
"Step 59"
],
[
- "615f887466db4ba14b5342cc",
+ "615f84f246e8ba98e3cd97be",
"Step 60"
],
[
- "615f89e055040ba294719d2f",
+ "615f887466db4ba14b5342cc",
"Step 61"
],
[
- "615f8bfe0f30a1a3c340356b",
+ "615f89e055040ba294719d2f",
"Step 62"
],
[
- "615f8f1223601fa546e93f31",
+ "615f8bfe0f30a1a3c340356b",
"Step 63"
],
[
- "615f905fbd1017a65ca224eb",
+ "615f8f1223601fa546e93f31",
"Step 64"
],
[
- "615f94786869e1a7fec54375",
+ "615f905fbd1017a65ca224eb",
"Step 65"
],
[
- "615f951dff9317a900ef683f",
+ "615f94786869e1a7fec54375",
"Step 66"
+ ],
+ [
+ "615f951dff9317a900ef683f",
+ "Step 67"
]
]
-}
+}
\ No newline at end of file
diff --git a/curriculum/challenges/_meta/the-odin-project/meta.json b/curriculum/challenges/_meta/the-odin-project/meta.json
new file mode 100644
index 00000000000..a3f85b99c98
--- /dev/null
+++ b/curriculum/challenges/_meta/the-odin-project/meta.json
@@ -0,0 +1,124 @@
+{
+ "name": "The Odin Project",
+ "isUpcomingChange": true,
+ "dashedName": "the-odin-project",
+ "order": 5,
+ "time": "",
+ "template": "",
+ "required": [],
+ "superBlock": "coding-interview-prep",
+ "challengeOrder": [
+ [
+ "6374f208de18c50e48ba767b",
+ "Introduction To HTML and CSS Question A"
+ ],
+ [
+ "6376327e2724a688c04636e3",
+ "Introduction To HTML and CSS Question B"
+ ],
+ [
+ "637633162724a688c04636e4",
+ "Introduction To HTML and CSS Question C"
+ ],
+ [
+ "637633672724a688c04636e5",
+ "Introduction To HTML and CSS Question D"
+ ],
+ [
+ "637f4e0e72c65bc8e73dfe1e",
+ "Elements and Tags Question A"
+ ],
+ [
+ "637f4e1672c65bc8e73dfe1f",
+ "Elements and Tags Question B"
+ ],
+ [
+ "637f4e1c72c65bc8e73dfe20",
+ "HTML Boilerplate Question A"
+ ],
+ [
+ "637f4e2872c65bc8e73dfe21",
+ "HTML Boilerplate Question B"
+ ],
+ [
+ "637f4e2f72c65bc8e73dfe22",
+ "HTML Boilerplate Question C"
+ ],
+ [
+ "637f4e3672c65bc8e73dfe23",
+ "HTML Boilerplate Question D"
+ ],
+ [
+ "637f4e5872c65bc8e73dfe27",
+ "Working With Text Question A"
+ ],
+ [
+ "637f4e5f72c65bc8e73dfe28",
+ "Working With Text Question B"
+ ],
+ [
+ "637f4e6672c65bc8e73dfe29",
+ "Working With Text Question C"
+ ],
+ [
+ "637f4e6e72c65bc8e73dfe2a",
+ "Working With Text Question D"
+ ],
+ [
+ "637f4e7972c65bc8e73dfe2b",
+ "Working With Text Question E"
+ ],
+ [
+ "637f4e8072c65bc8e73dfe2c",
+ "Working With Text Question F"
+ ],
+ [
+ "637f4e8772c65bc8e73dfe2d",
+ "Working With Text Question G"
+ ],
+ [
+ "637f4e3e72c65bc8e73dfe24",
+ "Understand Ordered and Unordered List Question A"
+ ],
+ [
+ "637f4e4672c65bc8e73dfe25",
+ "Understand Ordered and Unordered List Question B"
+ ],
+ [
+ "637f4e5172c65bc8e73dfe26",
+ "Understand ordered and Unordered List Question C"
+ ],
+ [
+ "637f704072c65bc8e73dfe36",
+ "Links and Images Question A"
+ ],
+ [
+ "637f703572c65bc8e73dfe35",
+ "Links and Images Question B"
+ ],
+ [
+ "637f703072c65bc8e73dfe34",
+ "Links and Images Question C"
+ ],
+ [
+ "637f702872c65bc8e73dfe33",
+ "Links and Images Question D"
+ ],
+ [ "637f702372c65bc8e73dfe32",
+ "Links and Images Question E"
+ ],
+ [ "637f701c72c65bc8e73dfe31",
+ "Links and Images Question F"
+ ],
+ [ "637f701572c65bc8e73dfe30",
+ "Links and Images Question G"
+ ],
+ [ "637f700b72c65bc8e73dfe2f",
+ "Links and Images Question D"
+ ],
+ [
+ "6391d1a4f7ac71efd0621380",
+ "Build a Recipe Page Project"
+ ]
+ ]
+}
\ No newline at end of file
diff --git a/curriculum/challenges/arabic/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml b/curriculum/challenges/arabic/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml
index e00138af76c..b65e0f5cbfe 100644
--- a/curriculum/challenges/arabic/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml
+++ b/curriculum/challenges/arabic/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml
@@ -13,10 +13,10 @@ tests:
title: بناء عارض Markdown
-
id: 587d7dbc367417b2b2512bae
- title: بناء آلة الدرامز
+ title: أنشئ آلة الطبول
-
id: bd7158d8c442eddfaeb5bd17
- title: بناء آلة حاسبة بإستخدام JavaScript
+ title: ابن آلة حاسبة باستخدام JavaScript
-
id: bd7158d8c442eddfaeb5bd0f
title: بناء ساعة 25 + 5
diff --git a/curriculum/challenges/arabic/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml b/curriculum/challenges/arabic/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
index 3349d7cd478..dbfa713d1db 100644
--- a/curriculum/challenges/arabic/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
+++ b/curriculum/challenges/arabic/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
@@ -7,16 +7,16 @@ isPrivate: true
tests:
-
id: aaa48de84e1ecc7c742e1124
- title: فاحص الـ Palindrome
+ title: مدقق لمعاكس المقطع النصي
-
id: a7f4d8f2483413a6ce226cac
- title: محول الأرقام الرومانية
+ title: محول للأرقام الرومانية
-
id: 56533eb9ac21ba0edf2244e2
- title: شفرة قيصر (Caesars Cipher)
+ title: شفرة قيصر
-
id: aff0395860f5d3034dc0bfc9
- title: مدقق رقم الهاتف
+ title: مدقق لرقم الهاتف
-
id: aa2e6f85cab2ab736c9a9b24
- title: ماكينة تسجيل المدفوعات النقدية
+ title: مكنة لتسجيل النقود
diff --git a/curriculum/challenges/arabic/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml b/curriculum/challenges/arabic/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml
index 41c89333ec8..25e29896e5d 100644
--- a/curriculum/challenges/arabic/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml
+++ b/curriculum/challenges/arabic/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml
@@ -1,13 +1,13 @@
---
id: 561add10cb82ac38a17513be
-title: شهادة الواجهة الأمامية القديمة
+title: شهادة الواجهة الأمامية التراثية
certification: legacy-front-end
challengeType: 7
isPrivate: true
tests:
-
id: bd7158d8c242eddfaeb5bd13
- title: قم ببناء صفحة ويب لعرض نماذج الأعمال الشخصية
+ title: أنشئ معرضا لأعمالك الخاصة
-
id: bd7158d8c442eddfaeb5bd13
title: قم ببناء آلة عرض اقتباسات عشوائية
@@ -16,7 +16,7 @@ tests:
title: قم ببناء ساعة 25 + 5
-
id: bd7158d8c442eddfaeb5bd17
- title: بناء آلة حاسبة بإستخدام JavaScript
+ title: بناء آلة حاسبة باستخدام JavaScript
-
id: bd7158d8c442eddfaeb5bd10
title: إظهار الطقس المحلي
diff --git a/curriculum/challenges/arabic/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml b/curriculum/challenges/arabic/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml
index e9ca5686706..d22c82b228b 100644
--- a/curriculum/challenges/arabic/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml
+++ b/curriculum/challenges/arabic/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml
@@ -1,6 +1,6 @@
---
id: 561add10cb82ac38a17213bd
-title: شهادة الـ Full Stack القديمة
+title: شهادة الـ Full Stack التراثية
certification: legacy-full-stack
challengeType: 7
isPrivate: true
@@ -13,13 +13,13 @@ tests:
title: شهادة الخوارزميات وهياكل البيانات في JavaScript
-
id: 561acd10cb82ac38a17513bc
- title: شهادة مكتبات تطوير واجهة المستخدم (Front End Libraries)
+ title: شهادة مكتبات Front End
-
id: 5a553ca864b52e1d8bceea14
- title: شهادة Data Visualization
+ title: شهادة التصور المرئي للبيانات
-
id: 561add10cb82ac38a17523bc
- title: شهادة API's and Microservice
+ title: شهادة واجهة برمجة التطبيقات (API) والخدمات المصغّرة
-
id: 561add10cb82ac38a17213bc
- title: شهادة أمن المعلومات القديمة وشهادة ضمان الجودة
+ title: شهادة أمن المعلومات التراثية وشهادة ضمان الجودة
diff --git a/curriculum/challenges/arabic/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml b/curriculum/challenges/arabic/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml
index 66f533142b3..60777ae9607 100644
--- a/curriculum/challenges/arabic/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml
+++ b/curriculum/challenges/arabic/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml
@@ -1,6 +1,6 @@
---
id: 561add10cb82ac38a17213bc
-title: شهادة أمن المعلومات القديمة وشهادة ضمان الجودة
+title: شهادة أمن المعلومات التراثية وشهادة ضمان الجودة
certification: legacy-information-security-and-quality-assurance
challengeType: 7
isPrivate: true
diff --git a/curriculum/challenges/arabic/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml b/curriculum/challenges/arabic/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml
index 341301ba269..e8e2df55dc5 100644
--- a/curriculum/challenges/arabic/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml
+++ b/curriculum/challenges/arabic/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml
@@ -7,7 +7,7 @@ isPrivate: true
tests:
-
id: bd7158d8c442eddfaeb5bd18
- title: بناء صفحة تحية
+ title: أنشئ مشروع صفحة الثناء
-
id: 587d78af367417b2b2512b03
title: بناء نموذج استطلاع رأي
@@ -16,7 +16,7 @@ tests:
title: بناء الصفحة الرئيسة لمنتج
-
id: 587d78b0367417b2b2512b05
- title: أنشئ صفحة التوثيق الفني
+ title: أنشئ صفحة التوثيق التقنية
-
id: bd7158d8c242eddfaeb5bd13
- title: قم ببناء مشروع صفحة ويب لعرض نماذج الاعمال الشخصية
+ title: أنشئ معرضا لأعمالك الخاصة
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
index 91ab935f674..f282a55ad02 100644
--- a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
@@ -11,11 +11,11 @@ dashedName: give-links-meaning-by-using-descriptive-link-text
Screen reader users have various options for what type of content their device reads. These options include skipping to (or over) landmark elements, jumping to the main content, or getting a page summary from the headings. Another option is to only hear the links available on a page.
-Screen readers do this by reading the link text, or what's between the anchor (`a`) tags. Having a list of "click here" or "read more" links isn't helpful. Instead, use brief but descriptive text within the `a` tags to provide more meaning for these users.
+قارئ الشاشة يفعل ذلك بقراءة نص الرابط، أو ما بين علامات الرابط (`a`). Having a list of "click here" or "read more" links isn't helpful. Instead, use brief but descriptive text within the `a` tags to provide more meaning for these users.
# --instructions--
-The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (`a`) tags so they wrap around the text `information about batteries` instead of `Click here`.
+The link text that Camper Cat is using is not very descriptive without the surrounding context. انقل علامات الرابط (`a`) بحيث تلتف حول النص `information about batteries` بدلاً من `Click here`.
# --hints--
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md
index 02f09a4e0b0..eba7cc36171 100644
--- a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md
+++ b/curriculum/challenges/arabic/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: اضبط حالة التأشير بالحوم في علامة الرابط
challengeType: 0
videoUrl: 'https://scrimba.com/c/cakRGcm'
forumTopicId: 301035
@@ -25,7 +25,7 @@ The code editor has a CSS rule to style all `a` tags black. Add a rule so that w
# --hints--
-يجب أن تبقى علامة الرابط `color` سوداء, أضف الفئة الزائفة `:hover` من قواعد CSS فقط.
+علامة الرابط `color` يجب أن تبقى سوداء. فقط أضف قواعد CSS لدولة `:hover`.
```js
assert($('a').css('color') == 'rgb(0, 0, 0)');
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md
index b9a9509f8ea..e48285eea70 100644
--- a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md
@@ -13,7 +13,7 @@ Web developers traditionally use lorem ipsum text as placeholder text
Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.
-Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called "kitty ipsum" text.
+Well, 5 centuries is long enough. بما أنك تنشئ برنامج CatPhotoApp، استخدم نص "kitty ipsum".
# --instructions--
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
index 73a3eaed90b..b9d927d2707 100644
--- a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
@@ -1,6 +1,6 @@
---
id: bad87fee1348bd9aedf08816
-title: Link to External Pages with Anchor Elements
+title: الربط بصفحات خارجية بواسطة العناصر Anchor
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
forumTopicId: 18226
@@ -11,7 +11,7 @@ dashedName: link-to-external-pages-with-anchor-elements
You can use `a` (*anchor*) elements to link to content outside of your web page.
-`a` elements need a destination web address called an `href` attribute. They also need anchor text. Here's an example:
+عناصر `a` تتطلّب عنوان وب للوجهة يسمّى: `href`. وتتطلّب أيضا نصّ رابط anchor. Here's an example:
```html
this links to freecodecamp.org
@@ -21,11 +21,11 @@ Then your browser will display the text `this links to freecodecamp.org` as a li
# --instructions--
-Create an `a` element that links to `https://www.freecatphotoapp.com` and has "cat photos" as its anchor text.
+قم بإنشاء عنصر `a` الذي يربط بـ `https://www.freecatphotoapp.com` والذي يحتوي على "صور قطط" كنص الرابط.
# --hints--
-Your `a` element should have the anchor text of `cat photos`.
+يجب أن يحتوي عنصر `a` الخاص بك على نص الرابط `cat photos`.
```js
assert(/cat photos/gi.test($('a').text()));
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
index 94fd61e4930..5fd409a9ced 100644
--- a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
@@ -21,7 +21,7 @@ Remember to use `#` as your `a` element's `href` property in order to turn it in
# --instructions--
-Place the existing image element within an `a` (*anchor*) element.
+ضع عنصر الصورة داخل عنصر `a` (*anchor*) الحالي.
Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link.
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
index afe98f114e4..4050a8f54d5 100644
--- a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
+++ b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
@@ -1,6 +1,6 @@
---
id: bd7158d8c242eddfaeb5bd13
-title: Build a Personal Portfolio Webpage
+title: أنشئ معرضا لأعمالك الخاصة
challengeType: 14
forumTopicId: 301143
dashedName: build-a-personal-portfolio-webpage
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md
index 1dbc840e0bb..a36f6c5daf1 100644
--- a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md
+++ b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md
@@ -1,6 +1,6 @@
---
id: 587d78af367417b2b2512b04
-title: Build a Product Landing Page
+title: أنشئ صفحة لعرض المنتج
challengeType: 14
forumTopicId: 301144
dashedName: build-a-product-landing-page
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md
index a4f5d5ea085..eb80337ecab 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md
@@ -10,7 +10,7 @@ dashedName: convert-celsius-to-fahrenheit
معادلة تحويل درجة الحرارة من الدرجة المئوية إلى درجة فهرنهايت هي: درجة الحرارة المئوية مضروبة في `9/5`, مضاف إليها `32`.
-لديك المتغير `celsius` ويمثل درجة الحرارة المئوية. استخدم المتغير `fahrenheit` الذي سبق تعريفه وعيّن درجة حرارة فهرنهايت المعادلة لدرجة الحرارة المئوية المعطاة. استخدم المعادلة في السطر الأول، لتحويل درجة الحرارة المئوية إلى فهرنهايت.
+لديك المتغير `celsius` ويمثل درجة الحرارة المئوية. استخدم المتغير `fahrenheit` الذي سبق أعلانه وعيّن درجة حرارة فهرنهايت المعادلة لدرجة الحرارة المئوية المعطاة. استخدم المعادلة في السطر الأول، لتحويل درجة الحرارة المئوية إلى فهرنهايت.
# --hints--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-an-arrays-contents-using-bracket-notation.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-an-arrays-contents-using-bracket-notation.md
index 7b6010e1202..6c2adb2f176 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-an-arrays-contents-using-bracket-notation.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-an-arrays-contents-using-bracket-notation.md
@@ -1,6 +1,6 @@
---
id: 5a661e0f1068aca922b3ef17
-title: الوصول إلى محتويات القائمة (Array) باستخدام رمز القوس (Bracket Notation)
+title: الوصول إلى محتويات القائمة (Array) باستخدام علامات الأقواس (Bracket Notation)
challengeType: 1
forumTopicId: 301149
dashedName: access-an-arrays-contents-using-bracket-notation
@@ -16,7 +16,7 @@ dashedName: access-an-arrays-contents-using-bracket-notation
let ourArray = ["a", "b", "c"];
```
-في القائمة، يحتوي كل عنصر على ترتيب index. هذا الترتيب يتضاعف كموقع ذلك العنصر في القائمة، وكيف تشير إليه. ومع ذلك، من المهم ملاحظة أن القائمات JavaScript هي قائمات مترتبة من الصفر، بمعنى أن العنصر الأول للقائمة هو في الواقع في موضع ***صفر*** وليس الأول. من أجل استرجاع عنصر من قائمة يمكننا إرفاق ترتيب بين قوسين وإلحاقه إلى نهاية القائمة، أو أكثر شيوعاً، إلى متغير يشير إلى كائن من نوع قائمة. هذا معروف باسم رمز الاقواس bracket notation. على سبيل المثال، إذا أردنا استرداد `a` من `ourArray`و تعيينه إلى متغير، يمكننا أن نفعل ذلك بواسطة التعليمات البرمجية التالية:
+في القائمة، يحتوي كل عنصر على ترتيب index. هذا الترتيب يتضاعف كموقع ذلك العنصر في القائمة، وكيف تشير إليه. ومع ذلك، من المهم ملاحظة أن القائمات JavaScript هي قائمات مترتبة من الصفر، بمعنى أن العنصر الأول للقائمة هو في الواقع في موضع ***صفر*** وليس الأول. من أجل استرجاع عنصر من قائمة يمكننا إرفاق ترتيب بين قوسين وإلحاقه إلى نهاية القائمة، أو أكثر شيوعاً، إلى متغير يشير إلى كائن من نوع قائمة. هذا معروف باسم علامات الأقواس bracket notation. على سبيل المثال، إذا أردنا استرداد `a` من `ourArray`و تعيينه إلى متغير، يمكننا أن نفعل ذلك بواسطة التعليمات البرمجية التالية:
```js
let ourVariable = ourArray[0];
@@ -30,7 +30,7 @@ let ourVariable = ourArray[0];
ourArray[1] = "not b anymore";
```
-باستخدام رمز الأقواس، قمنا الآن بإعادة تعيين العنصر في الترتيب 1 من السلسلة `b`، إلى `not b anymore`. الآن `ourArray` هو `["a", "not b anymore", "c"]`.
+باستخدام علامات الأقواس، قمنا الآن بإعادة تعيين العنصر في الترتيب 1 من المقطع النصي `b`، إلى `not b anymore`. الآن `ourArray` هو `["a", "not b anymore", "c"]`.
# --instructions--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-property-names-with-bracket-notation.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-property-names-with-bracket-notation.md
index 194fd0634aa..4a3264ba55a 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-property-names-with-bracket-notation.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-property-names-with-bracket-notation.md
@@ -8,7 +8,7 @@ dashedName: access-property-names-with-bracket-notation
# --description--
-في تحدي الكائن الأول ذكرنا استخدام رمز القوس كوسيلة للوصول إلى قيم الخاصية باستخدام تقييم متغير. على سبيل المثال، تخيل أن كائن `foods` الخاص بنا يتم استخدامه في برنامَج لتسجيل النقود في محل تجارة. لدينا وظيفة ما و التي تعين `selectedFood` ونحن نريد التحقق من كائن `foods` للتأكد من وجود ذلك الطعام. وقد يبدو ذلك كالتالي:
+في تحدي الكائن الأول ذكرنا استخدام علامات الأقواس كوسيلة للوصول إلى قيم الخاصية باستخدام تقييم متغير. على سبيل المثال، تخيل أن كائننا `foods` يستخدمه مكنة لتسجيل النقود في محل تجارة. لدينا وظيفة ما و التي تعين `selectedFood` ونحن نريد التحقق من كائن `foods` للتأكد من وجود ذلك الطعام. وقد يبدو ذلك كالتالي:
```js
let selectedFood = getCurrentFood(scannedItem);
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-key-value-pairs-to-javascript-objects.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-key-value-pairs-to-javascript-objects.md
index a7f3d0e66ea..3a5ec8d77c0 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-key-value-pairs-to-javascript-objects.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-key-value-pairs-to-javascript-objects.md
@@ -81,7 +81,7 @@ assert(foods.grapes === 35);
assert(foods.strawberries === 27);
```
-يجب تعيين أزواج key-value باستخدام dot او bracket notation.
+يجب تعيين أزواج key-value باستخدام dot او علامات الأقواس.
```js
assert(
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md
index 6dbf7852374..af68bb2ae75 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md
@@ -8,7 +8,7 @@ dashedName: create-complex-multi-dimensional-arrays
# --description--
-رائع! لقد تعلمت للتو طناً من المعلومات عن القوائم (arrays)! لقد كانت هذه النِّظْرة عامة عالية المستوى إلى حد ما، وهناك الكثير لتتعلمه حول العمل مع القائمات، التي سترى الكثير منها في الأقسام اللاحقة. ولكن قبل الانتقال إلى كائنات (Objects)، دعنا نلقي النِّظْرة أخرى ونرى كيف يمكن أن تصبح القوائم (arrays) أكثر تعقيدًا قليلاً مما رأيناه في التحديات السابقة.
+رائع! لقد تعلمت للتو طناً من المعلومات عن القوائم (arrays)! لقد كانت هذه النِّظْرة عامة عالية المستوى إلى حد ما، وهناك الكثير لتتعلمه حول العمل مع القوائم، التي سترى الكثير منها في الأقسام اللاحقة. ولكن قبل الانتقال إلى كائنات (Objects)، دعنا نلقي النِّظْرة أخرى ونرى كيف يمكن أن تصبح القوائم (arrays) أكثر تعقيدًا قليلاً مما رأيناه في التحديات السابقة.
واحدة من أقوى السمات عند التفكير في القوائم كهياكل للبيانات، هو أن القوائم يمكن أن تحتوي، أو حتى إن تكون مكونة بالكامل من قوائم أخرى. ورأيت القوائم التي تحتوي على قوائم في تحديات سابقة، ولكنها بسيطة إلى حد ما. ومع ذلك، فإن القوائم يمكن أن تحتوي على عمق لا حدود له من القوائم التي يمكن أن تحتوي على قوائم أخرى، لكل منها مستويات عشوائية من العمق وما إلى ذلك. بهذه الطريقة، يمكن للقائمة أن تصبح بسرعة هيكل بيانات معقد جداً، يعرف باسم عديد الأبعاد (multi-dimensional) أو قائمة متداخلة (nested array). انظر إلى المثال التالي:
@@ -33,7 +33,7 @@ let nestedArray = [
قائمة `deep` متداخلة على مستويين عميقين. قوائم `deeper` بعمق 3 مستويات. قوائم `deepest` هي 4 مستويات، و `deepest-est?` هي 5 مستويات.
-وفي حين أن هذا المثال قد يبدو متشابكا فإن هذا المستوى من التعقيد ليس مستغربا أو غير عادي عند التعامل مع كميات كبيرة من البيانات. ومع ذلك، لا يزال بإمكاننا الوصول بسهولة إلى أعمق مستويات قائمة بهذا التعقيد باستخدام رمز القوس:
+وفي حين أن هذا المثال قد يبدو متشابكا فإن هذا المستوى من التعقيد ليس مستغربا أو غير عادي عند التعامل مع كميات كبيرة من البيانات. ومع ذلك، لا يزال بإمكاننا الوصول بسهولة إلى أعمق مستويات قائمة بهذا التعقيد علامات الأقواس:
```js
console.log(nestedArray[2][1][0][0][0]);
@@ -51,7 +51,7 @@ console.log(nestedArray[2][1][0][0][0]);
# --instructions--
-لقد حددنا متغير `myNestedArray`، يساويا لقائمة. عدل `myNestedArray` باستخدام أي مجموعة من مقاطع نصية (strings)، و أرقام (numbers)، و حالات (booleans) لعناصر البيانات، بحيث يكون لديها على وجه التحديد خمس مستويات من العمق (تذكر، أن القائمة الخارجية هي المستوى 1). في مكان ما على المستوى الثالث ضف المقطع `deep`, وعلى المستوى الرابع ضف المقطع `deeper`, وعلى المستوى الخامس ضف المقطع `deepest`.
+لقد أعلنا متغير `myNestedArray`، مساويا لقائمة. عدل `myNestedArray` باستخدام أي مجموعة من مقاطع نصية (strings)، و أرقام (numbers)، و حالات (booleans) لعناصر البيانات، بحيث يكون لديها على وجه التحديد خمس مستويات من العمق (تذكر، أن القائمة الخارجية هي المستوى 1). في مكان ما على المستوى الثالث ضف المقطع `deep`, وعلى المستوى الرابع ضف المقطع `deeper`, وعلى المستوى الخامس ضف المقطع `deepest`.
# --hints--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-object-nested-within-an-object.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-object-nested-within-an-object.md
index f3a9f1376c7..8a43399533e 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-object-nested-within-an-object.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-object-nested-within-an-object.md
@@ -58,7 +58,7 @@ assert('totalUsers' in userActivity.data && 'online' in userActivity.data);
assert(userActivity.data.online === 45);
```
-يجب تعيين خاصية `online` باستخدام dot او bracket notation.
+يجب تعيين خاصية `online` باستخدام dot او علامات الأقواس.
```js
assert.strictEqual(code.search(/online: 45/), -1);
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/use-an-array-to-store-a-collection-of-data.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/use-an-array-to-store-a-collection-of-data.md
index ef3dbe392a7..6c7c2515bec 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/use-an-array-to-store-a-collection-of-data.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/use-an-array-to-store-a-collection-of-data.md
@@ -46,7 +46,7 @@ let complexArray = [
# --instructions--
-لقد حددنا متغير يسمى `yourArray`. أكمل البيان بتعيين array من 5 عناصر في الأقل في الطول لمتغير `yourArray`. يجب أن تحتوي array على stringواحد علي الأفل و number واحد و boolean واحد.
+لقد أعلنا متغير يسمى `yourArray`. أكمل البيان بتعيين array من 5 عناصر في الأقل في الطول لمتغير `yourArray`. يجب أن تحتوي array على stringواحد علي الأفل و number واحد و boolean واحد.
# --hints--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md
index f7ec3c9a182..e396699f03a 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md
@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392ca
-title: الوصول إلى بيانات القائمة باستخدام الترتيب (Access Array Data with Indexes)
+title: الوصول إلى بيانات القائمة باستخدام الترتيب
challengeType: 1
videoUrl: 'https://scrimba.com/c/cBZQbTz'
forumTopicId: 16158
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md
index b0449ba0401..3124db6d016 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md
@@ -1,6 +1,6 @@
---
id: 56592a60ddddeae28f7aa8e1
-title: الوصول إلى القائمات المتعددة الأبعاد باستخدام الترتيب (Access Multi-Dimensional Arrays With Indexes)
+title: الوصول إلى القائمات المتعددة الأبعاد باستخدام الترتيب
challengeType: 1
videoUrl: 'https://scrimba.com/c/ckND4Cq'
forumTopicId: 16159
@@ -32,7 +32,7 @@ const element = arr[3][0][1];
# --instructions--
-باستخدام bracket notation، اختر عنصرا من `myArray` بحيث أن `myData` يساوي `8`.
+اختر عنصرا من `myArray` باستخدام علامات الأقواس بحيث أن `myData` يساوي `8`.
# --hints--
@@ -42,7 +42,7 @@ const element = arr[3][0][1];
assert(myData === 8);
```
-يجب أن تستخدم bracket notation لقراءة القيمة الصحيحة من `myArray`.
+يجب أن تستخدم علامات الأقواس لقراءة القيمة الصحيحة من `myArray`.
```js
assert(/myData=myArray\[2\]\[1\]/.test(__helpers.removeWhiteSpace(code)));
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.md
index 5e9191d2f49..622ba4ba131 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.md
@@ -1,6 +1,6 @@
---
id: 56533eb9ac21ba0edf2244cd
-title: الوصول إلى القائمات المتداخلة (Accessing Nested Arrays)
+title: الوصول إلى القائمات المتداخلة
challengeType: 1
videoUrl: 'https://scrimba.com/c/cLeGDtZ'
forumTopicId: 16160
@@ -41,7 +41,7 @@ ourPets[1].names[0];
# --instructions--
-باستخدام dot و bracket notation، وعيّن المتغير `secondTree` إلى العنصر الثاني في قائمة `trees` من object باسم `myPlants`.
+استخدم dot و علامات الأقواس, لتعيّن المتغير `secondTree` إلى العنصر الثاني في قائمة `trees` من object باسم `myPlants`.
# --hints--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md
index 095d4fe8801..0d152807800 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md
@@ -1,6 +1,6 @@
---
id: 56533eb9ac21ba0edf2244c8
-title: الوصول خصائص (Properties) الكائن (Object) بواسطة Bracket Notation
+title: الوصول لخصائص (Properties) الكائن (Object) بواسطة استخدام dot و علامات الأقواس
challengeType: 1
videoUrl: 'https://scrimba.com/c/cBvmEHP'
forumTopicId: 16163
@@ -9,11 +9,11 @@ dashedName: accessing-object-properties-with-bracket-notation
# --description--
-الطريقة الثانية للوصول إلى خصائص الكائن هي القوسان المعكوفان (`[]`). في حال إن خاصية الكائن الذي تحاول الوصول إليه يحتوي على مسافة في اسمه, سوف تحتاج إلى استخدام القوسان المعكوفان (bracket notation).
+الطريقة الثانية للوصول إلى خصائص الكائن هي استخدام علامات الأقواس (`[]`). في حال إن خاصية الكائن الذي تحاول الوصول إليه يحتوي على مسافة في اسمه, سوف تحتاج إلى استخدام علامات الأقواس (bracket notation).
على أية حال, فانه يمكنك أستخدام bracket notation على خصائص الكائن من دون مسافات.
-هذا مثال على استخدام bracket notation لقراءة خاصية الكائن:
+هذا مثال على استخدام علامات الأقواس لقراءة خاصية الكائن:
```js
const myObj = {
@@ -33,7 +33,7 @@ myObj["NoSpace"];
# --instructions--
-أقراء قيم خصائص `an entree` و `the drink` في `testObj` باستخدام القوسان المعكوفان وتعينهم إلى `entreeValue` و `drinkValue` على التوالي.
+أقراء قيم خصائص `an entree` و `the drink` في `testObj` باستخدام علامات الأقواس وعينهم إلى `entreeValue` و `drinkValue` على التوالي.
# --hints--
@@ -61,7 +61,7 @@ assert(typeof drinkValue === 'string');
assert(drinkValue === 'water');
```
-يجب عليك أستخدام القوسان المعكوفان مرتين
+يجب عليك أستخدام علامات الأقواس مرتين
```js
assert(code.match(/testObj\s*?\[('|")[^'"]+\1\]/g).length > 1);
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md
index 140c7560b18..431232abff1 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md
@@ -9,7 +9,7 @@ dashedName: accessing-object-properties-with-dot-notation
# --description--
-هناك طريقتان للوصول إلى خصائص الكائن: نقطة التأشير (`.`) وتدوين الأقواس (`[]`)، على غرار القائمة.
+هناك طريقتان للوصول إلى خصائص الكائن: نقطة التأشير (`.`) و علامات الأقواس (`[]`)، على غرار القائمة.
ترميز النقطة هو ما تستخدمه عندما تعرف اسم الخاصية التي تحاول الوصول إليها مسبقاً.
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md
index 37c8d3ad711..53bde20f3e3 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md
@@ -9,7 +9,7 @@ dashedName: accessing-object-properties-with-variables
# --description--
-وثمة استخدام آخر لترميز آلأقواس للوصول إلى الخصائص المخزنة كقيمة للمتغير. يمكن أن يكون هذا مفيداً جداً خلال تكرار خصائص الكائن أو عند الوصول إلى جدول البحث.
+وثمة استخدام آخر لعلامات الأقواس للوصول إلى الخصائص المخزنة كقيمة للمتغير. يمكن أن يكون هذا مفيداً جداً خلال تكرار خصائص الكائن أو عند الوصول إلى جدول البحث.
فيما يلي, مثال على استخدام متغير للوصول إلى خاصية ما:
@@ -53,7 +53,7 @@ assert(typeof player === 'string');
assert(player === 'Montana');
```
-يجب عليك استخدام ترميز ألأقواس للوصول إلى `testObj`
+يجب عليك استخدام علامات الأقواس للوصول إلى `testObj`
```js
assert(/testObj\s*?\[.*?\]/.test(code));
@@ -65,7 +65,7 @@ assert(/testObj\s*?\[.*?\]/.test(code));
assert(!code.match(/player\s*=\s*"|\'\s*Montana\s*"|\'\s*;/gi));
```
-يجب أن تستخدم المتغير `playerNumber` في رمز القوس
+يجب أن تستخدم المتغير `playerNumber` في علامات الأقواس
```js
assert(/testObj\s*?\[\s*playerNumber\s*\]/.test(code));
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md
index 534e1c7c510..d757a010d3a 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md
@@ -1,6 +1,6 @@
---
id: 5ee127a03c3b35dd45426493
-title: تعيين قيمة متغير إلى متغير آخر (Assigning the Value of One Variable to Another)
+title: تعيين قيمة متغير إلى متغير آخر
challengeType: 1
videoUrl: ''
forumTopicId: 418265
@@ -9,7 +9,7 @@ dashedName: assigning-the-value-of-one-variable-to-another
# --description--
-بعد تعيين قيمة إلى متغير باستخدام عملية تكليف (=)، يمكنك تعيين قيمة هذا المتغير إلى متغير آخر باستخدام عمليةتكليف (=) ذاتها.
+بعد تعيين قيمة إلى متغير باستخدام مشغل التعيين (=)، يمكنك تعيين قيمة هذا المتغير إلى متغير آخر باستخدام مشغل التعيين (=) ذاتها.
```js
var myVar;
@@ -18,7 +18,7 @@ var myNum;
myNum = myVar;
```
-ما ورد أعلنه يظهر تعريف المتغير `myVar` دون قيمة، ثم يخصص له قيمة `5`. بعد ذلك، يتم إعلان متغير آخر يدعى `myNum` دون قيمة. ثم يتم تعيين قيمة المتغير `myVar` (التي تساوي `5`) إلى المتغير `myNum`. الآن المتغير `myNum` لديه القيمة `5`.
+ما ورد أعلى يعلن المتغير `myVar` دون قيمة، ثم يخصص له قيمة `5`. بعد ذلك، يتم إعلان متغير آخر يدعى `myNum` دون قيمة. ثم يتم تعيين قيمة المتغير `myVar` (التي تساوي `5`) إلى المتغير `myNum`. الآن المتغير `myNum` لديه القيمة `5`.
# --instructions--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md
index 9e9f0282e7e..99b48c6e4c4 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md
@@ -1,6 +1,6 @@
---
id: bd7123c9c441eddfaeb4bdef
-title: التعليق علي تعليماتك البرمجية في JavaScript
+title: التعليق (Comment) في كودك من JavaScript
challengeType: 1
removeComments: false
videoUrl: 'https://scrimba.com/c/c7ynnTp'
@@ -10,7 +10,7 @@ dashedName: comment-your-javascript-code
# --description--
-التعليقات هي أسطر من التعليمات البرمجية التي سيتجاهلها JavaScript عمداً. التعليقات هي طريقة رائعة لترك الملاحظات لنفسك وللأشخاص الآخرين الذين سيحتاجون لاحقاً إلى معرفة ما تفعله تلك التعليمات البرمجية.
+إن التعليقات أسطر من الكود التي سيتجاهلها JavaScript عمداً. إن التعليقات طريقة رائعة لترك الملاحظات لنفسك وللأشخاص الآخرين الذين سيحتاجون لاحقاً إلى معرفة ما يفعله ذلك الكود.
هناك طريقتان لكتابة التعليقات في JavaScript:
@@ -27,7 +27,7 @@ dashedName: comment-your-javascript-code
multi-line comment */
```
-**ملاحظة:** عند كتابة التعليمات البرمجية، يجب عليك إضافة تعليقات بانتظام لتوضيح وظيفة أجزاء من التعليمات البرمجية الخاص بك. التعليق الجيد يمكن أن يساعد على إيصال المغزى من التعليمات البرمجية الخاص بك - للآخرين *و* لنفسك في المستقبل.
+**ملاحظة:** عند كتابة الكود، يجب عليك إضافة تعليقات بانتظام لتوضيح وظيفة أجزاء من كودك. التعليق الجيد يمكن أن يساعد على إيصال المغزى من كودك - للآخرين *و* لنفسك في المستقبل.
# --instructions--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md
index ba99c3632e3..96d0c55b7ad 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md
@@ -22,7 +22,7 @@ function equalityTest(myVal) {
}
```
-إذا كانت قيمة `myVal` تساوي `10`، عملية المساواة تعيد `true`، و بهذا سيتم تنفيذ التعليمات البرمجية في الأقواس، وستعيد الدالة `Equal`. وإلا فإن الوظيفة ستعيد `Not Equal`. لكي تقوم JavaScript بمقارنة نوعين مختلفين في ا نوع البيانات (على سبيل المثال، مقارنة بين نوع `numbers` و نوع `strings`)، يجب أن تحول احدمها إلى نوع الآخر. هذا يُعرف بالقسر النوع (Type Coercion). بمجرد فعل ذلك، يتمكن Javascript من المقارنة بين المصطلحات التالية:
+إذا كانت قيمة `myVal` تساوي `10`، عملية المساواة تعيد `true`، و بهذا سيتم تنفيذ التعليمات البرمجية في الأقواس، وستعيد الوظيفة `Equal`. وإلا فإن الوظيفة ستعيد `Not Equal`. لكي تقوم JavaScript بمقارنة نوعين مختلفين في ا نوع البيانات (على سبيل المثال، مقارنة بين نوع `numbers` و نوع `strings`)، يجب أن تحول احدمها إلى نوع الآخر. هذا يُعرف بالقسر النوع (Type Coercion). بمجرد فعل ذلك، يتمكن Javascript من المقارنة بين المصطلحات التالية:
```js
1 == 1 // true
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.md
index 8640a6e7e2e..98eb93fd0cb 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.md
@@ -23,7 +23,7 @@ for (let i = 10; i > 0; i -= 2) {
}
```
-سوف تحتوي `ourArray` الآن على `[10, 8, 6, 4, 2]`. غير التغيير البادئ (initialization) و التعبير الأخير (final expression) حتى نتمكن من العد إلى الوراء بمقدار اثنين لإنشاء قائمة (array) من الأعداد التنازلية الفردية.
+سوف تحتوي `ourArray` الآن على `[10, 8, 6, 4, 2]`. غير التعبير البادئ (initialization) و التعبير الأخير (final expression) حتى نتمكن من العد إلى الوراء بمقدار اثنين لإنشاء قائمة (array) من الأعداد التنازلية الفردية.
# --instructions--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md
index 15f138dc17b..c72cab26475 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md
@@ -1,6 +1,6 @@
---
id: bd7123c9c443eddfaeb5bdef
-title: أعلان متغيرات في JavaScript
+title: أعلان المتغيرات في JavaScript
challengeType: 1
videoUrl: 'https://scrimba.com/c/cNanrHq'
forumTopicId: 17556
@@ -9,21 +9,21 @@ dashedName: declare-javascript-variables
# --description--
-في علوم الحاسب، تكون البيانات أي شيء ذو معني للحواسيب. يوفر JavaScript ثماني أنواع بيانات مختلفة و هي كالآتي `undefined`, و`null`, و`boolean`, و`string`, و`symbol`, و`bigint`, و`number`, و `object`.
+في علم الحاسوب (computer science)، تكون البيانات أي شيء ذو معني للحاسوب. يوفر JavaScript ثماني أنواع بيانات مختلفة و هي كالآتي `undefined`, و`null`, و`boolean`, و`string`, و`symbol`, و`bigint`, و`number`, و `object`.
-على سبيل المثال، تقوم الحاسوب بالتمييز بين الأرقام، مثل الرَّقَم `12` و `strings` مثل `"12"` و `"dog"` أو `"123 cats"`, وهي مجموعات من الرموز. يمكن للحواسيب عمليات رياضية على الأعداد، ولكن ليس على المقاطع النصية (strings).
+على سبيل المثال، يقوم الحاسوب بالتمييز بين الأرقام، مثل الرَّقَم `12` و `strings` مثل `"12"` و `"dog"` أو `"123 cats"`, وهي مجموعات من الرموز. يمكن للحواسيب عمليات رياضية على الأعداد، ولكن ليس على المقاطع النصية (strings).
-تسمح المتغيرات للحواسيب بتخزين البيانات ومعالجتها بطريقة ديناميكية. وهم يفعلون ذلك باستخدام "تسمية" للإشارة إلى البيانات بدلاً من استخدام البيانات نفسها. ويمكن تخزين أي نوع من أنواع البيانات الثمانية في متغير.
+تسمح المتغيرات للحواسيب بتخزين البيانات ومعالجتها بطريقة ديناميكية. ويفعلوا ذلك باستخدام "المسمى" للإشارة إلى البيانات بدلاً من استخدام البيانات نفسها. ويمكن تخزين أي نوع من أنواع البيانات الثمانية في متغير.
المتغيرات مشابهة للمتغيرات x و y التي تستخدمها في الرياضيات، مما يعني أنهم اسم بسيط لتمثيل البيانات التي نريد الرجوع إليها. وتختلف متغيرات الحاسوب عن المتغيرات الرياضية من حيث أنها تستطيع تخزين قيم مختلفة في أوقات مختلفة.
-نحن نطلب من JavaScript إنشاء أو تعلن متغير عن طريق وضع الكلمة `var` أمامه، مثل ذلك:
+نطلب من JavaScript إنشاء أو أعلان متغير عن طريق وضع الكلمة `var` أمامه، مثل ذلك:
```js
var ourName;
```
-هذا ينشئ متغير يسمى `ourName`. في JavaScript تنهي التعبيرات باستخدام الفاصلة المنقوطة (;). أسماء المتغيرات يمكن أن تتكون من أرقام وحروف و `$` أو `_`، ولكن قد لا تحتوي على مسافات أو تبدأ برقم.
+هذا ينشئ متغير يسمى `ourName`. في JavaScript, تنهي التعبيرات باستخدام الفاصلة المنقوطة (;). يمكن أن تتكون أسماء المتغيرات من أرقام وحروف و `$` أو `_`، ولكن قد لا تحتوي على مسافات أو تبدأ برقم.
# --instructions--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables.md
index 7897e7bf9d5..94856f2d23b 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables.md
@@ -1,6 +1,6 @@
---
id: bd7123c9c444eddfaeb5bdef
-title: إعلان متغيرات المقاطع نصية (Declare String Variables)
+title: إعلان متغيرات المقاطع النصية
challengeType: 1
videoUrl: 'https://scrimba.com/c/c2QvWU6'
forumTopicId: 17557
@@ -21,15 +21,15 @@ var myName;
var myName = "your name";
```
-`"your name"` يسمي مقطع حرفي. المقطع النصي أو مقطع هي مقطع تتكون من رمز أو أكثر، مرفقين في علامات اقتباس (Quotes) مفردة أو مزدوجة.
+يسمي`"your name"` المقطع موضوعي. يتكون المقطع الموضوعي أو المقطع النصي من رمز أو رموز، مرفقين في علامات اقتباس (quotes) مفردة أو مزدوجة.
# --instructions--
-إنشاء متغيرين مقطعين جديدين: `myFirstName` و `myLastName` وعيين قيم الاسم الأول والاسم الأخير على التوالي.
+إنشاء متغيرين مقطعين جديدين: وعين `myFirstName` و `myLastName` بقيم اسمك والاسم عائلتك على التوالي.
# --hints--
-يجب أن يحتوي مقطع `myFirstName` على حرف واحد في الأقل.
+يجب أن يحتوي مقطع `myFirstName` على رمز واحد في الأقل.
```js
assert(
@@ -47,7 +47,7 @@ assert(
);
```
-يجب أن يحتوي مقطع `myLastName` على حرف واحد في الأقل.
+يجب أن يحتوي مقطع `myLastName` على رمز واحد في الأقل.
```js
assert(
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object.md
index 985e3c80dde..1a4f25f7689 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object.md
@@ -42,7 +42,7 @@ delete ourDog.bark;
# --instructions--
-احذف خاصية `tails` من `myDog`. يمكنك استخدام النقطة (dot) أو الأقواس المربعة (bracket notation).
+احذف خاصية `tails` من `myDog`. يمكنك استخدام النقطة (dot) أو علامات الأقواس (bracket notation).
# --hints--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md
index 53a1021b42f..f327967b92a 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md
@@ -1,6 +1,6 @@
---
id: 56533eb9ac21ba0edf2244b6
-title: تسلسلات الهروب في المقاطع (Escape Sequences in Strings)
+title: تسلسلات الإخراج في المقاطع النصية
challengeType: 1
videoUrl: 'https://scrimba.com/c/cvmqRh6'
forumTopicId: 17567
@@ -9,26 +9,26 @@ dashedName: escape-sequences-in-strings
# --description--
-الاقتباسات (Quotes) ليست الرموز الوحيدة التي يمكن أن تكتب باحتياليه داخل المقطع (string). وهناك سببان لاستخدام رموز احتيالية (escaping characters):
+الاقتباسات (Quotes) ليست الرموز الوحيدة التي يمكن أن تكتب مخرَّجة داخل المقطع النصي (string). وهناك سببان لاستخدام رموز احتيالية (escaping characters):
1. للسماح لك باستخدام الرموز التي قد لا تتمكن من استخدامها، مثل سطر جديد (newline).
-2. للسماح لك بتمثيل الاقتباسات (Quotes) متعددة في مقطع دون أن يسيء JavaScript فهم ما تعنيه.
+2. للسماح لك بتمثيل الاقتباسات (Quotes) متعددة في مقطع نصي دون أن يسيء JavaScript فهم ما تعنيه.
وقد تعلمنا ذلك في التحدي السابق.
-*لاحظ أن يجب أن تكون الخط المائل (backslash) نفسه أحتيالي (escaped) ليتم عرضها كخط مائل backslash.*
+*لاحظ أن يجب أن يكون الخط المائل (backslash) نفسه يخرَّج (escaped) ليتم عرضه كخط مائل backslash.*
# --instructions--
-عيّن الأسطر الثلاثة التالية من النص في المتغير `myStr` الوحيد باستخدام تسلسل احتيالي (escape sequences).
+عيّن الأسطر الثلاثة التالية من النص في المتغير `myStr` الوحيد باستخدام تسلسل التخريج (escape sequences).
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or `![]()
`, but some can also be used without the closing forward slash such as `
` or `![]()
`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+
+HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+
+Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+
+# --question--
+
+## --assignment--
+
+Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-)
+
+## --text--
+
+What are HTML tags?
+
+## --answers--
+
+HTML tags tell the browser what content an element contains.
+
+---
+
+HTML tags tell the browser when to load its content.
+
+---
+
+HTML tags tell the browser what content the next element contains.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md
new file mode 100644
index 00000000000..9e8720616fb
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md
@@ -0,0 +1,50 @@
+---
+id: 637f4e1672c65bc8e73dfe1f
+videoId: LGQuIIv2RVA
+title: Elements and Tags Question B
+challengeType: 15
+dashedName: elements-and-tags-question-b
+---
+
+# --description--
+
+Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+
+Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or `![]()
`, but some can also be used without the closing forward slash such as `
` or `![]()
`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+
+HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+
+Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+
+# --question--
+
+## --text--
+
+What are the three parts of most HTML elements?
+
+## --answers--
+
+An opening tag, self closing tag, and content.
+
+---
+
+An opening tag, closing tag, and content.
+
+---
+
+An opening tag, closing tag, and attribute.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md
new file mode 100644
index 00000000000..d563ebf0ac3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md
@@ -0,0 +1,55 @@
+---
+id: 637f4e1c72c65bc8e73dfe20
+videoId: V8UAEoOvqFg
+title: HTML Boilerplate Question A
+challengeType: 15
+dashedName: html-boilerplate-question-a
+---
+
+# --description--
+
+To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+
+Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+
+You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+
+To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+
+It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems.
+
+## The DOCTYPE
+
+Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``.
+
+The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+
+```html
+
+```
+
+However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``.
+
+Open the `index.html` file created earlier in your text editor and add `` to the very first line.
+
+# --question--
+## --text--
+
+What is the purpose of the `DOCTYPE` declaration?
+
+## --answers--
+
+It tells the browser which version of HTML to use to render the document.
+
+---
+
+It tells the browser that this document uses JavaScript.
+
+---
+
+It tells the browser the title of the document.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md
new file mode 100644
index 00000000000..7a528432239
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md
@@ -0,0 +1,47 @@
+---
+id: 637f4e2872c65bc8e73dfe21
+videoId: V8UAEoOvqFg
+title: HTML Boilerplate Question B
+challengeType: 15
+dashedName: html-boilerplate-question-b
+---
+
+# --description--
+
+After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+
+This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+
+Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so:
+
+```html
+
+
+
+```
+
+## What is the lang attribute?
+`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+
+# --question--
+
+## --text--
+
+What is the `html` element?
+
+## --answers--
+
+It is the root element in the document and tells the browser which version of HTML it should use.
+
+---
+
+It is the root element in the document and all other elements should descend from it.
+
+---
+
+It is the root element in the document and all other elements should come after it.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md
new file mode 100644
index 00000000000..76ceb2841e5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md
@@ -0,0 +1,66 @@
+---
+id: 637f4e2f72c65bc8e73dfe22
+videoId: LGQuIIv2RVA
+title: HTML Boilerplate Question C
+challengeType: 15
+dashedName: html-boilerplate-question-c
+---
+
+# --description--
+
+The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage.
+
+## The Charset Meta Element
+You should always have the `meta` tag for the charset encoding of the webpage in the head element: ``.
+
+Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+
+## Title Element
+Another element you should always include in the head of an HTML document is the `title` element:
+
+```html
+My First Webpage
+```
+
+The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+
+If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+
+There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+
+Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag:
+
+
+```html
+
+
+
+
+
+ My First Webpage
+
+
+```
+
+# --question--
+
+## --text--
+
+What is the purpose of the `head` element?
+
+## --answers--
+
+The `head` element is used to display all elements that are displayed on the webpage.
+
+---
+
+The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+
+---
+
+The `head` element is used to display the header content on top of the webpage.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md
new file mode 100644
index 00000000000..302b6a95d44
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e3672c65bc8e73dfe23
+videoId: V8UAEoOvqFg
+title: HTML Boilerplate Question D
+challengeType: 15
+dashedName: html-boilerplate-question-d
+---
+
+# --description--
+
+The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+
+To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+
+# --question--
+
+## --assignment--
+
+Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+
+---
+
+Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+
+---
+
+Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+
+## --text--
+
+What is the purpose of the `body` element?
+
+## --answers--
+
+This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+
+---
+
+This is where you tell the browser how to render the webpage correctly.
+
+---
+
+This is where all content will be displayed on the page such images, text, and links.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md
new file mode 100644
index 00000000000..aa20f137e89
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md
@@ -0,0 +1,42 @@
+---
+id: 6374f208de18c50e48ba767b
+videoId: LGQuIIv2RVA
+title: Introduction To HTML and CSS Question A
+challengeType: 15
+dashedName: introduction-to-html-and-css-question-a
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --assignment--
+
+Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript.
+
+## --text--
+
+Which of the following statements is true?
+
+## --answers--
+
+CSS is used to create the basic structure of a webpage, and HTML is used to add style.
+
+---
+
+HTML is used to create the basic structure of a webpage, and CSS is used to add style.
+
+---
+
+HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure.
+
+
+## --video-solution--
+
+2
+
+
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md
new file mode 100644
index 00000000000..cd9cf900330
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md
@@ -0,0 +1,37 @@
+---
+id: 6376327e2724a688c04636e3
+videoId: LGQuIIv2RVA
+title: Introduction To HTML and CSS Question B
+challengeType: 15
+dashedName: introduction-to-html-and-css-question-b
+---
+
+# --description--
+
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --text--
+
+Between HTML and CSS, which should you use to add paragraphs of text on a webpage?
+
+## --answers--
+
+CSS
+
+---
+
+JavaScript
+
+---
+
+HTML
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md
new file mode 100644
index 00000000000..eb759394680
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md
@@ -0,0 +1,34 @@
+---
+id: 637633162724a688c04636e4
+videoId: LGQuIIv2RVA
+title: Introduction To HTML and CSS Question C
+challengeType: 15
+dashedName: introduction-to-html-and-css-question-c
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+# --question--
+
+## --text--
+
+Between HTML and CSS, which should you use to change the font and background color of a button?
+
+## --answers--
+
+You should use CSS to change the background color and font of a button.
+
+---
+
+You should use JavaScript to change the background color and font of a button.
+
+---
+
+You should use HTML to change the background color and font of a button.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md
new file mode 100644
index 00000000000..9e9ee049b75
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md
@@ -0,0 +1,35 @@
+---
+id: 637633672724a688c04636e5
+videoId: LGQuIIv2RVA
+title: Introduction To HTML and CSS Question D
+challengeType: 15
+dashedName: introduction-to-html-and-css-question-d
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --text--
+
+What is the difference between HTML, CSS, and JavaScript?
+
+## --answers--
+
+HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage.
+
+---
+
+CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage.
+
+---
+
+JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md
new file mode 100644
index 00000000000..b4d237448f3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md
@@ -0,0 +1,66 @@
+---
+id: 637f704072c65bc8e73dfe36
+videoId: tsEQgGjSmkM
+title: Links and Images Question A
+challengeType: 15
+dashedName: links-and-images-question-a
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `
| الكود | الناتج |
|---|---|
\' | single quote |
\" | double quote |
\\ | backslash |
\n | newline |
\t | tab |
\r | carriage return |
\b | word boundary |
\f | form feed |
FirstLine-سوف تحتاج إلى استخدام تسلسل احتيالي لإدراج الرموز الخاصة (special characters) بشكل صحيح. ستحتاج أيضًا إلى اتباع التباعد كما هو موضح أعلاه، دون مسافات بين التسلسل الاحتيالي escape sequences أو الكلمات. +سوف تحتاج إلى استخدام تسلسل تخريج لإدراج الرموز الخاصة (special characters) بشكل صحيح. ستحتاج أيضًا إلى اتباع التباعد كما هو موضح أعلاه، دون مسافات بين تسلسل التخريج escape sequences أو الكلمات. -**ملاحظة:** يتم الحصول على التباعد (indentation) في `SecondLine` باستخدام رمز التحايل الشريط (tab escape character) وليس المسافة الفارغة (space). +**ملاحظة:** يتم الحصول على التباعد (indentation) في `SecondLine` باستخدام رمز التخريح الشريط (tab escape character) وليس المسافة الفارغة (space). # --hints-- diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords.md index e45b50e28cc..38ee1bca4fb 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords.md @@ -1,6 +1,6 @@ --- id: 587d7b87367417b2b2512b3f -title: استكشاف الاختلافات بين كلمتين var و let +title: استكشاف الاختلافات بين المصطلحين var و let challengeType: 1 forumTopicId: 301202 dashedName: explore-differences-between-the-var-and-let-keywords @@ -8,7 +8,7 @@ dashedName: explore-differences-between-the-var-and-let-keywords # --description-- -واحدة من أكبر مشكلات مع إعلان المتغيرات باستخدام كلمة `var` هي أنه يمكنك بسهولة تغيير الإعلانات للمتغيرات السابقة: +واحدة من أكبر المشكلات في إعلان المتغيرات بكلمة `var` هي أنه يمكنك بسهولة إلغاء الإعلانات السابقة للمتغيرات: ```js var camper = "James"; @@ -16,11 +16,11 @@ var camper = "David"; console.log(camper); ``` -في الكود أعلاه، أعلن متغير `camper` بقيمة `James` في الأصل، وغير بعد ذلك ليصبح `David`. ثم يعرض وحدة التحكم المقطع (string) الآتي `David`. +في الكود أعلاه، أعطى متغير `camper` قيمة `James` في الإعلان الأصلي، ثم ألغيَ عند إعادة إعلانه ليصبح `David`. ولذلك يعرض الكونسول (console) المقطع النصي (string) الآتي `David`. -في تطبيق صغير، قد لا تواجه هذا النوع من المشاكل. لكن كلما أصبح الكود الخاص بك أكبر، قد تغير المتغير عن طريق الخطأ الذي لم تكن تنوي تغييره. ولأذن هذا السلوك لا يوقع خطأ، يصبح البحث عن الأخطاء وإصلاحها أكثر صعوبة. +في تطبيق صغير، قد لا تواجه هذه المشكلة. لكن إذا أصبح الكود الخاص بك أكبر، قد تلغي متغير دون وعي. ولأن هذا السلوك لا يوقع خطأ، يصبح البحث عن الأخطاء وإصلاحها أكثر صعوبة. -تم تقديم كلمة `let` في ES6، وهو تحديث رئيس JavaScript، لحل هذه المشكلة المحتملة باستخدام `var`. ستتعرف إلى ميزات ES6 الأخرى في التحديات اللاحقة. +تم تقديم كلمة `let` في ES6، وهو تحديث رئيسي في الجافاسكريبت (JavaScript)، لحل هذه المشكلة المحتملة باستخدام `var`. ستتعرف على ميزات ES6 الأخرى في التحديات اللاحقة. إذا استبدلت `var` إلى `let` في الكود أعلاه، فإنه يؤدي إلى خطأ: @@ -29,13 +29,13 @@ let camper = "James"; let camper = "David"; ``` -يمكن رؤية الخطأ في وحدة تحكم المتصفح الخاص بك. +يمكن رؤية الخطأ في الكونسول (console) المتصفح الخاص بك. لذلك على خلاف `var`، عندما تستعمل `let`، يمكن إعلان متغير بنفس الاسم مرة واحدة فقط. # --instructions-- -حديث الكود بحيث يستخدم فقط كلمة `let`. +حدِّث الكود بحيث يستخدم فقط كلمة `let`. # --hints-- @@ -45,13 +45,13 @@ let camper = "David"; assert.notMatch(code, /var/g); ``` -يجب أن تساوي `catName` المقطع (string) الآتي `Oliver`. +يجب أن تساوي `catName` المقطع النصي الآتي `Oliver`. ```js assert.equal(catName, 'Oliver'); ``` -يجب أن تساوي `catSound` المقطع (string) الآتي `Meow!` +يجب أن تساوي `catSound` المقطع النصي الآتي `Meow!` ```js assert.equal(catSound, 'Meow!'); diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md index 141ba2afc0c..b2faae6839a 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md @@ -1,6 +1,6 @@ --- id: bd7123c9c448eddfaeb5bdef -title: العثور على طول مقطع نصي (Find the Length of a String) +title: العثور عن عدد الرموز أو الطول لمقطع نصي challengeType: 1 videoUrl: 'https://scrimba.com/c/cvmqEAd' forumTopicId: 18182 @@ -9,7 +9,7 @@ dashedName: find-the-length-of-a-string # --description-- -يمكنك العثور على قيمة طول `String` بكتابة `.length` بعد متغير المقطع (string) أو المقطع النصي (string literal). +يمكنك العثور على الطول أو عدد الرموز في `String` بكتابة `.length` بعد متغير المقطع النصي أو بعد مقطع حرفي (string literal). ```js console.log("Alan Peter".length); @@ -17,11 +17,11 @@ console.log("Alan Peter".length); سوف يتم عرض القيمة `10` في وحدة التحكم. لاحظ أن رمز المسافة بين "Alan" و "Peter" يتم حسابه أيضا. -على سبيل المثال، إذا أنشئت متغير `const firstName = "Ada"`، يمكننا معرفة طول المقطع (string) الآتي `Ada` باستخدام `firstName.length`. +على سبيل المثال، إذا أنشئت متغير `const firstName = "Ada"`، يمكننا معرفة طول المقطع النصي (string) الآتي `Ada` باستخدام `firstName.length`. # --instructions-- -استخدم خاصية `.length` لتعيين `lastNameLength` إلى عدد الأحرف في `lastName`. +استخدم خاصية `.length` لتعيين `lastNameLength` إلى عدد الرموز في `lastName`. # --hints-- diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-scope-and-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-scope-and-functions.md index 922ffb963ce..d9ddc87a327 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-scope-and-functions.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-scope-and-functions.md @@ -9,9 +9,9 @@ dashedName: global-scope-and-functions # --description-- -في JavaScript، يشير النطاق إلى رؤية المتغيرات. يكون إلى المتغيرات التي تم تعريفها خارج الوظيفة نطاق يسمي شامل. وهذا يعني أنه يمكن رؤيتها في كل مكان في التعليمات البرمجية JavaScript الخاص بك. +في JavaScript، يشير النطاق إلى رؤية المتغيرات. يكون إلى المتغيرات التي تم تعريفها خارج الوظيفة مجال شامل (Global scope). وهذا يعني أنه يمكن رؤيتها في كل مكان في التعليمات البرمجية JavaScript الخاص بك. -تعلن المتغيرات دون استخدام المصطلحات الآتية `let` أو `const` وتنشئ تلقائيًا في نطاق `global`. هذا يمكن أن يؤدي إلى عواقب غير مقصودة في مكان آخر من التعليمات البرمجية الخاص بك أو عند تشغيل الوظيفة مرة أخرى. يجب عليك دائماً إعلان متغيراتك باستخدام `let` أو `const`. +تعلن المتغيرات دون استخدام المصطلحات الآتية `let` أو `const` وتنشئ تلقائيًا في مجال شامل `global`. هذا يمكن أن يؤدي إلى عواقب غير مقصودة في مكان آخر من التعليمات البرمجية الخاص بك أو عند تشغيل الوظيفة مرة أخرى. يجب عليك دائماً إعلان متغيراتك باستخدام `let` أو `const`. # --instructions-- diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md index efc9557e8b7..b62dab7e6d0 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md @@ -1,6 +1,6 @@ --- id: 56533eb9ac21ba0edf2244c0 -title: النطاق العام مقابل النطاق المحلي في الوظائف (Global vs. Local Scope in Functions) +title: المجال الشامل مقابل النطاق المحدد في الوظائف challengeType: 1 videoUrl: 'https://scrimba.com/c/c2QwKH2' forumTopicId: 18194 @@ -9,7 +9,7 @@ dashedName: global-vs--local-scope-in-functions # --description-- -من الممكن الحصول على متغيرات محالية (Local) و عامة (Global) بنفس الاسم. عندما تقوم ذلك، يكون المتغير المحالي (local) له الأسبقية على المتغير العام (global). +من الممكن الحصول على متغيرات محدودة (local) و شاملة (global) بنفس الاسم. عندما تقوم ذلك، يكون المتغير المحدود (local) له الأسبقية على المتغير الشامل (global). وفي هذا المثال: @@ -22,15 +22,15 @@ function myFun() { } ``` -سوف تنتج الوظيفة `myFun` السلسلة `Head` لأن النسخة المحالية (local) من المتغير موجودة. +سوف تنتج الوظيفة `myFun` المقطع النصي `Head` لأن النسخة المحدودة (local) من المتغير موجودة. # --instructions-- -أضف متغير محالي (local) إلى وظيفة `myOutfit` لتجاوز قيمة `outerWear` بالمقطع `sweater`. +أضف متغير محدود (local) إلى وظيفة `myOutfit` لتجاوز قيمة `outerWear` بالمقطع النصي `sweater`. # --hints-- -لا يجب عليك تغيير قيمة العام (global) الآتي `outerWear`. +لا يجب عليك تغيير قيمة المتغير الشامل (global) الآتي `outerWear`. ```js assert(outerWear === 'T-Shirt'); diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md index 7400e13c985..6a1b80fc4f9 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md @@ -1,6 +1,6 @@ --- id: 56533eb9ac21ba0edf2244a9 -title: تهيئة المتغيرات باستخدام مشغل التعيين (Initializing Variables with the Assignment Operator) +title: تهيئة المتغيرات باستخدام مشغل التعيين challengeType: 1 videoUrl: 'https://scrimba.com/c/cWJ4Bfb' forumTopicId: 301171 @@ -19,7 +19,7 @@ var myVar = 0; # --instructions-- -عرّف متغير `a` باستخدام `var` و عيّن له قيمة `9`. +أعلن متغير `a` باستخدام `var` و هيئ له قيمة `9`. # --hints-- diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md index bce01c3e9ef..6f9323f4a62 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md @@ -15,9 +15,9 @@ dashedName: iterate-with-javascript-for-loops تعريف حلَقات For مع ثلاث عبارات اختيارية تفصل بينها الفاصلات المنقوطة (semicolons): -`for (a; b; c)`، حيث ان `a` هي عبارة التهيئة، `b` هي عبارة الشرط، و `c` هي العبارة النهائية. +`for (a; b; c)`، حيث ان `a` هي تعبير التهيئة، `b` هي تعبير الشرط، و `c` هي العبارة النهائية. -يتم تنفيذ عبارة التهيئة مرة واحدة فقط قبل بَدْء الحلقة. يستخدم عادة لتحديد وإعداد متغير الحلقة الخاص بك. +يتم تنفيذ عبارة التهيئة مرة واحدة فقط قبل بَدْء الحلقة. يستخدم عادة لإعلان وإعداد متغير الحلقة الخاص بك. يتم تقييم عبارة الشرط في بداية كل حلقة وسوف يستمر مادام أنه يقيّم إلى `true`. عندما يكون الشرط `false` في بداية الحلقة سوف تتوقف الحلقة عن التنفيذ. هذا يعني أن إذا بدأ الشرط كزائف (false)، لن تنفذ الحلقة (loop) الخاصة بك أبدا. diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.md index 7cfaff9aad8..e5a2570a887 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.md @@ -9,9 +9,9 @@ dashedName: local-scope-and-functions # --description-- -المتغيرات التي المعلنا داخل وظيفة (function)، وكذلك الوسائط (parameters) للوظيفة لديها نطاق و يكون محلي (local). وهذا يعني أنها لا تبد مرئية إلا في إطار الوظيفة. +المتغيرات التي أعلنة داخل وظيفة (function)، وكذلك الوسائط (parameters) للوظيفة لديها مجال محدود (local). وهذا يعني أنها لا تبد مرئية إلا في إطار الوظيفة. -هذه وظيفة `myTest` مع متغير محلي يسمى `loc`. +هذه وظيفة `myTest` مع متغير محدود يسمى `loc`. ```js function myTest() { @@ -27,13 +27,13 @@ console.log(loc); # --instructions-- -يحتوي المحرر على اثنين `console.log` لمساعدتك على رؤية ما يحدث. تحقق من وحدة التحكم خلال كتابة الكود لترى كيف يتغير. اعلن متغير محلي اسمه `myVar` داخل `myLocalScope` وفعّل الاختبارات. +يحتوي المحرر على اثنين `console.log` لمساعدتك على رؤية ما يحدث. تحقق من وحدة التحكم خلال كتابة الكود لترى كيف يتغير. اعلن متغير محدود اسمه `myVar` داخل `myLocalScope` وفعّل الاختبارات. **ملاحظة:** وحدة التحكم ستظل تعرض `ReferenceError: myVar is not defined`، ولكن هذا لن يتسبب في فشل الاختبارات. # --hints-- -لا ينبغي أن يحتوي الكود على متغير عام يدعي `myVar`. +لا ينبغي أن يحتوي الكود على متغير شامل يدعي `myVar`. ```js function declared() { @@ -43,7 +43,7 @@ function declared() { assert.throws(declared, ReferenceError); ``` -يجب عليك إضافة متغير محلي يدعي `myVar`. +يجب عليك إضافة متغير محدود يدعي `myVar`. ```js assert( diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.md index dfa6cf54e9b..59938a84f1b 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.md @@ -9,7 +9,7 @@ dashedName: modify-array-data-with-indexes # --description-- -على عكس المقاطع، عناصر القائمة هي قابلة للتغيير ويمكن تغييرها بحرية، حتى لو تم تعريف القائمة بواسطة `const`. +على عكس المقاطع النصية، عناصر القائمة هي قابلة للتغيير (mutable) ويمكن تغييرها بحرية، حتى لو تم تعريف القائمة بواسطة `const`. **مثال** diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.md index fc86bbac9ec..ab7db64af61 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.md @@ -1,6 +1,6 @@ --- id: 56533eb9ac21ba0edf2244b4 -title: اقتباس مقاطع بعلامات اقتباس منفردة (Quoting Strings with Single Quotes) +title: اقتباس مقاطع بعلامات اقتباس منفردة challengeType: 1 videoUrl: 'https://scrimba.com/c/cbQmnhM' forumTopicId: 18260 @@ -31,15 +31,15 @@ const badStr = 'Finn responds, "Let's go!"'; هنا `badStr` سوف تسبب بخطأ. -في goodStr أعلاه، يمكنك استخدام أي من علامات الاقتباس بأمان باستخدام الخط المائل (backslash) الآتية `\` كرمز متحايل (escape character). +في goodStr أعلاه، يمكنك استخدام أي من علامات الاقتباس بأمان باستخدام الخط المائل (backslash) الآتية `\` كرمز التخريج (escape character). **ملاحظة:** يجب عدم الخلط بين الخط المائل (blackslash) الآتية `\` والخط المائل للأمام (forward slash) الآتية `/`. إنهم لا يفعلون الشيء نفسه. # --instructions-- -غيّر المقطع المقدم إلى مقطع مع اقتباسات فردية في البداية والنهاية وبدون رموز متحايلة (escape characters). +غيّر المقطع المقدم إلى مقطع مع اقتباسات فردية في البداية والنهاية وبدون رموز التخريج (escape characters). -الآن، العلامة `` في المقطع تستخدم اقتباسات مزدوجة في كل مكان. سوف تحتاج إلى تغيير الاقتباسات الخارجية إلى اقتباسات فردية حتى تتمكن من إزالة الرموز متحايلة (escape characters). +الآن، العلامة `` في المقطع تستخدم اقتباسات مزدوجة في كل مكان. سوف تحتاج إلى تغيير الاقتباسات الخارجية إلى اقتباسات فردية حتى تتمكن من إزالة رموز التخريج (escape characters). # --hints-- diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md index d305f50923e..5c5aa16eb7c 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md @@ -8,9 +8,9 @@ dashedName: record-collection # --description-- -لديك object literal يمثل جزءا من مجموعة سجلات موسيقية الخاصة بك. يحتوي كل سجل على رقم معرف فريد يعدّ الهُوِيَّة والعديد من الخصائص الأخرى. ليست كل السجلات لديها معلومات كاملة. +لديك حروف الكائن التي تمثل جزء من مجموعة سجلاتك الموسيقية. يحتوي كل سجل على رقم معرف فريد يعدّ الهُوِيَّة والعديد من الخصائص الأخرى. ليست كل السجلات لديها معلومات كاملة. -أنت تبدأ بالوظيفة `updateRecords` التي تأخذ object literal يدعي `records`، يحتوي على مجموعة ألبومات موسيقية. و `id`, و `prop` (مثل `artist` أو `tracks`)، و `value`. أكمل الوظيفة باستخدام القواعد أدناه لتعديل الكائن الممرر إلى الوظيفة. +أنت تبدأ بالوظيفة `updateRecords` التي تأخذ الكائن حرفي يدعي `records`، يحتوي على مجموعة ألبومات موسيقية. و `id`, و `prop` (مثل `artist` أو `tracks`)، و `value`. أكمل الوظيفة باستخدام القواعد أدناه لتعديل الكائن الممرر إلى الوظيفة. - الوظيفة الخاص بك يجب أن يرجع دائما كائن مجموعة السجلات بِرُمَّته. - إذا كان `prop` ليس `tracks` و `value` ليس مقطع فارغ، حديث أو تعيين `prop` السجلات إلى `value`. diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md index 83f0157139c..7aec83fa65f 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md @@ -29,7 +29,7 @@ myFun(); عدّل الوظيفة `abTest` بحيث إذا كان `a` أو `b` أقل من `0` ستنتج الوظيفة قيمة `undefined` فوراً. **تلميح** -تذكر أن تكون
\SecondLine
ThirdLine
undefined كلمة وليست مقتطع.
+تذكر أن تكون undefined مصطلح وليست مقطع نصي.
# --hints--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md
index d81cc2da545..6daec49af61 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md
@@ -36,25 +36,25 @@ switch (lowercaseLetter) {
# --hints--
-`caseInSwitch(1)` يجب أن يكون له قيمة السلسلة (string) النصية `alpha`
+`caseInSwitch(1)` يجب أن يكون له قيمة المقطع (string) النصي `alpha`
```js
assert(caseInSwitch(1) === 'alpha');
```
-`caseInSwitch(2)` يجب أن يكون له قيمة السلسلة (string) النصية `beta`
+`caseInSwitch(2)` يجب أن يكون له قيمة المقطع (string) النصي `beta`
```js
assert(caseInSwitch(2) === 'beta');
```
-`caseInSwitch(3)` يجب أن يكون له قيمة السلسلة (string) النصية `gamma`
+`caseInSwitch(3)` يجب أن يكون له قيمة المقطع (string) النصي `gamma`
```js
assert(caseInSwitch(3) === 'gamma');
```
-`caseInSwitch(4)` يجب أن يكون له قيمة السلسلة (string) النصية `delta`
+`caseInSwitch(4)` يجب أن يكون له قيمة المقطع (string) النصي `delta`
```js
assert(caseInSwitch(4) === 'delta');
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.md
index e0180d01f20..2502ed5accb 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.md
@@ -1,6 +1,6 @@
---
id: 56533eb9ac21ba0edf2244a8
-title: تخزين القيم مع مشغل التعيين (Storing Values with the Assignment Operator)
+title: تخزين القيم مع مشغل التعيين (=)
challengeType: 1
videoUrl: 'https://scrimba.com/c/cEanysE'
forumTopicId: 18310
@@ -17,7 +17,7 @@ myVariable = 5;
هذا يعين `Number` بقيمة `5` إلى `myVariable`.
-إذا كانت هناك أي حسابات إلى يمين مشغل `=`، يتم أداء هذه حسابات قبل تعيين القيمة إلى المتغير الموجود على يسار المشغل.
+إذا كانت هناك أي حسابات إلى يمين مشغل `=`، يتم أداء هذه الحسابات قبل تعيين القيمة إلى المتغير الموجود على يسار المشغل.
```js
var myVar;
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md
index 9614b3609db..5656103ee81 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md
@@ -1,6 +1,6 @@
---
id: cf1111c1c11feddfaeb4bdef
-title: طرح رقم من الآخر باستخدام JavaScript
+title: طرح رَقَم من رَقَم آخر باستخدام JavaScript
challengeType: 1
videoUrl: 'https://scrimba.com/c/cP3yQtk'
forumTopicId: 18314
@@ -9,7 +9,7 @@ dashedName: subtract-one-number-from-another-with-javascript
# --description--
-يمكننا أيضا أن نطرح رقما من الآخر.
+يمكننا أيضا أن نطرح رقما من رقما آخر.
يستخدم JavaScript رمز `-` للطرح.
@@ -26,13 +26,13 @@ const myVar = 12 - 6;
# --hints--
-يجب أن يساوي `difference` قيمة 12.
+يجب أن يساوى المتغير `difference` لقيمة `12`.
```js
assert(difference === 12);
```
-يجب عليك طرح رَقَم واحد فقط من 45.
+يجب أن تطرح رَقَم واحد فقط من `45`.
```js
assert(/difference=45-33;?/.test(__helpers.removeWhiteSpace(code)));
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md
index 5df0a28bef3..b3220d4f94d 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md
@@ -1,6 +1,6 @@
---
id: bd7123c9c441eddfaeb5bdef
-title: فهم الحالات المنطقية (Understanding Boolean Values)
+title: فهم الحالات المنطقية
challengeType: 1
videoUrl: 'https://scrimba.com/c/c9Me8t4'
forumTopicId: 301176
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.md
index 1ba75aab9cd..29ec1dd4870 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.md
@@ -1,6 +1,6 @@
---
id: 56533eb9ac21ba0edf2244ab
-title: فهم حساسية الحالة الحروف في المتغيرات (Understanding Case Sensitivity in Variables)
+title: فهم حساسية الحالة الحروف في المتغيرات
challengeType: 1
videoUrl: 'https://scrimba.com/c/cd6GDcD'
forumTopicId: 18334
@@ -39,7 +39,7 @@ var thisVariableNameIsSoLong;
assert(typeof studlyCapVar !== 'undefined' && studlyCapVar === 10);
```
-يجب أن يتم تعريف`properCamelCase` وأن تكون له قيمة `A String` بنوع مقطع.
+يجب أن يتم تعريف`properCamelCase` وأن تكون له قيمة المقطع النصي `A String`.
```js
assert(
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.md
index bb19d74f0ba..0c6866e2ffe 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.md
@@ -1,6 +1,6 @@
---
id: 598e8944f009e646fc236146
-title: فهم القيم غير المحددة المرتجعة من الوظيفة (Understanding Undefined Value returned from a Function)
+title: فهم القيم غير المحددة المرتجعة من الوظيفة
challengeType: 1
videoUrl: 'https://scrimba.com/c/ce2p7cL'
forumTopicId: 301177
@@ -23,7 +23,7 @@ function addSum(num) {
addSum(3);
```
-تكون `addSum` وظيفة دون `return`. سيغير وظيفة المتغير `sum` العالمي الآتي, ولكن تكون القيمة المرتجعة للوظيفة `undefined`.
+تكون `addSum` وظيفة دون `return`. ستغير الوظيفة المتغير الشامل `sum`، ولكن تكون القيمة المرتجعة للوظيفة `undefined`.
# --instructions--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md
index acc2aeea56c..d29ad8efa70 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md
@@ -1,6 +1,6 @@
---
id: 56533eb9ac21ba0edf2244aa
-title: فهم المتغيرات غير المهيأة (Understanding Uninitialized Variables)
+title: فهم المتغيرات غير المهيأة
challengeType: 1
videoUrl: 'https://scrimba.com/c/cBa2JAL'
forumTopicId: 18335
@@ -9,7 +9,7 @@ dashedName: understanding-uninitialized-variables
# --description--
-عند الإعلان المتغيرات في JavaScript، يكون لها قيمة أولية وهي `undefined`. إذا قمت بعملية رياضية على متغير `undefined` ستكون نتيجتك `NaN` مما يعني "Not a Number" إي "ليس رقما". إذا ربط مقطع مع متغير `undefined`، فستحصل على مقطع بقيمة `undefined`.
+عند إعلان المتغيرات في JavaScript، يكون لها قيمة أولية وهي `undefined`. إذا قمت بعملية رياضية على متغير قيمته `undefined` ستكون نتيجتك `NaN` مما يعني "Not a Number" إي "ليس رقما". إذا ربط مقطع نصي مع متغير `undefined`، فستحصل على مقطع نصي بقيمة `undefined`.
# --instructions--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.md
index 4bd3ae7b170..9c4f3faf517 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.md
@@ -9,7 +9,7 @@ dashedName: updating-object-properties
# --description--
-بعد إنشاء كائن JavaScript، يمكنك تحديث خصائصه في أي وقت كما يمكنك تحديث أي متغير آخر. يمكنك استخدام أي من تدوين النِّقَاط أو تدوين الأقواس المعكوفان (dot or bracket notation).
+بعد إنشاء كائن JavaScript، يمكنك تحديث خصائصه في أي وقت كما يمكنك تحديث أي متغير آخر. يمكنك استخدام أي من رمز النقطة أو علامات الأقواس (dot or bracket notation).
على سبيل المثال، دعونا ننظر إلى `ourDog`:
@@ -26,7 +26,7 @@ const ourDog = {
# --instructions--
-حدث خاصية اسم الكائن `myDog`. غيّر اسمه من `Coder` إلى `Happy Coder`. يمكنك استخدام أي من تدوين النِّقَاط أو تدوين الأقواس المعكوفان (dot or bracket notation).
+حدث خاصية اسم الكائن `myDog`. غيّر اسمه من `Coder` إلى `Happy Coder`. يمكنك استخدام أي من رمز النقطة أو علامات الأقواس (dot or bracket notation).
# --hints--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string.md
index a28608ed664..46e3b43b08e 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string.md
@@ -1,6 +1,6 @@
---
id: bd7123c9c549eddfaeb5bdef
-title: استخدم رمز الاقواس للعثور على اول حرف في مقطع (Use Bracket Notation to Find the First Character in a String)
+title: استخدم علامات الأقواس للعثور على اول حرف في مقطع
challengeType: 1
videoUrl: 'https://scrimba.com/c/ca8JwhW'
forumTopicId: 18341
@@ -9,7 +9,7 @@ dashedName: use-bracket-notation-to-find-the-first-character-in-a-string
# --description--
-القوسان المعكوفان هي طريقة للحصول على رمز في ترتيب معين داخل المقطع.
+القوسان المعكوفان هي طريقة للحصول على رمز في ترتيب معين داخل مقطع نصي.
معظم لغات البرمجة الحديثة، مثل JavaScript، لا تبدأ في العد من 1 كما يفعل البشر. إنهم يبدؤون عند الصفر. يشار إلى هذا بالترتيب مبني على الصفر.
@@ -38,7 +38,7 @@ const firstLetter = firstName[0];
assert(firstLetterOfLastName === 'L');
```
-يجب عليك استخدام رمز الأقواس المعكوفان.
+يجب عليك استخدام علامات الأقواس.
```js
assert(code.match(/firstLetterOfLastName\s*=\s*lastName\s*\[\s*\d\s*\]/));
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-last-character-in-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-last-character-in-a-string.md
index 12d33734835..229a4c6c1f3 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-last-character-in-a-string.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-last-character-in-a-string.md
@@ -1,6 +1,6 @@
---
id: bd7123c9c451eddfaeb5bdef
-title: استخدم رمز آلأقواس (Bracket Notation) للعثور على آخر حرف في سلسلة (String)
+title: استخدم علامات الأقواس (Bracket Notation) للعثور على آخر حرف في مقطع نصي (String)
challengeType: 1
videoUrl: 'https://scrimba.com/c/cBZQGcv'
forumTopicId: 18342
@@ -9,7 +9,7 @@ dashedName: use-bracket-notation-to-find-the-last-character-in-a-string
# --description--
-للحصول على آخر حرف من سلسلة (String)، يمكنك طرح واحد من طول السلسلة (String).
+للحصول على آخر حرف من المقطع النصي (String)، يمكنك طرح واحد من طوله.
على سبيل المثال، إذا `const firstName = "Ada"`، يمكنك الحصول على قيمة الحرف الأخير من السلسلة باستخدام `firstName[firstName.length - 1]`.
@@ -24,7 +24,7 @@ const lastLetter = firstName[firstName.length - 1];
# --instructions--
-استخدم رمز الأقواس للعثور على الحرف الأخير في المتغير `lastName`.
+استخدم علامات الأقواس للعثور على الحرف الأخير في المتغير `lastName`.
**تلميح:** حاول النظر إلى المثال أعلاه إذا كنت عالق.
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-character-in-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-character-in-a-string.md
index df2d282fa50..2090c7ed513 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-character-in-a-string.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-character-in-a-string.md
@@ -1,6 +1,6 @@
---
id: bd7123c9c450eddfaeb5bdef
-title: استخدم رمز آلأقواس المعكوفان للعثور على حرف معين في مقطع
+title: استخدم علامات الأقواس للعثور على حرف معين في مقطع
challengeType: 1
videoUrl: 'https://scrimba.com/c/cWPVJua'
forumTopicId: 18343
@@ -9,7 +9,7 @@ dashedName: use-bracket-notation-to-find-the-nth-character-in-a-string
# --description--
-يمكنك أيضًا استخدام رمز الأقواس المعكوفان للحصول على الحرف في مواقع أخرى داخل مقطع.
+يمكنك أيضًا استخدام علامات الأقواس للحصول على الحرف في مواقع أخرى داخل مقطع.
تذكر أن أجهزة الكمبيوتر تبدأ في العد في `0`، لذا فإن الحرف الأول هو في الواقع الحرف صفر.
@@ -24,7 +24,7 @@ const secondLetterOfFirstName = firstName[1];
# --instructions--
-دعونا نحاول تعيين `thirdLetterOfLastName` مساوية للحرف الثالث من متغير `lastName` باستخدام رمز آلأقواس المعكوفان.
+دعونا نحاول تعيين `thirdLetterOfLastName` مساوية للحرف الثالث من متغير `lastName` باستخدام علامات الأقواس.
**تلميح:** حاول النظر إلى المثال أعلاه إذا كنت عالق.
@@ -36,7 +36,7 @@ const secondLetterOfFirstName = firstName[1];
assert(thirdLetterOfLastName === 'v');
```
-يجب عليك استخدام رمز آلأقواس المعكوفان.
+يجب عليك استخدام علامات الأقواس.
```js
assert(code.match(/thirdLetterOfLastName\s*=\s*lastName\s*\[\s*\d\s*\]/));
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-to-last-character-in-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-to-last-character-in-a-string.md
index d1054668e31..1c74d73de88 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-to-last-character-in-a-string.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-to-last-character-in-a-string.md
@@ -1,6 +1,6 @@
---
id: bd7123c9c452eddfaeb5bdef
-title: استخدم رمز آلأقواس المعكوفان للعثور على حرف معين قبل الأخر في مقطع
+title: استخدم علامات الأقواس للعثور على رمز معين قبل الأخر في المقطع النصي
challengeType: 1
videoUrl: 'https://scrimba.com/c/cw4vkh9'
forumTopicId: 18344
@@ -24,7 +24,7 @@ const thirdToLastLetter = firstName[firstName.length - 3];
# --instructions--
-استخدم رمز آلأقواس المعكوفان للعثور على الحرف الثاني إلى الأخير في مقطع `lastName`.
+استخدم علامات الأقواس للعثور على الحرف الثاني إلى الأخير في مقطع `lastName`.
**تلميح:** حاول النظر إلى المثال أعلاه إذا كنت عالق.
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.md
index 4253e56fa1a..c092d0dc54d 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.md
@@ -37,7 +37,7 @@ function findGreaterOrEqual(a, b) {
}
```
-ويعدّ من أفضل الممارسات تشكيل متعهدين شرطيين متعددين، بحيث يكون كل شرط على خط منفصل، كما هو مبين أعلاه. استخدام عدة مشغلين مشروطين دون إهدار مناسب قد يجعل من الصعب قراءة التعليمات البرمجية الخاصة بك. على سبيل المثال:
+ويعدّ من أفضل الممارسات تشكيل متعهدين شرطيين متعددين، بحيث يكون كل شرط على خط منفصل، كما هو مبين أعلاه. استخدام عدة مشغلين مشروطين دون إهدار مناسب قد يجعل من الصعب قراءة الكود الخاص بك. على سبيل المثال:
```js
function findGreaterOrEqual(a, b) {
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md
index 73a20dc54bb..83e94e1dbc6 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md
@@ -71,7 +71,7 @@ assert(
);
```
-لا ينبغي استخدام المتغيرات العالمية (Global variables) للتخزين المؤقت القائمة (array).
+لا ينبغي استخدام المتغيرات الشاملة (Global variables) للتخزين المؤقت للقائمة (array).
```js
countdown(1)
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers.md
index 924c8b46b5b..833632939db 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers.md
@@ -56,7 +56,7 @@ assert.deepStrictEqual(rangeOfNumbers(6, 9), [6, 7, 8, 9]);
assert.deepStrictEqual(rangeOfNumbers(4, 4), [4]);
```
-لا ينبغي استخدام المتغيرات العالمية (Global variables) للتخزين المؤقت القائمة (array).
+لا ينبغي استخدام المتغيرات الشاملة (Global variables) للتخزين المؤقت للقائمة (array).
```js
rangeOfNumbers(1, 3)
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.md
index cb9774663ee..d465c870265 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.md
@@ -1,6 +1,6 @@
---
id: 587d7b84367417b2b2512b37
-title: إدراك الاستخدام المختلط لعلامات التنصيص الفردية والزوجية (Catch Mixed Usage of Single and Double Quotes)
+title: إدراك الاستخدام المختلط لعلامات التنصيص الفردية والزوجية
challengeType: 1
forumTopicId: 301188
dashedName: catch-mixed-usage-of-single-and-double-quotes
@@ -10,7 +10,7 @@ dashedName: catch-mixed-usage-of-single-and-double-quotes
يسمح JavaScript باستخدام كلا علامات التنصيص، الفردية (`'`) والزوجية (`"`) لإعلان المقطع النصي (string). انتقاء أحد الخيارين هو تفضيل شخصي، مع بعض الاستثناءات.
-وجدود الخيارين مجدٍ عندما يحوي المقطع اختصارات أو نص آخر داخل علامات تنصيص. فقط كن حذراً من إغلاق المقطع مبكراً، مما يسبب خطأ في تركيب الجملة.
+وجدود الخيارين مجدٍ عندما يحوي المقطع النصي اختصارات أو نص آخر داخل علامات تنصيص. فقط كن حذراً من إغلاق المقطع مبكراً، مما يسبب خطأ في تركيب الجملة.
فيما يلي بعض الأمثلة على خلط علامات التنصيص:
@@ -22,7 +22,7 @@ const uhOhGroucho = 'I've had a perfectly wonderful evening, but this wasn't it.
أما الاثنان الأولان فهما صحيحان، ولكن الثالث غير صحيح.
-وبطبيعة الحال، لا بأس من الاستمرار على نوع واحد من علامات التنصيص. يمكنك التعامل مع علامات التنصيص داخل المقطع باستخدام رمز التحايل (`\`):
+وبطبيعة الحال، لا بأس من الاستمرار على نوع واحد من علامات التنصيص. يمكنك التعامل مع علامات التنصيص داخل المقطع النصي باستخدام رمز التخريج (`\`):
```js
const allSameQuotes = 'I\'ve had a perfectly wonderful evening, but this wasn\'t it.';
@@ -30,11 +30,11 @@ const allSameQuotes = 'I\'ve had a perfectly wonderful evening, but this wasn\'t
# --instructions--
-أصلح المقطع بحيث يستخدم علامات تنصيص مختلفة لقيمة `href` أو تحايل على علامات التنصيص الموجودة. حافظ على علامات التنصيص المزدوجة حول المقطع كُلََّه.
+أصلح المقطع النصي بحيث يستخدم علامات تنصيص مختلفة لقيمة `href` أو أخرج علامات التنصيص الموجودة. حافظ على علامات التنصيص المزدوجة حول المقطع كُلََّه.
# --hints--
-يجب أن يصلح الكود الخاص بك علامات التنصيص حول قيمة `href` وهي `#Home` إما بتغييرها أو معالجتها برمز التحايل (\).
+يجب أن يصلح الكود الخاص بك علامات التنصيص حول قيمة `href` وهي `#Home` إما بتغييرها أو معالجتها برمز التخريج (\).
```js
assert(code.match(//g));
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes.md
index 78f9424726d..5f122ece22f 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes.md
@@ -1,6 +1,6 @@
---
id: 587d7b84367417b2b2512b36
-title: 'التقاط الاقواس و الاقتباسات الغير مغلقة (Catch Unclosed Parentheses, Brackets, Braces and Quotes)'
+title: 'التقاط الاقواس و الاقتباسات الغير مغلقة'
challengeType: 1
forumTopicId: 301190
dashedName: catch-unclosed-parentheses-brackets-braces-and-quotes
@@ -8,7 +8,7 @@ dashedName: catch-unclosed-parentheses-brackets-braces-and-quotes
# --description--
-يجب أن تكون على علم بخطأ آخر في بناء الجملة, هو أن جميع الأقواس الافتتاحية، والأقواس المعقوفة، والاقتباسات تحتوي على زوج إقفال. يحدث نسيان قطعة ما عندما تحرير كود موجود وإدخال عناصر بأحد أنواع الأزواج. أيضًا، كن حذرًا عند دمج مجموعة الكود في أخري، مثل إضافة وظيفة تعيد التفعيل كحجة إلى طريقة.
+يجب أن تكون على علم بخطأ آخر في بناء الجملة, هو أن جميع الأقواس الافتتاحية، والأقواس المعكوفة، والاقتباسات تحتوي على زوج إقفال. يحدث نسيان قطعة ما عندما تحرير كود موجود وإدخال عناصر بأحد أنواع الأزواج. أيضًا، كن حذرًا عند دمج مجموعة الكود في أخري، مثل إضافة وظيفة تعيد التفعيل كحجة إلى طريقة.
إحدى الطرق لتجنب هذا الخطأ هي بمجرد كتابة الرمز الافتتاحي، قم على الفور بكتابة رمز الإغلاق، ثم قم بتحريك المؤشر مرة أخرى بينهما، ثم استمر في البرمجة. لحسن الحظ، فإن معظم برامج تحرير الكود الحديثة تولد النصف الثاني من الزوج تلقائيًا.
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.md
index ca6cc699cf2..b5237232346 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.md
@@ -10,7 +10,7 @@ dashedName: catch-use-of-assignment-operator-instead-of-equality-operator
البرامج المتفرعة، أي تلك الذي تقوم بأشياء مختلفة إذا تم الوفاء بشروط معينة، تعتمد على بيانات `if`, و `else if`, و `else` في JavaScript. يأخذ الشرط أحيانًا شكل اختبار ما إذا كانت النتيجة مساوية لقيمة.
-هذا المنطق ينطق (باللغة الإنجليزية، على الأقل) كـ "... if x equals y, then" الذي يمكن ترجمته حرفيا إلى كود باستخدام `=` أو مشغل التعيين. هذا يؤدي إلى جعل برنامجك يعمل بشكل غير متوقع.
+هذا المنطق ينطق (باللغة الإنجليزية، على الأقل) كـ "... if x equals y, then" الذي يمكن ترجمته حرفية إلى كود باستخدام `=` أو مشغل التعيين. هذا يؤدي إلى جعل برنامجك يعمل بشكل غير متوقع.
كما تم تغطيته في التحديات السابقة، يقوم مشغل التعيين (`=`) في JavaScript بإسناد قيمة إلى اسم متغير. و يقوم المشغلون `==` و `===` بالتحقق من المساواة (الثلاثية `===` تتحقق من المساواة الصارمة بمعنى أن كل من القيمة والنوع يطبقان).
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md
index 97c526e1997..31f80c53dc6 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md
@@ -10,7 +10,7 @@ dashedName: compare-scopes-of-the-var-and-let-keywords
إذا كانت `let` غير مألوف، تحقق هذا التحدي عن أختلاف بين كلمة (let) وكلمة (var).
-عندما تعلن متغير باستخدام كلمة `var`، يتم الإعلان عنه عالميًا (declared globally)، أو محليًا (locally) إذا تم الإعلان عنه داخل وظيفة (function).
+عندما تعلن متغير باستخدام كلمة `var`، يكون للمتغير مجال شامل (global scope)، أو إذا تم الإعلان عنه داخل وظيفة (function) فمجاله محدد (local scope).
كلمة `let` تتصرف بالمثل، ولكن مع بعض الميزات الإضافية. عندما تعلن متغير باستخدام `let` داخل الكتلة أو تعبير أو عبارة، فنطاق المتغير يقتصر على تلك الكتلة (block) أو التعبير (statement) أو العبارة (expression).
@@ -27,7 +27,7 @@ console.log(i);
هنا ستعرض وحدة التحكم القيم `[0, 1, 2]` و `3`.
-مع كلمة `var`، يتم الإعلان عن `i` عالميا. لذلك عندما يتم تنفيذ `i++`، فإنه يحدث المتغير العالمي. وهذا الكود مماثل لما يلي:
+مع كلمة `var`، يتم الإعلان الشامل عن `i`. لذلك عندما يتم تنفيذ `i++`، فإنه يحدث المتغير الشامل. وهذا الكود مماثل لما يلي:
```js
var numArray = [];
@@ -41,7 +41,7 @@ console.log(i);
هنا ستعرض وحدة التحكم القيم `[0, 1, 2]` و `3`.
-هذا السلوك سوف يسبب مشكلات إذا كنت تريد إنشاء وظيفة وتخزينها لاستخدامها لاحقاً داخل حلقة `for` تستخدم متغير `i`. هذا لأن الوظيفة المخزنة سوف تشير دائما إلى قيمة متغير `i` العالمي المحدث.
+هذا السلوك سوف يسبب مشكلات إذا كنت تريد إنشاء وظيفة وتخزينها لاستخدامها لاحقاً داخل حلقة `for` تستخدم متغير `i`. هذا لأن الوظيفة المخزنة سوف تشير دائما إلى قيمة متغير `i` الشامل المحدث.
```js
var printNumTwo;
@@ -57,7 +57,7 @@ console.log(printNumTwo());
هنا ستعرض وحدة التحكم القيمة `3`.
-كما تري، `printNumTwo()` يطبع 3 وليس 2. هذا لأن القيمة التي تم تعيينها إلى `i` تم تحديثها و `printNumTwo()` يرجع القيمة `i` العالمية وليس القيمة التي احتواها `i` عندما تم إنشاء الوظيفة في حلقة التكرار. لا تتبع كلمة `let` هذا السلوك:
+كما تري، `printNumTwo()` يطبع 3 وليس 2. هذا لأن القيمة التي تم تعيينها إلى `i` تم تحديثها و `printNumTwo()` يرجع القيمة الشاملة `i` وليس القيمة التي احتواها `i` عندما تم إنشاء الوظيفة في حلقة التكرار. لا تتبع كلمة `let` هذا السلوك:
```js
let printNumTwo;
@@ -74,7 +74,7 @@ console.log(i);
هنا ستعرض وحدة التحكم القيمة `2`، وخطأ `i is not defined`.
-`i` غير معرف لأنه لم يتم إعلانه في النطاق العالمي (global scope). تم الإعلان عنه فقط ضمن حلقة `for`. أنتج `printNumTwo()` القيمة الصحيحة لأن ثلاث متغيرات `i` مختلفة مع قيم فريدة (0, 1, و 2) تم إنشاؤها بواسطة `let` داخل كود الحلقة التكرارية.
+`i` غير معروف لأنه لم يتم إعلانه في المجال الشامل (global scope). تم الإعلان عنه فقط ضمن حلقة `for`. أنتج `printNumTwo()` القيمة الصحيحة لأن ثلاث متغيرات `i` مختلفة مع قيم فريدة (0, 1, و 2) تم إنشاؤها بواسطة `let` داخل كود الحلقة التكرارية.
# --instructions--
@@ -90,7 +90,7 @@ console.log(i);
assert(!code.match(/var/g));
```
-المتغير `i` المعلن عنه في `if` يجب أن يساوي المقطع `block scope`.
+المتغير `i` المعلن عنه في `if` يجب أن يساوي المقطع النصي `block scope`.
```js
assert(code.match(/(i\s*=\s*).*\s*.*\s*.*\1('|")block\s*scope\2/g));
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md
index dc36332f1b1..489ce5d4552 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md
@@ -24,7 +24,7 @@ const myPromise = new Promise((resolve, reject) => {
# --instructions--
-اجعل كائن promise يتعامل مع النجاح والفشل. إذا كان `responseFromServer` صحيحاً `true`، ففعيل طريقة `resolve` لإكمال كائن promise بنجاح. مرر `resolve` إلى سلسلة (string) نصية بقيمة `We got the data`. إذا كانت حالة `responseFromServer` بنوع `false`، استخدم طريقة `reject` كبديل و مررها المقطع النصي (string) الآتي: `Data not received`.
+اجعل كائن promise يتعامل مع النجاح والفشل. إذا كان `responseFromServer` صحيحاً `true`، ففعيل طريقة `resolve` لإكمال كائن promise بنجاح. مرر `resolve` مقطع نصي بقيمة `We got the data`. إذا كانت حالة `responseFromServer` بقيمة `false`، استخدم طريقة `reject` كبديل و مررها المقطع النصي (string) الآتي: `Data not received`.
# --hints--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md
index 8ea2178925a..dbe392ddf58 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md
@@ -30,7 +30,7 @@ export default function(x, y) {
# --instructions--
-الدالة التالية يجب أن تكون القيمة الاحتياطية للـ module. الرجاء إضافة الكود اللازم للقيام بذلك.
+الوظيفة التالية يجب أن تكون القيمة الاحتياطية للـ module. الرجاء إضافة الكود اللازم للقيام بذلك.
# --hints--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md
index 8231fc497e4..7888fc820cc 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md
@@ -1,6 +1,6 @@
---
id: 587d7b8a367417b2b2512b4e
-title: Create Strings using Template Literals
+title: إنشاء المقاطع النصية باستخدام قوالب النصوص
challengeType: 1
forumTopicId: 301200
dashedName: create-strings-using-template-literals
@@ -28,7 +28,7 @@ console.log(greeting);
ستعرض وحدة التحكم السلاسل `Hello, my name is Zodiac Hasbro!` و `I am 56 years old.`.
-لقد حدث الكثير من الأشياء هنا. أولاً، يستخدم المثال الـ backticks الآتية (`` ` ``)، وليس علامات الاقتباس (`'` أو `"`) لاحتواء الـ string. ثانياً، لاحظ أن الـ string متعدد الأسطر في كل من الكود والناتج. هذا يوفر من إدخال `\n` داخل الـ strings. بناء الجملة `${variable}` المستخدم أعلاه هو placeholder. بشكل أساسي، لن تضطر إلى استخدام التسلسل مع عامل التشغيل `+` بعد الآن. لإضافة متغيرات إلى الـ strings، فقط قم بإسقاط المتغير في template string و حاوطه بـ `${` و `}`. وبالمثل، يمكنك تضمين عبارات أخرى في الـ string literal، على سبيل المثال `${a + b}`. هذه الطريقة الجديدة لإنشاء الـ strings تمنحك المزيد من المرونة لإنشاء strings قوية.
+لقد حدث الكثير من الأشياء هنا. أولاً، يستخدم المثال الـ backticks الآتية (`` ` ``)، وليس علامات الاقتباس (`'` أو `"`) لاحتواء المقطع النصي. ثانياً، لاحظ أن الـ string متعدد الأسطر في كل من الكود والناتج. هذا يوفر من إدخال `\n` داخل الـ strings. بناء الجملة `${variable}` المستخدم أعلاه هو placeholder. بشكل أساسي، لن تضطر إلى استخدام التسلسل مع عامل التشغيل `+` بعد الآن. لإضافة متغيرات إلى الـ strings، فقط قم بإسقاط المتغير في template string و حاوطه بـ `${` و `}`. وبالمثل، يمكنك تضمين عبارات أخرى في الـ string literal، على سبيل المثال `${a + b}`. هذه الطريقة الجديدة لإنشاء الـ strings تمنحك المزيد من المرونة لإنشاء strings قوية.
# --instructions--
@@ -66,7 +66,7 @@ assert(
);
```
-وينبغي استخدام Template strings و expression interpolation.
+وينبغي استخدام template strings و expression interpolation.
```js
(getUserInput) => assert(getUserInput('index').match(/(`.*\${.*}.*`)/));
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md
index b82f70a7ae6..9736be2f19e 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md
@@ -14,7 +14,7 @@ dashedName: reuse-javascript-code-using-import
import { add } from './math_functions.js';
```
-هنا ، `import` سوف تجد `add` في `math_functions.js`، قم باستيراد هذه الدالة فقط لاستخدامها، وتجاهل البقية. الكود `./` يخبر الـ import بالبحث عن ملف `math_functions.js` في نفس المجلد مثل الملف الحالي. مسار الملف النسبي (`./`) وملحق الملف (`.js`) مطلوبين عند استخدام الاستيراد بهذه الطريقة.
+هنا ، `import` سوف تجد `add` في `math_functions.js`، قم باستيراد هذه الوظيفة فقط لاستخدامها، وتجاهل البقية. الكود `./` يخبر الـ import بالبحث عن ملف `math_functions.js` في نفس المجلد مثل الملف الحالي. مسار الملف النسبي (`./`) وملحق الملف (`.js`) مطلوبين عند استخدام الاستيراد بهذه الطريقة.
يمكنك استيراد أكثر من عنصر واحد من الملف عن طريق إضافته في بيان `import` مثل هذا:
@@ -24,7 +24,7 @@ import { add, subtract } from './math_functions.js';
# --instructions--
-أضف بيان `import` المناسب الذي سيسمح للملف الحالي باستخدام الدوال `uppercaseString` و `lowercaseString` التي قمت بتصديرها في الدرس السابق. هذه الدوال موجودة في ملف يسمى `string_functions.js`، وهو في نفس المجلد مثل الملف الحالي.
+أضف بيان `import` المناسب الذي سيسمح للملف الحالي باستخدام الوظائف `uppercaseString` و `lowercaseString` التي قمت بتصديرها في الدرس السابق. هذه الوظائف موجودة في ملف يسمى `string_functions.js`، وهو في نفس المجلد مثل الملف الحالي.
# --hints--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md
index 0f42e31706b..09e37c61eaa 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md
@@ -1,6 +1,6 @@
---
id: 587d7b87367417b2b2512b43
-title: استخدام Arrow Functions لكتابة الدوال المجهولة الموجزة (Use Arrow Functions to Write Concise Anonymous Functions)
+title: استخدام Arrow Functions لكتابة الوظائف المجهولة الموجزة
challengeType: 1
forumTopicId: 301211
dashedName: use-arrow-functions-to-write-concise-anonymous-functions
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md
index 86753be22b5..8fb930aa580 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md
@@ -8,7 +8,7 @@ dashedName: use-the-spread-operator-to-evaluate-arrays-in-place
# --description--
-يقدم ES6 مشغل الانتشار (spread operator)، الذي يسمح لنا بتوسيع القوائم (arrays) وغيرها من التعبيرات في الأماكن التي يتوقع أن تكون فيها وسائط (parameters) أو عناصر متعددة.
+يقدم ES6 مشغل الانتشار (spread operator)، الذي يسمح لنا بتوسيع القوائم (arrays) وغيرها من العبارات في الأماكن التي يتوقع أن تكون فيها وسائط (parameters) أو عناصر متعددة.
كود ES5 أدناه يستخدم `apply()` لحساب القيمة القصوى في الـ array:
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md
index dc73482bf70..34f8eb6c31b 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md
@@ -8,7 +8,7 @@ dashedName: write-concise-object-literal-declarations-using-object-property-shor
# --description--
-يضيف ES6 بعض الدعم اللطيف لتعريف الـ objects بسهولة.
+يضيف ES6 بعض الدعم اللطيف لتعريف الكائنات بسهولة.
ضع في اعتبارك الكود التالي:
@@ -27,7 +27,7 @@ const getMousePosition = (x, y) => ({ x, y });
# --instructions--
-قم باستخدام خاصية الـ object القصير مع object literals لإنشاء وإرجاع object بخصائص `name` و `age` و `gender`.
+استخدم خاصية الكائن المختصرة مع حروف الكائن لإنشاء كائن بخصائص `name`, و `age`, و `gender`.
# --hints--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md
index de8bd07cca8..f4ecfcd7f32 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md
@@ -8,13 +8,13 @@ dashedName: avoid-mutations-and-side-effects-using-functional-programming
# --description--
-إذا لم تكتشف ذلك سلفًا، المشكلة في التحدي السابق كانت مع استدعاء `splice` في وظيفة `tabClose()`. لسوء الحظ، يغير `splice` القائمة (array) الأصلية عند تفعيل الوظيفة، لذا ففي التفعيل الثاني لها استخدمت القائمة (array) المعدلة، وأعطت نتائج غير متوقعة.
+إذا لم تكتشف ذلك سلفًا، المشكلة في التحدي السابق كانت مع استدعاء `splice` في وظيفة `tabClose()`. لسوء الحظ، `splice` يغير القائمة (array) الأصلية التي فُعِل عليها، لذا التفعيل الثاني له استخدم القائمة (array) المعدلة، وأعطى نتائج غير متوقعة.
-هذا مثال صغير لنمط أكبر بكثير- يمكنك تفعيل وظيفة (function) للتأثير على متغير (variable)، أو قائمة (array)، أو كائن(object)، وتغير الوظيفة المتغير أو شيء ما في الكائن.
+هذا مثال صغير لنمط أكبر بكثير- يمكنك تفعيل وظيفة (function) للتأثير على متغير (variable)، أو قائمة (array)، أو كائن (object). وتغير الوظيفة المتغير أو شيء ما في الكائن.
-وأحد المبادئ الأساسية للبرمجة الوظيفية هو عدم تغيير الأشياء. التغييرات تؤدي إلى أعطال. من الأسهل منع الأعطال علما بأن وظائفك (functions) لا تغير أي شيء، بما في ذلك معطيات (arguments) الوظيفة أو أي متغير (variable) عام.
+وأحد المبادئ الأساسية للبرمجة الوظيفية هو عدم تغيير الأشياء. التغييرات تؤدي إلى أعطال. من الأسهل منع الأعطال علما بأن وظائفك (functions) لا تغير أي شيء، بما في ذلك معطيات (arguments) الوظيفة أو أي متغير (variable) شامل.
-المثال السابق لم يكن به أي عمليات معقدة ولكن طريقة (method) مسمى `splice` غيرت القائمة (array) الأصلية، وأسفرت عن حدوث خطأ.
+المثال السابق لم يكن به أي عمليات معقدة ولكن `splice` غيرت القائمة (array) الأصلية، وأسفرت عن حدوث خطأ.
تذكر أنه في البرمجة الوظيفية، تغيير الأشياء يسمى طفرة mutation، وتسمى النتيجة تأثير جانبي side effect. من الناحية المثالية، يجب أن تكون الوظيفة خالصة (pure function)، مما يعني أنها لا تسبب أي تأثيرات جانبية.
@@ -22,7 +22,7 @@ dashedName: avoid-mutations-and-side-effects-using-functional-programming
# --instructions--
-اكتب الكود للوظيفة `incrementer` حتي تنتج قيمة المتغير العام `fixedValue` بعد زيادة قيمته بواحد.
+اكتب الكود للوظيفة `incrementer` حتي تنتج قيمة المتغير الشامل `fixedValue` بعد زيادة قيمته بواحد.
# --hints--
@@ -40,7 +40,7 @@ const __newValue = incrementer();
assert(__newValue === 5);
```
-يجب أن تنتج الوظيفة `incrementer` قيمة استناداً إلى قيمة المتغير العام `fixedValue`.
+يجب أن تنتج الوظيفة `incrementer` قيمة استناداً إلى قيمة المتغير الشامل `fixedValue`.
```js
(function () {
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md
index 67c15cc6680..cb50314acba 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md
@@ -12,7 +12,7 @@ dashedName: learn-about-functional-programming
تتعلق البرمجة الوظيفية (Functional) بما يلي:
-1) وظائف منعزلة (Isolated functions) - لا تعتمد على حالة البرنامَج، الذي يشمل المتغيرات العامة (global) القابلة للتغيير
+1) وظائف منعزلة (Isolated functions) - لا تعتمد على حالة البرنامَج، الذي يشمل المتغيرات الشاملة (global) القابلة للتغيير
2) الوظائف الخالصة (Pure functions) - نفس الإدخال يعطي دائمًا نفس الإخراج
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md
index cb28c538ff1..2ac83581024 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md
@@ -10,7 +10,7 @@ dashedName: pass-arguments-to-avoid-external-dependence-in-a-function
التحدي الأخير كان يقترب خطوة من مبادئ الـ functional programming، ولكن لا يزال هناك شيء مفقود.
-لم نقم بتغيير قيمة المتغير الـ global، ولكن الدالة `incrementer` لن تعمل بدون وجود المتغير الـ global و هو `fixedValue`، هناك.
+لم نقم بتغيير قيمة المتغير الشامل (global)، ولكن الوظيفة `incrementer` لن تعمل بدون وجود المتغير الـشامل و هو `fixedValue`، هناك.
وهناك مبدأ آخر للبرمجة الوظيفية (functional programming) وهو إعلان تبعياتك (dependencies) بشكل صريح. هذا يعني إذا كان الـ function يعتمد على متغير أو object موجود، قم بتمرير هذا المتغير أو الـ object مباشرة إلى الـ function كـ argument.
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md
index 1a272d05998..eb8a48ed65b 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md
@@ -1,6 +1,6 @@
---
id: 587d7b8f367417b2b2512b60
-title: تعديل المتغيرات العالمية (Global Variables) لأخراجهم من الوظائف (Functions)
+title: تعديل المتغيرات الشاملة (Global Variables) لأخراجهم من الوظائف (Functions)
challengeType: 1
forumTopicId: 301235
dashedName: refactor-global-variables-out-of-functions
@@ -12,7 +12,7 @@ dashedName: refactor-global-variables-out-of-functions
1) لا تغير متغير (variable) أو كائن (object) - أنشئ متغيرات و كائنات (objects) جديدة و منشئا من الوظيفة (function) إذا لزم الأمر. تلميح: باستخدام شيء مثل `const newArr = arrVar`، حيث `arrVar` هو array، سوف يقوم ببساطة بإنشاء مرجع إلى المتغير الحالي وليس نسخة. لذا فإن تغيير قيمة في `newArr` سيغير القيمة في `arrVar`.
-2) إعلان وسائط الوظيفة (function parameters) - يعتمد حسابات داخل الوظيفة (function) فقط على المعطيات (arguments) التي تمر إلى الوظيفة (function)، ولا تعتمد على أي كائن (object) أو متغير (variable) عام (global).
+2) أعلن وسائط الوظيفة (function parameters) - تعتمد الحسابات داخل الوظيفة (function) فقط على المعطيات (arguments) التي تعطى إلى الوظيفة (function)، ولا تعتمد على أي كائن (object) أو متغير (variable) شامل (global).
إن إضافة واحد إلى رقما ليس مثيراً جداً، ولكن يمكننا تطبيق هذه المبادئ عند العمل مع arrays أو objects أكثر تعقيداً.
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md
index 8c811a875a6..39f2c35a806 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md
@@ -21,7 +21,7 @@ cities.splice(3, 1);
# --instructions--
-أعّد كتابة الوظيفة `nonMutatingSplice` باستخدام `slice` بدلاً من `splice`. يجب أن يقصر طول مصفوفة `cities` المقدمة على 3، ويعيد array جديدة تحتوي على العناصر الثلاثة الأولى فقط.
+أعّد كتابة الوظيفة `nonMutatingSplice` باستخدام `slice` بدلاً من `splice`. يجب أن يقصر طول القائمة `cities` المقدمة على 3، ويعيد array جديدة تحتوي على العناصر الثلاثة الأولى فقط.
لا تغيّر القائمة (array) الأصلية المقدمة للوظيفة (function).
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md
index cc07df5eb51..5be68a28d76 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md
@@ -1,6 +1,6 @@
---
id: 587d7da9367417b2b2512b6a
-title: Return a Sorted Array Without Changing the Original Array
+title: أرجع قائمة مفرزة دون تغير القائمة الأصلية
challengeType: 1
forumTopicId: 301237
dashedName: return-a-sorted-array-without-changing-the-original-array
@@ -8,15 +8,15 @@ dashedName: return-a-sorted-array-without-changing-the-original-array
# --description--
-التأثير الجانبي لـ `sort` هو أنه يغير ترتيب العناصر في ال array الأصلية. وبعبارة أخرى، فإنه يغير ال array في مكانها. إحدى الطرق لتجنب ذلك هي أن تقوم أولاً بلزق array فارغة إلى ال array التي يتم فرزها (تذكر أن `slice` و `concat` تعيد array جديدة)، ثم قم بتشغيل `sort`.
+التأثير الجانبي لطريقة `sort` هو أنخها تغير ترتيب العناصر في القائمة (array) الأصلية. وبعبارة أخرى، فإنه يغير ال array في مكانها. إحدى الطرق لتجنب ذلك هي أن تقوم أولاً بلزق array فارغة إلى ال array التي يتم فرزها (تذكر أن `slice` و `concat` تعيد array جديدة)، ثم قم بتشغيل `sort`.
# --instructions--
-استخدم `sort` في الدالة `nonMutatingSort` لفرز عناصر array بالترتيب التصاعدي. يجب أن تعيد الدالة array جديدا، وليس تغيير متغير `globalArray`.
+استخدم `sort` في الوظيفة `nonMutatingSort` لفرز عناصر array بالترتيب التصاعدي. يجب أن تعيد الوظيفة array جديدا، وليس تغيِّر متغير `globalArray`.
# --hints--
-يجب أن يستخدم الكود الخاص بك دالة `sort`.
+يجب أن يستخدم الكود الخاص بك طريقة `sort`.
```js
assert(nonMutatingSort.toString().match(/\.sort/g));
@@ -37,26 +37,26 @@ assert(
);
```
-`nonMutatingSort(globalArray)` لا ينبغي أن تكون hard coded.
+`nonMutatingSort(globalArray)` لا ينبغي أن تكون قيمها مثبتة (hard-coded).
```js
assert(!nonMutatingSort.toString().match(/\[.*?[23569].*?\]/gs));
```
-وينبغي أن تعيد الدالة array جديدا، وليس ال array التي تمرر إليها.
+وينبغي أن تعيد الوظيفة array جديدا، وليس ال array التي أعطت ها.
```js
assert(nonMutatingSort(globalArray) !== globalArray);
```
-`nonMutatingSort([1, 30, 4, 21, 100000])` يجب ان يعيد `[1, 4, 21, 30, 100000]`.
+`nonMutatingSort([1, 30, 4, 21, 100000])` يجب ان تعيد `[1, 4, 21, 30, 100000]`.
```js
assert(JSON.stringify(nonMutatingSort([1, 30, 4, 21, 100000])) ===
JSON.stringify([1, 4, 21, 30, 100000]))
```
-`nonMutatingSort([140000, 104, 99])` يجب ان يعيد `[99, 104, 140000]`.
+`nonMutatingSort([140000, 104, 99])` يجب ان تعيد `[99, 104, 140000]`.
```js
assert(JSON.stringify(nonMutatingSort([140000, 104, 99])) ===
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-part-of-an-array-using-the-slice-method.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-part-of-an-array-using-the-slice-method.md
index 8880fc4cc50..e4377dd2e60 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-part-of-an-array-using-the-slice-method.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-part-of-an-array-using-the-slice-method.md
@@ -21,7 +21,7 @@ const newArray = arr.slice(1, 3);
# --instructions--
-استخدم طريقة `slice` في `sliceArray` لإرجاع جزء من مصفوفة `anim` بالنظر إلى مؤشري `beginSlice` و `endSlice`. يجب أن تعيد الدالة array.
+استخدم طريقة `slice` في `sliceArray` لإرجاع جزء من مصفوفة `anim` بالنظر إلى مؤشري `beginSlice` و `endSlice`. يجب أن تعيد الوظيفة array.
# --hints--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md
index 928431bbc65..ae98f8e66c9 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md
@@ -12,7 +12,7 @@ Functional programming هي عادة جيدة. إنها تجعل الكود ال
في اللغة الإنجليزية (والعديد من اللغات الأخرى) ، يتم استخدام صيغة الأمر لإعطاء الأوامر. وبالمثل ، فإن أسلوب الأمر في البرمجة هو الذي يعطي الكمبيوتر مجموعة من العبارات لأداء مهمة ما.
-غالبًا ما تغير البيانات حالة البرنامج ، مثل تحديث المتغيرات العالمية(global variables). المثال الكلاسيكي هو كتابة حلقة `for` تعطي توجيهات دقيقة للتكرار على فهارس ال array.
+غالبًا ما تغير البيانات حالة البرنامج ، مثل تحديث المتغيرات الشاملة (global variables). المثال الكلاسيكي هو كتابة حلقة `for` تعطي توجيهات دقيقة للتكرار على فهارس ال array.
في المقابل، تكون البرمجة الوظيفية (functional programming) من أشكال البرمجة المعلنة (declarative programming). أنت تخبر الكمبيوتر بما تريد فعله عن طريق استدعاء method أو function.
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array.md
index e9f557ab118..82e08157c9b 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array.md
@@ -12,7 +12,7 @@ dashedName: use-the-map-method-to-extract-data-from-an-array
هذه هي البداية فقط. وكما يوحي اسمها، فإن ال functional programming تتمحور حول نظرية ال functions.
-سيكون من المنطقي أن تكون قادرًا على تمريرها كـ arguments ل functions أخرى ، وإرجاع function من function أخر. تعتبر الدوال first class objects في جافا سكريبت، مما يعني أنه يمكن استخدامها مثل أي object آخر. يمكن حفظها في المتغيرات، أو تخزينها في object ما، أو تمريرها كـ function arguments.
+سيكون من المنطقي أن تكون قادرًا على تمريرها كـ arguments ل functions أخرى ، وإرجاع function من function أخر. تعتبر الوظائف first class objects في جافا سكريبت، مما يعني أنه يمكن استخدامها مثل أي object آخر. يمكن حفظها في المتغيرات، أو تخزينها في object ما، أو تمريرها كـ function arguments.
دعونا نبدأ ببعض الـ array functions البسيطة، التي هي methods على ال array object prototype. في هذا التمرين نحن ننظر إلى `Array.prototype.map()`أو ببساطة `map`.
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md
index 06b9b57d7db..399c4bd1bac 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md
@@ -8,7 +8,7 @@ dashedName: drop-it
# --description--
-بالنظر إلى المصفوفة `arr` ، كرر وأزل كل عنصر بدءًا من العنصر الأول (الفهرس 0) حتى تعرض الدالة `func` القيمة `true` عندما يتم تمرير العنصر المتكرر من خلالها.
+بالنظر إلى المصفوفة `arr` ، كرر وأزل كل عنصر بدءًا من العنصر الأول (الفهرس 0) حتى تعرض الوظيفة `func` القيمة `true` عندما يتم تمرير العنصر المتكرر من خلالها.
ثم ارجع بقية ال array بمجرد استيفاء الشرط، وإلا ، يجب إرجاع `arr` كـ array فارغة.
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/search-and-replace.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/search-and-replace.md
index 81a214a4046..095966de95d 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/search-and-replace.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/search-and-replace.md
@@ -20,7 +20,7 @@ dashedName: search-and-replace
# --hints--
-`myReplace("Let us go to the store", "store", "mall")` يجب أن يعيد السلسلة النصية `Let us go to the mall`.
+`myReplace("Let us go to the store", "store", "mall")` يجب أن يعيد المقطع النصي `Let us go to the mall`.
```js
assert.deepEqual(
@@ -29,7 +29,7 @@ assert.deepEqual(
);
```
-`myReplace("He is Sleeping on the couch", "Sleeping", "sitting")` يجب أن يعيد السلسلة النصية `He is Sitting on the couch`.
+`myReplace("He is Sleeping on the couch", "Sleeping", "sitting")` يجب أن يعيد المقطع النصي `He is Sitting on the couch`.
```js
assert.deepEqual(
@@ -38,7 +38,7 @@ assert.deepEqual(
);
```
-`myReplace("I think we should look up there", "up", "Down")` يجب أن يعيد السلسلة النصية `I think we should look down there`.
+`myReplace("I think we should look up there", "up", "Down")` يجب أن يعيد المقطع النصي `I think we should look down there`.
```js
assert.deepEqual(
@@ -47,7 +47,7 @@ assert.deepEqual(
);
```
-`myReplace("This has a spellngi error", "spellngi", "spelling")` يجب أن يعيد السلسلة النصية `This has a spelling error`.
+`myReplace("This has a spellngi error", "spellngi", "spelling")` يجب أن يعيد المقطع النصي `This has a spelling error`.
```js
assert.deepEqual(
@@ -56,7 +56,7 @@ assert.deepEqual(
);
```
-`myReplace("His name is Tom", "Tom", "john")` يجب أن يعيد السلسلة النصية `His name is John`.
+`myReplace("His name is Tom", "Tom", "john")` يجب أن يعيد المقطع النصي `His name is John`.
```js
assert.deepEqual(
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md
index 47943c19594..8dd6d0dcc28 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md
@@ -36,7 +36,7 @@ assert.deepEqual(steamrollArray([1, [], [3, [[4]]]]), [1, 3, 4]);
assert.deepEqual(steamrollArray([1, {}, [3, [[4]]]]), [1, {}, 3, 4]);
```
-يجب ألا يستخدم الحل الخاص بك الدوال `Array.prototype.flat()` أو `Array.prototype.flatMap()`.
+يجب ألا يستخدم الحل الخاص بك الوظائف `Array.prototype.flat()` أو `Array.prototype.flatMap()`.
```js
assert(!code.match(/\.\s*flat\s*\(/) && !code.match(/\.\s*flatMap\s*\(/));
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md
index 99d520c10a2..92b5a944b3d 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md
@@ -1,6 +1,6 @@
---
id: 56533eb9ac21ba0edf2244e2
-title: Caesars Cipher
+title: شفرة قيصر
challengeType: 5
forumTopicId: 16003
dashedName: caesars-cipher
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md
index b0b6a4a3b6d..e1bee22eedd 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md
@@ -1,6 +1,6 @@
---
id: aa2e6f85cab2ab736c9a9b24
-title: Cash Register
+title: مكنة لتسجيل النقود
challengeType: 5
forumTopicId: 16012
dashedName: cash-register
@@ -8,11 +8,11 @@ dashedName: cash-register
# --description--
-قم بتصميم دالة درج تسجيل المدفوعات `checkCashRegister()` التي تقبل سعر الشراء كـ argument أولى (`price`)، و الدفع كـ argument ثانية (`cash`) ، و cash-in-drawer اي النقود في الدرج (`cid`) كـ argument ثالثة.
+صمم وظيفة درج لتسجيل النقود `checkCashRegister()` التي تقبل سعر الشراء كمعطى أولى (`price`)، و الدفع كمعطى ثاني (`cash`)، و cash-in-drawer أي النقود في الدرج (`cid`) كمعطى ثالث.
`cid` عبارة عن array ثنائية الأبعاد للعملة المتاحة.
-يجب أن تقوم دالة `checkCashRegister()` دائما بإرجاع object يحتوي على key الـ `status` و key الـ `change`.
+يجب أن تقوم وظيفة `checkCashRegister()` دائما بإنتاج كائن يحتوي على الهوية (key) المسمى `status` و الهوية `change`.
قم بإرجاع `{status: "INSUFFICIENT_FUNDS", change: []}` إذا كان cash-in-drawer أقل من الباقي المستحق، أو إذا كنت لا تستطيع إرجاع الباقي بالضبط.
@@ -40,7 +40,7 @@ dashedName: cash-register
# --hints--
-`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` يجب ان يرجع object.
+يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` كائن.
```js
assert.deepEqual(
@@ -61,7 +61,7 @@ assert.deepEqual(
);
```
-`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` يجب ان يرجع `{status: "OPEN", change: [["QUARTER", 0.5]]}`.
+يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` كائن `{status: "OPEN", change: [["QUARTER", 0.5]]}`.
```js
assert.deepEqual(
@@ -80,7 +80,7 @@ assert.deepEqual(
);
```
-`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` يجب ان يرجع `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`.
+يجب أن ينتج `checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` كائن `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`.
```js
assert.deepEqual(
@@ -110,7 +110,7 @@ assert.deepEqual(
);
```
-`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` يجب ان يرجع `{status: "INSUFFICIENT_FUNDS", change: []}`.
+يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` كائن `{status: "INSUFFICIENT_FUNDS", change: []}`.
```js
assert.deepEqual(
@@ -129,7 +129,7 @@ assert.deepEqual(
);
```
-`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` يجب ان يرجع `{status: "INSUFFICIENT_FUNDS", change: []}`.
+يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` كائن `{status: "INSUFFICIENT_FUNDS", change: []}`.
```js
assert.deepEqual(
@@ -148,7 +148,7 @@ assert.deepEqual(
);
```
-`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` يجب ان يرجع `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`.
+يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` كائن `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`.
```js
assert.deepEqual(
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md
index 6d07135f341..3fd98aeadf1 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md
@@ -1,6 +1,6 @@
---
id: aaa48de84e1ecc7c742e1124
-title: Palindrome Checker
+title: مدقق لمعاكس المقطع النصي
challengeType: 5
forumTopicId: 16004
dashedName: palindrome-checker
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md
index cae6e022074..425b47c65b7 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md
@@ -1,6 +1,6 @@
---
id: a7f4d8f2483413a6ce226cac
-title: Roman Numeral Converter
+title: محول للأرقام الرومانية
challengeType: 5
forumTopicId: 16044
dashedName: roman-numeral-converter
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md
index 2101560a450..a744f7215c4 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md
@@ -1,6 +1,6 @@
---
id: aff0395860f5d3034dc0bfc9
-title: Telephone Number Validator
+title: مدقق الأرقام الهواتف
challengeType: 5
forumTopicId: 16090
dashedName: telephone-number-validator
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md
index 107f5f942bf..65e3159bfb7 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md
@@ -44,13 +44,13 @@ animal instanceof Animal;
# --hints--
-يجب تعريف متغير `duck`.
+يجب إعلان متغير `duck`.
```js
assert(typeof duck !== 'undefined');
```
-يجب تعريف متغير `beagle`.
+يجب إعلان متغير `beagle`.
```js
assert(typeof beagle !== 'undefined');
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/iterate-over-all-properties.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/iterate-over-all-properties.md
index 23edd5b7dcc..90230752779 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/iterate-over-all-properties.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/iterate-over-all-properties.md
@@ -58,7 +58,7 @@ assert.deepEqual(ownProps, ['name']);
assert.deepEqual(prototypeProps, ['numLegs']);
```
-يجب عليك حل هذا التحدي دون استخدام الدالة المدمجة في `Object.keys()`.
+يجب عليك حل هذا التحدي دون استخدام الوظيفة المدمجة في `Object.keys()`.
```js
assert(!/\Object.keys/.test(code));
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md
index bc5d837e36b..5d8ca6f86be 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md
@@ -16,7 +16,7 @@ duck.constructor === Object;
duck instanceof Bird;
```
-بالترتيب، سيتم تقييم هذه التعبيرات إلى `false`، و `true`، و `true`.
+بالترتيب، سيتم تقييم هذه العبارات إلى `false`، و `true`، و `true`.
لإصلاح هذا، عندما يتم تعيين prototype يدوياً إلى كائن جديد، تذكر أن تحدد خاصية `constructor`:
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md
index 4cc528aec6d..d74a6e690eb 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md
@@ -1,6 +1,6 @@
---
id: 587d7db1367417b2b2512b86
-title: إعادة تعيين خاصية موروثة (Reset an Inherited Constructor Property)
+title: إعادة تعيين خاصية موروثة
challengeType: 1
forumTopicId: 301324
dashedName: reset-an-inherited-constructor-property
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-own-properties.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-own-properties.md
index 007005a1373..5a49dc2ece6 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-own-properties.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-own-properties.md
@@ -54,7 +54,7 @@ assert(ownProps.indexOf('name') !== -1 && ownProps.indexOf('numLegs') !== -1);
assert(!/Object(\.keys|\[(['"`])keys\2\])/.test(code));
```
-يجب عليك حل هذا التحدي بدون hardcoding مصفوفة `ownProps`.
+يجب عليك حل هذا التحدي بدون إدخال قيم مثبتة (hard-coding) في قائمة `ownProps`.
```js
assert(
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-immediately-invoked-function-expression-iife.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-immediately-invoked-function-expression-iife.md
index ac6b4a27acb..71e6d45c26f 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-immediately-invoked-function-expression-iife.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-immediately-invoked-function-expression-iife.md
@@ -22,7 +22,7 @@ dashedName: understand-the-immediately-invoked-function-expression-iife
# --instructions--
-أعد كتابة الدالة `makeNest` وأزيل استدعائها بحيث أنها تصبح anonymous immediately invoked function expression (IIFE).
+أعد كتابة الوظيفة `makeNest` وأزيل استدعائها بحيث أنها تصبح anonymous immediately invoked function expression (IIFE).
# --hints--
@@ -32,7 +32,7 @@ dashedName: understand-the-immediately-invoked-function-expression-iife
assert(/\((function|\(\))(=>|\(\)){?/.test(code.replace(/\s/g, '')));
```
-يجب أن يكون ال function الخاص بك بين قوسين في نهاية التعبير لاستدعائه على الفور.
+يجب أن يكون ال function الخاص بك بين قوسين في نهاية العبارة لاستدعائه على الفور.
```js
assert(/\(.*(\)\(|\}\(\))\)/.test(code.replace(/[\s;]/g, '')));
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-closure-to-protect-properties-within-an-object-from-being-modified-externally.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-closure-to-protect-properties-within-an-object-from-being-modified-externally.md
index 17eb731e904..29c1ceb7889 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-closure-to-protect-properties-within-an-object-from-being-modified-externally.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-closure-to-protect-properties-within-an-object-from-being-modified-externally.md
@@ -18,7 +18,7 @@ bird.name = "Duffy";
لذلك، يمكن لأي جزء من الكود الخاص بك تغيير اسم `bird` بسهولة إلى أي قيمة. فكروا في أشياء مثل كلمات المرور والحسابات المصرفية التي يسهل تغييرها من قبل أي جزء من الكود الخاص بك. وهذا يمكن أن يسبب الكثير من المشاكل.
-وأبسط طريقة لجعل هذه الخاصية العامة، خاصة، هي عن طريق إنشاء متغير داخل الـ constructor function. وهذا يغير نطاق ذلك المتغير بحيث يكون ضمن الـ constructor function علي عكس أن يكون متاحا بشكل global. وبهذه الطريقة، لا يمكن الوصول إلى المتغير وتغييره إلا بواسطة method تكون أيضا ضمن الـ constructor function.
+وأبسط طريقة لجعل هذه الخاصية العامة، خاصة، هي عن طريق إنشاء متغير داخل الـ constructor function. وهذا يغير مجال ذلك المتغير بحيث يكون ضمن الـ constructor function علي عكس أن يكون متاحا بشكل شامل (global). وبهذه الطريقة، لا يمكن الوصول إلى المتغير وتغييره إلا بواسطة method تكون أيضا ضمن الـ constructor function.
```js
function Bird() {
@@ -32,7 +32,7 @@ let ducky = new Bird();
ducky.getHatchedEggCount();
```
-هنا `getHatchedEggCount` هي method مميزة، لأنها لديها حق الوصول إلى المتغير الخاص `hatchedEgg`. هذا ممكن لإن `hatchedEgg` أعلنت في نفس السياق مثل `getHatchedEggCount`. في جافا سكريبت، الدالة دائما لها حق الوصول إلى السياق الذي تم إنشاؤها فيه. هذا يسمى `closure`.
+هنا `getHatchedEggCount` هي method مميزة، لأنها لديها حق الوصول إلى المتغير الخاص `hatchedEgg`. هذا ممكن لإن `hatchedEgg` أعلنت في نفس السياق مثل `getHatchedEggCount`. في جافا سكريبت، الوظيفة دائما لها حق الوصول إلى السياق الذي تم إنشاؤها فيه. هذا يسمى `closure`.
# --instructions--
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/extract-matches.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/extract-matches.md
index 1c334275991..0d4377c890d 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/extract-matches.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/extract-matches.md
@@ -10,7 +10,7 @@ dashedName: extract-matches
حتى الآن، كنت تتحقق فقط من وجود أو عدم وجود نمط داخل string. يمكنك أيضا استخراج المطابقات الفعلية التي وجدتها باستخدام دالة `.match()`.
-لاستخدام دالة `.match()` ، قم بتطبيق الدالة على string ومرر بداخلها الـ regex في الأقواس.
+لاستخدام وظيفة `.match()` ، قم بتطبيق الوظيفة على string ومرر بداخلها الـ regex في الأقواس.
إليك مثال:
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/ignore-case-while-matching.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/ignore-case-while-matching.md
index 2569210eee0..8e323e3c892 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/ignore-case-while-matching.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/ignore-case-while-matching.md
@@ -8,7 +8,7 @@ dashedName: ignore-case-while-matching
# --description--
-حتى الآن، لقد نظرتم إلى regex للقيام بمطابقة حرفية من الـ strings. ولكن في بعض الأحيان قد ترغب في مطابقة الاختلافات في الحالة.
+حتى الآن، لقد نظرت إلى regex للتطابق المقاطع النصية حرفيًا. ولكن في بعض الأحيان قد ترغب في مطابقة الاختلافات في الحالة.
Case و هي الحالة (او في بعض الاحيان letter case) هي الفرق بين uppercase letters و lowercase letters اي الاحرف الكبيرة و الاحرف الصغيرة. أمثلة للحروف الكبيرة هي `A` و `B` و `C`. أمثلة للحروف الصغيرة هي `a` و `b` و `c`.
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-a-literal-string-with-different-possibilities.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-a-literal-string-with-different-possibilities.md
index 2ea80cd2c00..1bf8d52fc8e 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-a-literal-string-with-different-possibilities.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-a-literal-string-with-different-possibilities.md
@@ -1,6 +1,6 @@
---
id: 587d7db4367417b2b2512b90
-title: طابق سلسلة حرفية (Literal String) مع احتمالات مختلفة
+title: طابق مقطع نصي حرفي (Literal String) مع احتمالات مختلفة
challengeType: 1
forumTopicId: 301345
dashedName: match-a-literal-string-with-different-possibilities
@@ -8,9 +8,9 @@ dashedName: match-a-literal-string-with-different-possibilities
# --description--
-باستخدام regexes مثل `/coding/`، يمكنك البحث عن النمط `coding` في سلسلة (string) أخرى.
+باستخدام regexes مثل `/coding/`، يمكنك البحث عن النمط `coding` في مقطع نصي أخر.
-هذا جيد للبحث عن سلسلة (string) واحدة، لكنه يقتصر على نمط واحد فقط. يمكنك البحث عن أنماط متعددة باستخدام `alternation` أو رمز `OR` التالي: `|`.
+هذا جيد للبحث في مقطع نصي (string) واحد، لكنه يقتصر على نمط واحد فقط. يمكنك البحث عن أنماط متعددة باستخدام `alternation` أو رمز `OR` التالي: `|`.
هذا المشغل يطابق الأنماط قبله أو بعده. على سبيل المثال، إذا كنت ترغب في مطابقة السلاسل (strings) باسم `yes` أو `no`، تريد regex إن يكون `/yes|no/`.
@@ -22,49 +22,49 @@ dashedName: match-a-literal-string-with-different-possibilities
# --hints--
-الـ regex الآتي `petRegex` يجب أن يرجع `true` للسلسلة `John has a pet dog.`
+نمطـ regex الآتي `petRegex` يجب أن يرجع `true` للمقطع النصي `John has a pet dog.`
```js
petRegex.lastIndex = 0;
assert(petRegex.test('John has a pet dog.'));
```
-الـ regexا لآتي `petRegex` يجب أن يرجع `false` للسلسلة `Emma has a pet rock.`
+نمط regex الآتي `petRegex` يجب أن يرجع `false` للمقطع النصي `Emma has a pet rock.`
```js
petRegex.lastIndex = 0;
assert(!petRegex.test('Emma has a pet rock.'));
```
-الـ regex الآتي `petRegex` يجب أن يرجع `true` للسلسلة `Emma has a pet bird.`
+نمط regex الآتي `petRegex` يجب أن يرجع `true` للمقطع النصي `Emma has a pet bird.`
```js
petRegex.lastIndex = 0;
assert(petRegex.test('Emma has a pet bird.'));
```
-الـ regex الآتي `petRegex` يجب أن يرجع `true` للسلسلة `Liz has a pet cat.`
+نمطـ regex الآتي `petRegex` يجب أن يرجع `true` للمقطع النصي `Liz has a pet cat.`
```js
petRegex.lastIndex = 0;
assert(petRegex.test('Liz has a pet cat.'));
```
-الـ regex الآتي `petRegex` يجب أن يرجع `false` للسلسلة `Kara has a pet dolphin.`
+نمط regex الآتي `petRegex` يجب أن يرجع `false` للمقطع النصي `Kara has a pet dolphin.`
```js
petRegex.lastIndex = 0;
assert(!petRegex.test('Kara has a pet dolphin.'));
```
-الـ regex الآتي `petRegex` يجب أن يرجع `true` للسلسلة `Alice has a pet fish.`
+نمط regex الآتي `petRegex` يجب أن يرجع `true` للمقطع النصي `Alice has a pet fish.`
```js
petRegex.lastIndex = 0;
assert(petRegex.test('Alice has a pet fish.'));
```
-الـ regex الآتي `petRegex` يجب أن يرجع `false` للسلسلة `Jimmy has a pet computer.`
+نمط regex الآتي `petRegex` يجب أن يرجع `false` للمقطع النصي `Jimmy has a pet computer.`
```js
petRegex.lastIndex = 0;
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-ending-string-patterns.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-ending-string-patterns.md
index 097801f8194..4d927880c4d 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-ending-string-patterns.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-ending-string-patterns.md
@@ -24,11 +24,11 @@ storyRegex.test(noEnding);
# --instructions--
-استخدم رمز الدولار (`$`) لمطابقة السلسلة `caboose` في نهاية السلسة `caboose`.
+استخدم رمز الدولار (`$`) لمطابقة المقطع النصي `caboose` في نهاية `caboose`.
# --hints--
-يجب عليك البحث عن `caboose` باستخدام علامة الدولار `$` في الـ regex.
+يجب عليك البحث عن `caboose` باستخدام علامة الدولار `$` في نمط regex.
```js
assert(lastRegex.source == 'caboose$');
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-literal-strings.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-literal-strings.md
index 12e58822420..fb762fe43fc 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-literal-strings.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-literal-strings.md
@@ -1,6 +1,6 @@
---
id: 587d7db3367417b2b2512b8f
-title: مطابقة السلاسل النصية (Match Literal Strings)
+title: مطابقة النصوص الحرفية
challengeType: 1
forumTopicId: 301355
dashedName: match-literal-strings
@@ -8,7 +8,7 @@ dashedName: match-literal-strings
# --description--
-في التحدي الأخير، بحثت عن كلمة `Hello` باستخدام regular expression الاتي `/Hello/`. هذا regex يبحث عن مطابقة حرفية في string الآتي `Hello`. إليك مثال آخر يبحث عن مطابقة حرفية في string الآتي `Kevin`:
+في التحدي الأخير، بحثت عن كلمة `Hello` باستخدام regular expression الاتي `/Hello/`. هذا regex يبحث عن مطابقة حرفية في المقطع النصي الآتي `Hello`. إليك مثال آخر يبحث عن مطابقة حرفية في المقطع النصي الآتي `Kevin`:
```js
let testStr = "Hello, my name is Kevin.";
@@ -31,11 +31,11 @@ wrongRegex.test(testStr);
# --instructions--
-أكمل regex الأتي `waldoRegex` للعثور على `"Waldo"` في السلسلة (string) النصية `waldoIsHiding` مع مطابقة حرفية.
+أكمل regex الأتي `waldoRegex` للعثور على `"Waldo"` في المقطع (string) النصية `waldoIsHiding` مع مطابقة حرفية.
# --hints--
-إن regex الخاص بك `waldoRegex` يجب أن يجد string الآتي `Waldo`
+إن regex الخاص بك `waldoRegex` يجب أن يجد المقطع النصي الآتي `Waldo`
```js
waldoRegex.lastIndex = 0;
@@ -49,7 +49,7 @@ waldoRegex.lastIndex = 0;
assert(!waldoRegex.test('Somewhere is hiding in this text.'));
```
-يجب عليك إجراء مطابقة حرفية للسلسلة (string) النصية باستخدام regex الخاص بك.
+يجب عليك إجراء مطابقة حرفية للمقطع النصية (string) باستخدام regex الخاص بك.
```js
assert(!/\/.*\/i/.test(code));
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-character-with-multiple-possibilities.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-character-with-multiple-possibilities.md
index b8c50b627d7..cf5d9ef796c 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-character-with-multiple-possibilities.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-character-with-multiple-possibilities.md
@@ -8,7 +8,7 @@ dashedName: match-single-character-with-multiple-possibilities
# --description--
-تعلمت كيفية مطابقة الأنماط الحرفية (`/literal/`) و wildcard character (`/./`). هذه هي أقصى درجات التعبيرات النمطية، حيث يجد احدهم التطابقات الدقيقة والآخر يطابق كل شيء. وهناك خيارات تمثل توازنا بين الطرفين.
+تعلمت كيفية مطابقة الأنماط الحرفية (`/literal/`) و wildcard character (`/./`). هذه هي أقصى درجات العبارات النمطية، حيث يجد احدهم التطابقات الدقيقة والآخر يطابق كل شيء. وهناك خيارات تمثل توازنا بين الطرفين.
يمكنك البحث عن نمط حرفي مع بعض المرونة باستخدام character classes. تتيح لك Character classes تعريف مجموعة من الأحرف التي ترغب في تطابقها عن طريق وضعها داخل الأقواس المربعة (`[` و `]`).
@@ -30,7 +30,7 @@ bogStr.match(bgRegex);
# --instructions--
-استخدم character class مع حروف (`a`, `e`, `i`, `o`, `u`) في regex الخاص بك `vowelRegex` للعثور على جميع الـ vowels في السلسلة `quoteSample`.
+استخدم character class مع حروف (`a`, `e`, `i`, `o`, `u`) في regex الخاص بك `vowelRegex` للعثور على جميع الـ vowels في المقطع النصي `quoteSample`.
**ملاحظة**: تأكد من مطابقة الـ vowels الكبيرة و الصغيرة.
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
index 9047a682546..d113b307ab5 100644
--- a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
@@ -1,6 +1,6 @@
---
id: 587d7dbc367417b2b2512bae
-title: أنشئ Drum Machine
+title: أنشئ آلة الطبول
challengeType: 3
forumTopicId: 301370
dashedName: build-a-drum-machine
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
index 97c68f2113b..119c29cdf6c 100644
--- a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
@@ -1,6 +1,6 @@
---
id: bd7158d8c442eddfaeb5bd17
-title: أنشئ حاسبة باستخدام JavaScript
+title: بناء آلة حاسبة باستخدام JavaScript
challengeType: 3
forumTopicId: 301371
dashedName: build-a-javascript-calculator
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md
index 8f25970f37a..e706395eb64 100644
--- a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --instructions--
@@ -411,7 +411,7 @@ The `description` property of any object in the `log` array that is returned fro
```js
async(getUserInput) => {
const url = getUserInput('url');
- const res = await fetch(url + '/api/users/', {
+ const res = await fetch(url + '/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
@@ -458,7 +458,7 @@ The `duration` property of any object in the `log` array that is returned from `
```js
async(getUserInput) => {
const url = getUserInput('url');
- const res = await fetch(url + '/api/users/', {
+ const res = await fetch(url + '/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
@@ -505,7 +505,7 @@ The `date` property of any object in the `log` array that is returned from `GET
```js
async(getUserInput) => {
const url = getUserInput('url');
- const res = await fetch(url + '/api/users/', {
+ const res = await fetch(url + '/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md
index e4a5775b2d2..dc47c463bb3 100644
--- a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --instructions--
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md
index 5e4903c1937..9fcfc56b3ef 100644
--- a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --hints--
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md
index 6554ee0ff4b..053c4671344 100644
--- a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md
@@ -8,25 +8,25 @@ dashedName: timestamp-microservice
# --description--
-Build a full stack JavaScript app that is functionally similar to this: https://timestamp-microservice.freecodecamp.rocks. Working on this project will involve you writing your code using one of the following methods:
+Build a full stack JavaScript app that is functionally similar to this: https://timestamp-microservice.freecodecamp.rocks. سوف يقوم يلزمك العمل على هذا المشروع بكتابة كود باستخدام إحدى الطرق التالية:
-- Clone this GitHub repo and complete your project locally.
-- Use our Replit starter project to complete your project.
-- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+- أستنسخ هذا مستودع من GitHub واكمل مشروعك محلياً.
+- استخدم مشروعنا المبدئي في Replit لإكمال مشروعك.
+- استخدم أي منشئ لموقع لإكمال المشروع. تأكد من دمج جميع الملفات من مستودعنا في GitHub في مشروعك.
-If you use Replit, follow these steps to set up the project:
+إذا كنت تستخدم Replit، اتبع هذه الخطوات لإعداد المشروع:
-- Start by importing the project on Replit.
-- Next, you will see a `.replit` window.
-- Select `Use run command` and click the `Done` button.
+- ابدأ باستيراد (import) المشروع على Replit.
+- بعد ذلك، سترى نافذة `.replit`.
+- اختار `Use run command` وانقر على زر `Done`.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. ثم أرسل عنوان (URL) إليه في خانة "رابط الحل". وإن أردت تستطيع أيضًا إرسال رابط لكود المصدر لمشروعك في الخانة "رابط Github".
-**Note:** Time zones conversion is not a purpose of this project, so assume all sent valid dates will be parsed with `new Date()` as GMT dates.
+**ملاحظة:** ليس الغرض من هذا المشروع تحويل المناطق الزمنية، لذلك افترض إن جميع التواريخ الصحيحة المرسلة ستحلل بواسطة `new Date()` كتواريخ GMT.
# --hints--
-You should provide your own project, not the example URL.
+يجب عليك تقديم URL لمشروعك، وليس عنوان المثال.
```js
(getUserInput) => {
@@ -36,7 +36,7 @@ You should provide your own project, not the example URL.
};
```
-A request to `/api/:date?` with a valid date should return a JSON object with a `unix` key that is a Unix timestamp of the input date in milliseconds (as type Number)
+يجب أن ينتج كائن JSON عند طلب `/api/:date?` التاريخ الصحيح بهوية (key) المسمى `unix` الذي يكون طابع زمني Unix من تاريخ المدخل بالمللي ثانية (كرقم)
```js
(getUserInput) =>
@@ -54,7 +54,7 @@ A request to `/api/:date?` with a valid date should return a JSON object with a
);
```
-A request to `/api/:date?` with a valid date should return a JSON object with a `utc` key that is a string of the input date in the format: `Thu, 01 Jan 1970 00:00:00 GMT`
+يجب أن ينتج عند كائن JSON طلب `/api/:date?` مع تاريخ صحيح مع هوية `utc` وتكون قيمته مقطع نصي من تاريخ المدخل. وينسق مثل: `Thu, 01 Jan 1970 00:00:00 GMT`
```js
(getUserInput) =>
@@ -106,7 +106,7 @@ Your project can handle dates that can be successfully parsed by `new Date(date_
);
```
-If the input date string is invalid, the api returns an object having the structure `{ error : "Invalid Date" }`
+If the input date string is invalid, the API returns an object having the structure `{ error : "Invalid Date" }`
```js
(getUserInput) =>
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md
index b3531c2adde..58cf09e170e 100644
--- a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --instructions--
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md
index 7a1e893fe24..3d0fd252f7f 100644
--- a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field.
During the development process, it is important to be able to check what’s going on in your code.
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-an-html-file.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-an-html-file.md
index 1d618673227..b15f95ac820 100644
--- a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-an-html-file.md
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-an-html-file.md
@@ -8,7 +8,7 @@ dashedName: serve-an-html-file
# --description--
-You can respond to requests with a file using the `res.sendFile(path)` method. You can put it inside the `app.get('/', ...)` route handler. Behind the scenes, this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file path. We recommend you to use the Node global variable `__dirname` to calculate the path like this:
+You can respond to requests with a file using the `res.sendFile(path)` method. You can put it inside the `app.get('/', ...)` route handler. خلف الكواليس، ستضبط تلك الطريقة العناوين المناسبة لترشد متصفحك عن كيفية التعامل مع الملف الذي تريد إرساله، وفقًا لنوعه. Then it will read and send the file. This method needs an absolute file path. We recommend you to use the Node global variable `__dirname` to calculate the path like this:
```js
absolutePath = __dirname + relativePath/file.ext
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md
index 1e977061c7c..91adaf364a0 100644
--- a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md
@@ -18,7 +18,7 @@ Serve the object `{"message": "Hello json"}` as a response, in JSON format, to G
# --hints--
-The endpoint `/json` should serve the json object `{"message": "Hello json"}`
+The endpoint `/json` should serve the JSON object `{"message": "Hello json"}`
```js
(getUserInput) =>
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md
index c3085c6b7e7..252f7b168fe 100644
--- a/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field.
The `package.json` file is the center of any Node.js project or npm package. It stores information about your project, similar to how the <head> section of an HTML document describes the content of a webpage. It consists of a single JSON object where information is stored in key-value pairs. There are only two required fields; "name" and "version", but it’s good practice to provide additional information about your project that could be useful to future users or maintainers.
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md
index e85618c8dc8..19e240e2b58 100644
--- a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field.
In this challenge, you will set up a MongoDB Atlas database and import the required packages to connect to it.
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md
index 21fe152c135..e14beb131fc 100644
--- a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field.
A template engine enables you to use static template files (such as those written in *Pug*) in your app. At runtime, the template engine replaces variables in a template file with actual values which can be supplied by your server. Then it transforms the template into a static HTML file that is sent to the client. This approach makes it easier to design an HTML page and allows for displaying variables on the page without needing to make an API call from the client.
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md
index 23b56148e88..c3021aaf31e 100644
--- a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field.
# --instructions--
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/american-british-translator.md
index 7ebf38ca39d..06069d9be10 100644
--- a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/american-british-translator.md
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/american-british-translator.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --instructions--
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/issue-tracker.md
index 58acba61876..15d2437574f 100644
--- a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/issue-tracker.md
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/issue-tracker.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --instructions--
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md
index f847638bba4..90e2329e195 100644
--- a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --instructions--
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/personal-library.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/personal-library.md
index 31b48ccb37b..a6abf77e231 100644
--- a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/personal-library.md
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/personal-library.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --instructions--
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/sudoku-solver.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/sudoku-solver.md
index 096971fa4d1..ee1c337c9f5 100644
--- a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/sudoku-solver.md
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/sudoku-solver.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --instructions--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-a.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-a.md
index 5af2ffef9af..b8303dfe789 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-a.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-a.md
@@ -16,8 +16,8 @@ dashedName: data-analysis-example-a
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks على GitHub
+- كيفية فتح Notebooks من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-b.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-b.md
index 19441c3cd45..68d4726de00 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-b.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-b.md
@@ -16,8 +16,8 @@ dashedName: data-analysis-example-b
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks على GitHub
+- كيفية فتح Notebook من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-and-visualizations.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-and-visualizations.md
index 340cd5351d6..3d0c996789f 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-and-visualizations.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-and-visualizations.md
@@ -16,8 +16,8 @@ dashedName: data-cleaning-and-visualizations
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks على GitHub
+- كيفية فتح Notebook من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-with-dataframes.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-with-dataframes.md
index e1a58cfd19c..3f009dadd5a 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-with-dataframes.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-with-dataframes.md
@@ -16,8 +16,8 @@ dashedName: data-cleaning-with-dataframes
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks على GitHub
+- كيفية فتح Notebooks من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md
index d266151844d..869c74f4398 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md
@@ -16,8 +16,8 @@ dashedName: jupyter-notebooks-cells
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح (Notebook) من (GitHub) باستخدام (Google Colab).
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md
index be927727e87..343133d911e 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md
@@ -16,8 +16,8 @@ dashedName: jupyter-notebooks-importing-and-exporting-data
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح Notebook من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-algebra-and-size.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-algebra-and-size.md
index d6292da8d5c..a68eef03d86 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-algebra-and-size.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-algebra-and-size.md
@@ -16,8 +16,8 @@ dashedName: numpy-algebra-and-size
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح Notebooks من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-a.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-a.md
index d9f980b8ae1..9f450d3f069 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-a.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-a.md
@@ -16,8 +16,8 @@ dashedName: numpy-introduction-a
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح Notebooks من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-b.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-b.md
index f76d5bf6d1c..f0fc8bcb21b 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-b.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-b.md
@@ -16,8 +16,8 @@ dashedName: numpy-introduction-b
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح Notebooks من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-operations.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-operations.md
index 166ee7c6d05..c5132c8e507 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-operations.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-operations.md
@@ -16,8 +16,8 @@ dashedName: numpy-operations
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح Notebooks من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-conditional-selection-and-modifying-dataframes.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-conditional-selection-and-modifying-dataframes.md
index d16b2a8235f..5c358d257b8 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-conditional-selection-and-modifying-dataframes.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-conditional-selection-and-modifying-dataframes.md
@@ -16,8 +16,8 @@ dashedName: pandas-conditional-selection-and-modifying-dataframes
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح Notebook من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-creating-columns.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-creating-columns.md
index c9bd03fcb63..0c78b59b512 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-creating-columns.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-creating-columns.md
@@ -16,8 +16,8 @@ dashedName: pandas-creating-columns
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح (Notebook) من (GitHub) باستخدام (Google Colab).
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-functions-and-collections.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-functions-and-collections.md
index fdce91d05f7..0ce305f71c1 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-functions-and-collections.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-functions-and-collections.md
@@ -16,8 +16,8 @@ dashedName: python-functions-and-collections
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح Notebooks من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-introduction.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-introduction.md
index 8bd079a0a4f..7b932c803e3 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-introduction.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-introduction.md
@@ -16,8 +16,8 @@ dashedName: python-introduction
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح Notebooks من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-iteration-and-modules.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-iteration-and-modules.md
index fddbd3b10c9..0fc48fb2801 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-iteration-and-modules.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-iteration-and-modules.md
@@ -16,8 +16,8 @@ dashedName: python-iteration-and-modules
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح Notebooks من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md
index 0291043e715..4c84ec0dc74 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md
@@ -16,8 +16,8 @@ dashedName: reading-data-csv-and-txt
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح Notebooks من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md
index 21186179430..f6578128629 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md
@@ -16,8 +16,8 @@ dashedName: reading-data-from-databases
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح Notebooks من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md
index 2822287ab61..1c067111e1b 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md
@@ -16,8 +16,8 @@ dashedName: reading-data-introduction
More resources:
-- Notebooks on GitHub
-- How to open Notebooks from GitHub using Google Colab.
+- Notebooks في GitHub
+- كيفية فتح Notebooks من GitHub باستخدام Google Colab.
# --question--
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
index 6e50f9b861a..3b3ad3a4b1f 100644
--- a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
@@ -28,7 +28,7 @@ You will analyze a dataset of the global average sea level change since 1880. Yo
Use the data to complete the following tasks:
- Use Pandas to import the data from `epa-sea-level.csv`.
-- Use matplotlib to create a scatter plot using the `Year` column as the x-axis and the `CSIRO Adjusted Sea Level` column as the y-axix.
+- Use matplotlib to create a scatter plot using the `Year` column as the x-axis and the `CSIRO Adjusted Sea Level` column as the y-axis.
- Use the `linregress` function from `scipy.stats` to get the slope and y-intercept of the line of best fit. Plot the line of best fit over the top of the scatter plot. Make the line go through the year 2050 to predict the sea level rise in 2050.
- Plot a new line of best fit just using the data from year 2000 through the most recent year in the dataset. Make the line also go through the year 2050 to predict the sea level rise in 2050 if the rate of rise continues as it has since the year 2000.
- The x label should be `Year`, the y label should be `Sea Level (inches)`, and the title should be `Rise in Sea Level`.
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-projects/anonymous-message-board.md b/curriculum/challenges/arabic/09-information-security/information-security-projects/anonymous-message-board.md
index b34a819caaa..f219e784a77 100644
--- a/curriculum/challenges/arabic/09-information-security/information-security-projects/anonymous-message-board.md
+++ b/curriculum/challenges/arabic/09-information-security/information-security-projects/anonymous-message-board.md
@@ -22,7 +22,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --instructions--
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md b/curriculum/challenges/arabic/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md
index ae8a2cc7f90..361ebe837ea 100644
--- a/curriculum/challenges/arabic/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md
+++ b/curriculum/challenges/arabic/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --instructions--
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md
index afa2e0cb78c..08b61006de7 100644
--- a/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md
+++ b/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md
@@ -24,7 +24,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --instructions--
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md
index aa629a3d144..172f70d0c97 100644
--- a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md
@@ -20,7 +20,7 @@ If you use Replit, follow these steps to set up the project:
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field.
Helmet helps you secure your Express apps by setting various HTTP headers.
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-binary-search.md b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-binary-search.md
index bd2e8306ee1..caa2c40514c 100644
--- a/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-binary-search.md
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-binary-search.md
@@ -10,9 +10,10 @@ dashedName: implement-binary-search
Binary search is an **O(log(n))** efficiency algorithm for searching a sorted array to find an element. It operates using the following steps:
-1. Find the middle `value` of a sorted array. If `value == target` return (found it!).
+1. Find the middle `value` of a sorted array. If `value == target` return `true` (The value has been found and the search is complete).
1. If middle `value < target`, search right half of array in next compare.
1. If middle `value > target`, search left half of array in next compare.
+1. If after searching the whole array the value is not present, return `false` (The array has been searched and the value is not in the array).
As you can see, you are successively halving an array, which gives you the log(n) efficiency. For this challenge, we want you to show your work - how you got to the target value... the path you took!
@@ -20,7 +21,7 @@ As you can see, you are successively halving an array, which gives you the log(n
Write a function `binarySearch` that implements the binary search algorithm on an array, returning the path you took (each middle value comparison) to find the target in an array.
-The function takes a sorted array of integers and a target value as input. It returns an array containing (in-order) the middle value you found at each halving of the original array until you found the target value. The target value should be the last element of the returned array. If value not is found, return the string `Value Not Found`.
+The function takes a sorted array of integers and a target value as input. It returns an array containing (in-order) the middle value you found at each halving of the original array until you found the target value. The target value should be the last element of the returned array. If the value is not found, return the string `Value Not Found`.
For example, `binarySearch([1,2,3,4,5,6,7], 5)` would return `[4,6,5]`.
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md
index 8dd028cc0c2..c75478c71af 100644
--- a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md
@@ -22,7 +22,7 @@ Here are the specific user stories you should implement for this project:
**Hint:** Try using the Yelp API to find venues in the cities your users search for. If you use Yelp's API, be sure to mention so in your app.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --solutions--
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-voting-app.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-voting-app.md
index c5e1f8c05dd..e70b3566764 100644
--- a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-voting-app.md
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-voting-app.md
@@ -28,7 +28,7 @@ Here are the specific user stories you should implement for this project:
**User Story:** As an authenticated user, if you don't like the options on a poll, you can create a new option.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --solutions--
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md
index 47cee2ababe..4c4540d7fce 100644
--- a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md
@@ -18,7 +18,7 @@ Here are the specific user stories you should implement for this project:
**User Story:** You can get a list of the most recently submitted search strings.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --solutions--
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md
index a5562365284..c43de0dbaef 100644
--- a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md
@@ -20,7 +20,7 @@ Here are the specific user stories you should implement for this project:
**User Story:** You can see changes in real-time when any other user adds or removes a stock. For this you will need to use Web Sockets.
-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
# --solutions--
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md
new file mode 100644
index 00000000000..f4b05b12871
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md
@@ -0,0 +1,54 @@
+---
+id: 637f4e0e72c65bc8e73dfe1e
+videoId: LGQuIIv2RVA
+title: Elements and Tags Question A
+challengeType: 15
+dashedName: elements-and-tags-question-a
+---
+
+# --description--
+
+Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+
+Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: ``. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `` or `
` or `
`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `` or `
` or `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. + +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. + +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Links video above. + +## --text-- + +What HTML tag is used to create a link? + +## --answers-- + +`` + +--- + +`` + +--- + +`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md
new file mode 100644
index 00000000000..164fb01214f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md
@@ -0,0 +1,55 @@
+---
+id: 637f703572c65bc8e73dfe35
+videoId: tsEQgGjSmkM
+title: Links and Images Question B
+challengeType: 15
+dashedName: links-and-images-question-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named odin-links-and-images.
+
+- Within that directory, create a new file named index.html.
+
+- Fill in the usual HTML boilerplate.
+
+- finally, add the following h1 to the body: `
- `.
+
+```js
+const unorderedList = document.querySelectorAll('UL')[0];
+const listItems = document.querySelectorAll('UL > LI');
+
+assert(unorderedList && listItems && listItems.length > 1);
+```
+
+You should have an `h2` element with the text `Steps`.
+
+```js
+const h2 = document.querySelectorAll('H2')[2];
+
+assert(h2.innerText == 'Steps');
+```
+
+You should have a `
- ` with the the steps as the list items `
- `.
+
+```js
+const orderedList = document.querySelectorAll('OL')[0];
+const listItems = document.querySelectorAll('OL > LI');
+
+assert(orderedList && listItems && listItems.length > 1);
+```
+
+You should have an `h2` element with the text `More Recipes`.
+
+```js
+const h2 = document.querySelectorAll('H2')[3];
+
+assert(h2.innerText == 'More Recipes');
+```
+
+You should have an unordered list `
- ` element with list items `
- ` that contain `` tags which lead to other recipes.
+
+```js
+const unorderedList = document.querySelectorAll('UL')[1];
+const listItems = unorderedList.querySelectorAll('LI');
+
+const allAreListItems = unorderedList.children.length == listItems.length;
+
+const containsAnchors = [...listItems].every(function(listItem) {
+ return listItem.querySelector("a") !== null;
+});
+
+assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
+```
+
+Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
+
+```js
+const anchorTags = document.querySelectorAll("a");
+
+const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
+ return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
+});
+
+assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+
+
+
+
The Odin Recipes + + +Creamy Chocolate Fudge
+
+ Description
+This recipe is for a rich and creamy chocolate fudge that is sure to satisfy your sweet tooth. It's perfect for a special occasion or as a tasty treat for any time of the year.
+This recipe is easy to follow and only requires a few simple ingredients. With just a few steps, you'll be able to create a delicious dessert that everyone will love.
+Ingredients
+-
+
- 1 cup sugar +
- 1/2 cup unsalted butter +
- 1/4 cup milk +
- 1/4 cup cocoa powder +
- 1/4 cup chocolate chips +
- 1/4 tsp salt +
- 1 tsp vanilla extract +
Steps
+-
+
- In a medium saucepan, melt the butter over medium heat. +
- Add the sugar, milk, cocoa powder, and salt to the saucepan and stir until well combined. +
- Bring the mixture to a boil, stirring constantly, and then reduce the heat to low and simmer for 5 minutes. +
- Remove the saucepan from the heat and stir in the chocolate chips and vanilla extract until the chocolate is melted and the mixture is smooth. +
- Pour the fudge into a greased 8-inch square pan and let it cool completely before cutting into squares. +
More Recipes
+ + + +``` diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-a.md new file mode 100644 index 00000000000..f4625eb7e31 --- /dev/null +++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-a.md @@ -0,0 +1,65 @@ +--- +id: 637f4e3e72c65bc8e73dfe24 +videoId: kcHKFZBVtf4 +title: Understand Ordered and Unordered List Question A +challengeType: 15 +dashedName: understand-ordered-and-unordered-list-question-a +--- + +# --description-- + +If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. + +Unordered lists are created using the `- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead: + + + +# --question-- + +## --assignment-- + +Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. + +--- + +Make an unordered shopping list of your favorite foods. + +--- + +Make an ordered list of todo’s you need to get done today. + +--- + +Make an unordered list of places you’d like to visit someday. + +--- + +Make an ordered list of your all time top 5 favorite video games or movies. + +## --text-- + +What HTML tag is used to create an unordered list? + +## --answers-- + +`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-c.md
new file mode 100644
index 00000000000..c766990ca22
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-c.md
@@ -0,0 +1,45 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+videoId: LGQuIIv2RVA
+title: Understand Ordered and Unordered List Question C
+challengeType: 15
+dashedName: understand-ordered-and-unordered-list-question-c
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-a.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-a.md
new file mode 100644
index 00000000000..8698b62aca8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Question A
+challengeType: 15
+dashedName: working-with-text-question-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat.
+
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `
- `.
+
+```js
+const unorderedList = document.querySelectorAll('UL')[0];
+const listItems = document.querySelectorAll('UL > LI');
+
+assert(unorderedList && listItems && listItems.length > 1);
+```
+
+You should have an `h2` element with the text `Steps`.
+
+```js
+const h2 = document.querySelectorAll('H2')[2];
+
+assert(h2.innerText == 'Steps');
+```
+
+You should have a `
- ` with the the steps as the list items `
- `.
+
+```js
+const orderedList = document.querySelectorAll('OL')[0];
+const listItems = document.querySelectorAll('OL > LI');
+
+assert(orderedList && listItems && listItems.length > 1);
+```
+
+You should have an `h2` element with the text `More Recipes`.
+
+```js
+const h2 = document.querySelectorAll('H2')[3];
+
+assert(h2.innerText == 'More Recipes');
+```
+
+You should have an unordered list `
- ` element with list items `
- ` that contain `` tags which lead to other recipes.
+
+```js
+const unorderedList = document.querySelectorAll('UL')[1];
+const listItems = unorderedList.querySelectorAll('LI');
+
+const allAreListItems = unorderedList.children.length == listItems.length;
+
+const containsAnchors = [...listItems].every(function(listItem) {
+ return listItem.querySelector("a") !== null;
+});
+
+assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
+```
+
+Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
+
+```js
+const anchorTags = document.querySelectorAll("a");
+
+const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
+ return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
+});
+
+assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+
+
+
+
The Odin Recipes + + +Creamy Chocolate Fudge
+
+ Description
+This recipe is for a rich and creamy chocolate fudge that is sure to satisfy your sweet tooth. It's perfect for a special occasion or as a tasty treat for any time of the year.
+This recipe is easy to follow and only requires a few simple ingredients. With just a few steps, you'll be able to create a delicious dessert that everyone will love.
+Ingredients
+-
+
- 1 cup sugar +
- 1/2 cup unsalted butter +
- 1/4 cup milk +
- 1/4 cup cocoa powder +
- 1/4 cup chocolate chips +
- 1/4 tsp salt +
- 1 tsp vanilla extract +
Steps
+-
+
- In a medium saucepan, melt the butter over medium heat. +
- Add the sugar, milk, cocoa powder, and salt to the saucepan and stir until well combined. +
- Bring the mixture to a boil, stirring constantly, and then reduce the heat to low and simmer for 5 minutes. +
- Remove the saucepan from the heat and stir in the chocolate chips and vanilla extract until the chocolate is melted and the mixture is smooth. +
- Pour the fudge into a greased 8-inch square pan and let it cool completely before cutting into squares. +
More Recipes
+ + + +``` diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-a.md new file mode 100644 index 00000000000..f4625eb7e31 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-a.md @@ -0,0 +1,65 @@ +--- +id: 637f4e3e72c65bc8e73dfe24 +videoId: kcHKFZBVtf4 +title: Understand Ordered and Unordered List Question A +challengeType: 15 +dashedName: understand-ordered-and-unordered-list-question-a +--- + +# --description-- + +If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. + +Unordered lists are created using the `- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead: + + + +# --question-- + +## --assignment-- + +Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. + +--- + +Make an unordered shopping list of your favorite foods. + +--- + +Make an ordered list of todo’s you need to get done today. + +--- + +Make an unordered list of places you’d like to visit someday. + +--- + +Make an ordered list of your all time top 5 favorite video games or movies. + +## --text-- + +What HTML tag is used to create an unordered list? + +## --answers-- + +`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-c.md
new file mode 100644
index 00000000000..c766990ca22
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-c.md
@@ -0,0 +1,45 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+videoId: LGQuIIv2RVA
+title: Understand Ordered and Unordered List Question C
+challengeType: 15
+dashedName: understand-ordered-and-unordered-list-question-c
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-a.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-a.md
new file mode 100644
index 00000000000..8698b62aca8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Question A
+challengeType: 15
+dashedName: working-with-text-question-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat.
+
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `
` tag. + +Changing our example from before to use paragraph elements fixes the issue: + + + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. + +## --text-- + +How do you create a paragraph in HTML? + +## --answers-- + +`
This is a paragraph
` + +--- + +`This is a paragraph
` + +--- + +`This is a paragraph` + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-b.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-b.md new file mode 100644 index 00000000000..a74d8d11452 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-b.md @@ -0,0 +1,40 @@ +--- +id: 637f4e5f72c65bc8e73dfe28 +videoId: yqcd-XkxZNM +title: Working With Text Question B +challengeType: 15 +dashedName: working-with-text-question-b +--- + +# --description-- + +Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. + +There are 6 different levels of headings starting from `` to `
`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. + +Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `
` tag. + + + +Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. + +# --question-- +## --text-- + +How many different levels of headings are there and what is the difference between them? + +## --answers-- + +There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. + +--- + +There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. + +--- + +There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-c.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-c.md new file mode 100644 index 00000000000..6ccf0e06658 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-c.md @@ -0,0 +1,47 @@ +--- +id: 637f4e6672c65bc8e73dfe29 +videoId: gW6cBZLUk6M +title: Working With Text Question C +challengeType: 15 +dashedName: working-with-text-question-c +--- + +# --description-- + +The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. + +You can use `strong` on its own: + + + +But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: + + + +Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Bold and Italic Text Video above. + +## --text-- + +What element should you use to make text bold and important? + +## --answers-- + +`This is an important message` + +--- + +`
This is an important message
` + +--- + +`This is an important message` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-d.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-d.md new file mode 100644 index 00000000000..d6647f9a7ea --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-d.md @@ -0,0 +1,39 @@ +--- +id: 637f4e6e72c65bc8e73dfe2a +videoId: gW6cBZLUk6M +title: Working With Text Question D +challengeType: 15 +dashedName: working-with-text-question-d +--- + +# --description-- + +The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. + +To use `em` on its own: + + +Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: + + + +# --question-- +## --text-- + +What element should you use to make text italicized to add emphasis? + +## --answers-- + +`This is an italic message` + +--- + +`This is an italic message` + +--- + +`This is an italic message ` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-e.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-e.md new file mode 100644 index 00000000000..d022a6331e9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-e.md @@ -0,0 +1,66 @@ +--- +id: 637f4e7972c65bc8e73dfe2b +videoId: gW6cBZLUk6M +title: Working With Text Question E +challengeType: 15 +dashedName: working-with-text-question-e +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the `body` element is the parent and the `p` is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship do two elements have if they are at the same level of nesting? + +## --answers-- + +The elements are each other's parents. + +--- + +The elements are each other's children. + +--- + +The elements are siblings. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-f.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-f.md new file mode 100644 index 00000000000..2ace3f4e36d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-f.md @@ -0,0 +1,67 @@ +--- +id: 637f4e8072c65bc8e73dfe2c +videoId: gW6cBZLUk6M +title: Working With Text Question F +challengeType: 15 +dashedName: working-with-text-question-f +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the body element is the parent and the paragraph is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship does an element have with any nested element within it? + +## --answers-- + +The element within the other element is called the parent element. + +--- + +The element within the other element is called the child element. + +--- + +The element within the other element is called the sibling element. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-g.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-g.md new file mode 100644 index 00000000000..fe83f0ef062 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/working-with-text-question-g.md @@ -0,0 +1,49 @@ +--- +id: 637f4e8772c65bc8e73dfe2d +videoId: gW6cBZLUk6M +title: Working With Text Question G +challengeType: 15 +dashedName: working-with-text-question-g +--- + +# --description-- + +HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. + +Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: + +```html +View the html to see the hidden comments
+ + + +Some paragraph text
+ + +``` + +# --question-- + +## --assignment-- + +To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. + +## --text-- + +How do you create HTML comments? + +## --answers-- + +`/* This is an HTML comment */` + +--- + +`` + +--- + +`<-- This is an HTML comment --!>` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md index faf4e7a44c5..8a45830bc07 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md @@ -14,13 +14,25 @@ dashedName: step-23 應該使用 `transform` 屬性來旋轉元素。 ```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform); +const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain'); + +if (backMountain?.transform) { + assert.notEmpty(backMountain?.transform); +} else { + assert.notEmpty(backMountain?.rotate); +} ``` 應該設置 `.back-mountain` 的 `transform` 值爲 `--fcc-expected--`，而不是 `--fcc-actual--`。 ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform, 'rotate(45deg)'); +const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain'); + +if (backMountain?.transform) { + assert.equal(backMountain?.transform, 'rotate(45deg)'); +} else { + assert.equal(backMountain?.rotate, '45deg'); +} ``` `.back-mountain` 應該有一個 `left` 屬性。 diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md index b245962fa7b..72666055d05 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md @@ -14,13 +14,25 @@ dashedName: step-84 應該將 `.foot.left` 的 `transform` 設置爲 `rotate(80deg)`。 ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left').getPropVal('transform', true), 'rotate(80deg)'); +const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left'); + +if (leftFoot?.transform) { + assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)'); +} else { + assert.equal(leftFoot.getPropVal('rotate', true), '80deg'); +} ``` 應該將 `.foot.right` 的 `transform` 設置爲 `rotate(-80deg)`。 ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right').getPropVal('transform', true), 'rotate(-80deg)'); +const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right'); + +if (rightFoot?.transform) { + assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)'); +} else { + assert.equal(rightFoot.getPropVal('rotate', true), '-80deg'); +} ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md index d93cf1767f9..b00761013a2 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md @@ -14,7 +14,14 @@ dashedName: step-91 你應該將 `.arm.left` 的 `transform` 設置爲 `rotate(130deg) scaleX(-1)`。 ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left').getPropVal('transform', true), 'rotate(130deg)scaleX(-1)'); +const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left'); + +if (leftArm?.rotate && leftArm?.transform) { + assert.equal(leftArm.getPropVal('rotate', true), '130deg'); + assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)'); +} else { + assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)'); +} ``` # --seed-- @@ -281,7 +288,6 @@ body { top: 35%; left: 5%; transform-origin: top left; - } --fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md index eb8e358766b..5a47b63079c 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md @@ -14,7 +14,13 @@ dashedName: step-92 你應該將 `.arm.right` 的 `transform` 設置爲 `rotate(-45deg)`。 ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.getPropVal('transform', true), 'rotate(-45deg)'); +const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right'); + +if (rightArm?.transform) { + assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)'); +} else { + assert.equal(rightArm?.getPropVal('rotate', true), '-45deg'); +} ``` # --seed-- @@ -287,7 +293,6 @@ body { .arm.right { top: 0%; right: -5%; - } --fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md index f05ebbeee8c..efdcb998ebc 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md @@ -14,7 +14,16 @@ dashedName: step-97 應該在 `10%` 位置關鍵幀設置 `transform` 爲 `rotate(110deg) scaleX(-1)`。 ```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)'); +const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%'); +const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, ''); +const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, ''); + +if (rotateProp && transformProp) { + assert(rotateProp === '110deg'); + assert(transformProp === 'scaleX(-1)'); +} else { + assert(transformProp === 'rotate(110deg)scaleX(-1)'); +} ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md index 932ca1d8e16..9d3a0860f68 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md @@ -14,7 +14,16 @@ dashedName: step-98 應該在 `20%` 位置關鍵幀設置 `transform` 爲 `rotate(130deg) scaleX(-1)`。 ```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)'); +const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%'); +const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, ''); +const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, ''); + +if (rotateProp && transformProp) { + assert(rotateProp === '130deg'); + assert(transformProp === 'scaleX(-1)'); +} else { + assert(transformProp === 'rotate(130deg)scaleX(-1)'); +} ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md index 41523654b36..0ad9d2d95b3 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md @@ -14,13 +14,31 @@ dashedName: step-99 應該在 `30%` 位置關鍵幀設置 `transform` 爲 `rotate(110deg) scaleX(-1)`。 ```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)'); +const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%'); +const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, ''); +const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, ''); + +if (rotateProp && transformProp) { + assert(rotateProp === '110deg'); + assert(transformProp === 'scaleX(-1)'); +} else { + assert(transformProp === 'rotate(110deg)scaleX(-1)'); +} ``` 應該在 `40%` 位置關鍵幀設置 `transform` 爲 `rotate(130deg) scaleX(-1)`。 ```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)'); +const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%'); +const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, ''); +const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, ''); + +if (rotateProp && transformProp) { + assert(rotateProp === '130deg'); + assert(transformProp === 'scaleX(-1)'); +} else { + assert(transformProp === 'rotate(130deg)scaleX(-1)'); +} ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md index 6114aa60c83..876e3f33b22 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md @@ -16,11 +16,11 @@ gradient-type( ); ``` -在示例中，`color1` 在頂部是實心的，`color2` 在底部是實心的，並且在它們之間均勻地從一個過渡到下一個。 在 `.bb1a` 中，使用 `--building-color1` 作爲第一個顏色、 `--window-color1` 作爲第二個顏色，將 `linear-gradient` 類型的漸變添加到 `background` 屬性。 +在示例中，`color1` 在頂部是實心的，`color2` 在底部是實心的，並且在它們之間均勻地從一個過渡到下一個。 在 `.bb1a` 中，在 `background-color` 屬性下添加 `background` 屬性。 將其設置爲 `linear-gradient` 類型的梯度，使用 `--building-color1` 作爲其第一種顏色，使用 `--window-color1` 作爲第二種顏色。 # --hints-- -你應該將 `background` 應用到 `.bb1a`。 +你應該給 `.bb1a` 應用 `background`，就在 `background-color` 後面。 ```js assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md index a84c644d914..1f6b27d981a 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md @@ -25,7 +25,7 @@ assert(document.querySelector('p')); assert(code.match(/<\/p\>/)); ``` -Your `p` element's text should be `See more cat photos in our gallery.` 你可能忽略了文本或有拼寫錯誤。 +你的 `p` 元素的文本應該是 `See more cat photos in our gallery.` 你可能忽略了文本或有拼寫錯誤。 ```js const extraSpacesRemoved = document diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md index 53e6476f7dc..a25dca40bca 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md @@ -41,7 +41,7 @@ const collection = [...document.querySelectorAll('main,h1')].map( assert(collection.indexOf('MAIN') < collection.indexOf('H1')); ``` -你的 `main` 元素的開始標籤應該在 `p` 元素的下方。 你把順序寫錯了。 +你的 `main` 元素的結束標籤應該在 `p` 元素的下方。 你把順序寫錯了。 ```js const mainNode = document.querySelector('main'); diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md index 7daa82b6e6d..0adb9d3de89 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md @@ -65,7 +65,7 @@ assert( assert(document.querySelector('p')); ``` -The text of the `p` element should be `See more cat photos in our gallery.` 不要更改 `p` 元素的文本、間距或標點符號。 +`p` 元素的文本應該是 `See more cat photos in our gallery.` 不要更改 `p` 元素的文本、間距或標點符號。 ```js assert( diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md index 5c0bc4a6958..88d01aa01ee 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md @@ -38,7 +38,7 @@ assert( ); ``` -After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element. +在嵌套了錨點元素（`a`）之後，瀏覽器中顯示的 `p` 元素應該僅爲 `See more cat photos in our gallery.`。再次檢查 `p` 和嵌套其中的錨點元素的文本、間距或標點。 ```js const pText = document diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md index ba936cbd849..c7eced800ef 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md @@ -45,7 +45,7 @@ assert(document.querySelector('a').getAttribute('target') === '_blank');Cat Photos
--fcc-editable-region-- -See more cat photos in our gallery.
+See more cat photos in our gallery.
--fcc-editable-region--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
index ff0e1d69796..8eb9b9f526c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
@@ -41,7 +41,7 @@ assert(
);
```
-The `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
+瀏覽器中顯示的 `p` 元素應該僅爲 `See more cat photos in our gallery.`。再次檢查 `p` 和嵌套其中的錨點元素的文本、間距或標點。
```js
const pText = document
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md
index 07f1c9d422d..f1a6809e54a 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md
@@ -9,7 +9,7 @@ dashedName: step-31
現在到了最後一個 `fieldset`。 如果你想允許用戶上傳個人資料圖片，應該怎麼做呢？
-類型爲 `file` 的 `input` 可以實現。 Add a `label` with the text `Upload a profile picture:`, and nest an `input` accepting a file upload.
+類型爲 `file` 的 `input` 可以實現。 添加一個 `label`，其文本爲 `Upload a profile picture:`，嵌套一個 `input` 以接收上傳的文件。
# --hints--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md
index 937ef4537f4..1f61381a2ec 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md
@@ -39,13 +39,15 @@ assert(document.querySelector('h1')?.innerText === 'Nutrition Facts');
--fcc-editable-region--
-
-
- Nutrition Label - - - + + +Nutrition Label + + + + + --fcc-editable-region-- ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md index 7d7cc42eb7c..34dc3575e06 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md @@ -43,14 +43,16 @@ assert(document.querySelector('p')?.innerText === '8 servings per container'); --fcc-editable-region-- - - -Nutrition Label - - -Nutrition Facts
- + + +Nutrition Label + + + +Nutrition Facts
+ + --fcc-editable-region-- ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md index f72657bdb21..a4ad76a90d7 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md @@ -43,15 +43,17 @@ assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup --fcc-editable-region-- - - -Nutrition Label - - -Nutrition Facts
-8 servings per container
- + + +Nutrition Label + + + +Nutrition Facts
+8 servings per container
+ + --fcc-editable-region-- ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md index cc19bea9578..9cd5c10c277 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md @@ -49,16 +49,18 @@ assert(links.find(link => link?.getAttribute('href') === 'https://fonts.googleap --fcc-editable-region-- - - -Nutrition Label - - -Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
- + + +Nutrition Label + + + + +Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+ --fcc-editable-region-- ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md index eb430c365f8..48e3d173cba 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md @@ -32,17 +32,19 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open S ```html - - -Nutrition Label - - - - -Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
- + + + +Nutrition Label + + + + + +Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md index e4f24b52fd1..448031c7a91 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md @@ -30,17 +30,19 @@ assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px'); ```html - - -Nutrition Label - - - - -Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
- + + + +Nutrition Label + + + + + +Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md index 8ce15ab60c3..4f9d9146d83 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md @@ -37,18 +37,20 @@ assert(children?.every(child => child?.parentElement?.classList?.contains('label ```html - - -Nutrition Label - - - + + + +Nutrition Label + + + + --fcc-editable-region-- - -Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
- + +Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+ --fcc-editable-region-- ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md index 2f53bb24ade..1b353ddfbe9 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md @@ -32,19 +32,21 @@ assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid ```html - - -Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md index adaa32f6335..07595831240 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md @@ -26,19 +26,21 @@ assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px'); ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md index 08da186bd41..1fa6fa2fac7 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md @@ -30,19 +30,21 @@ assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px' ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md index 222fb70ea0e..a1afe366310 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md @@ -32,19 +32,21 @@ assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box' ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md index d3d32df9ea8..954c4e6e1ea 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md @@ -32,19 +32,21 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800'); ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md index 14d594bc201..35e67996814 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md @@ -24,19 +24,21 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md index 152e4587f9c..fedab008f7d 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md @@ -24,19 +24,21 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px'); ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md index 12f8056a323..78b580a1378 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md @@ -30,19 +30,21 @@ assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px'); ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md index 8e668433c76..8b671de4801 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md @@ -44,21 +44,23 @@ assert(document.querySelector('.divider')?.previousElementSibling?.localName === ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - + + + +Nutrition Label + + + + + --fcc-editable-region-- --+Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-+--fcc-editable-region-- - + ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md index 886238237fb..827eb1ffe0b 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md @@ -36,20 +36,22 @@ assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md index 59bacd3e070..013ccd86119 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md @@ -26,20 +26,22 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md index 5e7557aec1b..682aaf04302 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md @@ -32,22 +32,24 @@ assert(!document.querySelector('p')?.classList?.contains('bold')); ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - + + + +Nutrition Label + + + + + --fcc-editable-region-- --+Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-+--fcc-editable-region-- - + ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md index 0d50f7eae10..ca2cf721d1d 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md @@ -44,20 +44,22 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')); ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md index a38f5b3e969..dd15fd27ec4 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md @@ -24,22 +24,24 @@ assert(document.querySelector('h1')?.classList?.contains('bold')); ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - + + + +Nutrition Label + + + + + --fcc-editable-region-- --+Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-+--fcc-editable-region-- - + ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md index 2b4cc5c18ef..71f2c3c5a28 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md @@ -9,7 +9,7 @@ dashedName: step-22 同樣重要的元素之間的水平間距可以增加文本的可讀性。 -將文本 `2/3 cup (55g)` 包裹在 `span` 元素中，並將 `class` 屬性設置爲 `right`。 +Wrap the text `2/3 cup (55g)` in a `span` element. # --hints-- @@ -19,19 +19,13 @@ dashedName: step-22 assert(document.querySelector('span')); ``` -新的 `span` 元素應該將 `class` 屬性設置爲 `right`。 - -```js -assert(document.querySelector('span')?.classList?.contains('right')); -``` - -你的 `span` 元素應包含文本 `2/3 cup (55g)`。 +Your `span` element should have the text `2/3 cup (55g)`. ```js assert(document.querySelector('span')?.textContent?.trim() === '2/3 cup (55g)'); ``` -`p` 元素仍應包含文本 `Serving size 2/3 cup (55g)`。 +Your `p` element should still have the text `Serving size 2/3 cup (55g)`. ```js assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)'); @@ -44,22 +38,24 @@ assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - + + + +Nutrition Label + + + + + --fcc-editable-region-- --+Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-+--fcc-editable-region-- - + ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md index a8166fd39f5..b4fa4fa39e5 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md @@ -7,22 +7,20 @@ dashedName: step-23 # --description-- -`float` 屬性用於將元素放置在其容器的左側或右側，允許其他內容（例如文本）環繞它。 - -創建一個新的 `.right` 選擇器，並將 `float` 屬性設置爲 `right`。 +Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`. # --hints-- -應該創建一個新的 `.right` 選擇器。 +Your `p` selector should have a `display` property set to `flex`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); +assert(new __helpers.CSSHelp(document).getStyle('p')?.display === 'flex'); ``` -`.right` 選擇器應該有一個 `float` 屬性設置爲 `right`。 +Your `p` selector should have a `justify-content` property set to `space-between`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.float === 'right'); +assert(new __helpers.CSSHelp(document).getStyle('p')?.justifyContent === 'space-between'); ``` # --seed-- @@ -32,20 +30,22 @@ assert(new __helpers.CSSHelp(document).getStyle('.right')?.float === 'right'); ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` @@ -75,9 +75,11 @@ h1 { letter-spacing: 0.15px } +--fcc-editable-region-- p { margin: 0; } +--fcc-editable-region-- .divider { border-bottom: 1px solid #888989; @@ -87,8 +89,4 @@ p { .bold { font-weight: 800; } - ---fcc-editable-region-- - ---fcc-editable-region-- ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md index 1b075235337..1aaed3baa5e 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md @@ -40,22 +40,24 @@ assert(children?.[3]?.localName === 'p'); ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - + + + +Nutrition Label + + + + + --fcc-editable-region-- --+Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-+--fcc-editable-region-- - + ``` @@ -87,6 +89,8 @@ h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -97,8 +101,4 @@ p { .bold { font-weight: 800; } - -.right { - float: right; -} ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md index 16f81a2addf..fb67344c995 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md @@ -39,22 +39,24 @@ assert(style?.letterSpacing === '0.15px'); ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +- -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` @@ -88,6 +90,8 @@ h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -98,8 +102,4 @@ p { .bold { font-weight: 800; } - -.right { - float: right; -} ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md index 3398ee37508..9ee35e32e9d 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md @@ -7,7 +7,7 @@ dashedName: step-26 # --description-- -在 `header` 元素下創建一個新的 `div` 元素，並將其 `class` 屬性設置爲 `divider lg`。 +Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider large`. # --hints-- @@ -23,12 +23,12 @@ assert(document.querySelectorAll('div')?.length === 3); assert(document.querySelector('.label')?.lastElementChild?.localName === 'div'); ``` -新的 `div` 元素應該將 `class` 屬性設置爲 `divider lg`。 +Your new `div` element should have the `class` attribute set to `divider large`. ```js const div = document.querySelector('.label')?.lastElementChild; assert(div?.classList?.contains('divider')); -assert(div?.classList?.contains('lg')); +assert(div?.classList?.contains('large')); ``` # --seed-- @@ -38,25 +38,27 @@ assert(div?.classList?.contains('lg')); ```html - - -+ +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --+ ``` @@ -88,6 +90,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -98,8 +102,4 @@ p { .bold { font-weight: 800; } - -.right { - float: right; -} ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md index 0841f3b3391..715501d014c 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md @@ -7,32 +7,32 @@ dashedName: step-27 # --description-- -創建一個新的 `.lg` 選擇器，並將其 `height` 屬性設置爲 `10px`。 同時創建一個 `.lg, .md` 選擇器，並將 `background-color` 屬性設置爲 `black`。 +Create a new `.large` selector and give it a `height` property set to `10px`. Also create an `.large, .medium` selector and set the `background-color` property to `black`. # --hints-- -應該有一個新的 `.lg` 選擇器。 +You should have a new `.large` selector. ```js -assert(new __helpers.CSSHelp(document).getStyle('.lg')); +assert(new __helpers.CSSHelp(document).getStyle('.large')); ``` -`.lg` 選擇器應該將 `height` 屬性設置爲 `10px`。 +Your `.large` selector should have a `height` property set to `10px`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.lg')?.height === '10px'); +assert(new __helpers.CSSHelp(document).getStyle('.large')?.height === '10px'); ``` -應該有一個新的 `.lg, .md` 選擇器。 +You should have a new `.large, .medium` selector. ```js -assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')); +assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')); ``` -`.lg, .md` 選擇器應該有一個 `background-color` 屬性設置爲 `black`。 +Your `.large, .medium` selector should have a `background-color` property set to `black`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.backgroundColor === 'black'); +assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.backgroundColor === 'black'); ``` # --seed-- @@ -42,23 +42,25 @@ assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.backgroundColor === ```html - - -- + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + ++- ++ --fcc-editable-region-- --fcc-editable-region-- -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` @@ -90,6 +92,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -101,10 +105,6 @@ p { font-weight: 800; } -.right { - float: right; -} - --fcc-editable-region-- --fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md index bb5b67ae535..ea6eaa1d1df 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md @@ -7,16 +7,16 @@ dashedName: step-28 # --description-- -你可能會注意到 `.lg` 元素的底部仍有一個小邊框。 要重置它，給 `.lg, .md` 選擇器一個 `border` 屬性設置爲 `0`。 +You may notice there is still a small border at the bottom of your `.large` element. To reset this, give your `.large, .medium` selector a `border` property set to `0`. -注意：`md`（中等）類將在步驟 37 中用於營養標籤的較細柱狀圖。 +Note: the `medium`(medium) class will be utilized in step 37 for the thinner bars of the nutrition label. # --hints-- -`.lg, .md` 選擇器應該將 `border` 屬性設置爲 `0`。 +Your `.large, .medium` selector should have a `border` property set to `0`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.borderWidth === '0px'); +assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.borderWidth === '0px'); ``` # --seed-- @@ -26,23 +26,25 @@ assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.borderWidth === '0p ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` @@ -74,6 +76,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -85,16 +89,12 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } --fcc-editable-region-- -.lg, .md { +.large, .medium { background-color: black; } --fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md index f2d1a52da6f..24bf7e963fd 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md @@ -7,7 +7,7 @@ dashedName: step-29 # --description-- -在 `.lg` 元素下創建一個新的 `div`，並將 `class` 屬性設置爲 `calories-info`。 +Create a new `div` below your `.large` element and give it a `class` attribute set to `calories-info`. # --hints-- @@ -23,10 +23,10 @@ assert(document.querySelectorAll('div')?.length === 4); assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info')); ``` -新的 `div` 應該在 `.lg` 元素之後。 +Your new `div` should come after the `.large` element. ```js -assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('lg')); +assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('large')); ``` # --seed-- @@ -36,26 +36,28 @@ assert(document.querySelector('.label')?.lastElementChild?.previousElementSiblin ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --+ ``` @@ -87,6 +89,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -98,15 +102,11 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md index a1680282080..5aa7aac2ab2 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md @@ -7,27 +7,39 @@ dashedName: step-30 # --description-- -在 `.calories-info` 元素中，創建一個 `p` 元素。 給那個 `p` 元素一個 `class` 屬性設置爲 `bold sm-text`，以及文本 `Amount per serving`。 +Within your `.calories-info` element, create a `div` element. Give that `div` element a `class` attribute set to `left-container`. Within the newly created `div` element, create a `h2` element with the text `Amount per serving`. Give the `h2` element a `class` attribute set to `bold small-text`. # --hints-- -應該在 `.calories-info` 元素中創建一個新的 `p` 元素。 +You should create a new `div` element within your `.calories-info` element. ```js -assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'p'); +assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'div'); ``` -新的 `p` 元素應該有一個 `class` 屬性設置爲 `bold sm-text`。 +Your new `div` element should have a `class` attribute set to `left-container`. ```js -assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('bold')); -assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('sm-text')); +assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('left-container')); ``` -新的 `p` 元素應包含文本 `Amount per serving`。 +You should create a new `h2` element within your `.left-container` element. ```js -assert(document.querySelector('.calories-info')?.children?.[0]?.innerText === 'Amount per serving'); +assert(document.querySelector('.left-container')?.children?.[0]?.localName === 'h2'); +``` + +Your new `h2` element should have a `class` attribute set to `bold small-text`. + +```js +assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('bold')); +assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('small-text')); +``` + +Your new `h2` element should have the text `Amount per serving`. + +```js +assert(document.querySelector('.left-container')?.children?.[0]?.innerText === 'Amount per serving'); ``` # --seed-- @@ -37,28 +49,30 @@ assert(document.querySelector('.calories-info')?.children?.[0]?.innerText === 'A ```html - - -- - + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + ++- ++ + --fcc-editable-region-- --fcc-editable-region-- -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- - ---fcc-editable-region-- -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--+ + +Nutrition Label + + + + + +++ ``` @@ -90,6 +104,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -101,15 +117,11 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md index c8dea5b75ac..7fb1bce09af 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md @@ -9,20 +9,20 @@ dashedName: step-31 `rem` 單位代表 `root em`，與 `html` 元素的字體大小有關。 -創建一個 `.sm-text` 選擇器並將 `font-size` 設置爲 `0.85rem`，計算結果大致爲 `13.6px`（記得你之前將 `html` 設置爲具有 `16px` 的 `font-size`）。 +Create an `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to be roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`). # --hints-- -應該有一個 `.sm-text` 選擇器。 +You should have an `.small-text` selector. ```js -assert(new __helpers.CSSHelp(document).getStyle('.sm-text')); +assert(new __helpers.CSSHelp(document).getStyle('.small-text')); ``` -`.sm-text` 選擇器應該有一個 `font-size` 屬性設置爲 `0.85rem`。 +Your `.small-text` selector should have a `font-size` property set to `0.85rem`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.sm-text')?.fontSize === '0.85rem'); +assert(new __helpers.CSSHelp(document).getStyle('.small-text')?.fontSize === '0.85rem'); ``` # --seed-- @@ -32,26 +32,30 @@ assert(new __helpers.CSSHelp(document).getStyle('.sm-text')?.fontSize === '0.85r ```html - - -+ + --fcc-editable-region-- +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- +--fcc-editable-region-- +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
+ + + +Nutrition Label + + + + + +++ ``` @@ -83,6 +87,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -94,15 +100,11 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md index 094320de3d2..91855ad7f6b 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md @@ -1,51 +1,50 @@ --- id: 615f5486b8fd4b71633f69b0 -title: 步驟 32 +title: Step 33 challengeType: 0 -dashedName: step-32 +dashedName: step-33 --- # --description-- -在 `.sm-text` 元素下方，使用文本 `Calories 230` 創建一個新的 `h1` 元素。 將文本的 `230` 部分包裹在 `span` 元素中，其中 `class` 設置爲 `right`。 +Below your `.small-text` element, create a new `p` element with the text `Calories`. Also below the `.left-container` element, create a new `span` element with the text `230`. # --hints-- -`.calories-info` 元素中應該有一個新的 `h1` 元素。 +You should have a new `p` element within your `.calories-info` element. ```js -assert(document.querySelector('.calories-info')?.querySelector('h1')) +assert(document.querySelector('.calories-info')?.querySelector('p')) ``` -`h1` 元素應該在 `.sm-text` 元素之後。 +You should have a new `span` element within your `.calories-info` element. ```js -assert(document.querySelector('.sm-text')?.nextElementSibling?.localName === 'h1'); +assert(document.querySelector('.calories-info')?.querySelector('span')) ``` -`h1` 元素應包含文本 `Calories 230`。 +Your `p` element should come after your `.small-text` element. ```js -// the float: right property does weird things to the inner text. -assert(document.querySelector('.calories-info')?.lastElementChild?.innerText.match(/Calories[\s|\n]*230/)); +assert(document.querySelector('.small-text')?.nextElementSibling?.localName === 'p'); ``` -應該在新的 `h1` 元素中創建一個 `span` 元素。 +Your `p` element should have the text `Calories`. ```js -assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')); +assert(document.querySelector('.left-container')?.lastElementChild?.innerText === 'Calories'); ``` -`span` 元素應該將 `class` 設置爲 `right`。 +Your `span` element should come after your `.left-container` element. ```js -assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); +assert(document.querySelector('.left-container')?.nextElementSibling?.localName ==='span'); ``` `span` 元素應包含文本 `230`。 ```js -assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.innerText === '230'); +assert(document.querySelector('.calories-info')?.lastElementChild?.innerText === '230'); ``` # --seed-- @@ -55,28 +54,32 @@ assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- ++Amount per serving
Nutrition Label - - - - --- - + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ + --fcc-editable-region-- -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+-+ ``` @@ -108,6 +111,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -119,20 +124,20 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.sm-text { +.small-text { font-size: 0.85rem; } + +.calories-info h2 { + margin: 0; +} ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md index fdb5992cacc..14f20ffb784 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md @@ -1,29 +1,41 @@ --- id: 615f575b50b91e72af079480 -title: 步驟 33 +title: Step 35 challengeType: 0 -dashedName: step-33 +dashedName: step-35 --- # --description-- -創建一個新的 `.calories-info h1` 選擇器，將上下邊距設置爲 `-5px`，將左右邊距設置爲 `-2px`。 +Create a new `.left-container p` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. Also set the `font-size` to `2em` and `font-weight` to `700`. # --hints-- -應該有一個新的 `.calories-info h1` 選擇器。 +You should have a new `.left-container p` selector. ```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')); +assert(new __helpers.CSSHelp(document).getStyle('.left-container p')); ``` -新的 `.calories-info h1` 選擇器應將 `margin` 屬性設置爲 `-5px -2px`。 +Your new `.left-container p` selector should have a `margin` property set to `-5px -2px`. ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginTop, '-5px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginBottom, '-5px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginLeft, '-2px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginRight, '-2px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginTop, '-5px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginBottom, '-5px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginLeft, '-2px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginRight, '-2px'); +``` + +Your new `.left-container p` selector should have a `font-size` property set to `2em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontSize === '2em'); +``` + +Your new `.left-container p` selector should have a `font-weight` property set to `700`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontWeight === '700'); ``` # --seed-- @@ -33,27 +45,32 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marg ```html - - -Amount per serving
++- +--fcc-editable-region-- ++---fcc-editable-region--Amount per serving
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -85,6 +102,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -96,23 +115,29 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.sm-text { +.small-text { font-size: 0.85rem; } +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + --fcc-editable-region-- --fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md index 1a6cabd2cbd..2c704e144e2 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md @@ -1,13 +1,13 @@ --- id: 615f5af373a68e744a3c5a76 -title: 步驟 34 +title: Step 36 challengeType: 0 -dashedName: step-34 +dashedName: step-36 --- # --description-- -創建一個 `.calories-info span` 選擇器並將 `font-size` 設置爲 `1.2em`。 +Create a `.calories-info span` selector, set its `font-size` to `2.4em` and `font-weight` to `700`. # --hints-- @@ -17,10 +17,16 @@ dashedName: step-34 assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')); ``` -`.calories-info span` 選擇器應該將 `font-size` 屬性設置爲 `1.2em`。 +Your `.calories-info span` selector should have a `font-size` property set to `2.4em`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '1.2em'); +assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '2.4em'); +``` + +Your `.calories-info span` selector should have a `font-weight` property set to `700`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontWeight === '700'); ``` # --seed-- @@ -30,27 +36,32 @@ assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- +++ 230Amount per serving
+Calories
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -82,6 +93,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -93,25 +106,33 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; + font-size: 2em; + font-weight: 700; } --fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md index c42c9c47919..2bfa47f0862 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md @@ -1,22 +1,22 @@ --- id: 615f5fd85d0062761f288364 -title: 步驟 36 +title: Step 37 challengeType: 0 -dashedName: step-36 +dashedName: step-37 --- # --description-- 排版往往是藝術而非科學。 你可能需要調整對齊等內容，直到它看起來正確爲止。 -給 `.calories-info span` 選擇器一個 `margin-top` 設置爲 `-7px`。 這會將 `230` 文本移動到位。 +Give your `.calories-info span` selector a `margin` set to `-7px -2px`. 這會將 `230` 文本移動到位。 # --hints-- -`.calories-info span` 選擇器應將 `margin-top` 設置爲 `-7px`。 +Your `.calories-info span` selector should have a `margin` set to `-7px -2px`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.marginTop === '-7px'); +assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.margin === '-7px -2px'); ``` # --seed-- @@ -26,27 +26,32 @@ assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.marginTo ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- +++ 230Amount per serving
+Calories
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -78,6 +83,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -89,31 +96,39 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } --fcc-editable-region-- .calories-info span { - font-size: 1.2em; + font-size: 2.4em; + font-weight: 700; } --fcc-editable-region-- ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md index 219145c73b8..2ea3ac3d3a2 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md @@ -1,13 +1,13 @@ --- id: 615f61338c8ca176d6445574 -title: 步驟 37 +title: Step 38 challengeType: 0 -dashedName: step-37 +dashedName: step-38 --- # --description-- -在 `.calories-info` 元素下方，添加一個 `div`，並將 `class` 屬性設置爲 `divider md`。 +Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider medium`. # --hints-- @@ -17,11 +17,11 @@ dashedName: step-37 assert(document.querySelectorAll('.label > div')?.length === 3) ``` -新的 `div` 應該將 `class` 屬性設置爲 `divider md`。 這個 div 應該是 `.label` 元素中的最後一個元素。 +Your new `div` should have the `class` attribute set to `divider medium`. 這個 div 應該是 `.label` 元素中的最後一個元素。 ```js const div = document.querySelector('.label')?.lastElementChild; -assert(div?.classList?.contains('divider') && div?.classList?.contains('md')); +assert(div?.classList?.contains('divider') && div?.classList?.contains('medium')); ``` # --seed-- @@ -31,30 +31,35 @@ assert(div?.classList?.contains('divider') && div?.classList?.contains('md')); ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- +++ 230Amount per serving
+Calories
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--+ ``` @@ -86,6 +91,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -97,30 +104,38 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; } ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md index 25cc2575b77..f074a2cf764 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md @@ -1,26 +1,26 @@ --- id: 615f666ac5edea782feb7e75 -title: 步驟 38 +title: Step 39 challengeType: 0 -dashedName: step-38 +dashedName: step-39 --- # --description-- -創建一個 `.md` 選擇器併爲其賦予 `height` 屬性爲 `5px`。 +Create an `.medium` selector and give it a `height` property of `5px`. # --hints-- -應該創建一個 `.md` 選擇器。 +You should create an `.medium` selector. ```js -assert(new __helpers.CSSHelp(document).getStyle('.md')); +assert(new __helpers.CSSHelp(document).getStyle('.medium')); ``` -`.md` 選擇器應該將 `height` 屬性設置爲 `5px`。 +Your `.medium` selector should have a `height` property set to `5px`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.md')?.height === '5px'); +assert(new __helpers.CSSHelp(document).getStyle('.medium')?.height === '5px'); ``` # --seed-- @@ -30,28 +30,33 @@ assert(new __helpers.CSSHelp(document).getStyle('.md')?.height === '5px'); ```html - - -Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + ++- ++ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++--fcc-editable-region-- --fcc-editable-region-- -++ 230 +Amount per serving
+Calories
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -83,6 +88,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -94,15 +101,11 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } @@ -111,17 +114,29 @@ p { --fcc-editable-region-- -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; } ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md index 8837a875a35..94ddfb4474b 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md @@ -1,29 +1,29 @@ --- id: 615f671b6d1919792745aa5d -title: 步驟 39 +title: Step 40 challengeType: 0 -dashedName: step-39 +dashedName: step-40 --- # --description-- -在 `.md` 元素下創建一個新的 `div` 元素。 給它一個 `class` 屬性設置爲 `daily-value sm-text`。 在這個新的 `div` 中，添加帶有文本 `% Daily Value *` 的 `p` 元素，並設置 `class` 屬性 `right bold`。 +Create a new `div` element below your `.medium` element. Give it a `class` attribute set to `daily-value small-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `bold right`. # --hints-- -應該在 `.md` 元素之後創建一個新的 `div` 元素。 +You should create a new `div` element after your `.medium` element. ```js assert(document.querySelector('.label')?.lastElementChild?.localName === 'div'); assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider')); -assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('md')); +assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('medium')); ``` -新的 `div` 應該有一個 `class` 屬性設置爲 `daily-value sm-text`。 +Your new `div` should have a `class` attribute set to `daily-value small-text`. ```js assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value')); -assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('sm-text')); +assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('small-text')); ``` 新的 `div` 元素應該有一個 `p` 元素。 @@ -38,11 +38,11 @@ assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.lo assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *'); ``` -新的 `p` 元素應該有一個 `class` 屬性設置爲 `right bold`。 +Your new `p` element should have a `class` attribute set to `bold right`. ```js -assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right')); assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right')); ``` # --seed-- @@ -52,32 +52,36 @@ assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.cl ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + ++- + 230Amount per serving
+Calories
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- ---fcc-editable-region-- ---fcc-editable-region-- + + +Amount per serving
-Calories 230
-Nutrition Label + + + + + +++ ``` @@ -109,6 +113,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -120,34 +126,42 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; } ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md index d00acf73b8f..94a17c3f977 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md @@ -1,32 +1,32 @@ --- id: 615f6823d0815b7a991f2a75 -title: 步驟 40 +title: Step 42 challengeType: 0 -dashedName: step-40 +dashedName: step-42 --- # --description-- -`float` 樣式導致新的 `p` 元素位於標籤邊框之外。 以現有的 `.divider` 元素爲例，在 `p` 元素之後添加新的分隔符。 +Use your existing `.divider` element as an example to add a new divider after the `p` element. # --hints-- -應該在 `.daily-value.sm-text` 元素中創建一個新的 `div`。 +You should create a new `div` within your `.daily-value` element. ```js -assert(document.querySelectorAll('.daily-value.sm-text > div')?.length === 1) +assert(document.querySelectorAll('.daily-value.small-text > div')?.length === 1) ``` 新的 `div` 應該將 `class` 屬性設置爲 `divider`。 ```js -assert(document.querySelector('.daily-value.sm-text > div')?.classList?.contains('divider')) +assert(document.querySelector('.daily-value.small-text > div')?.classList?.contains('divider')) ``` 新的 `div` 應該在 `p` 元素之後。 ```js -assert(document.querySelector('.daily-value.sm-text > div')?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text > div')?.previousElementSibling?.localName === 'p'); ``` # --seed-- @@ -36,34 +36,38 @@ assert(document.querySelector('.daily-value.sm-text > div')?.previousElementSibl ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + --fcc-editable-region-- + + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- ---fcc-editable-region-- -Amount per serving
-Calories 230
--% Daily Value *
+ + +Nutrition Label + + + + + +++ ``` @@ -95,6 +99,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -106,34 +112,46 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md index 971c1cf7456..626bbc32457 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md @@ -1,56 +1,62 @@ --- id: 615f6b2d164f81809efd9bdc -title: 步驟 42 +title: Step 43 challengeType: 0 -dashedName: step-42 +dashedName: step-43 --- # --description-- -在最後一個 `.divider` 元素之後，創建一個 `p` 元素併爲其指定文本 `Total Fat 8g 10%`。 將 `Total Fat` 包裹在 `span` 元素中，並將 `class` 設置爲 `bold`。 將 `10%` 包裹在另一個 `span` 元素中，並將 `class` 設置爲 `bold right`。 +在最後一個 `.divider` 元素之後，創建一個 `p` 元素併爲其指定文本 `Total Fat 8g 10%`。 將 `Total Fat` 包裹在 `span` 元素中，並將 `class` 設置爲 `bold`。 Wrap `10%` in another `span` element with the `class` set to `bold`. Also wrap the words `Total Fat 8g` in an additional `span` element for alignment. # --hints-- 應該在 `.daily-value` 元素的末尾創建一個新的 `p` 元素。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` 新的 `p` 元素應包含文本 `Total Fat 8g 10%`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Fat 8g[\s|\n]+10%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/)); ``` -`p` 元素應該有兩個 `span` 元素。 +Your `p` element should have three `span` elements. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -第一個 `span` 元素應該包含文本 `Total Fat`。 +One `span` element should wrap the text `Total Fat`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span > span')?.innerText === 'Total Fat'); ``` -第一個 `span` 元素應該將 `class` 設置爲 `bold`。 +The `span` element around `Total Fat` should have the `class` set to `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.className === 'bold'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span > span')?.className === 'bold'); ``` -第二個 `span` 元素應該包含文本 `10%`。 +A `span` element should wrap the text `10%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.innerText === '10%'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span + span')?.innerText === '10%'); ``` -第二個 `span` 元素應該將 `class` 設置爲 `bold right`。 +The `span` element around `10%` should have the `class` set to `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold right'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold'); +``` + +A `span` element should have the text `Total Fat 8g`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g/)); ``` # --seed-- @@ -60,35 +66,39 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySe ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- ++---fcc-editable-region-- + 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- ---fcc-editable-region-- ---fcc-editable-region-- + + +Nutrition Label + + + + + +++ ``` @@ -120,46 +130,59 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md index bfa02cf3be5..04d4497b806 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md @@ -1,46 +1,45 @@ --- id: 615f6cc778f7698258467596 -title: 步驟 43 +title: Step 44 challengeType: 0 -dashedName: step-43 +dashedName: step-44 --- # --description-- -在帶有 `Total Fat` 文本的元素下方，使用文本 `Saturated Fat 1g 5%` 創建一個新的 `p` 元素。 將 `5%` 包裹在 `span` 中，並將 `class` 屬性設置爲 `bold right`。 +在帶有 `Total Fat` 文本的元素下方，使用文本 `Saturated Fat 1g 5%` 創建一個新的 `p` 元素。 Wrap the `5%` in a `span` with the `class` attribute set to `bold`. In this case this is enough to align the percentage to `5%`. # --hints-- 應該使用 `Total Fat` 文本在元素下方創建一個新的 `p` 元素。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/)); ``` 新 `p` 元素應包含文本 `Saturated Fat 1g 5%`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/)); ``` 新 `p` 元素應該有一個 `span` 元素。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.localName === 'span'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.localName === 'span'); ``` -`span` 元素應該將 `class` 屬性設置爲 `bold right`。 +Your `span` element should have the `class` attribute set to `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); ``` `span` 元素應該包含 `5%` 文本。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === "5%"); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === "5%"); ``` # --seed-- @@ -50,36 +49,40 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastEle ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- -Total Fat 8g10%
---fcc-editable-region-- ---fcc-editable-region-- + + +Nutrition Label + + + + + +++ ``` @@ -111,46 +114,59 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md index fbc8dcf2a6a..652da1dd958 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md @@ -1,8 +1,8 @@ --- id: 615f6fddaac1e083502d3e6a -title: 步驟 44 +title: Step 45 challengeType: 0 -dashedName: step-44 +dashedName: step-45 --- # --description-- @@ -14,7 +14,7 @@ dashedName: step-44 帶有文本 `Saturated Fat 1g 5%` 的 `p` 元素應該將 `class` 屬性設置爲 `indent`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('indent')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('indent')); ``` # --seed-- @@ -24,36 +24,41 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- -Total Fat 8g10%
---fcc-editable-region-- -Saturated Fat 1g 5%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -85,46 +90,59 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md index e72db547a58..7bf5dc8a19c 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md @@ -1,8 +1,8 @@ --- id: 615f70077a4ff98424236c1e -title: 步驟 45 +title: Step 46 challengeType: 0 -dashedName: step-45 +dashedName: step-46 --- # --description-- @@ -30,34 +30,39 @@ assert(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft === '1em' ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
+ + + +Nutrition Label + + + + + +++ ``` @@ -89,47 +94,60 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } --fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md index f6daaec761b..1d9721bc361 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md @@ -1,8 +1,8 @@ --- id: 615f72a872354a850d4f533e -title: 步驟 46 +title: Step 47 challengeType: 0 -dashedName: step-46 +dashedName: step-47 --- # --description-- @@ -30,34 +30,39 @@ assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + +++ 230Amount per serving
+Calories
++% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
+ + + +Nutrition Label + + + + + +++ ``` @@ -89,47 +94,60 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md index 288a53ab535..746a171b5d8 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md @@ -1,8 +1,8 @@ --- id: 615f74a71f1e498619e38ee8 -title: 步驟 47 +title: Step 48 challengeType: 0 -dashedName: step-47 +dashedName: step-48 --- # --description-- @@ -14,16 +14,15 @@ dashedName: step-47 帶有文本 `% Daily Value *` 的 `p` 元素應該將 `no-divider` 添加到 `class` 屬性中。 不要刪除現有的類。 ```js -const p = document.querySelector('.daily-value.sm-text')?.firstElementChild; +const p = document.querySelector('.daily-value.small-text')?.firstElementChild; assert(p?.classList?.contains('no-divider')); assert(p?.classList?.contains('bold')); -assert(p?.classList?.contains('right')); ``` 帶有文本 `Saturated Fat 1g 5%` 的 `p` 元素應該將 `no-divider` 添加到 `class` 屬性中。 不要刪除現有的類。 ```js -const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; +const p = document.querySelector('.daily-value.small-text')?.lastElementChild; assert(p?.classList?.contains('no-divider')); assert(p?.classList?.contains('indent')); ``` @@ -35,36 +34,41 @@ assert(p?.classList?.contains('indent')); ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + +++ 230Amount per serving
+Calories
++% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -96,47 +100,60 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md index bbc9265a9f3..805fb174c68 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md @@ -1,8 +1,8 @@ --- id: 615f7ad94380408d971d14f6 -title: 步驟 48 +title: Step 49 challengeType: 0 -dashedName: step-48 +dashedName: step-49 --- # --description-- @@ -44,37 +44,43 @@ assert(style?.borderBottom === '1px solid rgb(136, 137, 137)'); ## --seed-contents-- + ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- ++- ---fcc-editable-region-- -Amount per serving
+Calories
----fcc-editable-region-- + 230% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
-++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
+ + + +Nutrition Label + + + + + +++ ``` @@ -106,47 +112,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md index 480cbbb1568..26aa39c949b 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md @@ -1,8 +1,8 @@ --- id: 615f7bc680f7168ea01ebf99 -title: 步驟 49 +title: Step 50 challengeType: 0 -dashedName: step-49 +dashedName: step-50 --- # --description-- @@ -13,16 +13,16 @@ dashedName: step-49 # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建一個新的 `div`。 +You should create a new `div` at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div'); ``` 新的 `div` 應該將 `class` 屬性設置爲 `divider`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider')); ``` # --seed-- @@ -32,36 +32,41 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + +++ 230Amount per serving
+Calories
++% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -93,47 +98,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md index 443e30a8303..9ebce95ba41 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md @@ -1,32 +1,32 @@ --- id: 615f7c71eab8218f846e4503 -title: 步驟 50 +title: Step 51 challengeType: 0 -dashedName: step-50 +dashedName: step-51 --- # --description-- -在最後一個 `.divider` 之後，創建另一個 `p` 元素，其中包含文本 `Trans Fat 0g`。 通過將單詞 `Trans` 包裝在 `i` 元素中，將其變爲斜體。 給新的 `p` 元素的 `class` 屬性設置爲 `indent no-divider`。 +在最後一個 `.divider` 之後，創建另一個 `p` 元素，其中包含文本 `Trans Fat 0g`。 通過將單詞 `Trans` 包裝在 `i` 元素中，將其變爲斜體。 給新的 `p` 元素的 `class` 屬性設置爲 `indent no-divider`。 Wrap `Trans Fat 0g` in a `span` element for alignment. # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建一個新的 `p` 元素。 +You should create a new `p` element at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` 新 `p` 元素應該包含文本 `Trans Fat 0g`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText === 'Trans Fat 0g'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText === 'Trans Fat 0g'); ``` 新的 `p` 元素應該將 `class` 屬性設置爲 `indent no-divider`。 ```js -const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; +const p = document.querySelector('.daily-value.small-text')?.lastElementChild; assert(p?.classList?.contains('indent')); assert(p?.classList?.contains('no-divider')); ``` @@ -34,13 +34,25 @@ assert(p?.classList?.contains('no-divider')); 新的 `p` 元素應該有一個 `i` 元素。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'i'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')); ``` `i` 元素應該包含文本 `Trans`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Trans'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')?.innerText === 'Trans'); +``` + +Your new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')); +``` + +Your `span` element should wrap the text `Trans Fat 0g`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText?.match(/Trans[\s|\n]+Fat 0g/)); ``` # --seed-- @@ -50,37 +62,42 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstEl ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- ---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -112,47 +129,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md index a23d5df6774..9fc1c5474f9 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md @@ -1,8 +1,8 @@ --- id: 615f7d489a581590d1350288 -title: 步驟 51 +title: Step 52 challengeType: 0 -dashedName: step-51 +dashedName: step-52 --- # --description-- @@ -11,16 +11,16 @@ dashedName: step-51 # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建一個新的 `div` 元素。 +You should create a new `div` element at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div'); ``` 新的 `div` 元素應該將 `class` 屬性設置爲 `divider`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider')); ``` # --seed-- @@ -30,38 +30,43 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -93,47 +98,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md index 3ed89aa93fc..a2deafd7358 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md @@ -1,57 +1,62 @@ --- id: 615f7de4487b64919bb4aa5e -title: 步驟 52 +title: Step 53 challengeType: 0 -dashedName: step-52 +dashedName: step-53 --- # --description-- -在最後一個 `.divider` 之後，使用文本 `Cholesterol 0mg 0%` 創建一個新的 `p` 元素。 將文本 `Cholesterol` 包裹在 `span` 元素中，並將 `span` 元素的 `class` 屬性設置爲 `bold`。 將文本 `0%` 包裹在另一個 `span` 元素中，並將 `class` 設置爲 `bold right`。 +在最後一個 `.divider` 之後，使用文本 `Cholesterol 0mg 0%` 創建一個新的 `p` 元素。 將文本 `Cholesterol` 包裹在 `span` 元素中，並將 `span` 元素的 `class` 屬性設置爲 `bold`。 Wrap the text `0%` in another `span` element, with the `class` set to `bold`. Also wrap `Cholesterol 0mg` in an additional `span` element for the alignment. # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建一個新的 `p` 元素。 +You should create a new `p` element at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` 新的 `p` 元素應包含文本 `Cholesterol 0mg 0%`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Cholesterol 0mg[\s|\n]+0%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Cholesterol[\s|\n]+0mg[\s|\n]+0%/)); ``` -新的 `p` 元素應該有兩個 `span` 元素。 +Your new `p` element should have three `span` elements. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -第一個 `span` 元素應該將 `class` 屬性設置爲 `bold`。 +Your first `span` `Cholesterol` element should have the `class` attribute set to `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold')); ``` -第一個 `span` 元素應該包含文本 `Cholesterol`。 +Your first `span` element should wrap the text `Cholesterol 0mg`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Cholesterol'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Cholesterol[\s|\n]+0mg/)); ``` -第二個 `span` 元素應該將 `class` 屬性設置爲 `bold right`。 +Your first `span` element should wrap the text `Cholesterol`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Cholesterol'); ``` -第二個 `span` 元素應該包含文本 `0%`。 +Your second `span` element should have the `class` attribute set to `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '0%'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); +``` + +Your second `span` element should wrap the text `0%`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '0%'); ``` # --seed-- @@ -61,39 +66,44 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastEle ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- ---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -125,47 +135,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md index 84889f3b031..80029a1efe8 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md @@ -1,57 +1,62 @@ --- id: 615f7e7281626a92bbd62da8 -title: 步驟 53 +title: Step 54 challengeType: 0 -dashedName: step-53 +dashedName: step-54 --- # --description-- -在最後一個 `p` 元素下方，使用文本 `Sodium 160mg 7%` 創建另一個 `p` 元素。 將文本 `Sodium` 包裹在 `span` 元素中，並將 `class` 屬性設置爲 `bold`。 將 `7%` 文本包裹在另一個 `span` 元素中，其中 `class` 設置爲 `bold right`。 +在最後一個 `p` 元素下方，使用文本 `Sodium 160mg 7%` 創建另一個 `p` 元素。 將文本 `Sodium` 包裹在 `span` 元素中，並將 `class` 屬性設置爲 `bold`。 Wrap the `7%` text in another `span` element with the `class` set to `bold`. Also add an additional `span` element around `Sodium 160mg` for aligning it correctly. # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建一個新的 `p` 元素。 +You should create a new `p` element at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` 新的 `p` 元素應包含文本 `Sodium 160mg 7%`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Sodium 160mg[\s|\n]+7%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/)); ``` -新的 `p` 元素應該有兩個 `span` 元素。 +Your new `p` element should have three `span` elements. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -第一個 `span` 元素應該將 `class` 屬性設置爲 `bold`。 +A `span` element should wrap the text `Sodium 360mg`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/)); ``` -第一個 `span` 元素應該包含文本 `Sodium`。 +A `span` element should wrap the text `Sodium`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Sodium'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium"); ``` -第二個 `span` 元素應該將 `class` 屬性設置爲 `bold right`。 +The `span` around `Sodium` should have the `class` attribute set to `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold')); ``` -第二個 `span` 元素應該包含文本 `7%`。 +A `span` element should wrap the text `7%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '7%'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%'); +``` + +The `span` element around `7%` should have the `class` attribute set to `bold`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); ``` # --seed-- @@ -61,40 +66,45 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastEle ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -126,47 +136,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md index 3f4eac30967..3add8f85d7e 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md @@ -1,57 +1,68 @@ --- id: 615f7ecb09de9a938ef94756 -title: 步驟 54 +title: Step 55 challengeType: 0 -dashedName: step-54 +dashedName: step-55 --- # --description-- -添加另一個 `p` 元素，其文本爲 `Total Carbohydrate 37g 13%`。 像以前一樣，使用 `span` 元素使文本 `Total Carbohydrate` 加粗，文本 `13%` 加粗並右對齊。 +添加另一個 `p` 元素，其文本爲 `Total Carbohydrate 37g 13%`。 Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Also add an additional `span` element to wrap the `Total Carbohydrate 37g` text in a span element so to have it aligned to the left, and `13%` to the right. # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建一個新的 `p` 元素。 +You should create a new `p` element at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` 新的 `p` 元素應包含文本 `Total Carbohydrate 37g 13%`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate 37g[\s|\n]+13%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g[\s|\n]+13%/)); ``` -新的 `p` 元素應該有兩個 `span` 元素。 +Your new `p` element should have three `span` elements. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -第一個 `span` 元素應該將 `class` 屬性設置爲 `bold`。 +One `span` element should wrap the text `Total Carbohydrate 37g`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g/)); ``` -第一個 `span` 元素應該包含文本 `Total Carbohydrate`。 +One `span` element should wrap the text `Total Carbohydrate`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Total Carbohydrate'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Total Carbohydrate'); ``` -第二個 `span` 元素應該將 `class` 屬性設置爲 `bold right`。 +The `span` element around `Total Carbohydrate` should have the `class` attribute set to `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold')); ``` -第二個 `span` 元素應該包含文本 `13%`。 +A `span` element should wrap the text `13%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '13%'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%'); +``` + +The `span` element around `13%` should have the `class` attribute set to `bold`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); +``` + +Your second `span` element should wrap the text `13%`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%'); ``` # --seed-- @@ -61,41 +72,46 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastEle ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -127,47 +143,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md index 77d31264c05..8f9fcfad859 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md @@ -1,8 +1,8 @@ --- id: 615f7fa959ab75948f96a0d6 -title: 步驟 55 +title: Step 56 challengeType: 0 -dashedName: step-55 +dashedName: step-56 --- # --description-- @@ -11,30 +11,30 @@ dashedName: step-55 # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建一個新的 `p` 和 `div` 元素。 +You should create a new `p` and `div` element at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div'); ``` 新的 `p` 元素應包含文本 `Dietary Fiber 4g`。 ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/)); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/)); ``` 新的 `p` 元素應該將 `class` 屬性設置爲 `indent no-divider`。 ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider')); ``` 新的 `div` 應該將 `class` 屬性設置爲 `divider`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider')); ``` # --seed-- @@ -44,42 +44,47 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -111,47 +116,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md index fddb160d0bc..db773b01f62 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md @@ -1,8 +1,8 @@ --- id: 615f808d85793195b0f53be9 -title: 步驟 56 +title: Step 57 challengeType: 0 -dashedName: step-56 +dashedName: step-57 --- # --description-- @@ -11,30 +11,30 @@ dashedName: step-56 # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建一個新的 `p` 和 `div` 元素。 +You should create a new `p` and `div` element at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div'); ``` 新的 `p` 元素應包含文本 `Total Sugars 12g`。 ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/)); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/)); ``` 新的 `p` 元素應該將 `class` 屬性設置爲 `indent no-divider`。 ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider')); ``` 新的 `div` 應該將 `class` 屬性設置爲 `divider`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider')); ``` # --seed-- @@ -44,44 +44,49 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- ---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -113,47 +118,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md index bfbfa42a833..c5ebb93f61b 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md @@ -1,21 +1,21 @@ --- id: 615f829d07b18f96f6f6684b -title: 步驟 57 +title: Step 58 challengeType: 0 -dashedName: step-57 +dashedName: step-58 --- # --description-- -創建這些分隔線的好處是你可以應用特定的類來單獨設置它們的樣式。 將 `dbl-indent` 添加到最後一個 `.divider` 的 `class`。 +創建這些分隔線的好處是你可以應用特定的類來單獨設置它們的樣式。 Add `double-indent` to the `class` for your last `.divider`. # --hints-- -最後一個 `.divider` 元素應該將 `dbl-indent` 添加到 `class`。 不要刪除現有值。 +Your last `.divider` element should have `double-indent` added to the `class`. 不要刪除現有值。 ```js -const last = document.querySelector('.daily-value.sm-text')?.lastElementChild; -assert(last?.classList?.contains('dbl-indent')); +const last = document.querySelector('.daily-value.small-text')?.lastElementChild; +assert(last?.classList?.contains('double-indent')); assert(last?.classList?.contains('divider')); ``` @@ -26,46 +26,51 @@ assert(last?.classList?.contains('divider')); ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- ---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -97,47 +102,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md index bb26c20bd06..370fd147adf 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md @@ -1,26 +1,26 @@ --- id: 615f83ef928ec9982b785b6a -title: 步驟 58 +title: Step 59 challengeType: 0 -dashedName: step-58 +dashedName: step-59 --- # --description-- -創建一個 `.dbl-indent` 選擇器並給它一個 `2em` 的左邊距。 +Create a `.double-indent` selector and give it a left margin of `2em`. # --hints-- -應該有一個新的 `.dbl-indent` 選擇器。 +You should have a new `.double-indent` selector. ```js -assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')); +assert(new __helpers.CSSHelp(document).getStyle('.double-indent')); ``` -`.dbl-indent` 選擇器應該有一個 `margin-left` 屬性設置爲 `2em`。 +Your `.double-indent` selector should have a `margin-left` property set to `2em`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')?.marginLeft === '2em'); +assert(new __helpers.CSSHelp(document).getStyle('.double-indent')?.marginLeft === '2em'); ``` # --seed-- @@ -30,44 +30,49 @@ assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')?.marginLeft === ' ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + +++ 230Amount per serving
+Calories
++% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ --fcc-editable-region-- + + --fcc-editable-region-- +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- + + + +Nutrition Label + + + + + +++ ``` @@ -99,56 +104,70 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } ---fcc-editable-region-- +--fcc-editable-region-- ---fcc-editable-region-- +--fcc-editable-region-- .daily-value p:not(.no-divider) { border-bottom: 1px solid #888989; diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md index db0f15c7fbf..feb1b858190 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md @@ -1,61 +1,60 @@ --- id: 615f84f246e8ba98e3cd97be -title: 步驟 59 +title: Step 60 challengeType: 0 -dashedName: step-59 +dashedName: step-60 --- # --description-- -在 `.dbl-indent` 元素的下方，添加一個新的 `p` 元素，其中包含文本 `Includes 10g Added Sugars 20%`。 新的 `p` 元素也應該是雙縮進的，並且沒有下邊框。 使用 `span` 使 `20%` 加粗並右對齊。 +Below your `.double-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. 新的 `p` 元素也應該是雙縮進的，並且沒有下邊框。 使用 `span` 使 `20%` 加粗並右對齊。 然後在該 `p` 元素之後創建另一個分隔線。 # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建一個新的 `p` 和 `div` 元素。 +You should create a new `p` and `div` element at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div'); ``` 新的 `p` 元素應包含文本 `Includes 10g Added Sugars 20%`。 ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/)); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/)); ``` -新的 `p` 元素應該將 `class` 屬性設置爲 `dbl-indent no-divider`。 +Your new `p` element should have the `class` attribute set to `double-indent no-divider`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('dbl-indent')); -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('double-indent')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider')); ``` 新 `p` 元素應該有一個 `span` 元素。 ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.localName === 'span'); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.localName === 'span'); ``` -`span` 元素應該將 `class` 屬性設置爲 `bold right`。 +Your `span` element should have the `class` attribute set to `bold`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('right')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.classList?.contains('bold')); ``` `span` 元素應該包含文本 `20%`。 ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type span')?.innerText === '20%'); +assert(document.querySelector('.daily-value.small-text p:last-of-type span')?.innerText === '20%'); ``` 新的 `div` 應該將 `class` 屬性設置爲 `divider`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider')); ``` # --seed-- @@ -65,46 +64,51 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + +++ 230Amount per serving
+Calories
++% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- ---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -136,54 +140,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md index 781e204060f..1755cca80be 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md @@ -1,8 +1,8 @@ --- id: 615f887466db4ba14b5342cc -title: 步驟 60 +title: Step 61 challengeType: 0 -dashedName: step-60 +dashedName: step-61 --- # --description-- @@ -13,30 +13,30 @@ dashedName: step-60 # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建一個新的 `p` 和 `div` 元素。 +You should create a new `p` and `div` element at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div'); ``` 新的 `p` 元素應包含文本 `Protein 3g`。 ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/)); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/)); ``` 新的 `p` 元素應該將 `class` 屬性設置爲 `no-divider`。 ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider')); ``` -新的 `div` 應該將 `class` 屬性設置爲 `divider lg`。 +Your new `div` should have the `class` attribute set to `divider large`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('lg')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('large')); ``` # --seed-- @@ -46,48 +46,53 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -119,54 +124,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md index ec3b9d6bba1..ef819e74ec0 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md @@ -1,39 +1,40 @@ --- id: 615f89e055040ba294719d2f -title: 步驟 61 +title: Step 62 challengeType: 0 -dashedName: step-61 +dashedName: step-62 --- # --description-- -在大分隔線下方創建另一個 `p` 元素。 爲 `p` 元素提供文本 `Vitamin D 2mcg 10%`。 使用 `span` 使 `10%` 向右對齊，但不要使其變爲粗體。 +在大分隔線下方創建另一個 `p` 元素。 爲 `p` 元素提供文本 `Vitamin D 2mcg 10%`。 + +The `p` element contains only text, you can wrap the percentage in a `span` element so that it is considered a separate entity from the rest of the text, and it's moved to the right. # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建一個新的 `p` 元素。 +You should create a new `p` element at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` -新的 `p` 元素應包含文本 `Vitamin D 2mcg 10%`。 +Your new `p` element should have the text `Vitamin D 2mcg 10%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/)); ``` -新 `p` 元素應該有一個 `span` 元素。 +Your new `p` element should have a `span` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); ``` -`span` 元素應該將 `class` 設置爲 `right`。 記住，不要讓它變得粗體。 +Your `span` element should not be bold. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); -assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); +assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); ``` # --seed-- @@ -43,50 +44,55 @@ assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.queryS ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- ---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -118,54 +124,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md index 0ee465f14ee..7164517af6c 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md @@ -1,8 +1,8 @@ --- id: 615f8bfe0f30a1a3c340356b -title: 步驟 62 +title: Step 63 challengeType: 0 -dashedName: step-62 +dashedName: step-63 --- # --description-- @@ -11,55 +11,53 @@ dashedName: step-62 # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建兩個新的 `p` 元素。 +You should create two new `p` elements at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); ``` 第一個新的 `p` 元素應包含文本 `Calcium 260mg 20%`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/)); ``` 第一個新 `p` 元素應該有一個 `span` 元素。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span'); ``` -第一個 `span` 元素應該將 `class` 屬性設置爲 `right`。 記住，不要讓它變得粗體。 +Your first `span` element should not be bold. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('right')); -assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold')); +assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold')); ``` 第一個 `span` 元素應該包含文本 `20%`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%'); ``` 第二個新的 `p` 元素應包含文本 `Iron 8mg 45%`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/)); ``` 第二個新 `p` 元素應該有一個 `span` 元素。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'span'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.localName === 'span'); ``` -第二個 `span` 元素應該將 `class` 屬性設置爲 `right`。 記住，不要讓它變得粗體。 +Your second `span` element should not be bold. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('right')); -assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); ``` # --seed-- @@ -69,51 +67,56 @@ assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstE ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- -Vitamin D 2mcg 10%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -145,54 +148,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md index 4a056713ce5..cf0cf15cf78 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md @@ -1,8 +1,8 @@ --- id: 615f8f1223601fa546e93f31 -title: 步驟 63 +title: Step 64 challengeType: 0 -dashedName: step-63 +dashedName: step-64 --- # --description-- @@ -11,35 +11,34 @@ dashedName: step-63 # --hints-- -應該在 `.daily-value.sm-text` 元素的末尾創建一個新的 `p` 元素。 +You should create a new `p` element at the end of your `.daily-value` element. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` 新的 `p` 元素應該將 `class` 屬性設置爲 `no-divider`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('no-divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('no-divider')); ``` 新的 `p` 元素應包含文本 `Potassium 235mg 6%`。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/)); ``` 新 `p` 元素應該有一個 `span` 元素。 ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); ``` -`span` 元素應該將 `class` 設置爲 `right`。 記住，不要讓它變得粗體。 +Your `span` element should not be bold. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); -assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); +assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); ``` # --seed-- @@ -49,53 +48,58 @@ assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.queryS ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Vitamin D 2mcg 10%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- -Vitamin D 2mcg 10%
-Calcium 260mg 20%
-Iron 8mg 45%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -127,54 +131,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md index 4ad4d84cc7c..593928f3898 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md @@ -1,8 +1,8 @@ --- id: 615f905fbd1017a65ca224eb -title: 步驟 64 +title: Step 65 challengeType: 0 -dashedName: step-64 +dashedName: step-65 --- # --description-- @@ -23,11 +23,11 @@ dashedName: step-64 assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div'); ``` -新的 `div` 應該將 `class` 設置爲 `divider md`。 +Your new `div` should have the `class` set to `divider medium`. ```js assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider')); -assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('md')); +assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('medium')); ``` 應該在新的 `div` 元素之後創建一個 `p` 元素。 @@ -55,55 +55,60 @@ assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* T ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Vitamin D 2mcg 10%
+Calcium 260mg 20%
+Iron 8mg 45%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
-----fcc-editable-region-- ---fcc-editable-region-- + + +% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- -Vitamin D 2mcg 10%
-Calcium 260mg 20%
-Iron 8mg 45%
-Potassium 235mg 6%
-Nutrition Label + + + + + +++ ``` @@ -135,54 +140,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md index f074c44ba06..c3ced861d4c 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md @@ -1,8 +1,8 @@ --- id: 615f94786869e1a7fec54375 -title: 步驟 65 +title: Step 66 challengeType: 0 -dashedName: step-65 +dashedName: step-66 --- # --description-- @@ -36,54 +36,60 @@ assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px'); ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + +++ 230Amount per serving
+Calories
+++ --fcc-editable-region-- + + --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Vitamin D 2mcg 10%
+Calcium 260mg 20%
+Iron 8mg 45%
+Potassium 235mg 6%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -115,54 +121,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md index 6200cddfb5d..17d0189953f 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md @@ -1,8 +1,8 @@ --- id: 615f951dff9317a900ef683f -title: 步驟 66 +title: Step 67 challengeType: 0 -dashedName: step-66 +dashedName: step-67 --- # --description-- @@ -35,54 +35,60 @@ assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px') ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + ++- -Amount per serving
+Calories
-- -% Daily Value *
- -Total Fat 8g 10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- -Vitamin D 2mcg 10%
-Calcium 260mg 20%
-Iron 8mg 45%
-Potassium 235mg 6%
-* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+ 230++ +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Vitamin D 2mcg 10%
+Calcium 260mg 20%
+Iron 8mg 45%
+Potassium 235mg 6%
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily + diet. 2,000 calories a day is used for general nutrition advice.
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -114,54 +120,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } @@ -182,54 +202,60 @@ p { ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + ++- -Amount per serving
+Calories
-- -% Daily Value *
- -Total Fat 8g 10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- -Vitamin D 2mcg 10%
-Calcium 260mg 20%
-Iron 8mg 45%
-Potassium 235mg 6%
-* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+ 230++ +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Vitamin D 2mcg 10%
+Calcium 260mg 20%
+Iron 8mg 45%
+Potassium 235mg 6%
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily + diet. 2,000 calories a day is used for general nutrition advice.
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -261,54 +287,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md new file mode 100644 index 00000000000..d9073bf18ba --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md @@ -0,0 +1,153 @@ +--- +id: 635bde33c91c80540eae239b +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +The text `* Daily Value %` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it. + +# --hints-- + +You should have a `.right` selector. + +```js +const hasRight = new __helpers.CSSHelp(document).getStyle('.right'); +assert(hasRight); + +``` + +The `.right` selector should have the `justify-content` property set to `flex-end`. + +```js +const rightJustifyContent = new __helpers.CSSHelp(document).getStyle('.right')?.getPropertyValue('justify-content'); +assert(rightJustifyContent === 'flex-end'); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + ++ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + ++- -Amount per serving
+Calories
-- -% Daily Value *
- -Total Fat 8g 10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- -Vitamin D 2mcg 10%
-Calcium 260mg 20%
-Iron 8mg 45%
-Potassium 235mg 6%
-* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+ 230++ +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Vitamin D 2mcg 10%
+Calcium 260mg 20%
+Iron 8mg 45%
+Potassium 235mg 6%
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily + diet. 2,000 calories a day is used for general nutrition advice.
+Nutrition Label + + + + + +++ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; + display: flex; + justify-content: space-between; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.large { + height: 10px; +} + +.large, .medium { + background-color: black; + border: 0; +} + +.medium { + height: 5px; +} + +.small-text { + font-size: 0.85rem; +} + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { + margin: -5px -2px; + font-size: 2em; + font-weight: 700; +} + +.calories-info span { + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6395d33ab5d91bf317107c48.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6395d33ab5d91bf317107c48.md new file mode 100644 index 00000000000..e6f009b7e04 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6395d33ab5d91bf317107c48.md @@ -0,0 +1,117 @@ +--- +id: 6395d33ab5d91bf317107c48 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Create a `.calories-info h2` selector and remove all margins. + +# --hints-- + +Create a `.calories-info h2` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2')); +``` + +Your `.calories-info h2` selector should have a `margin` set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2')?.margin === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + ++ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+++ +++ 230 +Amount per serving
+Calories
+++% Daily Value *
+Nutrition Label + + + + + +++ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; + display: flex; + justify-content: space-between; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.large { + height: 10px; +} + +.large, .medium { + background-color: black; + border: 0; +} + +.small-text { + font-size: 0.85rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6396e33fe478dd264ebbf278.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6396e33fe478dd264ebbf278.md new file mode 100644 index 00000000000..6a2dbb37aa9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6396e33fe478dd264ebbf278.md @@ -0,0 +1,135 @@ +--- +id: 6396e33fe478dd264ebbf278 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Create a new `.calories-info` selector and give it a `display` property set to `flex`. Also give it a `justify-content` property set to `space-between` and `align-items` property set to `flex-end`. + +# --hints-- + +You should create a `.calories-info` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info')); +``` + +Your `.calories-info` selector should have a `display` property set to `flex`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.display === 'flex'); +``` + +Your `.calories-info` selector should have a `justify-content` property set to `space-between`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.justifyContent === 'space-between'); +``` + +Your `.calories-info` selector should have a `align-items` property set to `flex-end`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.alignItems === 'flex-end'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + ++ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+++++Amount per serving
+Nutrition Label + + + + + +++ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; + display: flex; + justify-content: space-between; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.large { + height: 10px; +} + +.large, .medium { + background-color: black; + border: 0; +} + +.small-text { + font-size: 0.85rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.calories-info h2 { + margin: 0; +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md index 7bec654ec15..ae7f2b797d2 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md @@ -7,7 +7,7 @@ dashedName: step-39 # --description-- -For now, make your `goStore` function output the message `Going to store.` to the console. For example, here is a function that outputs the message "Hello World". +For now, make your `goStore` function output the message `Going to store.` to the console. For example, here is a function that outputs the message `Hello World`. ```js function functionName() { diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md index c60cf5907da..8cbcb969f78 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md @@ -47,7 +47,7 @@ Your `update` function should set `button3.onclick` to `fightDragon`. assert.match(update.toString(), /button3\.onclick\s*=\s*fightDragon/); ``` -Your `update` function should set `text.innerText` to `You are in the town square. You see a sign that says "Store".`. +Your `update` function should set `text.innerText` to `You are in the town square. You see a sign that says \"Store\".`. ```js assert.match(update.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"\."/); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md index a8bef26a706..294662a5750 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md @@ -7,7 +7,7 @@ dashedName: step-62 # --description-- -The `locations` array contains two locations: the town square and the store. Currently you are passing that entire array into the update functions. Pass in only the first element of the `locations` array by adding `[0]` at the end of the variable. For example: `myFunction(arg[0]);`. +The `locations` array contains two locations: the `town square` and the `store`. Currently you are passing that entire array into the `update` function. Pass in only the first element of the `locations` array by adding `[0]` at the end of the variable. For example: `myFunction(arg[0]);`. This is called bracket notation. Values in an array are accessed by index. Indices are numerical values and start at 0 - this is called zero-based indexing. `arg[0]` would be the first element in the `arg` array. diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md index ca8a532ec15..1506701e4ab 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md @@ -7,7 +7,7 @@ dashedName: step-67 # --description-- -Finally, update the `text.innerText` assignment to equal the `text` from the location object. However, instead of using bracket notation, use dot notation. Here is an example of accessing the `name` property of an object called `obj`: `obj.name`. +Finally, update the `text.innerText` assignment to equal the `text` from the `location` object. However, instead of using bracket notation, use dot notation. Here is an example of accessing the `name` property of an object called `obj`: `obj.name`. # --hints-- diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md index cded49b4395..dab6fabe2b3 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md @@ -7,7 +7,7 @@ dashedName: step-83 # --description-- -Similar to your `buyHealth` function, set `gold` equal to 30 less than its current value. Make sure this is inside your `if` statement. +Similar to your `buyHealth` function, set `gold` equal to `30` less than its current value. Make sure this is inside your `if` statement. # --hints-- diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md index 930fba699ec..4f9dd2acb96 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md @@ -22,17 +22,17 @@ const myVar = 12 - 6; 现在，变量 `myVar` 的值为 `6`。 # --instructions-- -改变数字`0`让变量 difference 的值为 `12`。 +改变数字 `0` 让变量 difference 的值为 `12`。 # --hints-- -变量 `difference` 的值应该为 12。 +变量 `difference` 的值应该为 `12`。 ```js assert(difference === 12); ``` -您只能从 45 中减去一个数字。 +你只能从 `45` 中减去一个数。 ```js assert(/difference=45-33;?/.test(__helpers.removeWhiteSpace(code))); diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index a35c0c274c8..3d090b3b19e 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -20,7 +20,7 @@ dashedName: exercise-tracker - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮. -当你完成后，请将一个确保正常运行的demo（项目演示）托管在可以公开访问的平台上。 然后将 URL 提交到 `Solution Link` 中。 此外，还可以将项目的源码提交到 `GitHub Link` 中。 +当你完成后，请将一个确保正常运行的demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 # --instructions-- @@ -411,7 +411,7 @@ async(getUserInput) => { ```js async(getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/users/', { + const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', @@ -458,7 +458,7 @@ async(getUserInput) => { ```js async(getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/users/', { + const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', @@ -505,7 +505,7 @@ async(getUserInput) => { ```js async(getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/users/', { + const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md index 6ebb04a5d2d..74962df5065 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md @@ -20,7 +20,7 @@ dashedName: file-metadata-microservice - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 中。 此外，还可以将项目的源码链接提交到 `GitHub Link` 中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md index 9a6545676e1..1147bcf4e64 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md @@ -20,7 +20,7 @@ dashedName: request-header-parser-microservice - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 中。 此外，将项目的源码链接提交到 `GitHub Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 # --hints-- diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md index 1565908f7f2..cc136048cdb 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md @@ -20,7 +20,7 @@ dashedName: timestamp-microservice - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 此外，将项目的源码链接提交到 `GitHub Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 **注意：**时区转换不是本项目的目的，因此假设所有发送的有效日期将使用 `new Date()` 解析为 GMT 日期。 @@ -106,7 +106,7 @@ dashedName: timestamp-microservice ); ``` -如果输入的日期字符串无效，api 将返回一个具有结构 `{ error : "Invalid Date" }` 的对象。 +如果输入的日期字符串无效，API 将返回一个具有结构 `{ error : "Invalid Date" }` 的对象。 ```js (getUserInput) => diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md index c59366a00f4..f06c62d3878 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md @@ -20,7 +20,7 @@ dashedName: url-shortener-microservice - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 此外，将项目的源码链接提交到 `GitHub Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md index 1916d7dc40a..3583edcfd77 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md @@ -20,7 +20,7 @@ dashedName: meet-the-node-console - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 在开发过程中，能够随时看到代码的运行结果是非常重要的。 diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md index 75d1fbf1c1e..5be94f00880 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md @@ -18,7 +18,7 @@ HTML 服务器提供 HTML 服务，而 API 提供数据服务。 REST # --hints-- -访问端口 `/json` 应该返回一个 json 对象 `{"message": "Hello json"}` +The endpoint `/json` should serve the JSON object `{"message": "Hello json"}` ```js (getUserInput) => diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md index 30967f2ed82..abc34985c6b 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md @@ -18,11 +18,11 @@ dashedName: use-the--env-file 在项目根目录创建一个 `.env` 文件，并存储变量 `MESSAGE_STYLE=uppercase`。 -然后，在你在上个挑战中创建的 `/json` GET 路由处理程序中访问 `process.env.MESSAGE_STYLE`，并且如果变量等于 `uppercase`，将响应对象的 `message` 转换为大写。 响应对象应该是 `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`，取决于 `MESSAGE_STYLE` 的值。 Note that you must read the value of `process.env.MESSAGE_STYLE` **inside** the route handler, not outside of it, due to the way our tests run. +然后，在你在上个挑战中创建的 `/json` GET 路由处理程序中访问 `process.env.MESSAGE_STYLE`，并且如果变量等于 `uppercase`，将响应对象的 `message` 转换为大写。 响应对象应该是 `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`，取决于 `MESSAGE_STYLE` 的值。 请注意，因为我们的测试运行的方式，你必须阅读路由处理器**里面**（而不是外面）`process.env.MESSAGE_STYLE` 的值。 **注意：** 如果你正在使用 Replit，你无法创建一个 `.env` 文件。 相反，使用内置的 SECRETS 标签添加变量。 -如果你在本地工作，你将需要 `dotenv` 包。 它将环境变量从你的 `.env` 文件加载到 `process.env` 中。 `dotenv` 包已经安装，并且在你项目的 `package.json` 文件中。 At the top of your `myApp.js` file, add `require('dotenv').config()` to load the environment variables. +如果你在本地工作，你将需要 `dotenv` 包。 它将环境变量从你的 `.env` 文件加载到 `process.env` 中。 `dotenv` 包已经安装，并且在你项目的 `package.json` 文件中。 在你的 `myApp.js` 文件的顶端，添加 `require('dotenv').config()` 以加载环境变量。 # --hints-- diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md index bbe84dbf7eb..97f78a67daa 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md @@ -20,7 +20,7 @@ dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-packa - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 `package.json` 文件是所有 Node.js 项目和 npm 包的枢纽， 和 HTML 文档中的 <head> 部分用来描述网页的配置信息（元数据）一样，它存储你的项目的相关信息。 它由单个 JSON 对象组成，并以键值对的形式存储项目信息， 且至少包含两个必填字段：“name” 和 “version”——但是最好提供有关项目的其他信息，这将对用户或者维护者有所帮助。 diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md index ba52b2c2809..defd71a5538 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md @@ -20,7 +20,7 @@ dashedName: install-and-set-up-mongoose - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 在这个挑战中，你将建立一个 MongoDB Atlas 数据库并导入连接到它所需的软件包。 diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md index 68d9c938b7c..19e08efd467 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md @@ -20,7 +20,7 @@ dashedName: set-up-a-template-engine - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 模板引擎使你可以在应用程序中使用静态模板文件（例如用 *Pug* 编写的文件）。 在运行时，模版引擎会用服务端的真实数据替换掉模版文件中的变量。 然后将模版转译成发送给客户端的 HTML 静态文件。 这样可以轻松地构造 HTML 页面，允许在页面直接显示变量内容而不需要从客户端发送 API 请求。 diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md index 7e63305eaf8..fa9932a86d3 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md @@ -20,7 +20,7 @@ dashedName: learn-how-javascript-assertions-work - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 # --instructions-- 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 e8e64d53982..b8a4a3d9b11 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 @@ -20,7 +20,7 @@ dashedName: american-british-translator - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/issue-tracker.md index 40bc861c838..05b4f1becea 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/issue-tracker.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/issue-tracker.md @@ -20,7 +20,7 @@ dashedName: issue-tracker - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md index 1897b2098de..200f1b79101 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md @@ -20,7 +20,7 @@ dashedName: metric-imperial-converter - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/personal-library.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/personal-library.md index 9c3410c27af..bf12e7ee274 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/personal-library.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/personal-library.md @@ -20,7 +20,7 @@ dashedName: personal-library - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 # --instructions-- 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 b10afa901b4..3a8baa293fe 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 @@ -20,7 +20,7 @@ dashedName: sudoku-solver - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/anonymous-message-board.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/anonymous-message-board.md index b6a0234d23a..bcb40b71bfd 100644 --- a/curriculum/challenges/chinese/09-information-security/information-security-projects/anonymous-message-board.md +++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/anonymous-message-board.md @@ -22,7 +22,7 @@ dashedName: anonymous-message-board - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后将 URL 提交到 `Solution Link` 中。 此外，将项目的源码链接提交到 `GitHub Link` 字段中。 +完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md index 8612b76b18b..e2419aeddc4 100644 --- a/curriculum/challenges/chinese/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md +++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md @@ -20,7 +20,7 @@ dashedName: secure-real-time-multiplayer-game - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md index e9b8056193a..57ebe32f7d2 100644 --- a/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md @@ -24,7 +24,7 @@ dashedName: stock-price-checker - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 也可以将项目的源码链接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md index 62a0154c9f2..82d3a622d9a 100644 --- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md +++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md @@ -20,7 +20,7 @@ dashedName: install-and-require-helmet - 接着，你将看到一个 `.replit` 窗口。 - 选择 `Use run command` 并点击 `Done` 按钮。 -当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 Solution Link 字段中。 Helmet 通过设置各种 HTTP 头来保护你的 Express 应用程序。 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/algorithms/implement-binary-search.md b/curriculum/challenges/chinese/10-coding-interview-prep/algorithms/implement-binary-search.md index d0153acf95a..b3227def516 100644 --- a/curriculum/challenges/chinese/10-coding-interview-prep/algorithms/implement-binary-search.md +++ b/curriculum/challenges/chinese/10-coding-interview-prep/algorithms/implement-binary-search.md @@ -10,9 +10,10 @@ dashedName: implement-binary-search 二分搜索是一种 **O(log(n))** 效率的算法，用于在已排序的数组以查找元素。 它通过以下步骤运行： -1. 查找已排序数组的中间值 `value`。 如果 `value == target`，则返回（找到了！）。 +1. 查找已排序数组的中间值 `value`。 If `value == target` return `true` (The value has been found and the search is complete). 1. 如果中间值 `value < target`，则在下一次比较中搜索数组的右半部分。 1. 如果中间值 `value > target`，则在下一次比较中搜索数组的左半部分。 +1. If after searching the whole array the value is not present, return `false` (The array has been searched and the value is not in the array). 如你所见，你连续将数组减半，这为你提供了 log(n) 效率。 对于这个挑战，我们希望你展示你的工作——你是如何到达目标值的……你走过的路！ @@ -20,7 +21,7 @@ dashedName: implement-binary-search 编写一个函数 `binarySearch` 来实现对数组的二分查找算法，返回在数组中查找目标所采用的路径（每个中间值比较）。 -该函数将一个排序的整数数组和一个目标值作为输入。 它返回一个数组，其中包含（按顺序）你在原始数组的每个减半处找到的中间值，直到你找到目标值。 目标值应该是返回数组的最后一个元素。 如果未找到值，则返回字符串 `Value Not Found`。 +该函数将一个排序的整数数组和一个目标值作为输入。 它返回一个数组，其中包含（按顺序）你在原始数组的每个减半处找到的中间值，直到你找到目标值。 目标值应该是返回数组的最后一个元素。 If the value is not found, return the string `Value Not Found`. 例如，`binarySearch([1,2,3,4,5,6,7], 5)` 将返回 `[4,6,5]`。 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md b/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md index 5d14be58d8e..189e2d2efa4 100644 --- a/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md +++ b/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md @@ -22,7 +22,7 @@ Here are the specific user stories you should implement for this project: **Hint:** Try using the Yelp API to find venues in the cities your users search for. 如果使用 Yelp 的 API，请务必在应用中提及。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. # --solutions-- diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/build-a-voting-app.md b/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/build-a-voting-app.md index c5e1f8c05dd..e70b3566764 100644 --- a/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/build-a-voting-app.md +++ b/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/build-a-voting-app.md @@ -28,7 +28,7 @@ Here are the specific user stories you should implement for this project: **User Story:** As an authenticated user, if you don't like the options on a poll, you can create a new option. -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. # --solutions-- diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md b/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md index 47cee2ababe..4c4540d7fce 100644 --- a/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md +++ b/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md @@ -18,7 +18,7 @@ Here are the specific user stories you should implement for this project: **User Story:** You can get a list of the most recently submitted search strings. -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. # --solutions-- diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md b/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md index a5562365284..c43de0dbaef 100644 --- a/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md +++ b/curriculum/challenges/chinese/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md @@ -20,7 +20,7 @@ Here are the specific user stories you should implement for this project: **User Story:** You can see changes in real-time when any other user adds or removes a stock. For this you will need to use Web Sockets. -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. # --solutions-- diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md new file mode 100644 index 00000000000..f4b05b12871 --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md @@ -0,0 +1,54 @@ +--- +id: 637f4e0e72c65bc8e73dfe1e +videoId: LGQuIIv2RVA +title: Elements and Tags Question A +challengeType: 15 +dashedName: elements-and-tags-question-a +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+++++ 230 +Amount per serving
+Calories
+`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) + +## --text-- + +What are HTML tags? + +## --answers-- + +HTML tags tell the browser what content an element contains. + +--- + +HTML tags tell the browser when to load its content. + +--- + +HTML tags tell the browser what content the next element contains. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md new file mode 100644 index 00000000000..9e8720616fb --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md @@ -0,0 +1,50 @@ +--- +id: 637f4e1672c65bc8e73dfe1f +videoId: LGQuIIv2RVA +title: Elements and Tags Question B +challengeType: 15 +dashedName: elements-and-tags-question-b +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `
`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --text-- + +What are the three parts of most HTML elements? + +## --answers-- + +An opening tag, self closing tag, and content. + +--- + +An opening tag, closing tag, and content. + +--- + +An opening tag, closing tag, and attribute. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md new file mode 100644 index 00000000000..d563ebf0ac3 --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md @@ -0,0 +1,55 @@ +--- +id: 637f4e1c72c65bc8e73dfe20 +videoId: V8UAEoOvqFg +title: HTML Boilerplate Question A +challengeType: 15 +dashedName: html-boilerplate-question-a +--- + +# --description-- + +To demonstrate an HTML boilerplate, you first need an HTML file to work with. + +Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. + +You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. + +To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. + +It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. + +## The DOCTYPE + +Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. + +The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: + +```html + +``` + +However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. + +Open the `index.html` file created earlier in your text editor and add `` to the very first line. + +# --question-- +## --text-- + +What is the purpose of the `DOCTYPE` declaration? + +## --answers-- + +It tells the browser which version of HTML to use to render the document. + +--- + +It tells the browser that this document uses JavaScript. + +--- + +It tells the browser the title of the document. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md new file mode 100644 index 00000000000..7a528432239 --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md @@ -0,0 +1,47 @@ +--- +id: 637f4e2872c65bc8e73dfe21 +videoId: V8UAEoOvqFg +title: HTML Boilerplate Question B +challengeType: 15 +dashedName: html-boilerplate-question-b +--- + +# --description-- + +After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. + +This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. + +Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: + +```html + + + +``` + +## What is the lang attribute? +`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. + +# --question-- + +## --text-- + +What is the `html` element? + +## --answers-- + +It is the root element in the document and tells the browser which version of HTML it should use. + +--- + +It is the root element in the document and all other elements should descend from it. + +--- + +It is the root element in the document and all other elements should come after it. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md new file mode 100644 index 00000000000..76ceb2841e5 --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md @@ -0,0 +1,66 @@ +--- +id: 637f4e2f72c65bc8e73dfe22 +videoId: LGQuIIv2RVA +title: HTML Boilerplate Question C +challengeType: 15 +dashedName: html-boilerplate-question-c +--- + +# --description-- + +The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. + +## The Charset Meta Element +You should always have the `meta` tag for the charset encoding of the webpage in the head element: ``. + +Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. + +## Title Element +Another element you should always include in the head of an HTML document is the `title` element: + +```html +
My First Webpage +``` + +The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. + +If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. + +There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. + +Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: + + +```html + + + + + +My First Webpage + + +``` + +# --question-- + +## --text-- + +What is the purpose of the `head` element? + +## --answers-- + +The `head` element is used to display all elements that are displayed on the webpage. + +--- + +The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. + +--- + +The `head` element is used to display the header content on top of the webpage. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md new file mode 100644 index 00000000000..302b6a95d44 --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md @@ -0,0 +1,48 @@ +--- +id: 637f4e3672c65bc8e73dfe23 +videoId: V8UAEoOvqFg +title: HTML Boilerplate Question D +challengeType: 15 +dashedName: html-boilerplate-question-d +--- + +# --description-- + +The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. + +To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. + +--- + +Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. + +--- + +Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. + +## --text-- + +What is the purpose of the `body` element? + +## --answers-- + +This is where all important information about the webpage is displayed such as the `title` and `meta` tags. + +--- + +This is where you tell the browser how to render the webpage correctly. + +--- + +This is where all content will be displayed on the page such images, text, and links. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md new file mode 100644 index 00000000000..aa20f137e89 --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md @@ -0,0 +1,42 @@ +--- +id: 6374f208de18c50e48ba767b +videoId: LGQuIIv2RVA +title: Introduction To HTML and CSS Question A +challengeType: 15 +dashedName: introduction-to-html-and-css-question-a +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --assignment-- + +Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. + +## --text-- + +Which of the following statements is true? + +## --answers-- + +CSS is used to create the basic structure of a webpage, and HTML is used to add style. + +--- + +HTML is used to create the basic structure of a webpage, and CSS is used to add style. + +--- + +HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. + + +## --video-solution-- + +2 + + diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md new file mode 100644 index 00000000000..cd9cf900330 --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md @@ -0,0 +1,37 @@ +--- +id: 6376327e2724a688c04636e3 +videoId: LGQuIIv2RVA +title: Introduction To HTML and CSS Question B +challengeType: 15 +dashedName: introduction-to-html-and-css-question-b +--- + +# --description-- + + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to add paragraphs of text on a webpage? + +## --answers-- + +CSS + +--- + +JavaScript + +--- + +HTML + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md new file mode 100644 index 00000000000..eb759394680 --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md @@ -0,0 +1,34 @@ +--- +id: 637633162724a688c04636e4 +videoId: LGQuIIv2RVA +title: Introduction To HTML and CSS Question C +challengeType: 15 +dashedName: introduction-to-html-and-css-question-c +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to change the font and background color of a button? + +## --answers-- + +You should use CSS to change the background color and font of a button. + +--- + +You should use JavaScript to change the background color and font of a button. + +--- + +You should use HTML to change the background color and font of a button. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md new file mode 100644 index 00000000000..9e9ee049b75 --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md @@ -0,0 +1,35 @@ +--- +id: 637633672724a688c04636e5 +videoId: LGQuIIv2RVA +title: Introduction To HTML and CSS Question D +challengeType: 15 +dashedName: introduction-to-html-and-css-question-d +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +What is the difference between HTML, CSS, and JavaScript? + +## --answers-- + +HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. + +--- + +CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. + +--- + +JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md new file mode 100644 index 00000000000..b4d237448f3 --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md @@ -0,0 +1,66 @@ +--- +id: 637f704072c65bc8e73dfe36 +videoId: tsEQgGjSmkM +title: Links and Images Question A +challengeType: 15 +dashedName: links-and-images-question-a +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- Finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. + +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. + +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Links video above. + +## --text-- + +What HTML tag is used to create a link? + +## --answers-- + +`` + +--- + +`` + +--- + +`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md
new file mode 100644
index 00000000000..164fb01214f
--- /dev/null
+++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md
@@ -0,0 +1,55 @@
+---
+id: 637f703572c65bc8e73dfe35
+videoId: tsEQgGjSmkM
+title: Links and Images Question B
+challengeType: 15
+dashedName: links-and-images-question-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named odin-links-and-images.
+
+- Within that directory, create a new file named index.html.
+
+- Fill in the usual HTML boilerplate.
+
+- finally, add the following h1 to the body: `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the body of the index.html page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a href (hyperlink reference) attribute to the opening anchor tag. The value of the href attribute is the destination you want your link to go to. Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- +## --text-- + +What is an attribute? +## --answers-- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. + +--- + +An HTML attribute is used to tell the browser what the element contains. + +--- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md new file mode 100644 index 00000000000..c8a3913d77e --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md @@ -0,0 +1,56 @@ +--- +id: 637f703072c65bc8e73dfe34 +videoId: tsEQgGjSmkM +title: Links and Images Question C +challengeType: 15 +dashedName: links-and-images-question-c +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named odin-links-and-images. + +- Within that directory, create a new file named index.html. + +- Fill in the usual HTML boilerplate. + +- finally, add the following h1 to the body: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the body of the index.html page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a href (hyperlink reference) attribute to the opening anchor tag. The value of the href attribute is the destination you want your link to go to. Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --text-- + +What attribute tells links where to go to? + +## --answers-- + +`src` + +--- + +`href` + +--- + +`link` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md new file mode 100644 index 00000000000..2b6a665eb87 --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md @@ -0,0 +1,112 @@ +--- +id: 637f702872c65bc8e73dfe33 +videoId: ta3Oxx7Yqbo +title: Links and Images Question D +challengeType: 15 +dashedName: links-and-images-question-d +--- + +# --description-- + + +Generally, there are two kinds of links you will create: + +- Links to pages on other websites on the internet + +- Links to pages located on your own websites + + +## Absolute Links +Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. + +You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. + +`https://www.theodinproject.com/about` + +## Relative Links +Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. + +Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. + +Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: + +```html + + + + +Odin Links and Images + + + +About Page
+ + +``` + +Back in the index page, add the following anchor element to create a link to the about page: + +```html + +Homepage
+ click me + + About + +``` + +Open the index file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the about page you just created. + +This works because the index and about page are in the same directory. That means you can simply use its name (`about.html`) as the link’s href value. + +But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. + +Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. + +Refresh the index page in the browser and then click on the about link. It will now be broken. This is because the location of the about page file has changed. + +To fix this, you just need to update the about link `href` value to include the `pages/` directory since that is the new location of the about file relative to the index file. + +```html + +Homepage
+ About + +``` + +Refresh the index page in the browser and try clicking the about link again, it should now be back in working order. + +In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. + +```html + +Homepage
+ About + +``` + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML File Structure video above. + +## --text-- + +What is the difference between an absolute and a relative link? + +## --answers-- + +An absolute link is a link to another page on the current website. A relative link is a link to another website. + +--- + +An absolute link is a link to another website. A relative link is a link another page on the current website. + +--- + +There is no difference between absolute and relative links. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md new file mode 100644 index 00000000000..a935ae3262a --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md @@ -0,0 +1,98 @@ +--- +id: 637f702372c65bc8e73dfe32 +videoId: 0xoztJCHpbQ +title: Links and Images Question E +challengeType: 15 +dashedName: links-and-images-question-e +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+``
+
+---
+
+``
+
+---
+
+`` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-f.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-f.md new file mode 100644 index 00000000000..ba4eb809e5d --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-f.md @@ -0,0 +1,94 @@ +--- +id: 637f701c72c65bc8e73dfe31 +videoId: 0xoztJCHpbQ +title: Links and Images Question F +challengeType: 15 +dashedName: links-and-images-question-f +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `
` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the src attribute, every image element should also have an alt (alternative text) attribute.
+
+The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md
new file mode 100644
index 00000000000..d1a6fcd4406
--- /dev/null
+++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md
@@ -0,0 +1,94 @@
+---
+id: 637f701572c65bc8e73dfe30
+videoId: 0xoztJCHpbQ
+title: Links and Images Question G
+challengeType: 15
+dashedName: links-and-images-question-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the src attribute, every image element should also have an alt (alternative text) attribute.
+
+The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md
new file mode 100644
index 00000000000..cfd73fcfbc1
--- /dev/null
+++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md
@@ -0,0 +1,98 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+videoId: 0xoztJCHpbQ
+title: Links and Images Question H
+challengeType: 15
+dashedName: links-and-images-question-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the src attribute, every image element should also have an alt (alternative text) attribute.
+
+The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Read about the four main image formats that can be used on the web.
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+TIFF, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md
new file mode 100644
index 00000000000..657a3f6e32d
--- /dev/null
+++ b/curriculum/challenges/chinese/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md
@@ -0,0 +1,204 @@
+---
+id: 6391d1a4f7ac71efd0621380
+title: Build a Recipe Page Project
+challengeType: 14
+dashedName: project-create-a-recipe-page
+---
+
+# --description--
+
+The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
+
+**User Stories:**
+
+1. Your recipe page should contain a `DOCTYPE` tag.
+1. Your recipe page should include an `html` element with a `head` and `body` element as children.
+1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
+1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
+1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
+1. There should be an `h2` element with the text `Description` under the image.
+1. You should see a couple of paragraphs under `Description` that describe the recipe.
+1. There should be an `h2` element with the text `Ingredients`
+1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
+1. Under the list of ingredients add another heading called `Steps`.
+1. You should see an ordered list with a couple of steps needed to complete the recipe.
+1. Under the steps there should be an `h2` element with the text `More Recipes`
+1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
+1. These anchor elements should have `href` attribute with the value set to `#`
+
+# --hints--
+
+You should have a `DOCTYPE` tag.
+
+```js
+assert(code.match(//gi));
+```
+
+You should have a `html` element with `head` and `body` element.
+
+```js
+const html = document.querySelectorAll('html')[0];
+const head = document.querySelectorAll('html > head')[0];
+const body = document.querySelectorAll('html > body')[0];
+
+assert(html && head && body);
+```
+
+You should have a `title` element within the `head` element that contains the text `The Odin Recipes`.
+
+```js
+assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
+```
+
+You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`.
+
+```js
+assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
+```
+
+You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
+
+```js
+const img = document.querySelectorAll('IMG')[0];
+
+assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
+```
+
+You should have an `h2` element with the text `Description`.
+
+```js
+const h2 = document.querySelectorAll('H2')[0];
+
+assert(h2.innerText == 'Description');
+```
+
+You should have at least two `p` elements describing the recipe.
+
+```js
+const paragraphs = document.querySelectorAll('P');
+
+assert(paragraphs.length > 1);
+```
+
+You should have an `h2` element with the text `Ingredients`.
+
+```js
+const h2 = document.querySelectorAll('H2')[1];
+
+assert(h2.innerText == 'Ingredients');
+```
+
+You should have an unordered list `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-b.md
new file mode 100644
index 00000000000..4c6822fc504
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-b.md
@@ -0,0 +1,45 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+videoId: LGQuIIv2RVA
+title: Understand Ordered and Unordered List Question B
+challengeType: 15
+dashedName: understand-ordered-and-unordered-list-question-b
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` that contain `` tags which lead to other recipes.
+
+```js
+const unorderedList = document.querySelectorAll('UL')[1];
+const listItems = unorderedList.querySelectorAll('LI');
+
+const allAreListItems = unorderedList.children.length == listItems.length;
+
+const containsAnchors = [...listItems].every(function(listItem) {
+ return listItem.querySelector("a") !== null;
+});
+
+assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
+```
+
+Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
+
+```js
+const anchorTags = document.querySelectorAll("a");
+
+const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
+ return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
+});
+
+assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+
+
+
+
- `.
+
+```js
+const orderedList = document.querySelectorAll('OL')[0];
+const listItems = document.querySelectorAll('OL > LI');
+
+assert(orderedList && listItems && listItems.length > 1);
+```
+
+You should have an `h2` element with the text `More Recipes`.
+
+```js
+const h2 = document.querySelectorAll('H2')[3];
+
+assert(h2.innerText == 'More Recipes');
+```
+
+You should have an unordered list `
` tag. + +Changing our example from before to use paragraph elements fixes the issue: + + + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. + +## --text-- + +How do you create a paragraph in HTML? + +## --answers-- + +`
This is a paragraph
` + +--- + +`This is a paragraph
` + +--- + +`This is a paragraph` + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-b.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-b.md new file mode 100644 index 00000000000..a74d8d11452 --- /dev/null +++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-b.md @@ -0,0 +1,40 @@ +--- +id: 637f4e5f72c65bc8e73dfe28 +videoId: yqcd-XkxZNM +title: Working With Text Question B +challengeType: 15 +dashedName: working-with-text-question-b +--- + +# --description-- + +Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. + +There are 6 different levels of headings starting from `` to `
`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. + +Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `
` tag. + + + +Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. + +# --question-- +## --text-- + +How many different levels of headings are there and what is the difference between them? + +## --answers-- + +There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. + +--- + +There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. + +--- + +There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-c.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-c.md new file mode 100644 index 00000000000..6ccf0e06658 --- /dev/null +++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-c.md @@ -0,0 +1,47 @@ +--- +id: 637f4e6672c65bc8e73dfe29 +videoId: gW6cBZLUk6M +title: Working With Text Question C +challengeType: 15 +dashedName: working-with-text-question-c +--- + +# --description-- + +The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. + +You can use `strong` on its own: + + + +But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: + + + +Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Bold and Italic Text Video above. + +## --text-- + +What element should you use to make text bold and important? + +## --answers-- + +`This is an important message` + +--- + +`
This is an important message
` + +--- + +`This is an important message` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-d.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-d.md new file mode 100644 index 00000000000..d6647f9a7ea --- /dev/null +++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-d.md @@ -0,0 +1,39 @@ +--- +id: 637f4e6e72c65bc8e73dfe2a +videoId: gW6cBZLUk6M +title: Working With Text Question D +challengeType: 15 +dashedName: working-with-text-question-d +--- + +# --description-- + +The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. + +To use `em` on its own: + + +Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: + + + +# --question-- +## --text-- + +What element should you use to make text italicized to add emphasis? + +## --answers-- + +`This is an italic message` + +--- + +`This is an italic message` + +--- + +`This is an italic message ` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-e.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-e.md new file mode 100644 index 00000000000..d022a6331e9 --- /dev/null +++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-e.md @@ -0,0 +1,66 @@ +--- +id: 637f4e7972c65bc8e73dfe2b +videoId: gW6cBZLUk6M +title: Working With Text Question E +challengeType: 15 +dashedName: working-with-text-question-e +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the `body` element is the parent and the `p` is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship do two elements have if they are at the same level of nesting? + +## --answers-- + +The elements are each other's parents. + +--- + +The elements are each other's children. + +--- + +The elements are siblings. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-f.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-f.md new file mode 100644 index 00000000000..2ace3f4e36d --- /dev/null +++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-f.md @@ -0,0 +1,67 @@ +--- +id: 637f4e8072c65bc8e73dfe2c +videoId: gW6cBZLUk6M +title: Working With Text Question F +challengeType: 15 +dashedName: working-with-text-question-f +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the body element is the parent and the paragraph is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship does an element have with any nested element within it? + +## --answers-- + +The element within the other element is called the parent element. + +--- + +The element within the other element is called the child element. + +--- + +The element within the other element is called the sibling element. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-g.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-g.md new file mode 100644 index 00000000000..fe83f0ef062 --- /dev/null +++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/working-with-text-question-g.md @@ -0,0 +1,49 @@ +--- +id: 637f4e8772c65bc8e73dfe2d +videoId: gW6cBZLUk6M +title: Working With Text Question G +challengeType: 15 +dashedName: working-with-text-question-g +--- + +# --description-- + +HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. + +Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: + +```html +View the html to see the hidden comments
+ + + +Some paragraph text
+ + +``` + +# --question-- + +## --assignment-- + +To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. + +## --text-- + +How do you create HTML comments? + +## --answers-- + +`/* This is an HTML comment */` + +--- + +`` + +--- + +`<-- This is an HTML comment --!>` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md index 1e23b5d4e37..dee380a33ce 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md @@ -1,6 +1,6 @@ --- id: bd7158d8c242eddfaeb5bd13 -title: ابني معرضا لأعمالك الخاصة (Personal Portfolio) +title: أنشئ معرضا لأعمالك الخاصة challengeType: 14 forumTopicId: 301143 dashedName: build-a-personal-portfolio-webpage diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md index 7a649a0dc7d..9d0477c5bd0 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md @@ -1,6 +1,6 @@ --- id: 587d78af367417b2b2512b04 -title: ابن صفحة لعرض لمنتج (Product Landing) +title: أنشئ صفحة لعرض لمنتج challengeType: 14 forumTopicId: 301144 dashedName: build-a-product-landing-page diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md index 5e69600b0b4..72ec9a0ed1c 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md @@ -1,6 +1,6 @@ --- id: 587d78af367417b2b2512b03 -title: ابني نموذج استطلاع رأي (Survey Form) +title: أنشئ نموذج استطلاع رأي challengeType: 14 forumTopicId: 301145 dashedName: build-a-survey-form @@ -8,7 +8,7 @@ dashedName: build-a-survey-form # --description-- -**Objective:** كم ببناء تطبيق يشبه وظيفيا إلي https://survey-form.freecodecamp.rocks +**Objective:** أنشئ تطبيق يشبه وظيفيا إلي https://survey-form.freecodecamp.rocks **المطلبيات:** @@ -259,7 +259,7 @@ const els = document.querySelectorAll('#dropdown option:not([disabled])') assert(els.length >= 2) ``` -`#dropdown` الخاص بك يجب أن يكون تابعا لـ `#survey-form`. +يجب أن يكون `#dropdown` الخاص بك فرع من `#survey-form`. ```js const el = document.querySelector('#survey-form #dropdown') diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md index 0c3c772418f..b5617bd6a75 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md @@ -1,6 +1,6 @@ --- id: 587d78b0367417b2b2512b05 -title: ابني صفحة التوثيق التقني (Technical Documentation) +title: أنشئ صفحة التوثيق التقنية challengeType: 14 forumTopicId: 301146 dashedName: build-a-technical-documentation-page @@ -8,11 +8,11 @@ dashedName: build-a-technical-documentation-page # --description-- -**Objective:** قم ببناء تطبيق يشبه وظيفيا إلى https://technical-documentation-page.freecodecamp.rocks +**Objective:** أنشئ تطبيق يشبه وظيفيا إلى https://technical-documentation-page.freecodecamp.rocks **المتطلبات:** -1. يمكنك مشاهدة عنصر `main` مع `id="main-doc"`، والذي يحتوي على المحتوى الرئيسي للصفحة (الوثائق التقنية) +1. يمكنك مشاهدة عنصر `main` مع `id="main-doc"`، الذي يحتوي على المحتوى الرئيسي للصفحة (الوثائق التقنية) 1. ضمن عنصر `#main-doc` ، يمكنك رؤية عدة عناصر `section`، كل منها مع class بقيمة `main-section`. وينبغي أن يكون هناك خمسة على الأقل 1. العنصر الأول في كل `.main-section` يجب أن يكون عنصر `header`، والذي يحتوي على نص يصف موضوع ذلك القسم. 1. كل عنصر من عناصر `section` مع class بقيمة `main-section` يجب أن يكون لديه `id` يتوافق مع نص كل `header` موجود داخله. يجب استبدال أي مسافات بتسطير سفلي (underscore) (على سبيل المثال القسم الذي يحتوي على header "JavaScript and Java" يجب أن يكون لديه `id="JavaScript_and_Java"`) @@ -203,7 +203,7 @@ const remainder = headerText.filter(str => linkText.indexOf(str) === -1) assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) ``` -يجب أن يكون لكل `.nav-link` سمة `href` التي تربط مع `.main-section` (على سبيل المثال ، إذا نقرت على العنصر `.nav-link` الذي يحتوي على النص "Hello world" ، تنتقل الصفحة إلى عنصر `section` بهذا الـ id). +يجب أن يكون لكل `.nav-link` سمة `href` التي تربط مع `.main-section` (على سبيل المثال، إذا نقرت على العنصر `.nav-link` الذي يحتوي على النص "Hello world"، تنتقل الصفحة إلى عنصر `section` بهذا المعرف (id)). ```js const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md index 9cfd1fbcc83..7fdd0c7fad6 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md @@ -1,6 +1,6 @@ --- id: bd7158d8c442eddfaeb5bd18 -title: ابن مشروع صفحة الثناء (Tribute Page) +title: أنشئ مشروع صفحة الثناء challengeType: 14 forumTopicId: 301147 dashedName: build-a-tribute-page @@ -12,8 +12,8 @@ dashedName: build-a-tribute-page **المتطلبات:** -1. يجب أن يكون لصفحة الثناء الخاصة بك عنصر `main` مع `id` بقيمة `main`، والذي يحتوي على جميع العناصر الأخرى -1. يجب أن ترى عنصرا مع `id` بقيمة `title`، الذي يحتوي على string (اي نص) ،يصف موضوع صفحة الثناء (مثل "الدكتور نورمان بورلاوغ") +1. يجب أن يكون لصفحتك الثناء عنصر `main` مع `id` بقيمة `main`، الذي يحتوي على جميع العناصر الأخرى +1. يجب أن ترى عنصرا مع `id` بقيمة `title`، الذي يحتوي على مقطع نصي (string)، يصف موضوع صفحة الثناء (مثل "الدكتور نورمان بورلاوغ") 1. يجب أن ترى إما عنصر `figure` أو `div` مع `id` بقيمة `img-div` 1. داخل عنصر `#img-div` يمكنك رؤية عنصر `img` مع `id="image"` 1. داخل عنصر `#img-div` ، يجب أن ترى عنصرا مع `id="img-caption"` يحتوي على محتوى نصي يصف الصورة المعروضة في `#img-div` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md index 988069c0407..e08ae4dbe23 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md @@ -14,13 +14,25 @@ dashedName: step-23 يجب عليك استخدام خاصية `transform` لدوران العنصر. ```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform); +const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain'); + +if (backMountain?.transform) { + assert.notEmpty(backMountain?.transform); +} else { + assert.notEmpty(backMountain?.rotate); +} ``` يجب أعطاء منقي `.back-mountain` خاصية `transform` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`. ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform, 'rotate(45deg)'); +const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain'); + +if (backMountain?.transform) { + assert.equal(backMountain?.transform, 'rotate(45deg)'); +} else { + assert.equal(backMountain?.rotate, '45deg'); +} ``` يجب عليك إعطاء عنصر `.back-mountain` خاصية `left`. diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md index e876bcf81c9..671517feff1 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md @@ -14,13 +14,25 @@ dashedName: step-84 يجب عليك إعطاء `.foot.left` خاصية `transform` بقيمة `rotate(80deg)`. ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left').getPropVal('transform', true), 'rotate(80deg)'); +const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left'); + +if (leftFoot?.transform) { + assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)'); +} else { + assert.equal(leftFoot.getPropVal('rotate', true), '80deg'); +} ``` يجب عليك إعطاء `.foot.right` خاصية `transform` بقيمة `rotate(-80deg)`. ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right').getPropVal('transform', true), 'rotate(-80deg)'); +const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right'); + +if (rightFoot?.transform) { + assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)'); +} else { + assert.equal(rightFoot.getPropVal('rotate', true), '-80deg'); +} ``` # --seed-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md index 93b822cb7a8..1aa5ab966c2 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md @@ -14,7 +14,14 @@ dashedName: step-91 يجب عليك إعطاء `.arm.left` خاصية `transform` بقيمة `rotate(130deg) scaleX(-1)`. ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left').getPropVal('transform', true), 'rotate(130deg)scaleX(-1)'); +const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left'); + +if (leftArm?.rotate && leftArm?.transform) { + assert.equal(leftArm.getPropVal('rotate', true), '130deg'); + assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)'); +} else { + assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)'); +} ``` # --seed-- @@ -281,7 +288,6 @@ body { top: 35%; left: 5%; transform-origin: top left; - } --fcc-editable-region-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md index 35e8dddb42a..6f050be3ac1 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md @@ -14,7 +14,13 @@ dashedName: step-92 يجب عليك إعطاء `.arm.right` خاصية `transform` بقيمة `rotate(-45deg)`. ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.getPropVal('transform', true), 'rotate(-45deg)'); +const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right'); + +if (rightArm?.transform) { + assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)'); +} else { + assert.equal(rightArm?.getPropVal('rotate', true), '-45deg'); +} ``` # --seed-- @@ -287,7 +293,6 @@ body { .arm.right { top: 0%; right: -5%; - } --fcc-editable-region-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md index b99f65941ef..6cd75f86d08 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md @@ -14,7 +14,16 @@ dashedName: step-97 يجب عليك إعطاء `10%` إلى خاصية `transform` بقيمة `rotate(110deg) scaleX(-1)`. ```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)'); +const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%'); +const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, ''); +const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, ''); + +if (rotateProp && transformProp) { + assert(rotateProp === '110deg'); + assert(transformProp === 'scaleX(-1)'); +} else { + assert(transformProp === 'rotate(110deg)scaleX(-1)'); +} ``` # --seed-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md index 6b143b466c9..80143e773e3 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md @@ -14,7 +14,16 @@ dashedName: step-98 يجب عليك إعطاء أحداثية `20%` خاصية `transform` بقيمة `rotate(130deg) scaleX(-1)`. ```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)'); +const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%'); +const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, ''); +const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, ''); + +if (rotateProp && transformProp) { + assert(rotateProp === '130deg'); + assert(transformProp === 'scaleX(-1)'); +} else { + assert(transformProp === 'rotate(130deg)scaleX(-1)'); +} ``` # --seed-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md index 2d8f943f309..f06e0e747ce 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md @@ -14,13 +14,31 @@ dashedName: step-99 يجب عليك إعطاء نقطة الطريق `30%` خاصية `transform` بقيمة `rotate(110deg) scaleX(-1)`. ```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)'); +const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%'); +const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, ''); +const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, ''); + +if (rotateProp && transformProp) { + assert(rotateProp === '110deg'); + assert(transformProp === 'scaleX(-1)'); +} else { + assert(transformProp === 'rotate(110deg)scaleX(-1)'); +} ``` يجب عليك إعطاء نقطة الطريق `40%` خاصية `transform` بقيمة `rotate(130deg) scaleX(-1)`. ```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)'); +const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%'); +const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, ''); +const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, ''); + +if (rotateProp && transformProp) { + assert(rotateProp === '130deg'); + assert(transformProp === 'scaleX(-1)'); +} else { + assert(transformProp === 'rotate(130deg)scaleX(-1)'); +} ``` # --seed-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md index c4515339280..b155bdeaa3d 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md @@ -16,11 +16,11 @@ gradient-type( ); ``` -في المثال، `color1` صُلْب في الأعلى، `color2` صُلْب في الأسفل، وفي ما بينها ينتقل بالتساوي من واحد إلى آخر. في `.bb1a`، إضافة عنصر تدرج من نوع `linear-gradient` إلى خاصية `background` مع `--building-color1` كاللون الأول و `--window-color1` كالثاني. +في المثال، `color1` صُلْب في الأعلى، `color2` صُلْب في الأسفل، وفي ما بينها ينتقل بالتساوي من واحد إلى آخر. في `.bb1a`، أضف خاصية `background` أسفل خاصية `background-color`. عيّنه كتدرج من نوع `linear-gradient` الذي يستخدم `--building-color1` كاللون الأول و `--window-color1` كالثاني. # --hints-- -يجب عليك تطبيق `background` على `.bb1a`. +يجب عليك تطبيق `background` على `.bb1a` بعد `background-color` مباشرة. ```js assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md index 2ace9571b3a..edbb0356ef8 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md @@ -45,7 +45,7 @@ assert(document.querySelector('a').getAttribute('target') === '_blank');Cat Photos
--fcc-editable-region-- -See more cat photos in our gallery.
+See more cat photos in our gallery.
--fcc-editable-region--
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md
index bbf3fc5d5e7..dc6ed8e31f1 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md
@@ -9,7 +9,7 @@ dashedName: step-31
لننتقل إلى `fieldset` الأخيرة. ماذا لو كنت ترغب في السماح للمستخدم بتحميل صورة الملف الشخصي؟
-حسنًا، `input` من نوع `file` يسمح بذلك. Add a `label` with the text `Upload a profile picture:`, and nest an `input` accepting a file upload.
+حسنًا، `input` من نوع `file` يسمح بذلك. أضف `label` مع النص `Upload a profile picture:`، وإدخال `input` الذي يقبل تحميل الملف.
# --hints--
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md
index fd636c8de4f..f72be80e300 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md
@@ -39,13 +39,15 @@ assert(document.querySelector('h1')?.innerText === 'Nutrition Facts');
--fcc-editable-region--
-
-
- Nutrition Label - - - + + +Nutrition Label + + + + + --fcc-editable-region-- ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md index b275bad310d..aee3c626420 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md @@ -43,14 +43,16 @@ assert(document.querySelector('p')?.innerText === '8 servings per container'); --fcc-editable-region-- - - -Nutrition Label - - -Nutrition Facts
- + + +Nutrition Label + + + +Nutrition Facts
+ + --fcc-editable-region-- ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md index 4cd7a0d5eeb..5fd75d76ce1 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md @@ -43,15 +43,17 @@ assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup --fcc-editable-region-- - - -Nutrition Label - - -Nutrition Facts
-8 servings per container
- + + +Nutrition Label + + + +Nutrition Facts
+8 servings per container
+ + --fcc-editable-region-- ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md index 1a1013e25e2..505098b2e00 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md @@ -49,16 +49,18 @@ assert(links.find(link => link?.getAttribute('href') === 'https://fonts.googleap --fcc-editable-region-- - - -Nutrition Label - - -Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
- + + +Nutrition Label + + + + +Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+ --fcc-editable-region-- ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md index 2d218bc2996..81caee35a38 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md @@ -32,17 +32,19 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open S ```html - - -Nutrition Label - - - - -Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
- + + + +Nutrition Label + + + + + +Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md index 5e2002b903a..e263594d818 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md @@ -30,17 +30,19 @@ assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px'); ```html - - -Nutrition Label - - - - -Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
- + + + +Nutrition Label + + + + + +Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md index de6febb309d..39fbf96f09c 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md @@ -37,18 +37,20 @@ assert(children?.every(child => child?.parentElement?.classList?.contains('label ```html - - -Nutrition Label - - - + + + +Nutrition Label + + + + --fcc-editable-region-- - -Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
- + +Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+ --fcc-editable-region-- ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md index 1efee5aa6ec..a20391169fe 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md @@ -32,19 +32,21 @@ assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid ```html - - -Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md index 175d90bec0f..6a2f87d916a 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md @@ -26,19 +26,21 @@ assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px'); ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md index c6471a7931d..dcda0810c57 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md @@ -30,19 +30,21 @@ assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px' ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md index 3c145d84644..26ffaf193ef 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md @@ -32,19 +32,21 @@ assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box' ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md index 4c335b77bf3..aacaab1e3fa 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md @@ -32,19 +32,21 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800'); ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md index 4e0a39da9d2..6e299b34326 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md @@ -24,19 +24,21 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md index ea0f7928395..bff129bf3f9 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md @@ -24,19 +24,21 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px'); ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md index 2e09576f916..81708f85f9a 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md @@ -30,19 +30,21 @@ assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px'); ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md index 125dceca925..9cebe4c0264 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md @@ -44,21 +44,23 @@ assert(document.querySelector('.divider')?.previousElementSibling?.localName === ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - + + + +Nutrition Label + + + + + --fcc-editable-region-- --+Nutrition Facts
-8 servings per container
-Serving size 2/3 cup (55g)
-+--fcc-editable-region-- - + ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md index 5608b146da0..eb0b409ccea 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md @@ -36,20 +36,22 @@ assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px ```html - - -Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md index 100f5bd116c..38e25be0ee0 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md @@ -26,20 +26,22 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md index 7fb7802d7e2..933a8f448b7 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md @@ -32,22 +32,24 @@ assert(!document.querySelector('p')?.classList?.contains('bold')); ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - + + + +Nutrition Label + + + + + --fcc-editable-region-- --+Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-+--fcc-editable-region-- - + ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md index 0a5799c9562..fd3d76dec68 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md @@ -44,20 +44,22 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')); ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md index 369b2192158..4a512331eef 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md @@ -24,22 +24,24 @@ assert(document.querySelector('h1')?.classList?.contains('bold')); ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - + + + +Nutrition Label + + + + + --fcc-editable-region-- --+Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-+--fcc-editable-region-- - + ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md index 770f1be1f2c..87f718e21c0 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md @@ -9,7 +9,7 @@ dashedName: step-22 المسافة الأفقية بين العناصر ذات الأهمية المتساوية يمكن أن تزيد من سهولة قراءة النص الخاص بك. -قم بتغليف النص `2/3 cup (55g)` في عنصر `span`، وقم بإعطائه سمة `class` بقيمة `right`. +غلف النص `2/3 cup (55g)` داخل عنصر `span`. # --hints-- @@ -19,19 +19,13 @@ dashedName: step-22 assert(document.querySelector('span')); ``` -يجب أن يحتوي عنصر الـ `span` الجديد على سمة `class` بقيمة `right`. - -```js -assert(document.querySelector('span')?.classList?.contains('right')); -``` - يجب أن يحتوي عنصر `span` على النص `2/3 cup (55g)`. ```js assert(document.querySelector('span')?.textContent?.trim() === '2/3 cup (55g)'); ``` -يجب أن يظل عنصر `p` الخاص بك يحتوي على النص `Serving size 2/3 cup (55g)`. +يجب أن يحتوي عنصرك `p` على النص `Serving size 2/3 cup (55g)`. ```js assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)'); @@ -44,22 +38,24 @@ assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - + + + +Nutrition Label + + + + + --fcc-editable-region-- --+Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-+--fcc-editable-region-- - + ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md index a68d77f85cb..2ef7a879e78 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md @@ -7,22 +7,20 @@ dashedName: step-23 # --description-- -تُستخدم الخاصية `float` لوضع عنصر على يسار أو يمين الحاوية (container) الخاصة به، مما يسمح لمحتوى آخر (مثل نص) بالالتفاف حوله. - -قم بإنشاء منتقي `.right` جديد وقم بتعيين خاصية `float` بقيمة `right`. +الآن يمكنك إضافة المسافات الأفقية باستخدام `flex`. في منتقيك `p`، أضف خاصية `display` بقيمة `flex` وخاصية `justify-content` بقيمة `space-between`. # --hints-- -يجب عليك إنشاء منتقي `.right` جديد. +يجب أن يحتوي منتقيك `p` على خاصية `display` بقيمة `flex`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); +assert(new __helpers.CSSHelp(document).getStyle('p')?.display === 'flex'); ``` -يجب أن يكون لمنتقي `.right` الخاص بك خاصية `float` بقيمة `right`. +يجب أن يحتوي منتقيك `p` على `justify-content` بقيمة `space-between`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.float === 'right'); +assert(new __helpers.CSSHelp(document).getStyle('p')?.justifyContent === 'space-between'); ``` # --seed-- @@ -32,20 +30,22 @@ assert(new __helpers.CSSHelp(document).getStyle('.right')?.float === 'right'); ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` @@ -75,9 +75,11 @@ h1 { letter-spacing: 0.15px } +--fcc-editable-region-- p { margin: 0; } +--fcc-editable-region-- .divider { border-bottom: 1px solid #888989; @@ -87,8 +89,4 @@ p { .bold { font-weight: 800; } - ---fcc-editable-region-- - ---fcc-editable-region-- ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md index ca5da190daa..1b8fa035bc7 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md @@ -40,22 +40,24 @@ assert(children?.[3]?.localName === 'p'); ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - + + + +Nutrition Label + + + + + --fcc-editable-region-- --+Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-+--fcc-editable-region-- - + ``` @@ -87,6 +89,8 @@ h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -97,8 +101,4 @@ p { .bold { font-weight: 800; } - -.right { - float: right; -} ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md index f71894f0b7d..d6250596d07 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md @@ -39,22 +39,24 @@ assert(style?.letterSpacing === '0.15px'); ```html - - -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +- -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` @@ -88,6 +90,8 @@ h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -98,8 +102,4 @@ p { .bold { font-weight: 800; } - -.right { - float: right; -} ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md index b77f6f11cb6..e3a47842c11 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md @@ -7,7 +7,7 @@ dashedName: step-26 # --description-- -قم بإنشاء `div` جديد أسفل عنصر `header` وإعطائه سمة `class` بقيمة `divider lg`. +أنشئ `div` جديد أسفل عنصر `header` وإعطائه سمة `class` بقيمة `divider large`. # --hints-- @@ -23,12 +23,12 @@ assert(document.querySelectorAll('div')?.length === 3); assert(document.querySelector('.label')?.lastElementChild?.localName === 'div'); ``` -عنصر `div` الجديد الخاص بك يجب أن يحتوي على سمة `class` بقيمة `divider lg`. +عنصر `div` الجديد الخاص بك يجب أن يحتوي على سمة `class` بقيمة `divider large`. ```js const div = document.querySelector('.label')?.lastElementChild; assert(div?.classList?.contains('divider')); -assert(div?.classList?.contains('lg')); +assert(div?.classList?.contains('large')); ``` # --seed-- @@ -38,25 +38,27 @@ assert(div?.classList?.contains('lg')); ```html - - -+ +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --+ ``` @@ -88,6 +90,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -98,8 +102,4 @@ p { .bold { font-weight: 800; } - -.right { - float: right; -} ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md index f847fa8e60b..a04e96d9946 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md @@ -7,32 +7,32 @@ dashedName: step-27 # --description-- -قم بإنشاء منتقي `.lg` جديد وإعطائه خاصية `height` بقيمة `10px`. قم أيضا بإنشاء منتقي `.lg, .md` وتعيين خاصية `background-color` إلى `black`. +أنشئ منتقي `.large` جديد وإعطائه خاصية `height` بقيمة `10px`. أنشئ منتقي `.large, .medium` أيضا, وتعيين خاصية `background-color` بقيمة `black`. # --hints-- -يجب أن يكون لديك منتقي `.lg` جديد. +يجب أن يكون لديك منتقي `.large` جديد. ```js -assert(new __helpers.CSSHelp(document).getStyle('.lg')); +assert(new __helpers.CSSHelp(document).getStyle('.large')); ``` -يجب أن يكون لمنتقي `.lg` الخاص بك خاصية `height` بقيمة `10px`. +يجب أن يحتوي منتقيك `.large` على خاصية `height` بقيمة `10px`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.lg')?.height === '10px'); +assert(new __helpers.CSSHelp(document).getStyle('.large')?.height === '10px'); ``` -يجب أن يكون لديك منتقي `.lg, .md` جديد. +يجب أن يكون لديك منتقي `.large, .medium` جديد. ```js -assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')); +assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')); ``` -يجب أن يكون لمنتقي `.lg, .md` الخاص بك `background-color` تم تعيينه إلى `black`. +يجب أن يحتوي لمنتقيك `.large, .medium` على `background-color` بقيمة `black`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.backgroundColor === 'black'); +assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.backgroundColor === 'black'); ``` # --seed-- @@ -42,23 +42,25 @@ assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.backgroundColor === ```html - - -- + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + ++- ++ --fcc-editable-region-- --fcc-editable-region-- -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` @@ -90,6 +92,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -101,10 +105,6 @@ p { font-weight: 800; } -.right { - float: right; -} - --fcc-editable-region-- --fcc-editable-region-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md index 525315b99fa..730d64a4ef2 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md @@ -7,16 +7,16 @@ dashedName: step-28 # --description-- -يمكنك ملاحظة أنه لا يزال هناك حدود صغيرة في أسفل عنصر `.lg`. لإعادة تعيين هذا، قم بإعطاء منتقي `.lg, .md` الخاصية `border` بقيمة `0`. +يمكنك ملاحظة أنه لا يزال هناك حدود صغيرة في أسفل عنصر `.large`. لإعادة تعيين هذا، أعطي منتقي `.large, .medium` خاصية `border` بقيمة `0`. -ملاحظة: سيتم استخدام فئة `md`(متوسط) في الخطوة 37 لأشرطة الأرفع في nutrition label. +ملاحظة: سيتم استخدام فئة `medium`(متوسط) في الخطوة 37 لأشرطة الأنحف في nutrition label. # --hints-- -يجب أن يكون لمنتقيك `.lg, .md` الخاصية `border` بقيمة `0`. +يجب أن يكون لمنتقيك `.large, .medium` خاصية `border` بقيمة `0`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.borderWidth === '0px'); +assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.borderWidth === '0px'); ``` # --seed-- @@ -26,23 +26,25 @@ assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.borderWidth === '0p ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- + + + +- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ ``` @@ -74,6 +76,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -85,16 +89,12 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } --fcc-editable-region-- -.lg, .md { +.large, .medium { background-color: black; } --fcc-editable-region-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md index 34ae3eef7f1..304f2775147 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md @@ -7,7 +7,7 @@ dashedName: step-29 # --description-- -قم بإنشاء `div` جديد أسفل عنصر `.lg` وإعطائه سمة `class` بقيمة `calories-info`. +أنشئ `div` جديد أسفل عنصر `.large` وإعطائه سمة `class` بقيمة `calories-info`. # --hints-- @@ -23,10 +23,10 @@ assert(document.querySelectorAll('div')?.length === 4); assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info')); ``` -يجب أن يأتي الـ `div` الجديد بعد عنصر `.lg` الخاص بك. +يجب أن يأتي `div` الجديد بعد عنصر `.large`. ```js -assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('lg')); +assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('large')); ``` # --seed-- @@ -36,26 +36,28 @@ assert(document.querySelector('.label')?.lastElementChild?.previousElementSiblin ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --+ ``` @@ -87,6 +89,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -98,15 +102,11 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md index f5bdfa440d3..1fcb753a676 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md @@ -7,27 +7,39 @@ dashedName: step-30 # --description-- -ضمن عنصر `.calories-info` الخاص بك، أنشئ عنصر `p`. اعطي عنصر `p` سمة `class` تم تعيينها إلى `bold sm-text`، والنص `Amount per serving`. +داخل عنصرك `.calories-info`، أنشئ عنصر `div`. اعطي هذا العنصر `div` سمة `class` بقيمة `left-container`. داخل عنصر المنشئ حديثا `div`، أضف عنصر `h2` جديد مع النص `Amount per serving`. أعطِ عنصر `h2` السمة `class` بقيمة `bold small-text`. # --hints-- -يجب عليك إنشاء عنصر `p` جديد داخل عنصر `.calories-info` الخاص بك. +يجب عليك إنشاء عنصر `div` جديد داخل عنصرك `.calories-info`. ```js -assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'p'); +assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'div'); ``` -يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `bold sm-text`. +يجب أن يحتوي عنصرك `div` على سمة `class` بقيمة `left-container`. ```js -assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('bold')); -assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('sm-text')); +assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('left-container')); ``` -عنصر `p` الجديد يجب أن يحتوي على النص `Amount per serving`. +يجب عليك إنشاء عنصر `h2` جديد داخل عنصرك `.left-container`. ```js -assert(document.querySelector('.calories-info')?.children?.[0]?.innerText === 'Amount per serving'); +assert(document.querySelector('.left-container')?.children?.[0]?.localName === 'h2'); +``` + +يجب أن يحتوي عنصر `h2` الجديد على سمة `class` بقيمة `bold small-text`. + +```js +assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('bold')); +assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('small-text')); +``` + +يجب أن يحتوي عنصر `h2` الجديد على النص `Amount per serving`. + +```js +assert(document.querySelector('.left-container')?.children?.[0]?.innerText === 'Amount per serving'); ``` # --seed-- @@ -37,28 +49,30 @@ assert(document.querySelector('.calories-info')?.children?.[0]?.innerText === 'A ```html - - -- - + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + ++- ++ + --fcc-editable-region-- --fcc-editable-region-- -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+Nutrition Label - - - - --- - ---fcc-editable-region-- -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--+ + +Nutrition Label + + + + + +++ ``` @@ -90,6 +104,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -101,15 +117,11 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md index e31076458b7..6fd66331f79 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md @@ -9,20 +9,20 @@ dashedName: step-31 وحدة `rem` تعني `root em`، وهي تتعلق بحجم الخط (font size) لعنصر `html`. -قم بإنشاء منتقي `.sm-text` وتعيين `font-size` إلى `0.85rem`، والتي ستحسب على أنها تقريبا `13.6px` (تذكر أنك قمت بتعيين `html` ليكون لديه `font-size` من `16px`). +أنشئ منتقي `.small-text` وعين `font-size` بقيمة `0.85rem`، التي ستحسب على أنها تقريبا `13.6px` (تذكر أنك تعيين `html` ليحتوي على `font-size` بقيمة `16px`). # --hints-- -يجب أن يكون لديك منتقي `.sm-text`. +يجب أن يكون لديك منتقي `.small-text`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.sm-text')); +assert(new __helpers.CSSHelp(document).getStyle('.small-text')); ``` -يجب أن يكون لمنتقي `.sm-text` الخاص بك الخاصية `font-size` بقيمة `0.85rem`. +يجب أن يحتوي منتقيك `.small-text` على خاصية `font-size` بقيمة `0.85rem`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.sm-text')?.fontSize === '0.85rem'); +assert(new __helpers.CSSHelp(document).getStyle('.small-text')?.fontSize === '0.85rem'); ``` # --seed-- @@ -32,26 +32,30 @@ assert(new __helpers.CSSHelp(document).getStyle('.sm-text')?.fontSize === '0.85r ```html - - -+ + --fcc-editable-region-- +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- +--fcc-editable-region-- +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
+ + + +Nutrition Label + + + + + +++ ``` @@ -83,6 +87,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -94,15 +100,11 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md index 9ba4b143a80..1b7b81f96be 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md @@ -1,51 +1,50 @@ --- id: 615f5486b8fd4b71633f69b0 -title: الخطوة 32 +title: الخطوة 33 challengeType: 0 -dashedName: step-32 +dashedName: step-33 --- # --description-- -أسفل عنصر `.sm-text` الخاص بك، قم بإنشاء عنصر `h1` جديد مع النص `Calories 230`. قم بتغليف جزء `230` من النص في عنصر `span` مع `class` بقيمة `right`. +أسفل عنصرك `.small-text`، أنشئ عنصر `p` جديد مع النص `Calories`. أسفل عنصرك `.left-container`، أنشئ عنصر `span` جديد مع النص `230`. # --hints-- -يجب أن يكون لديك عنصر `h1` جديد داخل عنصر `.calories-info` الخاص بك. +يجب أن يكون لديك عنصر `p` جديد داخل عنصرك `.calories-info`. ```js -assert(document.querySelector('.calories-info')?.querySelector('h1')) +assert(document.querySelector('.calories-info')?.querySelector('p')) ``` -عنصر `h1` الخاص بك يجب أن يأتي بعد عنصر `.sm-text` الخاص بك. +يجب أن يكون لديك عنصر `span` جديد داخل عنصرك `.calories-info`. ```js -assert(document.querySelector('.sm-text')?.nextElementSibling?.localName === 'h1'); +assert(document.querySelector('.calories-info')?.querySelector('span')) ``` -يجب أن يحتوي عنصر `h1` الخاص بك على النص `Calories 230`. +يجب أن يأتي عنصرك `p` بعد عنصرك `.small-text`. ```js -// the float: right property does weird things to the inner text. -assert(document.querySelector('.calories-info')?.lastElementChild?.innerText.match(/Calories[\s|\n]*230/)); +assert(document.querySelector('.small-text')?.nextElementSibling?.localName === 'p'); ``` -يجب عليك إنشاء عنصر `span` ضمن عنصر `h1` الجديد. +يجب أن يحتوي عنصرك `p` على النص `Calories`. ```js -assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')); +assert(document.querySelector('.left-container')?.lastElementChild?.innerText === 'Calories'); ``` -يجب أن يحتوي عنصر `span` على `class` بقيمة `right`. +يجب أن يأتي عنصرك `span` بعد عنصرك `.left-container`. ```js -assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); +assert(document.querySelector('.left-container')?.nextElementSibling?.localName ==='span'); ``` يجب أن يحتوي عنصر `span` على النص `230`. ```js -assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.innerText === '230'); +assert(document.querySelector('.calories-info')?.lastElementChild?.innerText === '230'); ``` # --seed-- @@ -55,28 +54,32 @@ assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- ++Amount per serving
Nutrition Label - - - - --- - + + + +Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-Nutrition Label + + + + + +++ + --fcc-editable-region-- -Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+-+ ``` @@ -108,6 +111,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -119,20 +124,20 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.sm-text { +.small-text { font-size: 0.85rem; } + +.calories-info h2 { + margin: 0; +} ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md index a1f21f57256..04e6d72b795 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md @@ -1,29 +1,41 @@ --- id: 615f575b50b91e72af079480 -title: الخطوة 33 +title: Step 35 challengeType: 0 -dashedName: step-33 +dashedName: step-35 --- # --description-- -قم بإنشاء منتقي `.calories-info h1` يعين top و margin bottom إلى `-5px`، و left و right margin إلى `-2px`. +أنشئ منتقي `.left-container p` يعين هامش (margin) من أعلى وأسفل بمقدار `-5px`، و هامش من اليسار واليمين بمقدار `-2px`. أيضا عيّن خاصية `font-size` بمقدار `2em` وخاصية `font-weight` بمقدار `700`. # --hints-- -يجب أن يكون لديك منتقي `.calories-info h1` جديد. +يجب أن يكون لديك منتقي `.left-container p` جديد. ```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')); +assert(new __helpers.CSSHelp(document).getStyle('.left-container p')); ``` -المنتقي الجديد `.calories-info h1` يجب أن يكون لديه خاصية `margin` بقيمة `-5px -2px`. +ايجب أن يحتوي المنتقي الجديد `.left-container p` على خاصية `margin` بقيمة `-5px -2px`. ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginTop, '-5px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginBottom, '-5px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginLeft, '-2px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginRight, '-2px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginTop, '-5px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginBottom, '-5px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginLeft, '-2px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginRight, '-2px'); +``` + +يجب أن يحتوي المنتقي الجديد `.left-container p` على خاصية `font-size` بقيمة `2em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontSize === '2em'); +``` + +يجب أن يحتوي المنتقي الجديد `.left-container p` على خاصية `font-weight` بقيمة `700`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontWeight === '700'); ``` # --seed-- @@ -33,27 +45,32 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marg ```html - - -Amount per serving
++- +--fcc-editable-region-- ++---fcc-editable-region--Amount per serving
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -85,6 +102,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -96,23 +115,29 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.sm-text { +.small-text { font-size: 0.85rem; } +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + --fcc-editable-region-- --fcc-editable-region-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md index 9b1f6cc2fa5..4d0d945df62 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md @@ -1,13 +1,13 @@ --- id: 615f5af373a68e744a3c5a76 -title: الخطوة 34 +title: الخطوة 36 challengeType: 0 -dashedName: step-34 +dashedName: step-36 --- # --description-- -قم بإنشاء منتقي `.calories-info span` وتعيين `font-size` إلى `1.2em`. +أنشئ منتقي `.calories-info span`، عين `font-size` الخاص به بقيمة `2.4em` و `font-weight` بقيمة `700`. # --hints-- @@ -17,10 +17,16 @@ dashedName: step-34 assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')); ``` -يجب أن يكون لمنتقي `.calories-info span` الخاص بك الخاصية `font-size` بقيمة `1.2em`. +يجب أن يحتوي منتقيك `.calories-info span` على خاصية `font-size` بقيمة `2.4em`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '1.2em'); +assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '2.4em'); +``` + +يجب أن يحتوي منتقيك `.calories-info span` على خاصية `font-weight` بقيمة `700`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontWeight === '700'); ``` # --seed-- @@ -30,27 +36,32 @@ assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- +++ 230Amount per serving
+Calories
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -82,6 +93,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -93,25 +106,33 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; + font-size: 2em; + font-weight: 700; } --fcc-editable-region-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md index 44123ee7606..b37ff03e525 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md @@ -1,22 +1,22 @@ --- id: 615f5fd85d0062761f288364 -title: الخطوة 36 +title: الخطوة 37 challengeType: 0 -dashedName: step-36 +dashedName: step-37 --- # --description-- غالبًا ما تكون الطباعة (Typography) فنًا أكثر منها علمًا. قد تضطر إلى تعديل أشياء مثل المحاذاة حتى تبدو صحيحة. -قم بإعطاء منتقي `.calories-info span` الـ `margin-top` بقيمة `-7px`. سيؤدي هذا إلى تحويل النص الخاص بك `230` إلى موضعه. +أعطي منتقيك `.calories-info span` خاصية `margin` بقيمة `-7px -2px`. سيؤدي هذا إلى تحويل النص الخاص بك `230` إلى موضعه. # --hints-- -منتقي `.calories-info span` يجب ان يحتوي علي `margin-top` بقيمة `-7px`. +يجب أن يحتوي منتقي `.calories-info span` على `margin` بقيمة `-7px -2px`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.marginTop === '-7px'); +assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.margin === '-7px -2px'); ``` # --seed-- @@ -26,27 +26,32 @@ assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.marginTo ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- +++ 230Amount per serving
+Calories
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -78,6 +83,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -89,31 +96,39 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } --fcc-editable-region-- .calories-info span { - font-size: 1.2em; + font-size: 2.4em; + font-weight: 700; } --fcc-editable-region-- ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md index 38c5bdaee7c..74b97b28254 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md @@ -1,13 +1,13 @@ --- id: 615f61338c8ca176d6445574 -title: الخطوة 37 +title: الخطوة 38 challengeType: 0 -dashedName: step-37 +dashedName: step-38 --- # --description-- -أسفل عنصر `.calories-info` الخاص بك، أضف `div` مع سمة `class` بقمية `divider md`. +أسفل عنصرك `.calories-info`، أضف `div` مع سمة `class` بقيمة `divider medium`. # --hints-- @@ -17,11 +17,11 @@ dashedName: step-37 assert(document.querySelectorAll('.label > div')?.length === 3) ``` -يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider md`. يجب أن يكون هذا العنصر الأخير في عنصر `.label` الخاص بك. +يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider medium`. يجب أن يكون هذا العنصر الأخير في عنصر `.label` الخاص بك. ```js const div = document.querySelector('.label')?.lastElementChild; -assert(div?.classList?.contains('divider') && div?.classList?.contains('md')); +assert(div?.classList?.contains('divider') && div?.classList?.contains('medium')); ``` # --seed-- @@ -31,30 +31,35 @@ assert(div?.classList?.contains('divider') && div?.classList?.contains('md')); ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- +++ 230Amount per serving
+Calories
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--+ ``` @@ -86,6 +91,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -97,30 +104,38 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; } ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md index 88644797489..1bd0c2eaee3 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md @@ -1,26 +1,26 @@ --- id: 615f666ac5edea782feb7e75 -title: الخطوة 38 +title: الخطوة 39 challengeType: 0 -dashedName: step-38 +dashedName: step-39 --- # --description-- -قم بإنشاء منتقي `.md` وإعطائه خاصية `height` بقيمة `5px`. +أنشئ منتقي `.medium` واعطه خاصية `height` بقيمة `5px`. # --hints-- -يجب عليك إنشاء منتقي `.md`. +يجب عليك إنشاء منتقي `.medium`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.md')); +assert(new __helpers.CSSHelp(document).getStyle('.medium')); ``` -يجب أن يكون لمنتقي `.md` الخاص بك الخاصية `height` بقيمة `5px`. +يجب أن يكون لمنتقيك `.medium` خاصية `height` بقيمة `5px`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.md')?.height === '5px'); +assert(new __helpers.CSSHelp(document).getStyle('.medium')?.height === '5px'); ``` # --seed-- @@ -30,28 +30,33 @@ assert(new __helpers.CSSHelp(document).getStyle('.md')?.height === '5px'); ```html - - -Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + ++- ++ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++--fcc-editable-region-- --fcc-editable-region-- -++ 230 +Amount per serving
+Calories
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -83,6 +88,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -94,15 +101,11 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } @@ -111,17 +114,29 @@ p { --fcc-editable-region-- -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; } ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md index 21052dd5bd0..ff06aea7d14 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md @@ -1,29 +1,29 @@ --- id: 615f671b6d1919792745aa5d -title: الخطوة 39 +title: الخطوة 40 challengeType: 0 -dashedName: step-39 +dashedName: step-40 --- # --description-- -قم بإنشاء عنصر `div` جديد تحت عنصر `.md` الخاص بك. قم بإعطائه سمة `class` تم تعيينها إلى `daily-value sm-text`. داخل هذا الـ `div` الجديد، قم بإضافة عنصر `p` مع النص `% Daily Value *`، وتعيين سمة `class` إلى `right bold`. +أنشئ عنصر `div` جديد تحت عنصرك `.medium`. أعطه سمة `class` بقيمة `daily-value small-text`. داخل هذا الـ `div` الجديد، أضف عنصر `p` مع النص `% Daily Value *`، وتعيين سمة `class` إلى `bold right`. # --hints-- -يجب عليك إنشاء عنصر `div` جديد بعد عنصر `.md` الخاص بك. +يجب عليك إنشاء عنصر `div` جديد بعد عنصرك `.medium`. ```js assert(document.querySelector('.label')?.lastElementChild?.localName === 'div'); assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider')); -assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('md')); +assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('medium')); ``` -يجب أن يحتوي الـ `div` الجديد على سمة `class` بقيمة `daily-value sm-text`. +يجب أن يحتوي الـ `div` الجديد على سمة `class` بقيمة `daily-value small-text`. ```js assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value')); -assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('sm-text')); +assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('small-text')); ``` يجب أن يحتوي عنصر `div` الجديد على عنصر `p`. @@ -38,11 +38,11 @@ assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.lo assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *'); ``` -يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `right bold`. +يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `bold right`. ```js -assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right')); assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right')); ``` # --seed-- @@ -52,32 +52,36 @@ assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.cl ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + ++- + 230Amount per serving
+Calories
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- ---fcc-editable-region-- ---fcc-editable-region-- + + +Amount per serving
-Calories 230
-Nutrition Label + + + + + +++ ``` @@ -109,6 +113,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -120,34 +126,42 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; } ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md index cec99a1be06..9301f275c6b 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md @@ -1,32 +1,32 @@ --- id: 615f6823d0815b7a991f2a75 -title: الخطوة 40 +title: الخطوة 42 challengeType: 0 -dashedName: step-40 +dashedName: step-42 --- # --description-- -نمط `float` يتسبب في ان عنصر `p` الجديد يصبح خارج حدود الـ label. استخدم عنصر `.divider` الموجود كمثال لإضافة divider جديد بعد عنصر `p`. +استخدم عنصر `.divider` الموجود كمثال لإضافة divider جديد بعد عنصر `p`. # --hints-- -يجب عليك إنشاء `div` جديد داخل عنصر `.daily-value.sm-text`. +يجب عليك إنشاء `div` جديد بعد عنصرك `.daily-value`. ```js -assert(document.querySelectorAll('.daily-value.sm-text > div')?.length === 1) +assert(document.querySelectorAll('.daily-value.small-text > div')?.length === 1) ``` يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider`. ```js -assert(document.querySelector('.daily-value.sm-text > div')?.classList?.contains('divider')) +assert(document.querySelector('.daily-value.small-text > div')?.classList?.contains('divider')) ``` يجب أن يأتي `div` الجديد بعد عنصر `p` الخاص بك. ```js -assert(document.querySelector('.daily-value.sm-text > div')?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text > div')?.previousElementSibling?.localName === 'p'); ``` # --seed-- @@ -36,34 +36,38 @@ assert(document.querySelector('.daily-value.sm-text > div')?.previousElementSibl ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + --fcc-editable-region-- + + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- ---fcc-editable-region-- -Amount per serving
-Calories 230
--% Daily Value *
+ + +Nutrition Label + + + + + +++ ``` @@ -95,6 +99,8 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { @@ -106,34 +112,46 @@ p { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md index 6c780d7cf53..8552d8f8cdc 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md @@ -1,56 +1,62 @@ --- id: 615f6b2d164f81809efd9bdc -title: الخطوة 42 +title: الخطوة 43 challengeType: 0 -dashedName: step-42 +dashedName: step-43 --- # --description-- -بعد آخر عنصر `.divider`، أنشئ عنصر `p` وأعطيه النص `Total Fat 8g 10%`. قم بتغليف `Total Fat` في `span` مع `class` تم تعيينه إلى `bold`. قم بتغليف `10%` في `span` مع `class` تم تعيينه إلى `bold right`. +بعد آخر عنصر `.divider`، أنشئ عنصر `p` وأعطيه النص `Total Fat 8g 10%`. قم بتغليف `Total Fat` في `span` مع `class` تم تعيينه إلى `bold`. غلف `10%` داخل عنصر `span` مع `class` بقيمة `bold`. غلف `Total Fat 8g` داخل عنصر إضافي `span` أيضا، من أجل المحاذاة (alignment). # --hints-- يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value` الخاص بك. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Total Fat 8g 10%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Fat 8g[\s|\n]+10%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/)); ``` -يجب أن يحتوي عنصر `p` الجديد على عنصران `span`. +يجب أن يحتوي عنصرك `p` على ثلاث عناصر `span`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -يجب أن يغلف عنصر `span` الاول النص `Total Fat`. +يجب أن يغلف عنصر `span` النص `Total Fat`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span > span')?.innerText === 'Total Fat'); ``` -يجب أن يحتوي عنصر `span` الاول على `class` بقيمة `bold`. +يجب أن يحتوي عنصر `span` الذي لديه نص `Total Fat` على `class` بقيمة `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.className === 'bold'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span > span')?.className === 'bold'); ``` -يجب أن يغلف عنصر `span` الثاني النص `10%`. +يجب أن يغلف عنصر `span` النص `10%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.innerText === '10%'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span + span')?.innerText === '10%'); ``` -يجب أن يحتوي عنصر `span` الثاني على `class` بقيمة `bold right`. +يجب أن يحتوي عنصر `span` الذي لديه نص `10%` على `class` بقيمة `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold right'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold'); +``` + +يجب أن يغلف عنصر `span` النص `Total Fat 8g`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g/)); ``` # --seed-- @@ -60,35 +66,39 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySe ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- ++---fcc-editable-region-- + 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- ---fcc-editable-region-- ---fcc-editable-region-- + + +Nutrition Label + + + + + +++ ``` @@ -120,46 +130,59 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md index 101019a5a3b..b4058b35cd3 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md @@ -1,46 +1,45 @@ --- id: 615f6cc778f7698258467596 -title: الخطوة 43 +title: الخطوة 44 challengeType: 0 -dashedName: step-43 +dashedName: step-44 --- # --description-- -أسفل العنصر مع النص `Total Fat`، قم بإنشاء عنصر `p` جديد مع النص `Saturated Fat 1g 5%`. قم بتغليف `5%` في `span` مع السمة `class` بقيمة `bold right`. +أسفل العنصر مع النص `Total Fat`، قم بإنشاء عنصر `p` جديد مع النص `Saturated Fat 1g 5%`. غلف `5%` في `span` مع السمة `class` بقيمة `bold`. في هذه الحالة تكفي النسبة المئوية بقيمة `5%` لمحاذاة. # --hints-- يجب عليك إنشاء عنصر `p` جديد تحت العنصر الخاص بك مع النص `Total Fat`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/)); ``` عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Saturated Fat 1g 5%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/)); ``` يجب أن يحتوي عنصر `p` الجديد على عنصر `span`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.localName === 'span'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.localName === 'span'); ``` -يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `bold right`. +يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); ``` يجب أن يغلف عنصر `span` النص `5%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === "5%"); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === "5%"); ``` # --seed-- @@ -50,36 +49,40 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastEle ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- -Total Fat 8g10%
---fcc-editable-region-- ---fcc-editable-region-- + + +Nutrition Label + + + + + +++ ``` @@ -111,46 +114,59 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md index 6c7e57a53f2..8908448e4ca 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md @@ -1,8 +1,8 @@ --- id: 615f6fddaac1e083502d3e6a -title: الخطوة 44 +title: الخطوة 45 challengeType: 0 -dashedName: step-44 +dashedName: step-45 --- # --description-- @@ -14,7 +14,7 @@ dashedName: step-44 عنصر `p` الخاص بك مع النص`Saturated Fat 1g 5%` يجب أن يحتوي على سمة `class` بقيمة `indent`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('indent')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('indent')); ``` # --seed-- @@ -24,36 +24,41 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- -Total Fat 8g10%
---fcc-editable-region-- -Saturated Fat 1g 5%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -85,46 +90,59 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md index b6752747632..ffa61e1d674 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md @@ -1,8 +1,8 @@ --- id: 615f70077a4ff98424236c1e -title: الخطوة 45 +title: الخطوة 46 challengeType: 0 -dashedName: step-45 +dashedName: step-46 --- # --description-- @@ -30,34 +30,39 @@ assert(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft === '1em' ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
+ + + +Nutrition Label + + + + + +++ ``` @@ -89,47 +94,60 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } --fcc-editable-region-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md index 6b03e68ba1c..2d2b4f7286f 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md @@ -1,8 +1,8 @@ --- id: 615f72a872354a850d4f533e -title: الخطوة 46 +title: الخطوة 47 challengeType: 0 -dashedName: step-46 +dashedName: step-47 --- # --description-- @@ -30,34 +30,39 @@ assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + +++ 230Amount per serving
+Calories
++% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
+ + + +Nutrition Label + + + + + +++ ``` @@ -89,47 +94,60 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md index 9c4fdcbd2ca..1c8a5d7bca0 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md @@ -1,8 +1,8 @@ --- id: 615f74a71f1e498619e38ee8 -title: الخطوة 47 +title: الخطوة 48 challengeType: 0 -dashedName: step-47 +dashedName: step-48 --- # --description-- @@ -14,16 +14,15 @@ dashedName: step-47 عنصر `p` الخاص بك مع النص `% Daily Value *` يجب أن يحتوي علي `no-divider` مضاف إلى السمة `class`. لا تقم بإزالة الـ classes الموجودة. ```js -const p = document.querySelector('.daily-value.sm-text')?.firstElementChild; +const p = document.querySelector('.daily-value.small-text')?.firstElementChild; assert(p?.classList?.contains('no-divider')); assert(p?.classList?.contains('bold')); -assert(p?.classList?.contains('right')); ``` عنصر `p` الخاص بك مع النص `Saturated Fat 1g 5%` يجب أن يحتوي علي `no-divider` مضاف إلى السمة `class`. لا تقم بإزالة الـ classes الموجودة. ```js -const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; +const p = document.querySelector('.daily-value.small-text')?.lastElementChild; assert(p?.classList?.contains('no-divider')); assert(p?.classList?.contains('indent')); ``` @@ -35,36 +34,41 @@ assert(p?.classList?.contains('indent')); ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + +++ 230Amount per serving
+Calories
++% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -96,47 +100,60 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md index 9d8d097c803..e7933a731e7 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md @@ -1,8 +1,8 @@ --- id: 615f7ad94380408d971d14f6 -title: الخطوة 48 +title: الخطوة 49 challengeType: 0 -dashedName: step-48 +dashedName: step-49 --- # --description-- @@ -44,37 +44,43 @@ assert(style?.borderBottom === '1px solid rgb(136, 137, 137)'); ## --seed-contents-- + ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- ++- ---fcc-editable-region-- -Amount per serving
+Calories
----fcc-editable-region-- + 230% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
-++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
+ + + +Nutrition Label + + + + + +++ ``` @@ -106,47 +112,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md index f1a5f04626b..50ca077bfad 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md @@ -1,8 +1,8 @@ --- id: 615f7bc680f7168ea01ebf99 -title: الخطوة 49 +title: الخطوة 50 challengeType: 0 -dashedName: step-49 +dashedName: step-50 --- # --description-- @@ -13,16 +13,16 @@ dashedName: step-49 # --hints-- -يجب عليك إنشاء عنصر `div` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `div` جديد في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div'); ``` يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider')); ``` # --seed-- @@ -32,36 +32,41 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + +++ 230Amount per serving
+Calories
++% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -93,47 +98,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md index f331b02be94..b8f7a0f4985 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md @@ -1,32 +1,32 @@ --- id: 615f7c71eab8218f846e4503 -title: الخطوة 50 +title: الخطوة 51 challengeType: 0 -dashedName: step-50 +dashedName: step-51 --- # --description-- -بعد آخر `.divider`، قم بإنشاء عنصر `p` آخر مع النص `Trans Fat 0g`. قم باستمالة (Italicize) الكلمة `Trans` عن طريق تغليفها في عنصر `i`. اعطي عنصر `p` الجديد السمة `class` بقيمة `indent no-divider`. +بعد آخر `.divider`، قم بإنشاء عنصر `p` آخر مع النص `Trans Fat 0g`. قم باستمالة (Italicize) الكلمة `Trans` عن طريق تغليفها في عنصر `i`. اعطي عنصر `p` الجديد السمة `class` بقيمة `indent no-divider`. غلف `Trans Fat 0g` داخل عنصر `span` للمحاذاة. # --hints-- -يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `p` جديد في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Trans Fat 0g`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText === 'Trans Fat 0g'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText === 'Trans Fat 0g'); ``` يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `indent no-divider`. ```js -const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; +const p = document.querySelector('.daily-value.small-text')?.lastElementChild; assert(p?.classList?.contains('indent')); assert(p?.classList?.contains('no-divider')); ``` @@ -34,13 +34,25 @@ assert(p?.classList?.contains('no-divider')); يجب أن يحتوي عنصر `p` الجديد على عنصر `i`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'i'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')); ``` يجب أن يغلف عنصر `i` النص `Trans`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Trans'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')?.innerText === 'Trans'); +``` + +يجب أن يحتوي عنصر `p` الجديد على عنصر `span`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')); +``` + +يجب أن يغلف عنصر `span` نص `Trans Fat 0g`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText?.match(/Trans[\s|\n]+Fat 0g/)); ``` # --seed-- @@ -50,37 +62,42 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstEl ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- ---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -112,47 +129,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md index 211d459217a..dd7b5b778ea 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md @@ -1,8 +1,8 @@ --- id: 615f7d489a581590d1350288 -title: الخطوة 51 +title: الخطوة 52 challengeType: 0 -dashedName: step-51 +dashedName: step-52 --- # --description-- @@ -11,16 +11,16 @@ dashedName: step-51 # --hints-- -يجب عليك إنشاء عنصر `div` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `div` جديد في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div'); ``` عنصر `div` الجديد الخاص بك يجب أن يحتوي على سمة `class` بقيمة `divider`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider')); ``` # --seed-- @@ -30,38 +30,43 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -93,47 +98,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md index d1c9d728ded..d4650b1f3b0 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md @@ -1,57 +1,62 @@ --- id: 615f7de4487b64919bb4aa5e -title: الخطوة 52 +title: الخطوة 53 challengeType: 0 -dashedName: step-52 +dashedName: step-53 --- # --description-- -بعد آخر `.divider`، قم بإنشاء عنصر `p` آخر مع النص `Cholesterol 0mg 0%`. قم بتغليف النص `Cholesterol` في عنصر `span`، واعطي عنصر `span` هذا السمة `class` بقيمة `bold`. قم بتغليف نص `0%` في `span` اخري مع `class` تم تعيينه إلى `bold right`. +بعد آخر `.divider`، قم بإنشاء عنصر `p` آخر مع النص `Cholesterol 0mg 0%`. قم بتغليف النص `Cholesterol` في عنصر `span`، واعطي عنصر `span` هذا السمة `class` بقيمة `bold`. غلف نص `0%` داخل `span` أخرى، مع `class` بقيمة `bold`. غلف `Cholesterol 0mg` داخل عنصر إضافي `span` أيضا، من أجل المحاذاة (alignment). # --hints-- -يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `p` جديد في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Cholesterol 0mg 0%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Cholesterol 0mg[\s|\n]+0%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Cholesterol[\s|\n]+0mg[\s|\n]+0%/)); ``` -يجب أن يحتوي عنصر `p` الجديد على عنصران `span`. +يجب أن يحتوي عنصر `p` الجديد على ثلاث عناصر `span`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -يجب أن يحتوي عنصر `span` الاول على `class` بقيمة `bold`. +يجب أن يحتوي عنصر `span` الأول بنص `Cholesterol` على `class` بقيمة `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold')); ``` -يجب أن يغلف عنصر `span` الاول النص `Cholesterol`. +يجب أن يغلف عنصر `span` الأول النص `Cholesterol 0mg`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Cholesterol'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Cholesterol[\s|\n]+0mg/)); ``` -يجب أن يحتوي عنصر `span` الثاني على سمة `class` بقيمة `bold right`. +يجب أن يغلف عنصر `span` الأول النص `Cholesterol`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Cholesterol'); +``` + +يجب أن يحتوي عنصر `span` الثاني على سمة `class` بقيمة `bold`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); ``` يجب أن يغلف عنصر `span` الثاني النص `0%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '0%'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '0%'); ``` # --seed-- @@ -61,39 +66,44 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastEle ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- ---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -125,47 +135,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md index d8c51dcdbab..b1b038f31fc 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md @@ -1,57 +1,62 @@ --- id: 615f7e7281626a92bbd62da8 -title: الخطوة 53 +title: الخطوة 54 challengeType: 0 -dashedName: step-53 +dashedName: step-54 --- # --description-- -أسفل العنصر `p` الأخير، قم بإنشاء عنصر `p` آخر مع النص `Sodium 160mg 7%`. قم بتغليف النص `Sodium` في عنصر `span` مع سمة `class` تم تعيينها إلى `bold`. قم بتغليف النص `7%` في `span` اخر مع `class` تم تعيينه إلى `bold right`. +أسفل العنصر `p` الأخير، قم بإنشاء عنصر `p` آخر مع النص `Sodium 160mg 7%`. قم بتغليف النص `Sodium` في عنصر `span` مع سمة `class` تم تعيينها إلى `bold`. غلف نص `7%` داخل `span` أخر مع `class` بقيمة `bold`. أضف عنصر إضافي `span` حول `Sodium 160mg` لمحاذاته بشكل صحيح. # --hints-- -يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `p` جديد في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` عنصر `p` الجديد الخاص بك يجب أن يحتوي على نص `Sodium 160mg 7%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Sodium 160mg[\s|\n]+7%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/)); ``` -يجب أن يحتوي عنصر `p` الجديد على عنصران `span`. +يجب أن يحتوي عنصر `p` الجديد على ثلاث عناصر `span`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -يجب أن يحتوي عنصر `span` الاول على `class` بقيمة `bold`. +يجب أن يغلف عنصر `span` النص `Sodium 360mg`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/)); ``` -يجب أن يغلف العنصر `span` النص `Sodium`. +يجب أن يغلف عنصر `span` النص `Sodium`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Sodium'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium"); ``` -يجب أن يحتوي عنصر `span` الثاني على سمة `class` بقيمة `bold right`. +يجب أن يحتوي عنصر `span` الذي لديه نص `Sodium` على سمة `class` بقيمة `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold')); ``` -يجب أن يغلف عنصر `span` الثاني النص `7%`. +يجب أن يغلف عنصر `span` النص `7%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '7%'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%'); +``` + +يجب أن يحتوي عنصر `span` الذي لديه نص `7%` على سمة `class` بقيمة `bold`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); ``` # --seed-- @@ -61,40 +66,45 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastEle ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -126,47 +136,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md index 563d00093fd..63f1bfa8c5e 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md @@ -1,57 +1,68 @@ --- id: 615f7ecb09de9a938ef94756 -title: الخطوة 54 +title: الخطوة 55 challengeType: 0 -dashedName: step-54 +dashedName: step-55 --- # --description-- -أضف عنصر `p` آخر مع النص `Total Carbohydrate 37g 13%`. مثل قبل، استخدم عناصر `span` لجعل النص `Total Carbohydrate` يكون bold، والنص `13%` محاذ إلى اليمين و bold. +أضف عنصر `p` آخر مع النص `Total Carbohydrate 37g 13%`. مثل قبل، استخدم عناصر `span` لجعل نص `Total Carbohydrate` ونص `13%` بهيئة bold. إضافة عنصر `span` إضافي لتغليف نص `Total Carbohydrate 37g` في العنصر span حتى يحاذ إلى اليسار، و `13%` إلى اليمين. # --hints-- -يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `p` جديد في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Total Carbohydrate 37g 13%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate 37g[\s|\n]+13%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g[\s|\n]+13%/)); ``` -يجب أن يحتوي عنصر `p` الجديد على عنصران `span`. +يجب أن يحتوي عنصر `p` الجديد على ثلاث عناصر `span`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -يجب أن يحتوي عنصر `span` الاول على `class` بقيمة `bold`. +يجب أن يغلف عنصر `span` النص `Total Carbohydrate 37g`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g/)); ``` -يجب أن يغلف العنصر `span` النص `Total Carbohydrate`. +يجب أن يغلف عنصر `span` النص `Total Carbohydrate`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Total Carbohydrate'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Total Carbohydrate'); ``` -يجب أن يحتوي عنصر `span` الثاني على سمة `class` بقيمة `bold right`. +يجب أن يحتوي عنصر `span` الذي لديه نص `Total Carbohydrate` على سمة `class` بقيمة `bold`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold')); +``` + +يجب أن يغلف عنصر `span` النص `13%`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%'); +``` + +يجب أن يحتوي عنصر `span` الذي لديه نص `13%` على سمة `class` بقيمة `bold`. + +```js +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); ``` يجب أن يغلف عنصر `span` الثاني النص `13%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '13%'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%'); ``` # --seed-- @@ -61,41 +72,46 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastEle ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -127,47 +143,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md index a0272e4d24f..a83efa17c03 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md @@ -1,8 +1,8 @@ --- id: 615f7fa959ab75948f96a0d6 -title: الخطوة 55 +title: الخطوة 56 challengeType: 0 -dashedName: step-55 +dashedName: step-56 --- # --description-- @@ -11,30 +11,30 @@ dashedName: step-55 # --hints-- -يجب عليك إنشاء عنصر `p` و `div` جديدان في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `p` و `div` جديدان في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div'); ``` يجب أن يحتوي عنصر `p` الجديد على النص `Dietary Fiber 4g`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/)); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/)); ``` يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `indent no-divider`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider')); ``` يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider')); ``` # --seed-- @@ -44,42 +44,47 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -111,47 +116,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md index 6bb5615eec0..a8a07b0e14d 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md @@ -1,8 +1,8 @@ --- id: 615f808d85793195b0f53be9 -title: الخطوة 56 +title: الخطوة 57 challengeType: 0 -dashedName: step-56 +dashedName: step-57 --- # --description-- @@ -11,30 +11,30 @@ dashedName: step-56 # --hints-- -يجب عليك إنشاء عنصر `p` و `div` جديدان في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `p` و `div` جديدان في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div'); ``` عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Total Sugars 12g`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/)); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/)); ``` يجب أن يحتوي عنصر `p` الجديد على السمة `class` بقيمة `indent no-divider`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider')); ``` يجب أن يحتوي عنصر `div` الجديد على السمة `class` بقيمة `divider`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider')); ``` # --seed-- @@ -44,44 +44,49 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- ---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -113,47 +118,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md index d6dd770227a..a036ef9e242 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md @@ -1,21 +1,21 @@ --- id: 615f829d07b18f96f6f6684b -title: الخطوة 57 +title: الخطوة 58 challengeType: 0 -dashedName: step-57 +dashedName: step-58 --- # --description-- -الميزة في إنشاء هذه الـ dividers هي أنه يمكنك تطبيق classes محددة لتصميمها بشكل فردي. أضف `dbl-indent` إلى الـ `class` الخاص بأخر `.divider`. +الميزة في إنشاء هذه الـ dividers هي أنه يمكنك تطبيق classes محددة لتصميمها بشكل فردي. أضف `double-indent` إلى الـ `class` الخاص بأخر `.divider`. # --hints-- -يجب أن يكون أخر عنصر `.divider` لديه `dbl-indent` مضاف إلى الـ `class`. لا تقم بإزالة القيمة الموجودة. +يجب أن يحتوي أخر عنصر `.divider` على `double-indent` مضاف إلى الـ `class`. لا تقم بإزالة القيمة الموجودة. ```js -const last = document.querySelector('.daily-value.sm-text')?.lastElementChild; -assert(last?.classList?.contains('dbl-indent')); +const last = document.querySelector('.daily-value.small-text')?.lastElementChild; +assert(last?.classList?.contains('double-indent')); assert(last?.classList?.contains('divider')); ``` @@ -26,46 +26,51 @@ assert(last?.classList?.contains('divider')); ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- ---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -97,47 +102,61 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md index 637782538ee..b7843fa97a2 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md @@ -1,26 +1,26 @@ --- id: 615f83ef928ec9982b785b6a -title: الخطوة 58 +title: الخطوة 59 challengeType: 0 -dashedName: step-58 +dashedName: step-59 --- # --description-- -قم بإنشاء منتقي `.dbl-indent` وإعطائه left margin بقيمة `2em`. +أنشئ منتقي `.double-indent` وإعطائه left margin بقيمة `2em`. # --hints-- -يجب أن يكون لديك منتقي `.dbl-indent` جديد. +يجب أن يكون لديك منتقي `.double-indent` جديد. ```js -assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')); +assert(new __helpers.CSSHelp(document).getStyle('.double-indent')); ``` -يجب أن يكون لمنتقي `.dbl-indent` الخاص بك `margin-left` بقمية `2em`. +يجب أن يحتوي منتقيك `.double-indent` على `margin-left` بقيمة `2em`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')?.marginLeft === '2em'); +assert(new __helpers.CSSHelp(document).getStyle('.double-indent')?.marginLeft === '2em'); ``` # --seed-- @@ -30,44 +30,49 @@ assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')?.marginLeft === ' ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + +++ 230Amount per serving
+Calories
++% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ --fcc-editable-region-- + + --fcc-editable-region-- +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
--% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- + + + +Nutrition Label + + + + + +++ ``` @@ -99,56 +104,70 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } ---fcc-editable-region-- +--fcc-editable-region-- ---fcc-editable-region-- +--fcc-editable-region-- .daily-value p:not(.no-divider) { border-bottom: 1px solid #888989; diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md index 609bc728e36..38232a5d542 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md @@ -1,61 +1,60 @@ --- id: 615f84f246e8ba98e3cd97be -title: الخطوة 59 +title: الخطوة 60 challengeType: 0 -dashedName: step-59 +dashedName: step-60 --- # --description-- -تحت عنصر `.dbl-indent` الخاص بك، أضف عنصر `p` جديد مع النص `Includes 10g Added Sugars 20%`. يجب أيضا أن يكون العنصر `p` الجديد الخاص بك double indented، وليس له حدود سفلي (bottom border). استخدم `span` لمحاذاة الـ `20%` الي اليمين (right aligned) و جعلها bold. +تحت عنصرك `.double-indent`، أضف عنصر `p` جديد مع النص `Includes 10g Added Sugars 20%`. يجب أيضا أن يكون العنصر `p` الجديد الخاص بك double indented، وليس له حدود سفلي (bottom border). استخدم `span` لمحاذاة الـ `20%` الي اليمين (right aligned) و جعلها bold. ثم قم بإنشاء divider آخر بعد عنصر `p` هذا. # --hints-- -يجب عليك إنشاء عنصر `p` و `div` في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `p` و `div` جديدان في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div'); ``` عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Includes 10g Added Sugars 20%`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/)); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/)); ``` -يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `dbl-indent no-divider`. +يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `double-indent no-divider`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('dbl-indent')); -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('double-indent')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider')); ``` يجب أن يحتوي عنصر `p` الجديد على عنصر `span`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.localName === 'span'); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.localName === 'span'); ``` -يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `bold right`. +يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `bold`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('right')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.classList?.contains('bold')); ``` يجب أن يغلف عنصر `span` النص `20%`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type span')?.innerText === '20%'); +assert(document.querySelector('.daily-value.small-text p:last-of-type span')?.innerText === '20%'); ``` يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider')); ``` # --seed-- @@ -65,46 +64,51 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + +++ 230Amount per serving
+Calories
++% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- ---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -136,54 +140,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md index 850a8380608..c5351c48726 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md @@ -1,8 +1,8 @@ --- id: 615f887466db4ba14b5342cc -title: الخطوة 60 +title: الخطوة 61 challengeType: 0 -dashedName: step-60 +dashedName: step-61 --- # --description-- @@ -13,30 +13,30 @@ dashedName: step-60 # --hints-- -يجب عليك إنشاء عنصر `p` و `div` في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `p` و `div` جديدان في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div'); ``` يجب أن يحتوي عنصر `p` الجديد على نص `Protein 3g`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/)); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/)); ``` يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `no-divider`. ```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider')); ``` -يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider lg`. +يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider large`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('lg')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('large')); ``` # --seed-- @@ -46,48 +46,53 @@ assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classLi ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -119,54 +124,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md index 80fdebe6af5..d5ffbfa6d21 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md @@ -1,39 +1,40 @@ --- id: 615f89e055040ba294719d2f -title: الخطوة 61 +title: الخطوة 62 challengeType: 0 -dashedName: step-61 +dashedName: step-62 --- # --description-- -قم بإنشاء عنصر `p` آخر أسفل الـ divider الكبير الخاص بك. اعطي عنصر `p` النص `Vitamin D 2mcg 10%`. استخدم `span` لجعل `10%` محاذاة لليمين، ولكن لا تجعلها bold. +قم بإنشاء عنصر `p` آخر أسفل الـ divider الكبير الخاص بك. اعطي عنصر `p` النص `Vitamin D 2mcg 10%`. + +يحتوي عنصر `p` على نص فقط، يمكنك تغليف النسبة المئوية في عنصر `span` بحيث تعدّ كيانا منفصلا عن بقية النص، وتنتقل إلى اليمين. # --hints-- -يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `p` جديد في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` -عنصر `p` الجديد الخاص بك يجب أن يحتوي على نص `Vitamin D 2mcg 10%`. +يجب أن يحتوي عنصرك `p` الجديد على نص `Vitamin D 2mcg 10%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/)); ``` يجب أن يحتوي عنصر `p` الجديد على عنصر `span`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); ``` -يجب أن يحتوي عنصر `span` على `class` بقيمة `right`. تذكر أنه يجب عليك ألا تجعله bold. +يجب ألا يكون عُنصر `span` على هائه bold. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); -assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); +assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); ``` # --seed-- @@ -43,50 +44,55 @@ assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.queryS ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- ---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -118,54 +124,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md index d28c142d005..d824454e7eb 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md @@ -1,8 +1,8 @@ --- id: 615f8bfe0f30a1a3c340356b -title: الخطوة 62 +title: الخطوة 63 challengeType: 0 -dashedName: step-62 +dashedName: step-63 --- # --description-- @@ -11,55 +11,53 @@ dashedName: step-62 # --hints-- -يجب عليك إنشاء عنصرين `p` جديدين في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `p` جديد في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); ``` يجب أن يحتوي العنصر `p` الجديد على النص `Calcium 260mg 20%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/)); ``` يجب أن يحتوي عنصر `p` الجديد على عنصر `span`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span'); ``` -يجب أن يحتوي عنصر `span` الجديد على سمة `class` بقيمة `right`. تذكر، لا تجعله bold. +يجب ألا يكون عُنصر `span` الأول على هيئة bold. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('right')); -assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold')); +assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold')); ``` يجب أن يغلف عنصر `span` الاول النص `20%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%'); ``` عنصر `p` الجديد الثاني يجب أن يحتوي على النص `Iron 8mg 45%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/)); ``` يجب أن يحتوي عنصر `p` الجديد الثاني على عنصر `span`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'span'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.localName === 'span'); ``` -يجب أن يحتوي عنصر `span` الثاني على سمة `class` بقيمة `right`. تذكر، لا تجعله bold. +يجب ألا يكون عُنصر `span` الثاني على هيئة bold. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('right')); -assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); ``` # --seed-- @@ -69,51 +67,56 @@ assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstE ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- -Vitamin D 2mcg 10%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -145,54 +148,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md index fc225144410..0648add1d8f 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md @@ -1,8 +1,8 @@ --- id: 615f8f1223601fa546e93f31 -title: الخطوة 63 +title: الخطوة 64 challengeType: 0 -dashedName: step-63 +dashedName: step-64 --- # --description-- @@ -11,35 +11,34 @@ dashedName: step-63 # --hints-- -يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك. +يجب عليك إنشاء عنصر `p` جديد في نهاية عنصرك `.daily-value`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p'); ``` يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `no-divider`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('no-divider')); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('no-divider')); ``` يجب أن يحتوي عنصر `p` الجديد على نص `Potassium 235mg 6%`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/)); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/)); ``` يجب أن يحتوي عنصر `p` الجديد على عنصر `span`. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); +assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); ``` -يجب أن يحتوي عنصر `span` على `class` بقيمة `right`. تذكر أنه يجب عليك ألا تجعله bold. +يجب ألا يكون عُنصر `span` على هائه bold. ```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); -assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); +assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); ``` # --seed-- @@ -49,53 +48,58 @@ assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.queryS ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Vitamin D 2mcg 10%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
----fcc-editable-region-- -% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- -Vitamin D 2mcg 10%
-Calcium 260mg 20%
-Iron 8mg 45%
---fcc-editable-region-- + + + +Nutrition Label + + + + + +++ ``` @@ -127,54 +131,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md index 9a5a511e920..674a88c0a65 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md @@ -1,8 +1,8 @@ --- id: 615f905fbd1017a65ca224eb -title: الخطوة 64 +title: الخطوة 65 challengeType: 0 -dashedName: step-64 +dashedName: step-65 --- # --description-- @@ -23,11 +23,11 @@ dashedName: step-64 assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div'); ``` -يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider md`. +يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider medium`. ```js assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider')); -assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('md')); +assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('medium')); ``` يجب عليك إنشاء عنصر `p` بعد عنصر `div` الجديد الخاص بك. @@ -55,55 +55,60 @@ assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* T ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + + --fcc-editable-region-- +++ 230Amount per serving
+Calories
++ --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Vitamin D 2mcg 10%
+Calcium 260mg 20%
+Iron 8mg 45%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
-----fcc-editable-region-- ---fcc-editable-region-- + + +% Daily Value *
- -Total Fat 8g10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- -Vitamin D 2mcg 10%
-Calcium 260mg 20%
-Iron 8mg 45%
-Potassium 235mg 6%
-Nutrition Label + + + + + +++ ``` @@ -135,54 +140,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md index 41a633cc053..7eda864babc 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md @@ -1,8 +1,8 @@ --- id: 615f94786869e1a7fec54375 -title: الخطوة 65 +title: الخطوة 66 challengeType: 0 -dashedName: step-65 +dashedName: step-66 --- # --description-- @@ -36,54 +36,60 @@ assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px'); ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + +++ 230Amount per serving
+Calories
+++ --fcc-editable-region-- + + --fcc-editable-region-- +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Vitamin D 2mcg 10%
+Calcium 260mg 20%
+Iron 8mg 45%
+Potassium 235mg 6%
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -115,54 +121,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md index 85bafb6170b..d9376f96e75 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md @@ -1,8 +1,8 @@ --- id: 615f951dff9317a900ef683f -title: الخطوة 66 +title: الخطوة 67 challengeType: 0 -dashedName: step-66 +dashedName: step-67 --- # --description-- @@ -35,54 +35,60 @@ assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px') ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + ++- -Amount per serving
+Calories
-- -% Daily Value *
- -Total Fat 8g 10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- -Vitamin D 2mcg 10%
-Calcium 260mg 20%
-Iron 8mg 45%
-Potassium 235mg 6%
-* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+ 230++ +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Vitamin D 2mcg 10%
+Calcium 260mg 20%
+Iron 8mg 45%
+Potassium 235mg 6%
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily + diet. 2,000 calories a day is used for general nutrition advice.
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -114,54 +120,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } @@ -182,54 +202,60 @@ p { ```html - - -+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + ++- -Amount per serving
+Calories
-- -% Daily Value *
- -Total Fat 8g 10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- -Vitamin D 2mcg 10%
-Calcium 260mg 20%
-Iron 8mg 45%
-Potassium 235mg 6%
-* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+ 230++ +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Vitamin D 2mcg 10%
+Calcium 260mg 20%
+Iron 8mg 45%
+Potassium 235mg 6%
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily + diet. 2,000 calories a day is used for general nutrition advice.
+Nutrition Label - - - - --- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--Amount per serving
-Calories 230
+ + + +Nutrition Label + + + + + +++ ``` @@ -261,54 +287,68 @@ header h1 { p { margin: 0; + display: flex; + justify-content: space-between; } .divider { border-bottom: 1px solid #888989; margin: 2px 0; - clear: right; } .bold { font-weight: 800; } -.right { - float: right; -} - -.lg { +.large { height: 10px; } -.lg, .md { +.large, .medium { background-color: black; border: 0; } -.md { +.medium { height: 5px; } -.sm-text { +.small-text { font-size: 0.85rem; } -.calories-info h1 { + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { margin: -5px -2px; - overflow: hidden; + font-size: 2em; + font-weight: 700; } .calories-info span { - font-size: 1.2em; - margin-top: -7px; + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; } .indent { margin-left: 1em; } -.dbl-indent { +.double-indent { margin-left: 2em; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md new file mode 100644 index 00000000000..f46fad9a73b --- /dev/null +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md @@ -0,0 +1,153 @@ +--- +id: 635bde33c91c80540eae239b +title: الخطوة 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +يجب أن ينحاز النص `* Daily Value %` إلى اليمين. أنشئ منتقي `.right` وأضف خاصية `justify-content`. + +# --hints-- + +يجب أن يكون لديك منتقي `.right` جديد. + +```js +const hasRight = new __helpers.CSSHelp(document).getStyle('.right'); +assert(hasRight); + +``` + +يجب أن يحتوي منتقيك `.right` على `justify-content` بقيمة `flex-end`. + +```js +const rightJustifyContent = new __helpers.CSSHelp(document).getStyle('.right')?.getPropertyValue('justify-content'); +assert(rightJustifyContent === 'flex-end'); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + ++ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
++- + ++- -Amount per serving
+Calories
-- -% Daily Value *
- -Total Fat 8g 10%
-Saturated Fat 1g 5%
- -Trans Fat 0g
- -Cholesterol 0mg 0%
-Sodium 160mg 7%
-Total Carbohydrate 37g 13%
-Dietary Fiber 4g
- -Total Sugars 12g
- -Includes 10g Added Sugars 20% -
-Protein 3g
- -Vitamin D 2mcg 10%
-Calcium 260mg 20%
-Iron 8mg 45%
-Potassium 235mg 6%
-* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+ 230++ +% Daily Value *
+ +Total Fat 8g 10%
+Saturated Fat 1g 5%
+ +Trans Fat 0g
+ +Cholesterol 0mg 0%
+Sodium 160mg 7%
+Total Carbohydrate 37g 13%
+Dietary Fiber 4g
+ +Total Sugars 12g
+ +Includes 10g Added Sugars 20% +
+Protein 3g
+ +Vitamin D 2mcg 10%
+Calcium 260mg 20%
+Iron 8mg 45%
+Potassium 235mg 6%
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily + diet. 2,000 calories a day is used for general nutrition advice.
+Nutrition Label + + + + + +++ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; + display: flex; + justify-content: space-between; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.large { + height: 10px; +} + +.large, .medium { + background-color: black; + border: 0; +} + +.medium { + height: 5px; +} + +.small-text { + font-size: 0.85rem; +} + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { + margin: -5px -2px; + font-size: 2em; + font-weight: 700; +} + +.calories-info span { + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6395d33ab5d91bf317107c48.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6395d33ab5d91bf317107c48.md new file mode 100644 index 00000000000..f6b7b6335b9 --- /dev/null +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6395d33ab5d91bf317107c48.md @@ -0,0 +1,117 @@ +--- +id: 6395d33ab5d91bf317107c48 +title: الخطوة 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +أنشئ منتقي `.calories-info h2` وإزال جميع الـ margins. + +# --hints-- + +أنشئ منتقي `.calories-info h2`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2')); +``` + +يجب أن يحتوي منتقيك `.calories-info h2` علي `margin` بقيمة `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2')?.margin === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + ++ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+++ +++ 230 +Amount per serving
+Calories
+++% Daily Value *
+Nutrition Label + + + + + +++ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; + display: flex; + justify-content: space-between; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.large { + height: 10px; +} + +.large, .medium { + background-color: black; + border: 0; +} + +.small-text { + font-size: 0.85rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6396e33fe478dd264ebbf278.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6396e33fe478dd264ebbf278.md new file mode 100644 index 00000000000..559fc034579 --- /dev/null +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6396e33fe478dd264ebbf278.md @@ -0,0 +1,135 @@ +--- +id: 6396e33fe478dd264ebbf278 +title: الخطوة 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +أنشئ منتقي `.calories-info` جديد وإعطائه خاصية `display` بقيمة `flex`. أعطيه خاصية `justify-content` بقيمة `space-between` و`align-items` بقيمة `flex-end` أيضًا. + +# --hints-- + +يجب عليك إنشاء منتقي `.calories-info`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info')); +``` + +يجب أن يحتوي منتقي `.calories-info` على خاصية `display` بقيمة `flex`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.display === 'flex'); +``` + +يجب أن يحتوي منتقيك `.calories-info` على `justify-content` بقيمة `space-between`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.justifyContent === 'space-between'); +``` + +يجب أن يحتوي منتقي `.calories-info` على خاصية `align-items` بقيمة `flex-end`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.alignItems === 'flex-end'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + ++ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+++++Amount per serving
+Nutrition Label + + + + + +++ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; + display: flex; + justify-content: space-between; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.large { + height: 10px; +} + +.large, .medium { + background-color: black; + border: 0; +} + +.small-text { + font-size: 0.85rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.calories-info h2 { + margin: 0; +} +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md index 46c493ad260..9994a599779 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md @@ -1,6 +1,6 @@ --- id: 56533eb9ac21ba0edf2244e2 -title: Build a Caesars Cipher +title: بناء شفرة قيصر challengeType: 5 forumTopicId: 16003 dashedName: build-a-caesars-cipher diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md index 4653f6358b1..636ef9a1212 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md @@ -1,6 +1,6 @@ --- id: aa2e6f85cab2ab736c9a9b24 -title: Build A Cash Register +title: أنشئ مكنة لتسجيل النقود challengeType: 5 forumTopicId: 16012 dashedName: build-a-cash-register @@ -8,11 +8,11 @@ dashedName: build-a-cash-register # --description-- -Design a cash register drawer function `checkCashRegister()` that accepts purchase price as the first argument (`price`), payment as the second argument (`cash`), and cash-in-drawer (`cid`) as the third argument. +صمم وظيفة درج لتسجيل النقود `checkCashRegister()` التي تقبل سعر الشراء كمعطى أولى (`price`)، و الدفع كمعطى ثاني (`cash`)، و cash-in-drawer أي النقود في الدرج (`cid`) كمعطى ثالث. `cid` is a 2D array listing available currency. -The `checkCashRegister()` function should always return an object with a `status` key and a `change` key. +يجب أن تقوم وظيفة `checkCashRegister()` دائما بإنتاج كائن يحتوي على الهوية (key) المسمى `status` و الهوية `change`. Return `{status: "INSUFFICIENT_FUNDS", change: []}` if cash-in-drawer is less than the change due, or if you cannot return the exact change. @@ -40,7 +40,7 @@ See below for an example of a cash-in-drawer array: # --hints-- -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return an object. +يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` كائن. ```js assert.deepEqual( @@ -61,7 +61,7 @@ assert.deepEqual( ); ``` -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return `{status: "OPEN", change: [["QUARTER", 0.5]]}`. +يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` كائن `{status: "OPEN", change: [["QUARTER", 0.5]]}`. ```js assert.deepEqual( @@ -80,7 +80,7 @@ assert.deepEqual( ); ``` -`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`. +يجب أن ينتج `checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` كائن `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`. ```js assert.deepEqual( @@ -110,7 +110,7 @@ assert.deepEqual( ); ``` -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "INSUFFICIENT_FUNDS", change: []}`. +يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` كائن `{status: "INSUFFICIENT_FUNDS", change: []}`. ```js assert.deepEqual( @@ -129,7 +129,7 @@ assert.deepEqual( ); ``` -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "INSUFFICIENT_FUNDS", change: []}`. +يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` كائن `{status: "INSUFFICIENT_FUNDS", change: []}`. ```js assert.deepEqual( @@ -148,7 +148,7 @@ assert.deepEqual( ); ``` -`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`. +يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` كائن `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`. ```js assert.deepEqual( diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md index 5f7ca896a8c..536578941f6 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md @@ -1,6 +1,6 @@ --- id: aaa48de84e1ecc7c742e1124 -title: Build A Palindrome Checker +title: أنشئ مدقق لمعاكس المقطع النصي challengeType: 5 forumTopicId: 16004 dashedName: build-a-palindrome-checker diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md index 06f0c991879..a5d065b3da7 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md @@ -1,6 +1,6 @@ --- id: a7f4d8f2483413a6ce226cac -title: Build A Roman Numeral Converter +title: أنشئ محول للأرقام الرومانية challengeType: 5 forumTopicId: 16044 dashedName: build-a-roman-numeral-converter diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md index 282f77b4be9..5e651f8faaa 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md @@ -1,6 +1,6 @@ --- id: aff0395860f5d3034dc0bfc9 -title: Build a Telephone Number Validator +title: بناء مدقق الأرقام الهواتف challengeType: 5 forumTopicId: 16090 dashedName: build-a-telephone-number-validator diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md index 7bec654ec15..ae7f2b797d2 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md @@ -7,7 +7,7 @@ dashedName: step-39 # --description-- -For now, make your `goStore` function output the message `Going to store.` to the console. For example, here is a function that outputs the message "Hello World". +For now, make your `goStore` function output the message `Going to store.` to the console. For example, here is a function that outputs the message `Hello World`. ```js function functionName() { diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md index c60cf5907da..8cbcb969f78 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md @@ -47,7 +47,7 @@ Your `update` function should set `button3.onclick` to `fightDragon`. assert.match(update.toString(), /button3\.onclick\s*=\s*fightDragon/); ``` -Your `update` function should set `text.innerText` to `You are in the town square. You see a sign that says "Store".`. +Your `update` function should set `text.innerText` to `You are in the town square. You see a sign that says \"Store\".`. ```js assert.match(update.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"\."/); diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md index a8bef26a706..294662a5750 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md @@ -7,7 +7,7 @@ dashedName: step-62 # --description-- -The `locations` array contains two locations: the town square and the store. Currently you are passing that entire array into the update functions. Pass in only the first element of the `locations` array by adding `[0]` at the end of the variable. For example: `myFunction(arg[0]);`. +The `locations` array contains two locations: the `town square` and the `store`. Currently you are passing that entire array into the `update` function. Pass in only the first element of the `locations` array by adding `[0]` at the end of the variable. For example: `myFunction(arg[0]);`. This is called bracket notation. Values in an array are accessed by index. Indices are numerical values and start at 0 - this is called zero-based indexing. `arg[0]` would be the first element in the `arg` array. diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md index ca8a532ec15..1506701e4ab 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md @@ -7,7 +7,7 @@ dashedName: step-67 # --description-- -Finally, update the `text.innerText` assignment to equal the `text` from the location object. However, instead of using bracket notation, use dot notation. Here is an example of accessing the `name` property of an object called `obj`: `obj.name`. +Finally, update the `text.innerText` assignment to equal the `text` from the `location` object. However, instead of using bracket notation, use dot notation. Here is an example of accessing the `name` property of an object called `obj`: `obj.name`. # --hints-- diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md index cded49b4395..dab6fabe2b3 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md @@ -7,7 +7,7 @@ dashedName: step-83 # --description-- -Similar to your `buyHealth` function, set `gold` equal to 30 less than its current value. Make sure this is inside your `if` statement. +Similar to your `buyHealth` function, set `gold` equal to `30` less than its current value. Make sure this is inside your `if` statement. # --hints-- diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md index bf077920297..8b767dfabbc 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md @@ -22,17 +22,17 @@ const myVar = 12 - 6; 現在，變量 `myVar` 的值爲 `6`。 # --instructions-- -改變數字`0`讓變量 difference 的值爲 `12`。 +改變數字 `0` 讓變量 difference 的值爲 `12`。 # --hints-- -變量 `difference` 的值應該爲 12。 +變量 `difference` 的值應該爲 `12`。 ```js assert(difference === 12); ``` -您只能從 45 中減去一個數字。 +你只能從 `45` 中減去一個數。 ```js assert(/difference=45-33;?/.test(__helpers.removeWhiteSpace(code))); diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index a2eb17b91b7..a65d04cdb71 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -20,7 +20,7 @@ dashedName: exercise-tracker - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕. -當你完成後，請將一個確保正常運行的demo（項目演示）託管在可以公開訪問的平臺上。 然後將 URL 提交到 `Solution Link` 中。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。 +當你完成後，請將一個確保正常運行的demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 # --instructions-- @@ -411,7 +411,7 @@ async(getUserInput) => { ```js async(getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/users/', { + const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', @@ -458,7 +458,7 @@ async(getUserInput) => { ```js async(getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/users/', { + const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', @@ -505,7 +505,7 @@ async(getUserInput) => { ```js async(getUserInput) => { const url = getUserInput('url'); - const res = await fetch(url + '/api/users/', { + const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md index 3df58ea32eb..a468cdf2e05 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md @@ -20,7 +20,7 @@ dashedName: file-metadata-microservice - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 中。 此外，還可以將項目的源碼鏈接提交到 `GitHub Link` 中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md index fecb280b413..749c197fb56 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md @@ -20,7 +20,7 @@ dashedName: request-header-parser-microservice - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 中。 此外，將項目的源碼鏈接提交到 `GitHub Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md index e9fe3854660..0b422b5d442 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md @@ -20,7 +20,7 @@ dashedName: timestamp-microservice - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 此外，將項目的源碼鏈接提交到 `GitHub Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 **注意：**時區轉換不是本項目的目的，因此假設所有發送的有效日期將使用 `new Date()` 解析爲 GMT 日期。 @@ -106,7 +106,7 @@ dashedName: timestamp-microservice ); ``` -如果輸入的日期字符串無效，api 將返回一個具有結構 `{ error : "Invalid Date" }` 的對象。 +如果輸入的日期字符串無效，API 將返回一個具有結構 `{ error : "Invalid Date" }` 的對象。 ```js (getUserInput) => diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md index 606d5b25af7..5b3d5074571 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md @@ -20,7 +20,7 @@ dashedName: url-shortener-microservice - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 此外，將項目的源碼鏈接提交到 `GitHub Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md index e7f5cb98ca1..9d2922ff0eb 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md @@ -20,7 +20,7 @@ dashedName: meet-the-node-console - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 在開發過程中，能夠隨時看到代碼的運行結果是非常重要的。 diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md index f1f922903fe..6c88348c664 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md @@ -18,7 +18,7 @@ HTML 服務器提供 HTML 服務，而 API 提供數據服務。 REST # --hints-- -訪問端口 `/json` 應該返回一個 json 對象 `{"message": "Hello json"}` +The endpoint `/json` should serve the JSON object `{"message": "Hello json"}` ```js (getUserInput) => diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md index 651166b0791..dd133ae2854 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md @@ -18,11 +18,11 @@ dashedName: use-the--env-file 在項目根目錄創建一個 `.env` 文件，並存儲變量 `MESSAGE_STYLE=uppercase`。 -然後，在你在上個挑戰中創建的 `/json` GET 路由處理程序中訪問 `process.env.MESSAGE_STYLE`，並且如果變量等於 `uppercase`，將響應對象的 `message` 轉換爲大寫。 響應對象應該是 `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`，取決於 `MESSAGE_STYLE` 的值。 Note that you must read the value of `process.env.MESSAGE_STYLE` **inside** the route handler, not outside of it, due to the way our tests run. +然後，在你在上個挑戰中創建的 `/json` GET 路由處理程序中訪問 `process.env.MESSAGE_STYLE`，並且如果變量等於 `uppercase`，將響應對象的 `message` 轉換爲大寫。 響應對象應該是 `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`，取決於 `MESSAGE_STYLE` 的值。 請注意，因爲我們的測試運行的方式，你必須閱讀路由處理器**裏面**（而不是外面）`process.env.MESSAGE_STYLE` 的值。 **注意：** 如果你正在使用 Replit，你無法創建一個 `.env` 文件。 相反，使用內置的 SECRETS 標籤添加變量。 -如果你在本地工作，你將需要 `dotenv` 包。 它將環境變量從你的 `.env` 文件加載到 `process.env` 中。 `dotenv` 包已經安裝，並且在你項目的 `package.json` 文件中。 At the top of your `myApp.js` file, add `require('dotenv').config()` to load the environment variables. +如果你在本地工作，你將需要 `dotenv` 包。 它將環境變量從你的 `.env` 文件加載到 `process.env` 中。 `dotenv` 包已經安裝，並且在你項目的 `package.json` 文件中。 在你的 `myApp.js` 文件的頂端，添加 `require('dotenv').config()` 以加載環境變量。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md index eafc25a9b80..047550f1b83 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md @@ -20,7 +20,7 @@ dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-packa - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 `package.json` 文件是所有 Node.js 項目和 npm 包的樞紐， 和 HTML 文檔中的 <head> 部分用來描述網頁的配置信息（元數據）一樣，它存儲你的項目的相關信息。 它由單個 JSON 對象組成，並以鍵值對的形式存儲項目信息， 且至少包含兩個必填字段：“name” 和 “version”——但是最好提供有關項目的其他信息，這將對用戶或者維護者有所幫助。 diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md index ce7b72c05c8..27fb292061c 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md @@ -20,7 +20,7 @@ dashedName: install-and-set-up-mongoose - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 在這個挑戰中，你將建立一個 MongoDB Atlas 數據庫並導入連接到它所需的軟件包。 diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md index 38f9d304ac3..4b76aab166c 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md @@ -20,7 +20,7 @@ dashedName: set-up-a-template-engine - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 模板引擎使你可以在應用程序中使用靜態模板文件（例如用 *Pug* 編寫的文件）。 在運行時，模版引擎會用服務端的真實數據替換掉模版文件中的變量。 然後將模版轉譯成發送給客戶端的 HTML 靜態文件。 這樣可以輕鬆地構造 HTML 頁面，允許在頁面直接顯示變量內容而不需要從客戶端發送 API 請求。 diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md index 422dc986df7..ea566e96900 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md @@ -20,7 +20,7 @@ dashedName: learn-how-javascript-assertions-work - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 # --instructions-- 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 3350af23388..e12ecc8b78b 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 @@ -20,7 +20,7 @@ dashedName: american-british-translator - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/issue-tracker.md index 6c533b5f4bb..67bdbb4ddf2 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/issue-tracker.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/issue-tracker.md @@ -20,7 +20,7 @@ dashedName: issue-tracker - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md index 36d165e75cc..46ce5712b83 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md @@ -20,7 +20,7 @@ dashedName: metric-imperial-converter - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/personal-library.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/personal-library.md index 12e5df1a092..1afbb9ffd6f 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/personal-library.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/personal-library.md @@ -20,7 +20,7 @@ dashedName: personal-library - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 # --instructions-- 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 89852b56693..625e99cf81b 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 @@ -20,7 +20,7 @@ dashedName: sudoku-solver - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/anonymous-message-board.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/anonymous-message-board.md index 5a30860e6ec..2e8af239bfe 100644 --- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/anonymous-message-board.md +++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/anonymous-message-board.md @@ -22,7 +22,7 @@ dashedName: anonymous-message-board - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後將 URL 提交到 `Solution Link` 中。 此外，將項目的源碼鏈接提交到 `GitHub Link` 字段中。 +完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md index 33382f8416b..ec51dd90551 100644 --- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md +++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md @@ -20,7 +20,7 @@ dashedName: secure-real-time-multiplayer-game - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md index bfe7cc07528..f77f7ec1b69 100644 --- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md @@ -24,7 +24,7 @@ dashedName: stock-price-checker - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 也可以將項目的源碼鏈接提交到 GitHub Link 字段中。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md index 68415879d0c..2bd980416a1 100644 --- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md +++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md @@ -20,7 +20,7 @@ dashedName: install-and-require-helmet - 接着，你將看到一個 `.replit` 窗口。 - 選擇 `Use run command` 並點擊 `Done` 按鈕。 -當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 Solution Link 字段中。 Helmet 通過設置各種 HTTP 頭來保護你的 Express 應用程序。 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-binary-search.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-binary-search.md index 6994926d584..87329b30326 100644 --- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-binary-search.md +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-binary-search.md @@ -10,9 +10,10 @@ dashedName: implement-binary-search 二分搜索是一種 **O(log(n))** 效率的算法，用於在已排序的數組以查找元素。 它通過以下步驟運行： -1. 查找已排序數組的中間值 `value`。 如果 `value == target`，則返回（找到了！）。 +1. 查找已排序數組的中間值 `value`。 If `value == target` return `true` (The value has been found and the search is complete). 1. 如果中間值 `value < target`，則在下一次比較中搜索數組的右半部分。 1. 如果中間值 `value > target`，則在下一次比較中搜索數組的左半部分。 +1. If after searching the whole array the value is not present, return `false` (The array has been searched and the value is not in the array). 如你所見，你連續將數組減半，這爲你提供了 log(n) 效率。 對於這個挑戰，我們希望你展示你的工作——你是如何到達目標值的……你走過的路！ @@ -20,7 +21,7 @@ dashedName: implement-binary-search 編寫一個函數 `binarySearch` 來實現對數組的二分查找算法，返回在數組中查找目標所採用的路徑（每個中間值比較）。 -該函數將一個排序的整數數組和一個目標值作爲輸入。 它返回一個數組，其中包含（按順序）你在原始數組的每個減半處找到的中間值，直到你找到目標值。 目標值應該是返回數組的最後一個元素。 如果未找到值，則返回字符串 `Value Not Found`。 +該函數將一個排序的整數數組和一個目標值作爲輸入。 它返回一個數組，其中包含（按順序）你在原始數組的每個減半處找到的中間值，直到你找到目標值。 目標值應該是返回數組的最後一個元素。 If the value is not found, return the string `Value Not Found`. 例如，`binarySearch([1,2,3,4,5,6,7], 5)` 將返回 `[4,6,5]`。 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md index 39f5f66bc84..5716b200d11 100644 --- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md @@ -22,7 +22,7 @@ Here are the specific user stories you should implement for this project: **Hint:** Try using the Yelp API to find venues in the cities your users search for. 如果使用 Yelp 的 API，請務必在應用中提及。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. # --solutions-- diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/build-a-voting-app.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/build-a-voting-app.md index c5e1f8c05dd..e70b3566764 100644 --- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/build-a-voting-app.md +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/build-a-voting-app.md @@ -28,7 +28,7 @@ Here are the specific user stories you should implement for this project: **User Story:** As an authenticated user, if you don't like the options on a poll, you can create a new option. -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. # --solutions-- diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md index 47cee2ababe..4c4540d7fce 100644 --- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md @@ -18,7 +18,7 @@ Here are the specific user stories you should implement for this project: **User Story:** You can get a list of the most recently submitted search strings. -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. # --solutions-- diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md index a5562365284..c43de0dbaef 100644 --- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md @@ -20,7 +20,7 @@ Here are the specific user stories you should implement for this project: **User Story:** You can see changes in real-time when any other user adds or removes a stock. For this you will need to use Web Sockets. -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. # --solutions-- diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md new file mode 100644 index 00000000000..f4b05b12871 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md @@ -0,0 +1,54 @@ +--- +id: 637f4e0e72c65bc8e73dfe1e +videoId: LGQuIIv2RVA +title: Elements and Tags Question A +challengeType: 15 +dashedName: elements-and-tags-question-a +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `+ + +Nutrition Facts
+ +8 servings per container
+Serving size 2/3 cup (55g)
+++++ 230 +Amount per serving
+Calories
+`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) + +## --text-- + +What are HTML tags? + +## --answers-- + +HTML tags tell the browser what content an element contains. + +--- + +HTML tags tell the browser when to load its content. + +--- + +HTML tags tell the browser what content the next element contains. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md new file mode 100644 index 00000000000..9e8720616fb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md @@ -0,0 +1,50 @@ +--- +id: 637f4e1672c65bc8e73dfe1f +videoId: LGQuIIv2RVA +title: Elements and Tags Question B +challengeType: 15 +dashedName: elements-and-tags-question-b +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `
`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --text-- + +What are the three parts of most HTML elements? + +## --answers-- + +An opening tag, self closing tag, and content. + +--- + +An opening tag, closing tag, and content. + +--- + +An opening tag, closing tag, and attribute. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md new file mode 100644 index 00000000000..d563ebf0ac3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md @@ -0,0 +1,55 @@ +--- +id: 637f4e1c72c65bc8e73dfe20 +videoId: V8UAEoOvqFg +title: HTML Boilerplate Question A +challengeType: 15 +dashedName: html-boilerplate-question-a +--- + +# --description-- + +To demonstrate an HTML boilerplate, you first need an HTML file to work with. + +Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. + +You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. + +To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. + +It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. + +## The DOCTYPE + +Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. + +The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: + +```html + +``` + +However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. + +Open the `index.html` file created earlier in your text editor and add `` to the very first line. + +# --question-- +## --text-- + +What is the purpose of the `DOCTYPE` declaration? + +## --answers-- + +It tells the browser which version of HTML to use to render the document. + +--- + +It tells the browser that this document uses JavaScript. + +--- + +It tells the browser the title of the document. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md new file mode 100644 index 00000000000..7a528432239 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md @@ -0,0 +1,47 @@ +--- +id: 637f4e2872c65bc8e73dfe21 +videoId: V8UAEoOvqFg +title: HTML Boilerplate Question B +challengeType: 15 +dashedName: html-boilerplate-question-b +--- + +# --description-- + +After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. + +This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. + +Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: + +```html + + + +``` + +## What is the lang attribute? +`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. + +# --question-- + +## --text-- + +What is the `html` element? + +## --answers-- + +It is the root element in the document and tells the browser which version of HTML it should use. + +--- + +It is the root element in the document and all other elements should descend from it. + +--- + +It is the root element in the document and all other elements should come after it. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md new file mode 100644 index 00000000000..76ceb2841e5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md @@ -0,0 +1,66 @@ +--- +id: 637f4e2f72c65bc8e73dfe22 +videoId: LGQuIIv2RVA +title: HTML Boilerplate Question C +challengeType: 15 +dashedName: html-boilerplate-question-c +--- + +# --description-- + +The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. + +## The Charset Meta Element +You should always have the `meta` tag for the charset encoding of the webpage in the head element: ``. + +Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. + +## Title Element +Another element you should always include in the head of an HTML document is the `title` element: + +```html +
My First Webpage +``` + +The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. + +If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. + +There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. + +Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: + + +```html + + + + + +My First Webpage + + +``` + +# --question-- + +## --text-- + +What is the purpose of the `head` element? + +## --answers-- + +The `head` element is used to display all elements that are displayed on the webpage. + +--- + +The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. + +--- + +The `head` element is used to display the header content on top of the webpage. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md new file mode 100644 index 00000000000..302b6a95d44 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md @@ -0,0 +1,48 @@ +--- +id: 637f4e3672c65bc8e73dfe23 +videoId: V8UAEoOvqFg +title: HTML Boilerplate Question D +challengeType: 15 +dashedName: html-boilerplate-question-d +--- + +# --description-- + +The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. + +To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. + +--- + +Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. + +--- + +Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. + +## --text-- + +What is the purpose of the `body` element? + +## --answers-- + +This is where all important information about the webpage is displayed such as the `title` and `meta` tags. + +--- + +This is where you tell the browser how to render the webpage correctly. + +--- + +This is where all content will be displayed on the page such images, text, and links. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md new file mode 100644 index 00000000000..aa20f137e89 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md @@ -0,0 +1,42 @@ +--- +id: 6374f208de18c50e48ba767b +videoId: LGQuIIv2RVA +title: Introduction To HTML and CSS Question A +challengeType: 15 +dashedName: introduction-to-html-and-css-question-a +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --assignment-- + +Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. + +## --text-- + +Which of the following statements is true? + +## --answers-- + +CSS is used to create the basic structure of a webpage, and HTML is used to add style. + +--- + +HTML is used to create the basic structure of a webpage, and CSS is used to add style. + +--- + +HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. + + +## --video-solution-- + +2 + + diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md new file mode 100644 index 00000000000..cd9cf900330 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md @@ -0,0 +1,37 @@ +--- +id: 6376327e2724a688c04636e3 +videoId: LGQuIIv2RVA +title: Introduction To HTML and CSS Question B +challengeType: 15 +dashedName: introduction-to-html-and-css-question-b +--- + +# --description-- + + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to add paragraphs of text on a webpage? + +## --answers-- + +CSS + +--- + +JavaScript + +--- + +HTML + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md new file mode 100644 index 00000000000..eb759394680 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md @@ -0,0 +1,34 @@ +--- +id: 637633162724a688c04636e4 +videoId: LGQuIIv2RVA +title: Introduction To HTML and CSS Question C +challengeType: 15 +dashedName: introduction-to-html-and-css-question-c +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to change the font and background color of a button? + +## --answers-- + +You should use CSS to change the background color and font of a button. + +--- + +You should use JavaScript to change the background color and font of a button. + +--- + +You should use HTML to change the background color and font of a button. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md new file mode 100644 index 00000000000..9e9ee049b75 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md @@ -0,0 +1,35 @@ +--- +id: 637633672724a688c04636e5 +videoId: LGQuIIv2RVA +title: Introduction To HTML and CSS Question D +challengeType: 15 +dashedName: introduction-to-html-and-css-question-d +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +What is the difference between HTML, CSS, and JavaScript? + +## --answers-- + +HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. + +--- + +CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. + +--- + +JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md new file mode 100644 index 00000000000..b4d237448f3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md @@ -0,0 +1,66 @@ +--- +id: 637f704072c65bc8e73dfe36 +videoId: tsEQgGjSmkM +title: Links and Images Question A +challengeType: 15 +dashedName: links-and-images-question-a +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- Finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. + +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. + +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Links video above. + +## --text-- + +What HTML tag is used to create a link? + +## --answers-- + +`` + +--- + +`` + +--- + +`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md
new file mode 100644
index 00000000000..164fb01214f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md
@@ -0,0 +1,55 @@
+---
+id: 637f703572c65bc8e73dfe35
+videoId: tsEQgGjSmkM
+title: Links and Images Question B
+challengeType: 15
+dashedName: links-and-images-question-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named odin-links-and-images.
+
+- Within that directory, create a new file named index.html.
+
+- Fill in the usual HTML boilerplate.
+
+- finally, add the following h1 to the body: `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the body of the index.html page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a href (hyperlink reference) attribute to the opening anchor tag. The value of the href attribute is the destination you want your link to go to. Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- +## --text-- + +What is an attribute? +## --answers-- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. + +--- + +An HTML attribute is used to tell the browser what the element contains. + +--- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md new file mode 100644 index 00000000000..c8a3913d77e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md @@ -0,0 +1,56 @@ +--- +id: 637f703072c65bc8e73dfe34 +videoId: tsEQgGjSmkM +title: Links and Images Question C +challengeType: 15 +dashedName: links-and-images-question-c +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named odin-links-and-images. + +- Within that directory, create a new file named index.html. + +- Fill in the usual HTML boilerplate. + +- finally, add the following h1 to the body: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the body of the index.html page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a href (hyperlink reference) attribute to the opening anchor tag. The value of the href attribute is the destination you want your link to go to. Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --text-- + +What attribute tells links where to go to? + +## --answers-- + +`src` + +--- + +`href` + +--- + +`link` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md new file mode 100644 index 00000000000..2b6a665eb87 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md @@ -0,0 +1,112 @@ +--- +id: 637f702872c65bc8e73dfe33 +videoId: ta3Oxx7Yqbo +title: Links and Images Question D +challengeType: 15 +dashedName: links-and-images-question-d +--- + +# --description-- + + +Generally, there are two kinds of links you will create: + +- Links to pages on other websites on the internet + +- Links to pages located on your own websites + + +## Absolute Links +Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. + +You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. + +`https://www.theodinproject.com/about` + +## Relative Links +Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. + +Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. + +Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: + +```html + + + + +Odin Links and Images + + + +About Page
+ + +``` + +Back in the index page, add the following anchor element to create a link to the about page: + +```html + +Homepage
+ click me + + About + +``` + +Open the index file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the about page you just created. + +This works because the index and about page are in the same directory. That means you can simply use its name (`about.html`) as the link’s href value. + +But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. + +Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. + +Refresh the index page in the browser and then click on the about link. It will now be broken. This is because the location of the about page file has changed. + +To fix this, you just need to update the about link `href` value to include the `pages/` directory since that is the new location of the about file relative to the index file. + +```html + +Homepage
+ About + +``` + +Refresh the index page in the browser and try clicking the about link again, it should now be back in working order. + +In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. + +```html + +Homepage
+ About + +``` + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML File Structure video above. + +## --text-- + +What is the difference between an absolute and a relative link? + +## --answers-- + +An absolute link is a link to another page on the current website. A relative link is a link to another website. + +--- + +An absolute link is a link to another website. A relative link is a link another page on the current website. + +--- + +There is no difference between absolute and relative links. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md new file mode 100644 index 00000000000..a935ae3262a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md @@ -0,0 +1,98 @@ +--- +id: 637f702372c65bc8e73dfe32 +videoId: 0xoztJCHpbQ +title: Links and Images Question E +challengeType: 15 +dashedName: links-and-images-question-e +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+``
+
+---
+
+``
+
+---
+
+`` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-f.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-f.md new file mode 100644 index 00000000000..ba4eb809e5d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-f.md @@ -0,0 +1,94 @@ +--- +id: 637f701c72c65bc8e73dfe31 +videoId: 0xoztJCHpbQ +title: Links and Images Question F +challengeType: 15 +dashedName: links-and-images-question-f +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `
` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the src attribute, every image element should also have an alt (alternative text) attribute.
+
+The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md
new file mode 100644
index 00000000000..d1a6fcd4406
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md
@@ -0,0 +1,94 @@
+---
+id: 637f701572c65bc8e73dfe30
+videoId: 0xoztJCHpbQ
+title: Links and Images Question G
+challengeType: 15
+dashedName: links-and-images-question-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the src attribute, every image element should also have an alt (alternative text) attribute.
+
+The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md
new file mode 100644
index 00000000000..cfd73fcfbc1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md
@@ -0,0 +1,98 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+videoId: 0xoztJCHpbQ
+title: Links and Images Question H
+challengeType: 15
+dashedName: links-and-images-question-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the src attribute, every image element should also have an alt (alternative text) attribute.
+
+The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Read about the four main image formats that can be used on the web.
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+TIFF, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md
new file mode 100644
index 00000000000..657a3f6e32d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md
@@ -0,0 +1,204 @@
+---
+id: 6391d1a4f7ac71efd0621380
+title: Build a Recipe Page Project
+challengeType: 14
+dashedName: project-create-a-recipe-page
+---
+
+# --description--
+
+The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
+
+**User Stories:**
+
+1. Your recipe page should contain a `DOCTYPE` tag.
+1. Your recipe page should include an `html` element with a `head` and `body` element as children.
+1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
+1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
+1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
+1. There should be an `h2` element with the text `Description` under the image.
+1. You should see a couple of paragraphs under `Description` that describe the recipe.
+1. There should be an `h2` element with the text `Ingredients`
+1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
+1. Under the list of ingredients add another heading called `Steps`.
+1. You should see an ordered list with a couple of steps needed to complete the recipe.
+1. Under the steps there should be an `h2` element with the text `More Recipes`
+1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
+1. These anchor elements should have `href` attribute with the value set to `#`
+
+# --hints--
+
+You should have a `DOCTYPE` tag.
+
+```js
+assert(code.match(//gi));
+```
+
+You should have a `html` element with `head` and `body` element.
+
+```js
+const html = document.querySelectorAll('html')[0];
+const head = document.querySelectorAll('html > head')[0];
+const body = document.querySelectorAll('html > body')[0];
+
+assert(html && head && body);
+```
+
+You should have a `title` element within the `head` element that contains the text `The Odin Recipes`.
+
+```js
+assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
+```
+
+You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`.
+
+```js
+assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
+```
+
+You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
+
+```js
+const img = document.querySelectorAll('IMG')[0];
+
+assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
+```
+
+You should have an `h2` element with the text `Description`.
+
+```js
+const h2 = document.querySelectorAll('H2')[0];
+
+assert(h2.innerText == 'Description');
+```
+
+You should have at least two `p` elements describing the recipe.
+
+```js
+const paragraphs = document.querySelectorAll('P');
+
+assert(paragraphs.length > 1);
+```
+
+You should have an `h2` element with the text `Ingredients`.
+
+```js
+const h2 = document.querySelectorAll('H2')[1];
+
+assert(h2.innerText == 'Ingredients');
+```
+
+You should have an unordered list `- ` with some ingredients as the list items `
- `.
+
+```js
+const unorderedList = document.querySelectorAll('UL')[0];
+const listItems = document.querySelectorAll('UL > LI');
+
+assert(unorderedList && listItems && listItems.length > 1);
+```
+
+You should have an `h2` element with the text `Steps`.
+
+```js
+const h2 = document.querySelectorAll('H2')[2];
+
+assert(h2.innerText == 'Steps');
+```
+
+You should have a `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-b.md
new file mode 100644
index 00000000000..4c6822fc504
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-b.md
@@ -0,0 +1,45 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+videoId: LGQuIIv2RVA
+title: Understand Ordered and Unordered List Question B
+challengeType: 15
+dashedName: understand-ordered-and-unordered-list-question-b
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` that contain `` tags which lead to other recipes.
+
+```js
+const unorderedList = document.querySelectorAll('UL')[1];
+const listItems = unorderedList.querySelectorAll('LI');
+
+const allAreListItems = unorderedList.children.length == listItems.length;
+
+const containsAnchors = [...listItems].every(function(listItem) {
+ return listItem.querySelector("a") !== null;
+});
+
+assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
+```
+
+Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
+
+```js
+const anchorTags = document.querySelectorAll("a");
+
+const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
+ return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
+});
+
+assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+
+
+
+
- `.
+
+```js
+const orderedList = document.querySelectorAll('OL')[0];
+const listItems = document.querySelectorAll('OL > LI');
+
+assert(orderedList && listItems && listItems.length > 1);
+```
+
+You should have an `h2` element with the text `More Recipes`.
+
+```js
+const h2 = document.querySelectorAll('H2')[3];
+
+assert(h2.innerText == 'More Recipes');
+```
+
+You should have an unordered list `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the body of the index.html page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a href (hyperlink reference) attribute to the opening anchor tag. The value of the href attribute is the destination you want your link to go to. Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- +## --text-- + +What is an attribute? +## --answers-- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. + +--- + +An HTML attribute is used to tell the browser what the element contains. + +--- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md new file mode 100644 index 00000000000..c8a3913d77e --- /dev/null +++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md @@ -0,0 +1,56 @@ +--- +id: 637f703072c65bc8e73dfe34 +videoId: tsEQgGjSmkM +title: Links and Images Question C +challengeType: 15 +dashedName: links-and-images-question-c +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named odin-links-and-images. + +- Within that directory, create a new file named index.html. + +- Fill in the usual HTML boilerplate. + +- finally, add the following h1 to the body: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the body of the index.html page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a href (hyperlink reference) attribute to the opening anchor tag. The value of the href attribute is the destination you want your link to go to. Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --text-- + +What attribute tells links where to go to? + +## --answers-- + +`src` + +--- + +`href` + +--- + +`link` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md new file mode 100644 index 00000000000..2b6a665eb87 --- /dev/null +++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md @@ -0,0 +1,112 @@ +--- +id: 637f702872c65bc8e73dfe33 +videoId: ta3Oxx7Yqbo +title: Links and Images Question D +challengeType: 15 +dashedName: links-and-images-question-d +--- + +# --description-- + + +Generally, there are two kinds of links you will create: + +- Links to pages on other websites on the internet + +- Links to pages located on your own websites + + +## Absolute Links +Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. + +You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. + +`https://www.theodinproject.com/about` + +## Relative Links +Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. + +Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. + +Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: + +```html + + + + +About Page
+ + +``` + +Back in the index page, add the following anchor element to create a link to the about page: + +```html + +Homepage
+ click me + + About + +``` + +Open the index file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the about page you just created. + +This works because the index and about page are in the same directory. That means you can simply use its name (`about.html`) as the link’s href value. + +But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. + +Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. + +Refresh the index page in the browser and then click on the about link. It will now be broken. This is because the location of the about page file has changed. + +To fix this, you just need to update the about link `href` value to include the `pages/` directory since that is the new location of the about file relative to the index file. + +```html + +Homepage
+ About + +``` + +Refresh the index page in the browser and try clicking the about link again, it should now be back in working order. + +In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. + +```html + +Homepage
+ About + +``` + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML File Structure video above. + +## --text-- + +What is the difference between an absolute and a relative link? + +## --answers-- + +An absolute link is a link to another page on the current website. A relative link is a link to another website. + +--- + +An absolute link is a link to another website. A relative link is a link another page on the current website. + +--- + +There is no difference between absolute and relative links. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md new file mode 100644 index 00000000000..a935ae3262a --- /dev/null +++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md @@ -0,0 +1,98 @@ +--- +id: 637f702372c65bc8e73dfe32 +videoId: 0xoztJCHpbQ +title: Links and Images Question E +challengeType: 15 +dashedName: links-and-images-question-e +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+``
+
+---
+
+``
+
+---
+
+`Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the src attribute, every image element should also have an alt (alternative text) attribute.
+
+The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md
new file mode 100644
index 00000000000..d1a6fcd4406
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md
@@ -0,0 +1,94 @@
+---
+id: 637f701572c65bc8e73dfe30
+videoId: 0xoztJCHpbQ
+title: Links and Images Question G
+challengeType: 15
+dashedName: links-and-images-question-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the src attribute, every image element should also have an alt (alternative text) attribute.
+
+The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md
new file mode 100644
index 00000000000..cfd73fcfbc1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md
@@ -0,0 +1,98 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+videoId: 0xoztJCHpbQ
+title: Links and Images Question H
+challengeType: 15
+dashedName: links-and-images-question-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the src attribute, every image element should also have an alt (alternative text) attribute.
+
+The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Read about the four main image formats that can be used on the web.
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+TIFF, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md
new file mode 100644
index 00000000000..657a3f6e32d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md
@@ -0,0 +1,204 @@
+---
+id: 6391d1a4f7ac71efd0621380
+title: Build a Recipe Page Project
+challengeType: 14
+dashedName: project-create-a-recipe-page
+---
+
+# --description--
+
+The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
+
+**User Stories:**
+
+1. Your recipe page should contain a `DOCTYPE` tag.
+1. Your recipe page should include an `html` element with a `head` and `body` element as children.
+1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
+1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
+1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
+1. There should be an `h2` element with the text `Description` under the image.
+1. You should see a couple of paragraphs under `Description` that describe the recipe.
+1. There should be an `h2` element with the text `Ingredients`
+1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
+1. Under the list of ingredients add another heading called `Steps`.
+1. You should see an ordered list with a couple of steps needed to complete the recipe.
+1. Under the steps there should be an `h2` element with the text `More Recipes`
+1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
+1. These anchor elements should have `href` attribute with the value set to `#`
+
+# --hints--
+
+You should have a `DOCTYPE` tag.
+
+```js
+assert(code.match(//gi));
+```
+
+You should have a `html` element with `head` and `body` element.
+
+```js
+const html = document.querySelectorAll('html')[0];
+const head = document.querySelectorAll('html > head')[0];
+const body = document.querySelectorAll('html > body')[0];
+
+assert(html && head && body);
+```
+
+You should have a `title` element within the `head` element that contains the text `The Odin Recipes`.
+
+```js
+assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
+```
+
+You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`.
+
+```js
+assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
+```
+
+You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
+
+```js
+const img = document.querySelectorAll('IMG')[0];
+
+assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
+```
+
+You should have an `h2` element with the text `Description`.
+
+```js
+const h2 = document.querySelectorAll('H2')[0];
+
+assert(h2.innerText == 'Description');
+```
+
+You should have at least two `p` elements describing the recipe.
+
+```js
+const paragraphs = document.querySelectorAll('P');
+
+assert(paragraphs.length > 1);
+```
+
+You should have an `h2` element with the text `Ingredients`.
+
+```js
+const h2 = document.querySelectorAll('H2')[1];
+
+assert(h2.innerText == 'Ingredients');
+```
+
+You should have an unordered list `- ` with some ingredients as the list items `