welcome-section
. قصة المستخدم رقم 2: يجب أن يحتوي قسم الترحيب على عنصر h1
يحتوي على نص. قصة المستخدم رقم 3: يجب أن يكون لحافظة أعمالي قسمًا للمشروعات يحتوي على معرف projects
. قصة المستخدم رقم 4: يجب أن يحتوي قسم المشاريع على عنصر واحد على الأقل يحتوي على فئة من project-tile
المشروع لعقد مشروع. قصة المستخدم رقم 5: يجب أن يحتوي قسم المشروعات على رابط واحد على الأقل لمشروع. قصة المستخدم رقم 6: يجب أن تحتوي حافظتي على شريط تنقل به معرف navbar
. قصة المستخدم رقم 7: يجب أن يحتوي شريط التنقل على رابط واحد على الأقل يمكنني النقر عليه للانتقال إلى أقسام مختلفة من الصفحة. قصة المستخدم رقم 8: يجب أن تحتوي محفظتي على رابط بمعرّف profile-link
، الذي يفتح ملفي الشخصي على GitHub أو FCC في علامة تبويب جديدة. قصة المستخدم رقم 9: يجب أن تحتوي حافظتي على استعلام وسائط واحد على الأقل. قصة المستخدم رقم 10: يجب أن يساوي ارتفاع قسم الترحيب ارتفاع إطار العرض. قصة المستخدم رقم 11: يجب أن يكون شريط التنقل دائمًا في أعلى منفذ العرض. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. welcome-section
. قصة المستخدم رقم 2: يجب أن يحتوي قسم الترحيب على عنصر h1
يحتوي على نص. قصة المستخدم رقم 3: يجب أن يكون لحافظة أعمالي قسمًا للمشروعات يحتوي على معرف projects
. قصة المستخدم رقم 4: يجب أن يحتوي قسم المشاريع على عنصر واحد على الأقل يحتوي على فئة من project-tile
المشروع لعقد مشروع. قصة المستخدم رقم 5: يجب أن يحتوي قسم المشروعات على رابط واحد على الأقل لمشروع. قصة المستخدم رقم 6: يجب أن تحتوي حافظتي على شريط تنقل به معرف navbar
. قصة المستخدم رقم 7: يجب أن يحتوي شريط التنقل على رابط واحد على الأقل يمكنني النقر عليه للانتقال إلى أقسام مختلفة من الصفحة. قصة المستخدم رقم 8: يجب أن تحتوي محفظتي على رابط بمعرّف profile-link
، الذي يفتح ملفي الشخصي على GitHub أو FCC في علامة تبويب جديدة. قصة المستخدم رقم 9: يجب أن تحتوي حافظتي على استعلام وسائط واحد على الأقل. قصة المستخدم رقم 10: يجب أن يساوي ارتفاع قسم الترحيب ارتفاع إطار العرض. قصة المستخدم رقم 11: يجب أن يكون شريط التنقل دائمًا في أعلى منفذ العرض. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. header
عنصر المقابلة مع id="header"
. قصة المستخدم رقم 2: يمكنني رؤية صورة داخل عنصر header
باستخدام id="header-img"
مناظر id="header-img"
. شعار الشركة سيجعل صورة جيدة هنا. قصة المستخدم رقم 3: داخل عنصر #header
أستطيع أن أرى عنصر nav
باستخدام id="nav-bar"
. قصة المستخدم رقم 4: يمكنني مشاهدة ثلاثة عناصر قابلة للنقر على الأقل داخل عنصر nav
، كل منها يحتوي على nav-link
للفئة. قصة المستخدم رقم 5: عندما أنقر على زر .nav-link
في عنصر nav
، يتم نقلي إلى القسم المقابل من الصفحة المقصودة. قصة المستخدم رقم 6: يمكنني مشاهدة فيديو منتج مضمّن باستخدام id="video"
. قصة المستخدم رقم 7: تحتوي صفحتي المقصودة على عنصر form
له id="form"
مناظر id="form"
. قصة المستخدم رقم 8: داخل النموذج ، هناك حقل input
به id="email"
حيث يمكنني إدخال عنوان بريد إلكتروني. قصة المستخدم رقم 9: يجب أن يحتوي حقل إدخال #email
# على نص #email
للسماح للمستخدم بمعرفة ما هو الحقل. قصة المستخدم # 10: #email
حقل إدخال يستخدم التحقق من صحة HTML5 للتأكد من أن النص الذي تم إدخاله هو عنوان البريد الإلكتروني. قصة المستخدم رقم 11: في النموذج ، هناك input
إرسال مع id="submit"
المقابلة id="submit"
. قصة المستخدم رقم 12: عندما أنقر على عنصر #submit
، يتم إرسال الرسالة الإلكترونية إلى صفحة ثابتة (استخدم هذا العنوان #submit
: https://www.freecodecamp.com/email-submit ) الذي يؤكد إدخال عنوان البريد الإلكتروني و نشرت بنجاح. قصة المستخدم رقم 13: يجب أن يكون شريط التنقل دائمًا في أعلى منفذ العرض. قصة المستخدم رقم 14: يجب أن تحتوي صفحتي المقصودة للمنتج على استعلام وسائط واحد على الأقل. قصة المستخدم رقم 15: يجب أن تستخدم الصفحة المقصودة للمنتج My CSS flexbox مرة واحدة على الأقل. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. header
عنصر المقابلة مع id="header"
. قصة المستخدم رقم 2: يمكنني رؤية صورة داخل عنصر header
باستخدام id="header-img"
مناظر id="header-img"
. شعار الشركة سيجعل صورة جيدة هنا. قصة المستخدم رقم 3: داخل عنصر #header
أستطيع أن أرى عنصر nav
باستخدام id="nav-bar"
. قصة المستخدم رقم 4: يمكنني مشاهدة ثلاثة عناصر قابلة للنقر على الأقل داخل عنصر nav
، كل منها يحتوي على nav-link
للفئة. قصة المستخدم رقم 5: عندما أنقر على زر .nav-link
في عنصر nav
، يتم نقلي إلى القسم المقابل من الصفحة المقصودة. قصة المستخدم رقم 6: يمكنني مشاهدة فيديو منتج مضمّن باستخدام id="video"
. قصة المستخدم رقم 7: تحتوي صفحتي المقصودة على عنصر form
له id="form"
مناظر id="form"
. قصة المستخدم رقم 8: داخل النموذج ، هناك حقل input
به id="email"
حيث يمكنني إدخال عنوان بريد إلكتروني. قصة المستخدم رقم 9: يجب أن يحتوي حقل إدخال #email
# على نص #email
للسماح للمستخدم بمعرفة ما هو الحقل. قصة المستخدم # 10: #email
حقل إدخال يستخدم التحقق من صحة HTML5 للتأكد من أن النص الذي تم إدخاله هو عنوان البريد الإلكتروني. قصة المستخدم رقم 11: في النموذج ، هناك input
إرسال مع id="submit"
المقابلة id="submit"
. قصة المستخدم رقم 12: عندما أنقر على عنصر #submit
، يتم إرسال الرسالة الإلكترونية إلى صفحة ثابتة (استخدم هذا العنوان #submit
: https://www.freecodecamp.com/email-submit ) الذي يؤكد إدخال عنوان البريد الإلكتروني و نشرت بنجاح. قصة المستخدم رقم 13: يجب أن يكون شريط التنقل دائمًا في أعلى منفذ العرض. قصة المستخدم رقم 14: يجب أن تحتوي صفحتي المقصودة للمنتج على استعلام وسائط واحد على الأقل. قصة المستخدم رقم 15: يجب أن تستخدم الصفحة المقصودة للمنتج My CSS flexbox مرة واحدة على الأقل. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. id="title"
في نص بحجم H1. قصة المستخدم رقم 2: يمكنني رؤية شرح مختصر مع id="description"
في نص P الحجم. قصة المستخدم رقم 3: يمكنني رؤية form
مع id="survey-form"
. قصة المستخدم رقم 4: داخل عنصر النموذج ، يُطلب مني إدخال اسمي في حقل به id="name"
. قصة المستخدم رقم 5: داخل عنصر النموذج ، يُطلب مني إدخال بريد إلكتروني في حقل به id="email"
. قصة المستخدم رقم 6: إذا قمت بإدخال بريد إلكتروني لم يتم تنسيقه بشكل صحيح ، فسوف أرى خطأ في التحقق من صحة HTML5. قصة المستخدم رقم 7: داخل النموذج ، يمكنني إدخال رقم في حقل به id="number"
. قصة المستخدم رقم 8: إذا قمت بإدخال أرقام غير أرقام في إدخال الرقم ، فسوف أرى خطأ التحقق من صحة HTML5. قصة المستخدم رقم 9: إذا كان إدخال أرقام خارج نطاق إدخال رقم، التي تم تعريفها من قبل min
و max
الصفات، وسوف ترى خطأ التحقق من صحة HTML5. قصة المستخدم رقم 10: بالنسبة إلى الاسم ، والبريد الإلكتروني ، وحقول إدخال الرقم داخل النموذج ، يمكنني مشاهدة تصنيفات مقابلة تصف الغرض من كل حقل بالمعرفات التالية: id="name-label"
، id="email-label"
و id="number-label"
. قصة المستخدم رقم 11: بالنسبة إلى الاسم ، والبريد الإلكتروني ، وحقول إدخال الرقم ، يمكنني رؤية نص العنصر النائب الذي يعطيني وصفًا أو إرشادات لكل حقل. قصة المستخدم رقم 12: داخل عنصر النموذج ، يمكنني تحديد خيار من قائمة منسدلة تحتوي على id="dropdown"
مناظر id="dropdown"
. قصة المستخدم رقم 13: داخل عنصر النموذج ، يمكنني تحديد حقل من مجموعة واحدة أو أكثر من أزرار الاختيار. يجب تجميع كل مجموعة باستخدام سمة name
. قصة المستخدم رقم 14: داخل عنصر النموذج ، يمكنني تحديد عدة حقول من سلسلة من مربعات الاختيار ، التي يجب أن يكون لكل منها سمة value
. قصة المستخدم رقم 15: داخل عنصر النموذج ، يتم textarea
مع نص في النهاية للحصول على تعليقات إضافية. قصة المستخدم رقم 16: داخل عنصر النموذج ، يتم تقديم الزر مع id="submit"
لإرسال كل مدخلاتي. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. id="title"
في نص بحجم H1. قصة المستخدم رقم 2: يمكنني رؤية شرح مختصر مع id="description"
في نص P الحجم. قصة المستخدم رقم 3: يمكنني رؤية form
مع id="survey-form"
. قصة المستخدم رقم 4: داخل عنصر النموذج ، يُطلب مني إدخال اسمي في حقل به id="name"
. قصة المستخدم رقم 5: داخل عنصر النموذج ، يُطلب مني إدخال بريد إلكتروني في حقل به id="email"
. قصة المستخدم رقم 6: إذا قمت بإدخال بريد إلكتروني لم يتم تنسيقه بشكل صحيح ، فسوف أرى خطأ في التحقق من صحة HTML5. قصة المستخدم رقم 7: داخل النموذج ، يمكنني إدخال رقم في حقل به id="number"
. قصة المستخدم رقم 8: إذا قمت بإدخال أرقام غير أرقام في إدخال الرقم ، فسوف أرى خطأ التحقق من صحة HTML5. قصة المستخدم رقم 9: إذا كان إدخال أرقام خارج نطاق إدخال رقم، التي تم تعريفها من قبل min
و max
الصفات، وسوف ترى خطأ التحقق من صحة HTML5. قصة المستخدم رقم 10: بالنسبة إلى الاسم ، والبريد الإلكتروني ، وحقول إدخال الرقم داخل النموذج ، يمكنني مشاهدة تصنيفات مقابلة تصف الغرض من كل حقل بالمعرفات التالية: id="name-label"
، id="email-label"
و id="number-label"
. قصة المستخدم رقم 11: بالنسبة إلى الاسم ، والبريد الإلكتروني ، وحقول إدخال الرقم ، يمكنني رؤية نص العنصر النائب الذي يعطيني وصفًا أو إرشادات لكل حقل. قصة المستخدم رقم 12: داخل عنصر النموذج ، يمكنني تحديد خيار من قائمة منسدلة تحتوي على id="dropdown"
مناظر id="dropdown"
. قصة المستخدم رقم 13: داخل عنصر النموذج ، يمكنني تحديد حقل من مجموعة واحدة أو أكثر من أزرار الاختيار. يجب تجميع كل مجموعة باستخدام سمة name
. قصة المستخدم رقم 14: داخل عنصر النموذج ، يمكنني تحديد عدة حقول من سلسلة من مربعات الاختيار ، التي يجب أن يكون لكل منها سمة value
. قصة المستخدم رقم 15: داخل عنصر النموذج ، يتم textarea
مع نص في النهاية للحصول على تعليقات إضافية. قصة المستخدم رقم 16: داخل عنصر النموذج ، يتم تقديم الزر مع id="submit"
لإرسال كل مدخلاتي. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. main
يحتوي على id="main-doc"
مناظر id="main-doc"
، والذي يحتوي على المحتوى الرئيسي للصفحة (الوثائق الفنية). قصة المستخدم رقم 2: داخل عنصر #main-doc
، يمكنني مشاهدة عدة عناصر من section
، لكل منها فئة من main-section
. يجب أن يكون هناك حد أدنى من 5. قصة المستخدم رقم 3: يجب أن يكون العنصر الأول في كل عنصر .main-section
عنصر header
يحتوي على نص يصف موضوع ذلك القسم. قصة المستخدم رقم 4: يجب أن يكون لكل عنصر section
مع فئة main-section
أيضًا معرّف يتطابق مع نص كل header
موجود داخلها. يجب استبدال أي مسافات بشرط تسطير سفلي (على سبيل المثال ، يجب أن يحتوي section
الذي يحتوي على الرأس "Javascript و Java" على id="Javascript_and_Java"
مناظر id="Javascript_and_Java"
). قصة المستخدم رقم 5: يجب أن تحتوي عناصر .main-section
على ما لا يقل عن 10 عناصر لعناصر p
(وليس كل). قصة المستخدم رقم 6: يجب أن تحتوي عناصر .main-section
على ما لا يقل عن 5 عناصر من code
(وليس كل). قصة المستخدم # 7: .main-section
ينبغي أن يتضمن عناصر لا يقل عن 5 li
البنود الكاملة (وليس كل). قصة المستخدم رقم 8: يمكنني رؤية عنصر nav
مع id="navbar"
المقابلة id="navbar"
. قصة المستخدم رقم 9: يجب أن يحتوي عنصر شريط التنقل على عنصر header
يحتوي على نص يصف موضوع الوثائق الفنية. قصة المستخدم رقم 10: بالإضافة إلى ذلك ، يجب أن يحتوي a
nav-link
على رابط ( a
) عناصر بفئة nav-link
. يجب أن يكون هناك واحد لكل عنصر مع main-section
للفصل. قصة المستخدم رقم 11: يجب أن يأتي عنصر header
في شريط التنقل قبل أي رابط ( a
) عناصر في a
التنقل. قصة المستخدم رقم 12: يجب أن يحتوي كل عنصر مع فئة nav-link
على نص يتطابق مع نص header
داخل كل section
(على سبيل المثال ، إذا كان لديك عنوان / عنوان "مرحباً بالعالم" ، يجب أن يحتوي nav-link
الخاص بك على عنصر يحتوي على النص "مرحبا بالعالم"). قصة المستخدم رقم 13: عندما أنقر على عنصر شريط التنقل ، يجب أن تنتقل الصفحة إلى القسم المقابل من عنصر main-doc
(على سبيل المثال ، إذا قمت بالنقر فوق عنصر nav-link
يحتوي على النص "Hello world" ، فإن الصفحة تتنقل إلى section
العنصر الذي لديه تلك الهوية ويحتوي على المقابلة header
قصة المستخدم رقم 14: على الأجهزة الحجم العادية (أجهزة الكمبيوتر المحمولة والمكتبية)، وعنصر مع id="navbar"
يجب أن تظهر على الجانب الأيسر من الشاشة، وينبغي دائما قصة المستخدم رقم 15: يجب أن تستخدم صفحة "المستندات التقنية" استعلام وسائط واحد على الأقل. يمكنك إنشاء مشروعك من خلال تسجيل قلم CodePen هذا ، أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها : https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء من ذلك ، أرسل عنوان URL إلى مشروع عملك مع جميع اختباراته ، تذكر استخدام Read-Search-Ask طريقة إذا واجهتك مشكلة. main
يحتوي على id="main-doc"
مناظر id="main-doc"
، والذي يحتوي على المحتوى الرئيسي للصفحة (الوثائق الفنية). قصة المستخدم رقم 2: داخل عنصر #main-doc
، يمكنني مشاهدة عدة عناصر من section
، لكل منها فئة من main-section
. يجب أن يكون هناك حد أدنى من 5. قصة المستخدم رقم 3: يجب أن يكون العنصر الأول في كل عنصر .main-section
عنصر header
يحتوي على نص يصف موضوع ذلك القسم. قصة المستخدم رقم 4: يجب أن يكون لكل عنصر section
مع فئة main-section
أيضًا معرّف يتطابق مع نص كل header
موجود داخلها. يجب استبدال أي مسافات بشرط تسطير سفلي (على سبيل المثال ، يجب أن يحتوي section
الذي يحتوي على الرأس "Javascript و Java" على id="Javascript_and_Java"
مناظر id="Javascript_and_Java"
). قصة المستخدم رقم 5: يجب أن تحتوي عناصر .main-section
على ما لا يقل عن 10 عناصر لعناصر p
(وليس كل). قصة المستخدم رقم 6: يجب أن تحتوي عناصر .main-section
على ما لا يقل عن 5 عناصر من code
(وليس كل). قصة المستخدم # 7: .main-section
ينبغي أن يتضمن عناصر لا يقل عن 5 li
البنود الكاملة (وليس كل). قصة المستخدم رقم 8: يمكنني رؤية عنصر nav
مع id="navbar"
المقابلة id="navbar"
. قصة المستخدم رقم 9: يجب أن يحتوي عنصر شريط التنقل على عنصر header
يحتوي على نص يصف موضوع الوثائق الفنية. قصة المستخدم رقم 10: بالإضافة إلى ذلك ، يجب أن يحتوي a
nav-link
على رابط ( a
) عناصر بفئة nav-link
. يجب أن يكون هناك واحد لكل عنصر مع main-section
للفصل. قصة المستخدم رقم 11: يجب أن يأتي عنصر header
في شريط التنقل قبل أي رابط ( a
) عناصر في a
التنقل. قصة المستخدم رقم 12: يجب أن يحتوي كل عنصر مع فئة nav-link
على نص يتطابق مع نص header
داخل كل section
(على سبيل المثال ، إذا كان لديك عنوان / عنوان "مرحباً بالعالم" ، يجب أن يحتوي nav-link
الخاص بك على عنصر يحتوي على النص "مرحبا بالعالم"). قصة المستخدم رقم 13: عندما أنقر على عنصر شريط التنقل ، يجب أن تنتقل الصفحة إلى القسم المقابل من عنصر main-doc
(على سبيل المثال ، إذا قمت بالنقر فوق عنصر nav-link
يحتوي على النص "Hello world" ، فإن الصفحة تتنقل إلى section
العنصر الذي لديه تلك الهوية ويحتوي على المقابلة header
قصة المستخدم رقم 14: على الأجهزة الحجم العادية (أجهزة الكمبيوتر المحمولة والمكتبية)، وعنصر مع id="navbar"
يجب أن تظهر على الجانب الأيسر من الشاشة، وينبغي دائما قصة المستخدم رقم 15: يجب أن تستخدم صفحة "المستندات التقنية" استعلام وسائط واحد على الأقل. يمكنك إنشاء مشروعك من خلال تسجيل قلم CodePen هذا ، أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها : https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء من ذلك ، أرسل عنوان URL إلى مشروع عملك مع جميع اختباراته ، تذكر استخدام Read-Search-Ask طريقة إذا واجهتك مشكلة. id="main"
، والذي يحتوي على جميع العناصر الأخرى. قصة المستخدم رقم 2: يجب أن أرى عنصرًا به id="title"
، والذي يحتوي على سلسلة (أي نص) تصف موضوع صفحة الجزية (على سبيل المثال "Dr. Norman Borlaug"). قصة المستخدم رقم 3: من المفترض أن أرى عنصر div
يحتوي على id="img-div"
مناظر id="img-div"
. قصة المستخدم رقم 4: في عنصر img-div
، ينبغي أن أرى عنصر img
id="image"
مناظر id="image"
. قصة المستخدم رقم 5: في عنصر img-div
، يجب أن أرى عنصرًا به id="img-caption"
المقابل الذي يحتوي على محتوى نصي يصف الصورة المعروضة في img-div
. قصة المستخدم رقم 6: ينبغي أن أرى عنصرًا يحمل id="tribute-info"
مقابلاً id="tribute-info"
، يحتوي على محتوى نصي يصف موضوع صفحة الجزية. قصة المستخدم رقم 7: يجب أن تشهد a
عنصر المقابلة مع id="tribute-link"
، الذي يربط إلى موقع خارجي يحتوي على معلومات إضافية حول موضوع الصفحة الجزية. تلميح: يجب أن تمنح عنصرك سمة target
_blank
على _blank
حتى يفتح الرابط الخاص بك في علامة تبويب جديدة (مثل target="_blank"
). قصة المستخدم رقم 8: يجب تغيير عنصر img
سريعة ، بالنسبة إلى عرض العنصر الرئيسي ، دون تجاوز الحجم الأصلي. قصة المستخدم رقم 9: يجب توسيط عنصر img
داخل العنصر الرئيسي. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. بمجرد الانتهاء ، أرسل عنوان URL إلى مشروع عملك مع كل اختباراته تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. id="main"
، والذي يحتوي على جميع العناصر الأخرى. قصة المستخدم رقم 2: يجب أن أرى عنصرًا به id="title"
، والذي يحتوي على سلسلة (أي نص) تصف موضوع صفحة الجزية (على سبيل المثال "Dr. Norman Borlaug"). قصة المستخدم رقم 3: من المفترض أن أرى عنصر div
يحتوي على id="img-div"
مناظر id="img-div"
. قصة المستخدم رقم 4: في عنصر img-div
، ينبغي أن أرى عنصر img
id="image"
مناظر id="image"
. قصة المستخدم رقم 5: في عنصر img-div
، يجب أن أرى عنصرًا به id="img-caption"
المقابل الذي يحتوي على محتوى نصي يصف الصورة المعروضة في img-div
. قصة المستخدم رقم 6: ينبغي أن أرى عنصرًا يحمل id="tribute-info"
مقابلاً id="tribute-info"
، يحتوي على محتوى نصي يصف موضوع صفحة الجزية. قصة المستخدم رقم 7: يجب أن تشهد a
عنصر المقابلة مع id="tribute-link"
، الذي يربط إلى موقع خارجي يحتوي على معلومات إضافية حول موضوع الصفحة الجزية. تلميح: يجب أن تمنح عنصرك سمة target
_blank
على _blank
حتى يفتح الرابط الخاص بك في علامة تبويب جديدة (مثل target="_blank"
). قصة المستخدم رقم 8: يجب تغيير عنصر img
سريعة ، بالنسبة إلى عرض العنصر الرئيسي ، دون تجاوز الحجم الأصلي. قصة المستخدم رقم 9: يجب توسيط عنصر img
داخل العنصر الرئيسي. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. بمجرد الانتهاء ، أرسل عنوان URL إلى مشروع عملك مع كل اختباراته تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. size
(وسيطة ثانية) وتقوم بإرجاعها كمصفوفة ثنائية الأبعاد. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. size
(وسيطة ثانية) وتقوم بإرجاعها كمصفوفة ثنائية الأبعاد. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. str
) تنتهي بسلسلة الهدف المحددة (الوسيطة الثانية ، target
). يمكن حل هذا التحدي باستخدام طريقة .endsWith()
، التي تم تقديمها في ES2015. ولكن لغرض هذا التحدي ، نود منك استخدام إحدى طرق السلسلة الفرعية JavaScript بدلاً من ذلك. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. str
) تنتهي بسلسلة الهدف المحددة (الوسيطة الثانية ، target
). يمكن حل هذا التحدي باستخدام طريقة .endsWith()
، التي تم تقديمها في ES2015. ولكن لغرض هذا التحدي ، نود منك استخدام إحدى طرق السلسلة الفرعية JavaScript بدلاً من ذلك. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. n!
على سبيل المثال: 5! = 1 * 2 * 3 * 4 * 5 = 120
فقط تزويد الأعداد الصحيحة التي تزيد عن أو تساوي الصفر بالوظيفة. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. n!
على سبيل المثال: 5! = 1 * 2 * 3 * 4 * 5 = 120
فقط تزويد الأعداد الصحيحة التي تزيد عن أو تساوي الصفر بالوظيفة. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. false
و null
و 0
و ""
و undefined
و NaN
. تلميح: حاول تحويل كل قيمة إلى قيمة منطقية. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. false
و null
و 0
و ""
و undefined
و NaN
. تلميح: حاول تحويل كل قيمة إلى قيمة منطقية. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. ["hello", "Hello"]
، true لأن كافة الأحرف الموجودة في السلسلة الثانية موجودة في الحالة الأولى ، مع تجاهل الحالة. يجب أن ترجع الوسيطة ["hello", "hey"]
false لأن السلسلة "hello" لا تحتوي على "y". وأخيرًا ، يجب أن تعود ["Alien", "line"]
، إلى true لأن جميع الأحرف في "line" موجودة في "Alien". تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. ["hello", "Hello"]
، true لأن كافة الأحرف الموجودة في السلسلة الثانية موجودة في الحالة الأولى ، مع تجاهل الحالة. يجب أن ترجع الوسيطة ["hello", "hey"]
false لأن السلسلة "hello" لا تحتوي على "y". وأخيرًا ، يجب أن تعود ["Alien", "line"]
، إلى true لأن جميع الأحرف في "line" موجودة في "Alien". تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. str
سلسلة معينة (الوسيطة الأولى) لـ num
times (الوسيطة الثانية). إرجاع سلسلة فارغة إذا لم تكن num
رقم موجب. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. str
سلسلة معينة (الوسيطة الأولى) لـ num
times (الوسيطة الثانية). إرجاع سلسلة فارغة إذا لم تكن num
رقم موجب. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. arr[i]
جملة arr[i]
. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. arr[i]
جملة arr[i]
. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. slice
الطرق splice
لنسخ كل عنصر من المصفوفة الأولى في المصفوفة الثانية ، بالترتيب. ابدأ بإدخال عناصر في الفهرس n
للمصفوفة الثانية. إرجاع الصفيف الناتج. يجب أن تظل صفائف الإدخال كما هي بعد تشغيل الدالة. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. slice
الطرق splice
لنسخ كل عنصر من المصفوفة الأولى في المصفوفة الثانية ، بالترتيب. ابدأ بإدخال عناصر في الفهرس n
للمصفوفة الثانية. إرجاع الصفيف الناتج. يجب أن تظل صفائف الإدخال كما هي بعد تشغيل الدالة. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. ...
إنهاء. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. ...
إنهاء. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. getIndexToIns([1,2,3,4], 1.5)
بإرجاع 1
لأنه أكبر من 1
(index 0) ، ولكن أقل من 2
(index 1). وبالمثل ، يجب أن تعود getIndexToIns([20,3,5], 19)
2
لأنه بمجرد فرز المصفوفة ستبدو مثل [3,5,20]
و 19
أقل من 20
(مؤشر 2) وأكبر من 5
( مؤشر 1). تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. getIndexToIns([1,2,3,4], 1.5)
بإرجاع 1
لأنه أكبر من 1
(index 0) ، ولكن أقل من 2
(index 1). وبالمثل ، يجب أن تعود getIndexToIns([20,3,5], 19)
2
لأنه بمجرد فرز المصفوفة ستبدو مثل [3,5,20]
و 19
أقل من 20
(مؤشر 2) وأكبر من 5
( مؤشر 1). تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. arr
، قم بالتمرير عبر كل عنصر بدءًا من العنصر الأول (مؤشر 0) وإزالته إلى أن تعود الدالة func
إلى true
عند تمرير العنصر المتكرر عبرها. ثم أعد بقية المصفوفة بمجرد استيفاء الشرط ، وإلا ، يجب إرجاع arr
كصفيف فارغ. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. حاول إقران البرنامج. اكتب الكود الخاص بك. arr
، قم بالتمرير عبر كل عنصر بدءًا من العنصر الأول (مؤشر 0) وإزالته إلى أن تعود الدالة func
إلى true
عند تمرير العنصر المتكرر عبرها. ثم أعد بقية المصفوفة بمجرد استيفاء الشرط ، وإلا ، يجب إرجاع arr
كصفيف فارغ. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. حاول إقران البرنامج. اكتب الكود الخاص بك. pre
ستكون خاصية الكائن وتحتاج للعودة true
إذا قيمتها truthy
. خلاف ذلك ، تعود false
. في JavaScript ، القيم truthy
هي القيم التي تترجم إلى true
عند تقييمها في سياق Boolean. تذكر ، يمكنك الوصول إلى خصائص الكائن من خلال أي نقطة ترقيم أو []
تدوين. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. حاول إقران البرنامج. اكتب الكود الخاص بك. pre
ستكون خاصية الكائن وتحتاج للعودة true
إذا قيمتها truthy
. خلاف ذلك ، تعود false
. في JavaScript ، القيم truthy
هي القيم التي تترجم إلى true
عند تقييمها في سياق Boolean. تذكر ، يمكنك الوصول إلى خصائص الكائن من خلال أي نقطة ترقيم أو []
تدوين. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. حاول إقران البرنامج. اكتب الكود الخاص بك. [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]
، والوسيطة الثانية هي { last: "Capulet" }
، ثم يجب عليك إرجاع الكائن الثالث من الصفيف (الوسيطة الأولى) ، لأنه يحتوي على الاسم والقيمة الخاصة به ، التي تم تمريرها على أنها الوسيطة الثانية. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]
، والوسيطة الثانية هي { last: "Capulet" }
، ثم يجب عليك إرجاع الكائن الثالث من الصفيف (الوسيطة الأولى) ، لأنه يحتوي على الاسم والقيمة الخاصة به ، التي تم تمريرها على أنها الوسيطة الثانية. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. true
إذا كانت السلسلة المحددة متناظرة. خلاف ذلك ، تعود false
. النص المتناظر هو كلمة أو جملة مكتوبة بنفس الطريقة إلى الأمام والخلف ، وتتجاهل علامات الترقيم والحالة والتباعد. ملحوظة "racecar"
و "RaceCar"
و "race CAR"
وغيرها. سنقوم أيضًا بتمرير سلاسل مع رموز خاصة ، مثل "2A3*3a2"
و "2A3 3a2"
و "2_A3*3#A2"
. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. true
إذا كانت السلسلة المحددة متناظرة. خلاف ذلك ، تعود false
. النص المتناظر هو كلمة أو جملة مكتوبة بنفس الطريقة إلى الأمام والخلف ، وتتجاهل علامات الترقيم والحالة والتباعد. ملحوظة "racecar"
و "RaceCar"
و "race CAR"
وغيرها. سنقوم أيضًا بتمرير سلاسل مع رموز خاصة ، مثل "2A3*3a2"
و "2A3 3a2"
و "2_A3*3#A2"
. تذكر استخدام Read-Search-Ask إذا واجهتك مشكلة. اكتب الكود الخاص بك. id="drum-machine"
أداة id="drum-machine"
تحتوي على جميع العناصر الأخرى. قصة المستخدم رقم 2: داخل #drum-machine
أستطيع أن أرى عنصرًا به id="display"
مناظر id="display"
. قصة المستخدم رقم 3: داخل #drum-machine
يمكنني رؤية 9 عناصر لوحة اسطوانة قابلة للنقر ، لكل منها اسم صنف من drum-pad
، وهو معرف فريد يصف المقطع الصوتي الذي سيتم إعداده على لوحة السماعة ، النص الذي يتوافق مع أحد المفاتيح التالية على لوحة المفاتيح: Q ، W ، E ، A ، S ، D ، Z ، X ، C. يجب أن تكون وسادات الأسطوانة بهذا الترتيب. قصة المستخدم 4: داخل كل .drum-pad
، يجب أن يكون هناك عنصر audio
HTML5 يحتوي على سمة src
تشير إلى مقطع صوتي ، واسم clip
، ومعرف مطابق للنص الداخلي .drum-pad
(على سبيل المثال id="Q"
، id="W"
، id="E"
إلخ.). قصة المستخدم رقم 5: عندما أنقر على عنصر .drum-pad
، يجب تشغيل المقطع الصوتي الموجود في عنصر audio
الطفل الخاص به. قصة المستخدم رقم 6: عندما أضغط مفتاح المشغل المرتبط بكل .drum-pad
، يجب تشغيل المقطع الصوتي الموجود في عنصر audio
الطفل الخاص به (على سبيل المثال ، الضغط على المفتاح Q يؤدي إلى تشغيل لوحة الأسطوانة التي تحتوي على السلسلة "Q" ، الضغط على المفتاح W يجب أن يؤدي إلى تشغيل لوحة البراميل التي تحتوي على السلسلة "W" ، وما إلى ذلك). قصة المستخدم رقم 7: عندما يتم تشغيل .drum-pad
يتم عرض سلسلة تصف المقطع الصوتي المرتبط كنص داخلي للعنصر #display
(يجب أن تكون كل سلسلة فريدة). يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. id="drum-machine"
أداة id="drum-machine"
تحتوي على جميع العناصر الأخرى. قصة المستخدم رقم 2: داخل #drum-machine
أستطيع أن أرى عنصرًا به id="display"
مناظر id="display"
. قصة المستخدم رقم 3: داخل #drum-machine
يمكنني رؤية 9 عناصر لوحة اسطوانة قابلة للنقر ، لكل منها اسم صنف من drum-pad
، وهو معرف فريد يصف المقطع الصوتي الذي سيتم إعداده على لوحة السماعة ، النص الذي يتوافق مع أحد المفاتيح التالية على لوحة المفاتيح: Q ، W ، E ، A ، S ، D ، Z ، X ، C. يجب أن تكون وسادات الأسطوانة بهذا الترتيب. قصة المستخدم 4: داخل كل .drum-pad
، يجب أن يكون هناك عنصر audio
HTML5 يحتوي على سمة src
تشير إلى مقطع صوتي ، واسم clip
، ومعرف مطابق للنص الداخلي .drum-pad
(على سبيل المثال id="Q"
، id="W"
، id="E"
إلخ.). قصة المستخدم رقم 5: عندما أنقر على عنصر .drum-pad
، يجب تشغيل المقطع الصوتي الموجود في عنصر audio
الطفل الخاص به. قصة المستخدم رقم 6: عندما أضغط مفتاح المشغل المرتبط بكل .drum-pad
، يجب تشغيل المقطع الصوتي الموجود في عنصر audio
الطفل الخاص به (على سبيل المثال ، الضغط على المفتاح Q يؤدي إلى تشغيل لوحة الأسطوانة التي تحتوي على السلسلة "Q" ، الضغط على المفتاح W يجب أن يؤدي إلى تشغيل لوحة البراميل التي تحتوي على السلسلة "W" ، وما إلى ذلك). قصة المستخدم رقم 7: عندما يتم تشغيل .drum-pad
يتم عرض سلسلة تصف المقطع الصوتي المرتبط كنص داخلي للعنصر #display
(يجب أن تكون كل سلسلة فريدة). يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. =
(علامة مساواة) مع id="equals"
مناظر id="equals"
. قصة المستخدم رقم 2: يجب أن تحتوي الحاسبة الخاصة بي على 10 عناصر قابلة للنقر تحتوي على رقم واحد لكل من 0-9 ، مع المعرفات المقابلة التالية: id="zero"
، id="one"
، id="two"
، id="three"
و id="four"
و id="five"
و id="six"
و id="seven"
و id="eight"
و id="nine"
. قصة المستخدم رقم 3: يجب أن تحتوي الحاسبة الخاصة بي على 4 عناصر قابلة للنقر تحتوي كل واحدة منها على واحدة من 4 عوامل رياضية أولية لها المعرفات المقابلة التالية: id="add"
، id="subtract"
، id="multiply"
، id="divide"
. قصة المستخدم رقم 4: يجب أن تحتوي الحاسبة الخاصة بي على عنصر قابل للنقر يحتوي على .
(علامة عشرية) مع id="decimal"
المقابلة id="decimal"
. قصة المستخدم رقم 5: يجب أن تحتوي الحاسبة الخاصة بي على عنصر قابل للنقر به id="clear"
. قصة المستخدم رقم 6: يجب أن تحتوي الحاسبة الخاصة بي على عنصر لعرض قيم ذات id="display"
مناظر id="display"
. قصة المستخدم رقم 7: في أي وقت ، يؤدي الضغط على الزر "مسح" إلى مسح قيم المدخلات والمخرجات ، ثم إرجاع الآلة الحاسبة إلى حالتها المبدئية ؛ 0 يجب أن يظهر في العنصر مع معرف display
. قصة المستخدم رقم 8: عندما أقوم بإدخال الأرقام ، ينبغي أن أتمكن من رؤية الإدخال الخاص بي في العنصر مع معرف display
. قصة المستخدم رقم 9: في أي ترتيب ، يجب أن أتمكن من إضافة سلسلة من الأرقام بأي طول وطرحها وضربها وقسمتها ، وعندما أضغط =
، يجب أن تظهر النتيجة الصحيحة في العنصر ذي معرّف display
. قصة المستخدم رقم 10: عند إدخال الأرقام ، يجب ألا تسمح الحاسبة الخاصة بي ببدء عدد من الأصفار متعددة. قصة العضو رقم 11: عند النقر فوق عنصر عشري، و .
يجب إلحاقها بالقيمة المعروضة حاليًا ؛ اثنان .
في رقم واحد لا ينبغي قبوله. قصة المستخدم رقم 12: يجب أن أتمكن من تنفيذ أي عملية (+ ، - ، * ، /) على الأرقام التي تحتوي على نقاط عشرية. قصة المستخدم رقم 13: إذا تم إدخال مشغلين أو أكثر على التوالي ، فيجب أن تكون العملية التي تم تنفيذها هي آخر مشغل تم إدخاله. قصة المستخدم رقم 14: الضغط على المشغل الذي يلي مباشرة =
يجب أن يبدأ عملية حسابية جديدة تعمل على نتيجة التقييم السابق. قصة المستخدم رقم 15: يجب أن تحتوي الحاسبة الخاصة بي على عدة أماكن عشرية من الدقة عندما يتعلق الأمر بالتقريب (لاحظ أنه لا يوجد معيار دقيق ، ولكن يجب أن تكون قادرًا على التعامل مع العمليات الحسابية مثل 2 / 7
بدقة معقولة إلى 4 منازل عشرية على الأقل) . ملاحظة حول منطق الآلة الحاسبة: يجب ملاحظة أن هناك مدرستين أساسيتين للتفكير في منطق إدخال الآلة الحاسبة: منطق التنفيذ الفوري ومنطق الصيغة . يستخدم مثالنا منطق الصيغة ويلاحظ ترتيب عملية الأسبقية ، التنفيذ الفوري لا. أيهما مقبول ، ولكن يرجى ملاحظة أنه اعتمادا على الاختيار الذي تختاره ، قد تحقق الآلة الحاسبة نتائج مختلفة عن نتائج المعادلات الخاصة بنا (انظر المثال أدناه). طالما يمكن التحقق من الحساب الخاص بك بواسطة حاسبة إنتاج أخرى ، فالرجاء عدم اعتبار هذا خطأ. مثال: 3 + 5 x 6 - 2 / 4 =
11.5
32.5
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. =
(علامة مساواة) مع id="equals"
مناظر id="equals"
. قصة المستخدم رقم 2: يجب أن تحتوي الحاسبة الخاصة بي على 10 عناصر قابلة للنقر تحتوي على رقم واحد لكل من 0-9 ، مع المعرفات المقابلة التالية: id="zero"
، id="one"
، id="two"
، id="three"
و id="four"
و id="five"
و id="six"
و id="seven"
و id="eight"
و id="nine"
. قصة المستخدم رقم 3: يجب أن تحتوي الحاسبة الخاصة بي على 4 عناصر قابلة للنقر تحتوي كل واحدة منها على واحدة من 4 عوامل رياضية أولية لها المعرفات المقابلة التالية: id="add"
، id="subtract"
، id="multiply"
، id="divide"
. قصة المستخدم رقم 4: يجب أن تحتوي الحاسبة الخاصة بي على عنصر قابل للنقر يحتوي على .
(علامة عشرية) مع id="decimal"
المقابلة id="decimal"
. قصة المستخدم رقم 5: يجب أن تحتوي الحاسبة الخاصة بي على عنصر قابل للنقر به id="clear"
. قصة المستخدم رقم 6: يجب أن تحتوي الحاسبة الخاصة بي على عنصر لعرض قيم ذات id="display"
مناظر id="display"
. قصة المستخدم رقم 7: في أي وقت ، يؤدي الضغط على الزر "مسح" إلى مسح قيم المدخلات والمخرجات ، ثم إرجاع الآلة الحاسبة إلى حالتها المبدئية ؛ 0 يجب أن يظهر في العنصر مع معرف display
. قصة المستخدم رقم 8: عندما أقوم بإدخال الأرقام ، ينبغي أن أتمكن من رؤية الإدخال الخاص بي في العنصر مع معرف display
. قصة المستخدم رقم 9: في أي ترتيب ، يجب أن أتمكن من إضافة سلسلة من الأرقام بأي طول وطرحها وضربها وقسمتها ، وعندما أضغط =
، يجب أن تظهر النتيجة الصحيحة في العنصر ذي معرّف display
. قصة المستخدم رقم 10: عند إدخال الأرقام ، يجب ألا تسمح الحاسبة الخاصة بي ببدء عدد من الأصفار متعددة. قصة العضو رقم 11: عند النقر فوق عنصر عشري، و .
يجب إلحاقها بالقيمة المعروضة حاليًا ؛ اثنان .
في رقم واحد لا ينبغي قبوله. قصة المستخدم رقم 12: يجب أن أتمكن من تنفيذ أي عملية (+ ، - ، * ، /) على الأرقام التي تحتوي على نقاط عشرية. قصة المستخدم رقم 13: إذا تم إدخال مشغلين أو أكثر على التوالي ، فيجب أن تكون العملية التي تم تنفيذها هي آخر مشغل تم إدخاله. قصة المستخدم رقم 14: الضغط على المشغل الذي يلي مباشرة =
يجب أن يبدأ عملية حسابية جديدة تعمل على نتيجة التقييم السابق. قصة المستخدم رقم 15: يجب أن تحتوي الحاسبة الخاصة بي على عدة أماكن عشرية من الدقة عندما يتعلق الأمر بالتقريب (لاحظ أنه لا يوجد معيار دقيق ، ولكن يجب أن تكون قادرًا على التعامل مع العمليات الحسابية مثل 2 / 7
بدقة معقولة إلى 4 منازل عشرية على الأقل) . ملاحظة حول منطق الآلة الحاسبة: يجب ملاحظة أن هناك مدرستين أساسيتين للتفكير في منطق إدخال الآلة الحاسبة: منطق التنفيذ الفوري ومنطق الصيغة . يستخدم مثالنا منطق الصيغة ويلاحظ ترتيب عملية الأسبقية ، التنفيذ الفوري لا. أيهما مقبول ، ولكن يرجى ملاحظة أنه اعتمادا على الاختيار الذي تختاره ، قد تحقق الآلة الحاسبة نتائج مختلفة عن نتائج المعادلات الخاصة بنا (انظر المثال أدناه). طالما يمكن التحقق من الحساب الخاص بك بواسطة حاسبة إنتاج أخرى ، فالرجاء عدم اعتبار هذا خطأ. مثال: 3 + 5 x 6 - 2 / 4 =
11.5
32.5
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. textarea
مع id="editor"
المقابلة id="editor"
. قصة المستخدم رقم 2: يمكنني رؤية عنصر له id="preview"
مناظر id="preview"
. قصة المستخدم رقم 3: عند إدخال نص في عنصر #editor
، يتم تحديث عنصر #preview
أثناء الكتابة لعرض محتوى النص. قصة المستخدم رقم 4: عندما أقوم بإدخال #editor
GitHub في عنصر #editor
، يتم عرض النص على هيئة HTML في عنصر #preview
أثناء الكتابة (HINT: لست بحاجة إلى تحليل Markdown بنفسك - يمكنك استيراد المكتبة المحددة لهذا: https://cdnjs.com/libraries/marked ). قصة المستخدم رقم 5: عندما يتم أولاً تحميل أداة معاينة #editor
يجب أن يحتوي النص الافتراضي في الحقل #editor
على #editor
صالحة تمثل عنصرًا واحدًا على الأقل من كل عنصر من العناصر التالية: رأس (حجم H1) ، رأس فرعي (حجم H2) ، ورابط ، ورمز مضمّن ، وكتلة برمجية ، وبند قائمة ، وقطعة اقتباس ، وصورة ، ونص غامق. قصة المستخدم رقم 6: عندما يتم أولاً تحميل أداة معاينة #editor
يجب أن يتم عرض #editor
حقل #editor
على #editor
HTML في عنصر #preview
. مكافأة اختيارية (لا تحتاج إلى إجراء اختبار تجريبي): يفسر أداة معاينة العلامة التجارية الخاصة بي إرجاع الإرجاع وتجعلها كعناصر br
(فواصل الأسطر). يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. textarea
مع id="editor"
المقابلة id="editor"
. قصة المستخدم رقم 2: يمكنني رؤية عنصر له id="preview"
مناظر id="preview"
. قصة المستخدم رقم 3: عند إدخال نص في عنصر #editor
، يتم تحديث عنصر #preview
أثناء الكتابة لعرض محتوى النص. قصة المستخدم رقم 4: عندما أقوم بإدخال #editor
GitHub في عنصر #editor
، يتم عرض النص على هيئة HTML في عنصر #preview
أثناء الكتابة (HINT: لست بحاجة إلى تحليل Markdown بنفسك - يمكنك استيراد المكتبة المحددة لهذا: https://cdnjs.com/libraries/marked ). قصة المستخدم رقم 5: عندما يتم أولاً تحميل أداة معاينة #editor
يجب أن يحتوي النص الافتراضي في الحقل #editor
على #editor
صالحة تمثل عنصرًا واحدًا على الأقل من كل عنصر من العناصر التالية: رأس (حجم H1) ، رأس فرعي (حجم H2) ، ورابط ، ورمز مضمّن ، وكتلة برمجية ، وبند قائمة ، وقطعة اقتباس ، وصورة ، ونص غامق. قصة المستخدم رقم 6: عندما يتم أولاً تحميل أداة معاينة #editor
يجب أن يتم عرض #editor
حقل #editor
على #editor
HTML في عنصر #preview
. مكافأة اختيارية (لا تحتاج إلى إجراء اختبار تجريبي): يفسر أداة معاينة العلامة التجارية الخاصة بي إرجاع الإرجاع وتجعلها كعناصر br
(فواصل الأسطر). يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. id="break-label"
يحتوي على سلسلة (مثل "Break Length"). قصة المستخدم رقم 2: يمكنني رؤية عنصر له id="session-label"
يحتوي على سلسلة (مثل "طول الجلسة"). قصة المستخدم رقم 3: يمكنني رؤية عنصرين قابلين للنقر مع المعرفات المقابلة: id="break-decrement"
و id="session-decrement"
. قصة المستخدم رقم 4: يمكنني رؤية عنصرين قابلين للنقر مع المعرفات المقابلة: id="break-increment"
و id="session-increment"
. قصة المستخدم رقم 5: يمكنني رؤية عنصر له id="break-length"
، والذي يعرض افتراضيًا (عند التحميل) قيمة 5. قصة المستخدم رقم 6: يمكنني رؤية عنصر له id="session-length"
مناظر id="session-length"
، والتي تعرض افتراضيًا قيمة 25. قصة المستخدم رقم 7: يمكنني رؤية عنصر له id="timer-label"
المقابلة id="timer-label"
، يحتوي على سلسلة تشير إلى جلسة تمت تهيئتها (على سبيل المثال" جلسة ") . قصة المستخدم رقم 8: يمكنني رؤية عنصر له id="time-left"
. ملاحظة: متوقفة مؤقتًا أو قيد التشغيل ، يجب دائمًا عرض القيمة في هذا الحقل بتنسيق mm:ss
(أي 25:00). قصة المستخدم رقم 9: يمكنني رؤية عنصر قابل للنقر به id="start_stop"
مناظر id="start_stop"
. قصة المستخدم رقم 10: يمكنني رؤية عنصر قابل للنقر به id="reset"
مناظر id="reset"
. قصة المستخدم رقم 11: عندما أنقر على العنصر الذي يحتوي على معرف reset
، يجب إيقاف أي موقت تشغيل ، يجب أن ترجع القيمة في id="break-length"
إلى 5
، فيجب أن ترجع القيمة داخل id="session-length"
إلى 25 ، والعنصر الذي له id="time-left"
يجب إعادة تعيينه إلى حالته الافتراضية. قصة المستخدم رقم 12: عندما أنقر على العنصر بمعرّف break-decrement
، فإن القيمة ضمن break-decrement
id="break-length"
بقيمة 1 ، ويمكنني رؤية القيمة المحدّثة. قصة المستخدم رقم 13: عندما أنقر على العنصر الذي يحتوي على معرّف break-increment
، فإن القيمة ضمن break-increment
id="break-length"
بقيمة 1 ، ويمكنني رؤية القيمة المحدّثة. قصة المستخدم رقم 14: عندما أنقر على العنصر بمعرّف session-decrement
، فإن القيمة ضمن session-decrement
id="session-length"
بقيمة 1 ، ويمكنني رؤية القيمة المحدّثة. قصة المستخدم رقم 15: عندما أنقر على العنصر بمعرّف session-increment
، فإن القيمة ضمن قيمة id="session-length"
بقيمة 1 ، ويمكنني رؤية القيمة المحدّثة. قصة المستخدم رقم 16: لا يجب أن أتمكن من تعيين جلسة أو طول للكسر إلى <= 0. قصة المستخدم رقم 17: لا ينبغي أن أتمكن من تعيين جلسة أو طول للكسر إلى> 60. قصة المستخدم رقم 18: عندما أكون أولاً ، انقر فوق العنصر مع id="start_stop"
، يجب أن يبدأ تشغيل جهاز ضبط الوقت من القيمة المعروضة حاليًا في id="session-length"
، حتى إذا تم زيادة القيمة أو إنقاصها من القيمة الأصلية لـ 25. قصة المستخدم رقم 19 : إذا كان المؤقت يعمل ، فيجب أن يعرض العنصر ذو معرف time-left
الوقت المتبقي بتنسيق mm:ss
(يتناقص بقيمة 1 وتحديث العرض كل 1000ms). قصة المستخدم رقم 20: إذا كان المؤقت يعمل id="start_stop"
على العنصر الذي يحمل id="start_stop"
، فيجب أن يتوقف العد التنازلي. قصة المستخدم رقم 21: إذا تم إيقاف المؤقت مؤقتًا ، id="start_stop"
على العنصر ذي id="start_stop"
، فيجب استئناف تشغيل العد التنازلي من النقطة التي تم إيقافها مؤقتًا فيها. قصة المستخدم رقم 22: عندما يصل العد التنازلي للجلسة إلى الصفر (ملاحظة: يجب أن يصل الموقت إلى 00:00) ، ويبدأ العد التنازلي الجديد ، يجب أن يعرض العنصر ذو معرف timer-label
سلسلة تشير إلى بداية فاصل. قصة المستخدم رقم 23: عندما يصل العد التنازلي للجلسة إلى الصفر (ملاحظة: يجب أن يصل الموقت إلى 00:00) ، يجب أن يبدأ العد التنازلي للفصل الجديد ، مع احتسابه من القيمة المعروضة حاليًا في عنصر id="break-length"
. قصة المستخدم رقم 24: عندما يصل العد التنازلي للكسر إلى الصفر (ملاحظة: يجب أن يصل الموقت إلى 00:00) ، ويبدأ العد التنازلي الجديد ، يجب أن يعرض العنصر ذو معرف timer-label
سلسلة تشير إلى بدء جلسة. قصة المستخدم رقم 25: عندما يصل العد التنازلي للكسر إلى الصفر (ملاحظة: يجب أن يصل الموقت إلى 00:00) ، يجب أن يبدأ العد التنازلي للجلسة الجديدة ، مع احتساب القيمة من القيمة المعروضة حاليًا في عنصر id="session-length"
. قصة المستخدم رقم 26: عندما يصل العد التنازلي إلى الصفر (ملاحظة: يجب أن يصل الموقت إلى 00:00) ، يجب تشغيل صوت يشير إلى أن الوقت قد انتهى. يجب أن يستخدم هذا علامة audio
HTML5 ويكون له id="beep"
. قصة المستخدم رقم 27: يجب أن يكون عنصر الصوت الذي يحتوي على id="beep"
ثانية واحدة أو أكثر. قصة المستخدم رقم 28: يجب إيقاف تشغيل العنصر الصوتي بمعرف beep
ويتم إعادة لفه إلى البداية عند النقر فوق العنصر الذي يحتوي على معرف reset
التعيين. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. id="break-label"
يحتوي على سلسلة (مثل "Break Length"). قصة المستخدم رقم 2: يمكنني رؤية عنصر له id="session-label"
يحتوي على سلسلة (مثل "طول الجلسة"). قصة المستخدم رقم 3: يمكنني رؤية عنصرين قابلين للنقر مع المعرفات المقابلة: id="break-decrement"
و id="session-decrement"
. قصة المستخدم رقم 4: يمكنني رؤية عنصرين قابلين للنقر مع المعرفات المقابلة: id="break-increment"
و id="session-increment"
. قصة المستخدم رقم 5: يمكنني رؤية عنصر له id="break-length"
، والذي يعرض افتراضيًا (عند التحميل) قيمة 5. قصة المستخدم رقم 6: يمكنني رؤية عنصر له id="session-length"
مناظر id="session-length"
، والتي تعرض افتراضيًا قيمة 25. قصة المستخدم رقم 7: يمكنني رؤية عنصر له id="timer-label"
المقابلة id="timer-label"
، يحتوي على سلسلة تشير إلى جلسة تمت تهيئتها (على سبيل المثال" جلسة ") . قصة المستخدم رقم 8: يمكنني رؤية عنصر له id="time-left"
. ملاحظة: متوقفة مؤقتًا أو قيد التشغيل ، يجب دائمًا عرض القيمة في هذا الحقل بتنسيق mm:ss
(أي 25:00). قصة المستخدم رقم 9: يمكنني رؤية عنصر قابل للنقر به id="start_stop"
مناظر id="start_stop"
. قصة المستخدم رقم 10: يمكنني رؤية عنصر قابل للنقر به id="reset"
مناظر id="reset"
. قصة المستخدم رقم 11: عندما أنقر على العنصر الذي يحتوي على معرف reset
، يجب إيقاف أي موقت تشغيل ، يجب أن ترجع القيمة في id="break-length"
إلى 5
، فيجب أن ترجع القيمة داخل id="session-length"
إلى 25 ، والعنصر الذي له id="time-left"
يجب إعادة تعيينه إلى حالته الافتراضية. قصة المستخدم رقم 12: عندما أنقر على العنصر بمعرّف break-decrement
، فإن القيمة ضمن break-decrement
id="break-length"
بقيمة 1 ، ويمكنني رؤية القيمة المحدّثة. قصة المستخدم رقم 13: عندما أنقر على العنصر الذي يحتوي على معرّف break-increment
، فإن القيمة ضمن break-increment
id="break-length"
بقيمة 1 ، ويمكنني رؤية القيمة المحدّثة. قصة المستخدم رقم 14: عندما أنقر على العنصر بمعرّف session-decrement
، فإن القيمة ضمن session-decrement
id="session-length"
بقيمة 1 ، ويمكنني رؤية القيمة المحدّثة. قصة المستخدم رقم 15: عندما أنقر على العنصر بمعرّف session-increment
، فإن القيمة ضمن قيمة id="session-length"
بقيمة 1 ، ويمكنني رؤية القيمة المحدّثة. قصة المستخدم رقم 16: لا يجب أن أتمكن من تعيين جلسة أو طول للكسر إلى <= 0. قصة المستخدم رقم 17: لا ينبغي أن أتمكن من تعيين جلسة أو طول للكسر إلى> 60. قصة المستخدم رقم 18: عندما أكون أولاً ، انقر فوق العنصر مع id="start_stop"
، يجب أن يبدأ تشغيل جهاز ضبط الوقت من القيمة المعروضة حاليًا في id="session-length"
، حتى إذا تم زيادة القيمة أو إنقاصها من القيمة الأصلية لـ 25. قصة المستخدم رقم 19 : إذا كان المؤقت يعمل ، فيجب أن يعرض العنصر ذو معرف time-left
الوقت المتبقي بتنسيق mm:ss
(يتناقص بقيمة 1 وتحديث العرض كل 1000ms). قصة المستخدم رقم 20: إذا كان المؤقت يعمل id="start_stop"
على العنصر الذي يحمل id="start_stop"
، فيجب أن يتوقف العد التنازلي. قصة المستخدم رقم 21: إذا تم إيقاف المؤقت مؤقتًا ، id="start_stop"
على العنصر ذي id="start_stop"
، فيجب استئناف تشغيل العد التنازلي من النقطة التي تم إيقافها مؤقتًا فيها. قصة المستخدم رقم 22: عندما يصل العد التنازلي للجلسة إلى الصفر (ملاحظة: يجب أن يصل الموقت إلى 00:00) ، ويبدأ العد التنازلي الجديد ، يجب أن يعرض العنصر ذو معرف timer-label
سلسلة تشير إلى بداية فاصل. قصة المستخدم رقم 23: عندما يصل العد التنازلي للجلسة إلى الصفر (ملاحظة: يجب أن يصل الموقت إلى 00:00) ، يجب أن يبدأ العد التنازلي للفصل الجديد ، مع احتسابه من القيمة المعروضة حاليًا في عنصر id="break-length"
. قصة المستخدم رقم 24: عندما يصل العد التنازلي للكسر إلى الصفر (ملاحظة: يجب أن يصل الموقت إلى 00:00) ، ويبدأ العد التنازلي الجديد ، يجب أن يعرض العنصر ذو معرف timer-label
سلسلة تشير إلى بدء جلسة. قصة المستخدم رقم 25: عندما يصل العد التنازلي للكسر إلى الصفر (ملاحظة: يجب أن يصل الموقت إلى 00:00) ، يجب أن يبدأ العد التنازلي للجلسة الجديدة ، مع احتساب القيمة من القيمة المعروضة حاليًا في عنصر id="session-length"
. قصة المستخدم رقم 26: عندما يصل العد التنازلي إلى الصفر (ملاحظة: يجب أن يصل الموقت إلى 00:00) ، يجب تشغيل صوت يشير إلى أن الوقت قد انتهى. يجب أن يستخدم هذا علامة audio
HTML5 ويكون له id="beep"
. قصة المستخدم رقم 27: يجب أن يكون عنصر الصوت الذي يحتوي على id="beep"
ثانية واحدة أو أكثر. قصة المستخدم رقم 28: يجب إيقاف تشغيل العنصر الصوتي بمعرف beep
ويتم إعادة لفه إلى البداية عند النقر فوق العنصر الذي يحتوي على معرف reset
التعيين. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. id="quote-box"
مناظر id="quote-box"
. قصة المستخدم رقم 2: داخل #quote-box
، يمكنني رؤية عنصر له id="text"
. قصة المستخدم رقم 3: داخل #quote-box
، يمكنني رؤية عنصر له id="author"
. قصة المستخدم رقم 4: داخل #quote-box
، يمكنني رؤية عنصر قابل للنقر به id="new-quote"
مناظر id="new-quote"
. قصة المستخدم رقم 5: داخل #quote-box
، أستطيع أن أرى كلمة قابلة للنقر id="tweet-quote"
المقابلة id="tweet-quote"
. قصة المستخدم رقم 6: عند التحميل الأول ، يعرض جهاز عرض الأسعار اقتباسًا عشوائيًا في العنصر مع id="text"
. قصة المستخدم رقم 7: عند التحميل الأول ، يعرض جهاز عرض الأسعار الخاص بي مؤلف الاقتباس العشوائي في العنصر مع id="author"
. قصة المستخدم رقم 8: عندما يتم النقر على الزر #new-quote
، يجب أن يجلب جهاز عرض الأسعار الخاص بي عرض أسعار جديدًا #text
عنصر #text
. قصة المستخدم رقم 9: يجب أن تحضر جهاز عرض الأسعار الخاص بي مؤلف الاقتباس الجديد عندما يتم النقر على زر #new-quote
وعرضه في عنصر #author
. قصة المستخدم # 10: أستطيع أن تغرد الاقتباس الحالي بالضغط على #tweet-quote
a
العنصر. هذا a
ينبغي أن تتضمن عنصرا من "twitter.com/intent/tweet"
المسار في انها href
السمة إلى تغرد الاقتباس الحالي. قصة المستخدم رقم 11: يجب أن يكون عنصر مجمّع #quote-box
أفقيًا في الوسط. يرجى تشغيل اختبارات بمستوى التكبير في المتصفح بنسبة 100٪ وزيادة حجم الصفحة. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. id="quote-box"
مناظر id="quote-box"
. قصة المستخدم رقم 2: داخل #quote-box
، يمكنني رؤية عنصر له id="text"
. قصة المستخدم رقم 3: داخل #quote-box
، يمكنني رؤية عنصر له id="author"
. قصة المستخدم رقم 4: داخل #quote-box
، يمكنني رؤية عنصر قابل للنقر به id="new-quote"
مناظر id="new-quote"
. قصة المستخدم رقم 5: داخل #quote-box
، أستطيع أن أرى كلمة قابلة للنقر id="tweet-quote"
المقابلة id="tweet-quote"
. قصة المستخدم رقم 6: عند التحميل الأول ، يعرض جهاز عرض الأسعار اقتباسًا عشوائيًا في العنصر مع id="text"
. قصة المستخدم رقم 7: عند التحميل الأول ، يعرض جهاز عرض الأسعار الخاص بي مؤلف الاقتباس العشوائي في العنصر مع id="author"
. قصة المستخدم رقم 8: عندما يتم النقر على الزر #new-quote
، يجب أن يجلب جهاز عرض الأسعار الخاص بي عرض أسعار جديدًا #text
عنصر #text
. قصة المستخدم رقم 9: يجب أن تحضر جهاز عرض الأسعار الخاص بي مؤلف الاقتباس الجديد عندما يتم النقر على زر #new-quote
وعرضه في عنصر #author
. قصة المستخدم # 10: أستطيع أن تغرد الاقتباس الحالي بالضغط على #tweet-quote
a
العنصر. هذا a
ينبغي أن تتضمن عنصرا من "twitter.com/intent/tweet"
المسار في انها href
السمة إلى تغرد الاقتباس الحالي. قصة المستخدم رقم 11: يجب أن يكون عنصر مجمّع #quote-box
أفقيًا في الوسط. يرجى تشغيل اختبارات بمستوى التكبير في المتصفح بنسبة 100٪ وزيادة حجم الصفحة. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. size
的长度(第二个参数),并将它们作为二维数组返回。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 size
的长度(第二个参数),并将它们作为二维数组返回。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 str
)是否以给定的目标字符串(第二个参数, target
)结束。这个挑战可以通过.endsWith()
中引入的.endsWith()
方法来解决。但是出于这个挑战的目的,我们希望您使用其中一个JavaScript子字符串方法。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 str
)是否以给定的目标字符串(第二个参数, target
)结束。这个挑战可以通过.endsWith()
中引入的.endsWith()
方法来解决。但是出于这个挑战的目的,我们希望您使用其中一个JavaScript子字符串方法。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 n!
表示n!
例如: 5! = 1 * 2 * 3 * 4 * 5 = 120
只有大于或等于零的整数才会被提供给该函数。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 n!
表示n!
例如: 5! = 1 * 2 * 3 * 4 * 5 = 120
只有大于或等于零的整数才会被提供给该函数。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 false
, null
, 0
, ""
, undefined
和NaN
。提示:尝试将每个值转换为布尔值。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 false
, null
, 0
, ""
, undefined
和NaN
。提示:尝试将每个值转换为布尔值。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 ["hello", "Hello"]
应该返回true,因为第二个字符串中的所有字母都出现在第一个字母中,忽略大小写。参数["hello", "hey"]
应返回false,因为字符串“hello”不包含“y”。最后, ["Alien", "line"]
应该返回true,因为“line”中的所有字母都出现在“Alien”中。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 ["hello", "Hello"]
应该返回true,因为第二个字符串中的所有字母都出现在第一个字母中,忽略大小写。参数["hello", "hey"]
应返回false,因为字符串“hello”不包含“y”。最后, ["Alien", "line"]
应该返回true,因为“line”中的所有字母都出现在“Alien”中。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 num
times(第二个参数)重复给定的字符串str
(第一个参数)。如果num
不是正数,则返回空字符串。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 num
times(第二个参数)重复给定的字符串str
(第一个参数)。如果num
不是正数,则返回空字符串。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 arr[i]
访问每个成员。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 arr[i]
访问每个成员。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 slice
和splice
按顺序将第一个数组的每个元素复制到第二个数组中。开始在第二个数组的索引n
处插入元素。返回结果数组。函数运行后,输入数组应保持不变。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 slice
和splice
按顺序将第一个数组的每个元素复制到第二个数组中。开始在第二个数组的索引n
处插入元素。返回结果数组。函数运行后,输入数组应保持不变。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 ...
结尾的截断字符串。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 ...
结尾的截断字符串。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 getIndexToIns([1,2,3,4], 1.5)
应返回1
因为它大于1
(索引0),但小于2
(索引1)。同样, getIndexToIns([20,3,5], 19)
应返回2
因为一旦数组已经排序,它将看起来像[3,5,20]
, 19
小于20
(索引2)并且大于5
(指数1)。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 getIndexToIns([1,2,3,4], 1.5)
应返回1
因为它大于1
(索引0),但小于2
(索引1)。同样, getIndexToIns([20,3,5], 19)
应返回2
因为一旦数组已经排序,它将看起来像[3,5,20]
, 19
小于20
(索引2)并且大于5
(指数1)。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 addTogether(2, 3)
应返回5
, addTogether(2)
应返回一个函数。使用单个参数调用此返回函数将返回总和: var sumTwoAnd = addTogether(2);
sumTwoAnd(3)
返回5
。如果任一参数不是有效数字,则返回undefined。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 addTogether(2, 3)
应返回5
, addTogether(2)
应返回一个函数。使用单个参数调用此返回函数将返回总和: var sumTwoAnd = addTogether(2);
sumTwoAnd(3)
返回5
。如果任一参数不是有效数字,则返回undefined。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 &
, <
, >
, "
(双引号)和'
(撇号)转换为相应的HTML实体。如果卡住,请记住使用Read-Search-Ask 。尝试配对程序。写下你的自己的代码。 &
, <
, >
, "
(双引号)和'
(撇号)转换为相应的HTML实体。如果卡住,请记住使用Read-Search-Ask 。尝试配对程序。写下你的自己的代码。 arr
,迭代并从第一个元素(0索引)开始删除每个元素,直到函数func
在迭代元素通过它时返回true
。然后在条件满足后返回数组的其余部分,否则, arr
应作为空数组返回。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 arr
,迭代并从第一个元素(0索引)开始删除每个元素,直到函数func
在迭代元素通过它时返回true
。然后在条件满足后返回数组的其余部分,否则, arr
应作为空数组返回。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 pre
将一个对象的属性,你需要返回true
,如果它的值是truthy
。否则,返回false
。在JavaScript中, truthy
值是在布尔上下文中计算时转换为true
的值。请记住,您可以通过点表示法或[]
表示法访问对象属性。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 pre
将一个对象的属性,你需要返回true
,如果它的值是truthy
。否则,返回false
。在JavaScript中, truthy
值是在布尔上下文中计算时转换为true
的值。请记住,您可以通过点表示法或[]
表示法访问对象属性。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 getFirstName()getLastName()getFullName()setFirstName(first)setLastName(last)setFullName(firstAndLast)运行测试以查看每个方法的预期输出。采用参数的方法必须只接受一个参数,并且必须是一个字符串。这些方法必须是与对象交互的唯一可用方法。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。
getFirstName()getLastName()getFullName()setFirstName(first)setLastName(last)setFullName(firstAndLast)运行测试以查看每个方法的预期输出。采用参数的方法必须只接受一个参数,并且必须是一个字符串。这些方法必须是与对象交互的唯一可用方法。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。
{name: 'name', avgAlt: avgAlt}
格式的对象。您可以在维基百科上阅读有关轨道周期的信息 。值应四舍五入到最接近的整数。轨道上的身体是地球。地球半径为6367.4447公里,地球的GM值为398600.4418 km 3 s -2 。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 {name: 'name', avgAlt: avgAlt}
格式的对象。您可以在维基百科上阅读有关轨道周期的信息 。值应四舍五入到最接近的整数。轨道上的身体是地球。地球半径为6367.4447公里,地球的GM值为398600.4418 km 3 s -2 。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 arguments
对象。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 arguments
对象。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 num
,返回小于或等于num
的所有奇数Fibonacci数的总和。 Fibonacci序列中的前两个数字是1和1.序列中的每个附加数字是前两个数字的总和。 Fibonacci序列的前六个数字是sumFibs(10)
和8.例如, sumFibs(10)
应该返回10
因为小于或等于10
所有奇数Fibonacci数都是sumFibs(10)
和5.如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 num
,返回小于或等于num
的所有奇数Fibonacci数的总和。 Fibonacci序列中的前两个数字是1和1.序列中的每个附加数字是前两个数字的总和。 Fibonacci序列的前六个数字是sumFibs(10)
和8.例如, sumFibs(10)
应该返回10
因为小于或等于10
所有奇数Fibonacci数都是sumFibs(10)
和5.如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]
,第二个参数是{ last: "Capulet" }
,然后你必须从数组(第一个参数)返回第三个对象,因为它包含名称及其值,它作为第二个参数传递。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]
,第二个参数是{ last: "Capulet" }
,然后你必须从数组(第一个参数)返回第三个对象,因为它包含名称及其值,它作为第二个参数传递。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 Caesar cipher
,也称为shift cipher
。在shift cipher
中,字母的含义被移动一些设定量。一种常见的现代用途是ROT13密码,其中字母的值移动了13个位置。因此'A'''N','B'''O'等等。编写一个函数,它将ROT13编码的字符串作为输入并返回一个已解码的字符串。所有字母都是大写的。不要转换任何非字母字符(即空格,标点符号),但要传递它们。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 Caesar cipher
,也称为shift cipher
。在shift cipher
中,字母的含义被移动一些设定量。一种常见的现代用途是ROT13密码,其中字母的值移动了13个位置。因此'A'''N','B'''O'等等。编写一个函数,它将ROT13编码的字符串作为输入并返回一个已解码的字符串。所有字母都是大写的。不要转换任何非字母字符(即空格,标点符号),但要传递它们。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 checkCashRegister()
,它接受购买价格作为第一个参数( price
),支付作为第二个参数( cash
),以及现金抽屉( cid
)作为第三个参数。 cid
是列出可用货币的2D数组。 checkCashRegister()
函数应始终返回带有status
键和change
键的对象。返回{status: "INSUFFICIENT_FUNDS", change: []}
如果出现的现金少于到期的更改,或者如果您无法返回确切的更改。返回{status: "CLOSED", change: [...]}
使用cash-in-drawer作为密钥change
的值,如果它等于更改到期。否则,返回{status: "OPEN", change: [...]}
,以硬币和账单中的更改到期,按从最高到最低的顺序排序,作为change
密钥的值。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 货币单位 | 量 |
---|---|
一分钱 | 0.01美元(PENNY) |
镍 | 0.05美元(NICKEL) |
十分钱 | 0.1美元(DIME) |
25美分硬币 | 0.25美元(季) |
美元 | 1美元(美元) |
五美元 | 5美元(五) |
十美元 | 10美元(10日) |
二十美元 | 20美元(二十美元) |
一百元 | 100美元(一百) |
checkCashRegister()
,它接受购买价格作为第一个参数( price
),支付作为第二个参数( cash
),以及现金抽屉( cid
)作为第三个参数。 cid
是列出可用货币的2D数组。 checkCashRegister()
函数应始终返回带有status
键和change
键的对象。返回{status: "INSUFFICIENT_FUNDS", change: []}
如果出现的现金少于到期的更改,或者如果您无法返回确切的更改。返回{status: "CLOSED", change: [...]}
使用cash-in-drawer作为密钥change
的值,如果它等于更改到期。否则,返回{status: "OPEN", change: [...]}
,以硬币和账单中的更改到期,按从最高到最低的顺序排序,作为change
密钥的值。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 货币单位 | 量 |
---|---|
一分钱 | 0.01美元(PENNY) |
镍 | 0.05美元(NICKEL) |
十分钱 | 0.1美元(DIME) |
25美分硬币 | 0.25美元(季) |
美元 | 1美元(美元) |
五美元 | 5美元(五) |
十美元 | 10美元(10日) |
二十美元 | 20美元(二十美元) |
一百元 | 100美元(一百) |
true
。否则,返回false
。 回文是一个单词或句子,其拼写方式与前后相同,忽略标点符号,大小写和间距。 注意 "racecar"
, "RaceCar"
和"race CAR"
等等。我们还将传递带有特殊符号的字符串,例如"2A3*3a2"
, "2A3 3a2"
和"2_A3*3#A2"
。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 true
。否则,返回false
。 回文是一个单词或句子,其拼写方式与前后相同,忽略标点符号,大小写和间距。 注意 "racecar"
, "RaceCar"
和"race CAR"
等等。我们还将传递带有特殊符号的字符串,例如"2A3*3a2"
, "2A3 3a2"
和"2_A3*3#A2"
。如果卡住,请记得使用Read-Search-Ask 。编写自己的代码。 true
。用户可以按照他们选择的方式填写表单字段,只要其具有有效美国号码的格式即可。以下是美国数字的有效格式示例(有关其他变体,请参阅下面的测试): 555-555-5555对于此挑战,您将看到一个字符串,如
(555)555-5555
(555)555-5555
555 555 5555
5555555555
1 555 555 5555
800-692-7753
或8oo-six427676;laskdjf
。您的工作是根据上面提供的任何格式组合验证或拒绝美国电话号码。区号是必需的。如果提供了国家/地区代码,则必须确认国家/地区代码为1
。如果字符串是有效的美国电话号码,则返回true
;否则返回false
。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 true
。用户可以按照他们选择的方式填写表单字段,只要其具有有效美国号码的格式即可。以下是美国数字的有效格式示例(有关其他变体,请参阅下面的测试): 555-555-5555对于此挑战,您将看到一个字符串,如
(555)555-5555
(555)555-5555
555 555 5555
5555555555
1 555 555 5555
800-692-7753
或8oo-six427676;laskdjf
。您的工作是根据上面提供的任何格式组合验证或拒绝美国电话号码。区号是必需的。如果提供了国家/地区代码,则必须确认国家/地区代码为1
。如果字符串是有效的美国电话号码,则返回true
;否则返回false
。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 id="drum-machine"
的外部容器,其中包含所有其他元素。 用户故事#2:在#drum-machine
我可以看到一个具有相应id="display"
的元素。 用户故事#3:在#drum-machine
我可以看到9个可点击的鼓垫元素,每个鼓垫元素都有一个drum-pad
的类名,一个唯一的id描述了鼓垫将被设置为触发的音频片段,以及一个内部与键盘上的以下键之一对应的文本:Q,W,E,A,S,D,Z,X,C。鼓垫必须按此顺序排列。 用户故事#4:在每个.drum-pad
,应该有一个HTML5 audio
其具有元件src
指向音频剪辑,一个类名称属性clip
,以及对应于其父的内文本的ID .drum-pad
(例如id="Q"
, id="W"
, id="E"
等)。 用户故事#5:当我点击.drum-pad
元素时,应该触发其子audio
元素中包含的音频剪辑。 用户故事#6:当我按下与每个.drum-pad
相关联的触发键时,应触发其子audio
元素中包含的音频剪辑(例如,按下Q键应触发包含字符串“Q”的鼓垫,按下W键应触发包含字符串“W”等的鼓垫。 用户故事#7:当触发.drum-pad
,描述相关音频剪辑的字符串将显示为#display
元素的内部文本(每个字符串必须是唯一的)。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="drum-machine"
的外部容器,其中包含所有其他元素。 用户故事#2:在#drum-machine
我可以看到一个具有相应id="display"
的元素。 用户故事#3:在#drum-machine
我可以看到9个可点击的鼓垫元素,每个鼓垫元素都有一个drum-pad
的类名,一个唯一的id描述了鼓垫将被设置为触发的音频片段,以及一个内部与键盘上的以下键之一对应的文本:Q,W,E,A,S,D,Z,X,C。鼓垫必须按此顺序排列。 用户故事#4:在每个.drum-pad
,应该有一个HTML5 audio
其具有元件src
指向音频剪辑,一个类名称属性clip
,以及对应于其父的内文本的ID .drum-pad
(例如id="Q"
, id="W"
, id="E"
等)。 用户故事#5:当我点击.drum-pad
元素时,应该触发其子audio
元素中包含的音频剪辑。 用户故事#6:当我按下与每个.drum-pad
相关联的触发键时,应触发其子audio
元素中包含的音频剪辑(例如,按下Q键应触发包含字符串“Q”的鼓垫,按下W键应触发包含字符串“W”等的鼓垫。 用户故事#7:当触发.drum-pad
,描述相关音频剪辑的字符串将显示为#display
元素的内部文本(每个字符串必须是唯一的)。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 =
(等号),对应的id="equals"
。 用户故事#2:我的计算器应该包含10个可点击的元素,每个元素包含一个0-9的数字,并带有以下相应的ID: id="zero"
, id="one"
, id="two"
, id="three"
, id="four"
, id="five"
, id="six"
, id="seven"
, id="eight"
, id="nine"
。 用户故事#3:我的计算器应该包含4个可点击的元素,每个元素包含4个主要数学运算符之一,并带有以下相应的ID: id="add"
, id="subtract"
, id="multiply"
, id="divide"
。 用户故事#4:我的计算器应该包含一个包含a的可点击元素.
(小数点)符号,对应id="decimal"
。 用户故事#5:我的计算器应包含一个id="clear"
的可点击元素。 用户故事#6:我的计算器应包含一个元素,用于显示具有相应id="display"
。 用户故事#7:任何时候,按清除按钮清除输入和输出值,并将计算器返回到初始化状态; 0应该显示在id为display
的元素中。 用户故事#8:当我输入数字时,我应该能够在display
id的元素中看到我的输入。 用户故事#9:无论如何,我应该能够对任意长度的数字链进行加,减,乘和除,当我点击=
,正确的结果应显示在带有display
id的元素中。 用户故事#10:输入数字时,我的计算器不应允许数字以多个零开头。 用户故事#11:单击小数元素时,a .
应附加到当前显示的值;二.
一个号码不应被接受。 用户故事#12:我应该能够对包含小数点的数字执行任何操作(+, - ,*,/)。 用户故事#13:如果连续输入2个或更多操作员,则执行的操作应该是最后输入的操作员。 用户故事#14:紧跟在=
按操作员应该开始一个新计算,该计算对先前评估的结果进行操作。 用户故事#15:我的计算器应有的精度几位小数,当谈到四舍五入(注意,目前还没有确切的标准,但你应该能够处理这样的计算2 / 7
合理精确到至少4位小数) 。 关于计算器逻辑的注意事项:应该注意的是,计算器输入逻辑有两种主要的思想流派: 立即执行逻辑和公式逻辑 。我们的示例使用公式逻辑并遵守操作优先顺序,而立即执行则不然。两者都是可以接受的,但请注意,根据您的选择,您的计算器可能会产生与我们的计算结果不同的某些公式(参见下面的示例)。只要您的数学可以通过其他生产计算器进行验证,请不要将此视为错误。 示例: 3 + 5 x 6 - 2 / 4 =
11.5
32.5
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 =
(等号),对应的id="equals"
。 用户故事#2:我的计算器应该包含10个可点击的元素,每个元素包含一个0-9的数字,并带有以下相应的ID: id="zero"
, id="one"
, id="two"
, id="three"
, id="four"
, id="five"
, id="six"
, id="seven"
, id="eight"
, id="nine"
。 用户故事#3:我的计算器应该包含4个可点击的元素,每个元素包含4个主要数学运算符之一,并带有以下相应的ID: id="add"
, id="subtract"
, id="multiply"
, id="divide"
。 用户故事#4:我的计算器应该包含一个包含a的可点击元素.
(小数点)符号,对应id="decimal"
。 用户故事#5:我的计算器应包含一个id="clear"
的可点击元素。 用户故事#6:我的计算器应包含一个元素,用于显示具有相应id="display"
。 用户故事#7:任何时候,按清除按钮清除输入和输出值,并将计算器返回到初始化状态; 0应该显示在id为display
的元素中。 用户故事#8:当我输入数字时,我应该能够在display
id的元素中看到我的输入。 用户故事#9:无论如何,我应该能够对任意长度的数字链进行加,减,乘和除,当我点击=
,正确的结果应显示在带有display
id的元素中。 用户故事#10:输入数字时,我的计算器不应允许数字以多个零开头。 用户故事#11:单击小数元素时,a .
应附加到当前显示的值;二.
一个号码不应被接受。 用户故事#12:我应该能够对包含小数点的数字执行任何操作(+, - ,*,/)。 用户故事#13:如果连续输入2个或更多操作员,则执行的操作应该是最后输入的操作员。 用户故事#14:紧跟在=
按操作员应该开始一个新计算,该计算对先前评估的结果进行操作。 用户故事#15:我的计算器应有的精度几位小数,当谈到四舍五入(注意,目前还没有确切的标准,但你应该能够处理这样的计算2 / 7
合理精确到至少4位小数) 。 关于计算器逻辑的注意事项:应该注意的是,计算器输入逻辑有两种主要的思想流派: 立即执行逻辑和公式逻辑 。我们的示例使用公式逻辑并遵守操作优先顺序,而立即执行则不然。两者都是可以接受的,但请注意,根据您的选择,您的计算器可能会产生与我们的计算结果不同的某些公式(参见下面的示例)。只要您的数学可以通过其他生产计算器进行验证,请不要将此视为错误。 示例: 3 + 5 x 6 - 2 / 4 =
11.5
32.5
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="editor"
的textarea
元素。 用户故事#2:我可以看到一个具有相应id="preview"
的元素。 用户故事#3:当我文本输入到#editor
元件,所述#preview
如I型显示textarea的内容元素被更新。 用户故事#4:当我在#editor
元素中输入GitHub风格的markdown时,文本在我输入的#preview
元素中呈现为HTML(提示:您不需要自己解析Markdown - 您可以导入Marked库为此: https : //cdnjs.com/libraries/marked )。 用户故事#5:当我的降价预览器首次加载时, # #editor
字段中的默认文本应包含有效的markdown,它至少代表以下每个元素之一:标题(H1大小),子标题(H2大小) ,链接,内联代码,代码块,列表项,块引用,图像和粗体文本。 用户故事#6:首次加载我的降价预览器时, # #editor
字段中的默认降价应该在#preview
元素中呈现为HTML。 可选的奖励(您不需要进行此测试通过):我的降价预览器解释回车并将它们呈现为br
(换行符)元素。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="editor"
的textarea
元素。 用户故事#2:我可以看到一个具有相应id="preview"
的元素。 用户故事#3:当我文本输入到#editor
元件,所述#preview
如I型显示textarea的内容元素被更新。 用户故事#4:当我在#editor
元素中输入GitHub风格的markdown时,文本在我输入的#preview
元素中呈现为HTML(提示:您不需要自己解析Markdown - 您可以导入Marked库为此: https : //cdnjs.com/libraries/marked )。 用户故事#5:当我的降价预览器首次加载时, # #editor
字段中的默认文本应包含有效的markdown,它至少代表以下每个元素之一:标题(H1大小),子标题(H2大小) ,链接,内联代码,代码块,列表项,块引用,图像和粗体文本。 用户故事#6:首次加载我的降价预览器时, # #editor
字段中的默认降价应该在#preview
元素中呈现为HTML。 可选的奖励(您不需要进行此测试通过):我的降价预览器解释回车并将它们呈现为br
(换行符)元素。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="break-label"
的元素,其中包含一个字符串(例如“Break Length”)。 用户故事#2:我可以看到一个id="session-label"
的元素,其中包含一个字符串(例如“Session Length”)。 用户故事#3:我可以看到两个具有相应ID的可点击元素: id="break-decrement"
和id="session-decrement"
。 用户故事#4:我可以看到两个具有相应ID的可点击元素: id="break-increment"
和id="session-increment"
。 用户故事#5:我可以看到一个具有相应id="break-length"
的元素,默认情况下(加载时)显示值5. 用户故事#6:我可以看到一个元素具有相应的id="session-length"
,默认情况下显示值25. 用户故事#7:我可以看到一个具有相应id="timer-label"
的元素,其中包含一个表示会话已初始化的字符串(例如”Session“) 。 用户故事#8:我可以看到一个对应id="time-left"
的元素。注意:暂停或运行时,此字段中的值应始终以mm:ss
格式显示(即25:00)。 用户故事#9:我可以看到一个具有相应id="start_stop"
的可点击元素。 用户故事#10:我可以看到一个具有相应id="reset"
的可点击元素。 用户故事#11:当我单击id为reset
的元素时,应该停止任何正在运行的计时器, id="break-length"
的值应该返回5
, id="session-length"
应该返回到25,并且id="time-left"
的元素应该重置为它的默认状态。 用户故事#12:当我单击id为break-decrement
的元素时, id="break-length"
的值会减1,我可以看到更新后的值。 用户故事#13:当我单击id为break-increment
的元素时, id="break-length"
的值会增加1,我可以看到更新后的值。 用户故事#14:当我单击session-decrement
id的元素时, id="session-length"
的值减1,我可以看到更新后的值。 用户故事#15:当我单击session-increment
为id的元素时, id="session-length"
的值会增加1,我可以看到更新后的值。 用户故事#16:我不能将会话或休息长度设置为<= 0. 用户故事#17:我不能将会话或休息时间设置为> 60. 用户故事#18:当我首先单击id="start_stop"
的元素,计时器应该从当前显示在id="session-length"
的值开始运行,即使该值已经从原始值25递增或递减。 用户故事#19 :如果计时器正在运行,则id为time-left
的元素应以mm:ss
格式显示剩余时间(递减值1并每1000ms更新一次显示)。 用户故事#20:如果计时器正在运行并且我单击id="start_stop"
的元素,倒计时应该暂停。 用户故事#21:如果计时器暂停,我点击id="start_stop"
的元素,倒计时应该从暂停时恢复运行。 用户故事#22:当会话倒计时到达零(注意:计时器必须达到00:00),并开始新的倒计时时,id为timer-label
的元素应该显示一个表示休息已开始的字符串。 用户故事#23:当会话倒计时到达零时(注意:计时器必须达到00:00),应该开始新的中断倒计时,从当前显示在id="break-length"
元素中的值开始倒计时。 用户故事#24:当休息倒计时到达零(注意:计时器必须达到00:00),并开始新的倒计时时,id为timer-label
的元素应显示一个表示会话已开始的字符串。 用户故事#25:当休息倒计时到达零时(注意:计时器必须达到00:00),应开始新的会话倒计时,从当前显示在id="session-length"
元素中的值开始倒计时。 用户故事#26:当倒计时到零时(注意:计时器必须达到00:00),应播放表示时间到了的声音。这应该使用HTML5 audio
标签并具有相应的id="beep"
。 用户故事#27: id="beep"
的音频元素必须为1秒或更长。 用户故事#28: id为beep
的音频元素必须停止播放,并在单击具有reset
id的元素时重绕到开头。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="break-label"
的元素,其中包含一个字符串(例如“Break Length”)。 用户故事#2:我可以看到一个id="session-label"
的元素,其中包含一个字符串(例如“Session Length”)。 用户故事#3:我可以看到两个具有相应ID的可点击元素: id="break-decrement"
和id="session-decrement"
。 用户故事#4:我可以看到两个具有相应ID的可点击元素: id="break-increment"
和id="session-increment"
。 用户故事#5:我可以看到一个具有相应id="break-length"
的元素,默认情况下(加载时)显示值5. 用户故事#6:我可以看到一个元素具有相应的id="session-length"
,默认情况下显示值25. 用户故事#7:我可以看到一个具有相应id="timer-label"
的元素,其中包含一个表示会话已初始化的字符串(例如”Session“) 。 用户故事#8:我可以看到一个对应id="time-left"
的元素。注意:暂停或运行时,此字段中的值应始终以mm:ss
格式显示(即25:00)。 用户故事#9:我可以看到一个具有相应id="start_stop"
的可点击元素。 用户故事#10:我可以看到一个具有相应id="reset"
的可点击元素。 用户故事#11:当我单击id为reset
的元素时,应该停止任何正在运行的计时器, id="break-length"
的值应该返回5
, id="session-length"
应该返回到25,并且id="time-left"
的元素应该重置为它的默认状态。 用户故事#12:当我单击id为break-decrement
的元素时, id="break-length"
的值会减1,我可以看到更新后的值。 用户故事#13:当我单击id为break-increment
的元素时, id="break-length"
的值会增加1,我可以看到更新后的值。 用户故事#14:当我单击session-decrement
id的元素时, id="session-length"
的值减1,我可以看到更新后的值。 用户故事#15:当我单击session-increment
为id的元素时, id="session-length"
的值会增加1,我可以看到更新后的值。 用户故事#16:我不能将会话或休息长度设置为<= 0. 用户故事#17:我不能将会话或休息时间设置为> 60. 用户故事#18:当我首先单击id="start_stop"
的元素,计时器应该从当前显示在id="session-length"
的值开始运行,即使该值已经从原始值25递增或递减。 用户故事#19 :如果计时器正在运行,则id为time-left
的元素应以mm:ss
格式显示剩余时间(递减值1并每1000ms更新一次显示)。 用户故事#20:如果计时器正在运行并且我单击id="start_stop"
的元素,倒计时应该暂停。 用户故事#21:如果计时器暂停,我点击id="start_stop"
的元素,倒计时应该从暂停时恢复运行。 用户故事#22:当会话倒计时到达零(注意:计时器必须达到00:00),并开始新的倒计时时,id为timer-label
的元素应该显示一个表示休息已开始的字符串。 用户故事#23:当会话倒计时到达零时(注意:计时器必须达到00:00),应该开始新的中断倒计时,从当前显示在id="break-length"
元素中的值开始倒计时。 用户故事#24:当休息倒计时到达零(注意:计时器必须达到00:00),并开始新的倒计时时,id为timer-label
的元素应显示一个表示会话已开始的字符串。 用户故事#25:当休息倒计时到达零时(注意:计时器必须达到00:00),应开始新的会话倒计时,从当前显示在id="session-length"
元素中的值开始倒计时。 用户故事#26:当倒计时到零时(注意:计时器必须达到00:00),应播放表示时间到了的声音。这应该使用HTML5 audio
标签并具有相应的id="beep"
。 用户故事#27: id="beep"
的音频元素必须为1秒或更长。 用户故事#28: id为beep
的音频元素必须停止播放,并在单击具有reset
id的元素时重绕到开头。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="quote-box"
的包装元素。 用户故事#2:在#quote-box
,我可以看到一个具有相应id="text"
的元素。 用户故事#3:在#quote-box
,我可以看到一个具有相应id="author"
的元素。 用户故事#4:在#quote-box
,我可以看到一个具有相应id="new-quote"
的可点击元素。 用户故事#5:在#quote-box
,我可以看到一个可点击的id="tweet-quote"
元素。 用户故事#6:首次加载时,我的报价机器会在元素中显示一个id="text"
的随机引号。 用户故事#7:首次加载时,我的报价机器在id="author"
的元素中显示随机引用的作者。 用户故事#8:当单击#new-quote
按钮时,我的报价机应该获取一个新报价并将其显示在#text
元素中。 用户故事#9:当单击#new-quote
按钮并将其显示在#author
元素中时,我的报价机器应该获取新报价的作者。 用户故事#10:我可以点击#tweet-quote
a
元素来#tweet-quote
。这a
元素应包括"twitter.com/intent/tweet"
路径在它的href
属性鸣叫当前报价。 用户故事#11: #quote-box
包装器元素应该水平居中。请使用浏览器的缩放级别100%和页面最大化运行测试。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="quote-box"
的包装元素。 用户故事#2:在#quote-box
,我可以看到一个具有相应id="text"
的元素。 用户故事#3:在#quote-box
,我可以看到一个具有相应id="author"
的元素。 用户故事#4:在#quote-box
,我可以看到一个具有相应id="new-quote"
的可点击元素。 用户故事#5:在#quote-box
,我可以看到一个可点击的id="tweet-quote"
元素。 用户故事#6:首次加载时,我的报价机器会在元素中显示一个id="text"
的随机引号。 用户故事#7:首次加载时,我的报价机器在id="author"
的元素中显示随机引用的作者。 用户故事#8:当单击#new-quote
按钮时,我的报价机应该获取一个新报价并将其显示在#text
元素中。 用户故事#9:当单击#new-quote
按钮并将其显示在#author
元素中时,我的报价机器应该获取新报价的作者。 用户故事#10:我可以点击#tweet-quote
a
元素来#tweet-quote
。这a
元素应包括"twitter.com/intent/tweet"
路径在它的href
属性鸣叫当前报价。 用户故事#11: #quote-box
包装器元素应该水平居中。请使用浏览器的缩放级别100%和页面最大化运行测试。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="title"
。 用户故事#2:我的图表应该有一个g
元素x轴,对应的id="x-axis"
。 用户故事#3:我的图表应该有一个g
元素y轴,对应的id="y-axis"
。 用户故事#4:两个轴应包含多个刻度标签,每个刻度标签对应的class="tick"
。 用户故事#5:我的图表应该为每个数据点都有一个rect
元素,相应的class="bar"
显示数据。 用户故事#6:每个栏应具有包含日期和GDP值的属性data-date
和data-gdp
。 用户故事#7:条形元素的data-date
属性应与提供的数据的顺序相匹配。 用户故事#8:条形元素的data-gdp
属性应与提供的数据的顺序相匹配。 用户故事#9:每个条形元素的高度应准确地表示数据的相应GDP。 用户故事#10: data-date
属性及其对应的bar元素应与x轴上的对应值对齐。 用户故事#11: data-gdp
属性及其对应的bar元素应与y轴上的对应值对齐。 用户故事#12:我可以将鼠标悬停在一个区域上,并查看带有相应id="tooltip"
,其中显示有关该区域的更多信息。 用户故事#13:我的工具提示应该有一个data-date
属性,该属性对应于活动区域的data-date
。以下是完成此项目所需的数据集: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
: //raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
。完成后,将URL提交到工作项目,并传递所有测试。如果卡住,请记住使用Read-Search-Ask方法。 id="title"
。 用户故事#2:我的图表应该有一个g
元素x轴,对应的id="x-axis"
。 用户故事#3:我的图表应该有一个g
元素y轴,对应的id="y-axis"
。 用户故事#4:两个轴应包含多个刻度标签,每个刻度标签对应的class="tick"
。 用户故事#5:我的图表应该为每个数据点都有一个rect
元素,相应的class="bar"
显示数据。 用户故事#6:每个栏应具有包含日期和GDP值的属性data-date
和data-gdp
。 用户故事#7:条形元素的data-date
属性应与提供的数据的顺序相匹配。 用户故事#8:条形元素的data-gdp
属性应与提供的数据的顺序相匹配。 用户故事#9:每个条形元素的高度应准确地表示数据的相应GDP。 用户故事#10: data-date
属性及其对应的bar元素应与x轴上的对应值对齐。 用户故事#11: data-gdp
属性及其对应的bar元素应与y轴上的对应值对齐。 用户故事#12:我可以将鼠标悬停在一个区域上,并查看带有相应id="tooltip"
,其中显示有关该区域的更多信息。 用户故事#13:我的工具提示应该有一个data-date
属性,该属性对应于活动区域的data-date
。以下是完成此项目所需的数据集: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
: //raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
。完成后,将URL提交到工作项目,并传递所有测试。如果卡住,请记住使用Read-Search-Ask方法。 id="title"
。 用户故事#2:我的等值应该有一个带有相应id="description"
的描述元素。 用户故事#3:我的等值应该有具有代表数据的相应class="county"
。 用户故事#4:县应该至少使用4种不同的填充颜色。 用户故事#5:我的县应该拥有包含相应的fips和教育价值的data-fips
和data-education
属性。 用户故事#6:我的等值应该为每个提供的数据点设置一个县。 用户故事#7:县应具有与样本数据匹配的数据fips和数据教育值。 用户故事#8:我的等值应该有一个带有相应id="legend"
。 用户故事#9:图例应至少使用4种不同的填充颜色。 用户故事#10:我可以将鼠标悬停在某个区域上,并查看带有相应id="tooltip"
,其中显示有关该区域的更多信息。 用户故事#11:我的工具提示应该具有与活动区域的data-education
相对应的data-education
属性。以下是完成此项目所需的数据集: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="title"
。 用户故事#2:我的等值应该有一个带有相应id="description"
的描述元素。 用户故事#3:我的等值应该有具有代表数据的相应class="county"
。 用户故事#4:县应该至少使用4种不同的填充颜色。 用户故事#5:我的县应该拥有包含相应的fips和教育价值的data-fips
和data-education
属性。 用户故事#6:我的等值应该为每个提供的数据点设置一个县。 用户故事#7:县应具有与样本数据匹配的数据fips和数据教育值。 用户故事#8:我的等值应该有一个带有相应id="legend"
。 用户故事#9:图例应至少使用4种不同的填充颜色。 用户故事#10:我可以将鼠标悬停在某个区域上,并查看带有相应id="tooltip"
,其中显示有关该区域的更多信息。 用户故事#11:我的工具提示应该具有与活动区域的data-education
相对应的data-education
属性。以下是完成此项目所需的数据集: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="title"
。 用户故事#2:我的热图应该有一个相应的id="description"
。 用户故事#3:我的热图应该有一个x轴,对应的id="x-axis"
。 用户故事#4:我的热图应该有一个y轴,对应的id="y-axis"
。 用户故事#5:我的热图应该有一个rect
元素,其中class="cell"
代表数据。 用户故事#6:细胞应至少使用4种不同的填充颜色。 用户故事#7:每个单元格将包含属性data-month
, data-year
, data-temp
其中包含相应的月,年和温度值。 用户故事#8:每个单元格的data-month
, data-year
应在数据范围内。 用户故事#9:我的热图应该具有与y轴上相应月份对齐的单元格。 用户故事#10:我的热图应该具有与x轴上相应年份对齐的单元格。 用户故事#11:我的热图在y轴上应该有多个刻度标签,并带有完整的月份名称。 用户故事#12:我的热图应该在x轴上有多个刻度标签,年份在1754到2015之间。 用户故事#13:我的热图应该有一个带有相应id="legend"
。 用户故事#14:我的图例应该包含rect
元素。 用户故事#15:图例中的rect
元素应使用至少4种不同的填充颜色。 用户故事#16:我可以将鼠标悬停在某个区域上,并查看带有相应id="tooltip"
的工具提示,该id="tooltip"
会显示有关该区域的更多信息。 用户故事#16:我的工具提示应该有一个data-year
属性,该属性对应于活动区域的data-year
。以下是完成此项目所需的数据集: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json
: //raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="title"
。 用户故事#2:我的热图应该有一个相应的id="description"
。 用户故事#3:我的热图应该有一个x轴,对应的id="x-axis"
。 用户故事#4:我的热图应该有一个y轴,对应的id="y-axis"
。 用户故事#5:我的热图应该有一个rect
元素,其中class="cell"
代表数据。 用户故事#6:细胞应至少使用4种不同的填充颜色。 用户故事#7:每个单元格将包含属性data-month
, data-year
, data-temp
其中包含相应的月,年和温度值。 用户故事#8:每个单元格的data-month
, data-year
应在数据范围内。 用户故事#9:我的热图应该具有与y轴上相应月份对齐的单元格。 用户故事#10:我的热图应该具有与x轴上相应年份对齐的单元格。 用户故事#11:我的热图在y轴上应该有多个刻度标签,并带有完整的月份名称。 用户故事#12:我的热图应该在x轴上有多个刻度标签,年份在1754到2015之间。 用户故事#13:我的热图应该有一个带有相应id="legend"
。 用户故事#14:我的图例应该包含rect
元素。 用户故事#15:图例中的rect
元素应使用至少4种不同的填充颜色。 用户故事#16:我可以将鼠标悬停在某个区域上,并查看带有相应id="tooltip"
的工具提示,该id="tooltip"
会显示有关该区域的更多信息。 用户故事#16:我的工具提示应该有一个data-year
属性,该属性对应于活动区域的data-year
。以下是完成此项目所需的数据集: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json
: //raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="title"
的title元素。 用户故事#2:我可以看到一个x轴,其对应的id="x-axis"
。 用户故事#3:我可以看到一个y轴,它具有相应的id="y-axis"
。 用户故事#4:我可以看到点,每个点都有一个dot
,表示正在绘制的数据。 用户故事#5:每个点应具有包含其对应的x和y值的属性data-xvalue
和data-yvalue
。 用户故事#6:每个点的data-xvalue
和data-yvalue
应该在实际数据的范围内,并且应该是正确的数据格式。对于data-xvalue
,可以接受整数(全年)或Date对象进行测试评估。对于data-yvalue
(分钟),请使用Date对象。 用户故事#7: data-xvalue
及其对应的点应与x轴上的对应点/值对齐。 用户故事#8: data-yvalue
及其对应的点应与y轴上的对应点/值对齐。 用户故事#9:我可以在y轴上看到多个刻度标签,其中%M:%S
时间格式。 用户故事#10:我可以在x轴上看到显示年份的多个刻度标签。 用户故事#11:我可以看到x轴标签的范围在实际的x轴数据范围内。 用户故事#12:我可以看到y轴标签的范围在实际y轴数据的范围内。 用户故事#13:我可以看到包含id="legend"
描述性文本的id="legend"
。 用户故事#14:我可以将鼠标悬停在一个区域上,并查看带有相应id="tooltip"
,其中显示有关该区域的更多信息。 用户故事#15:我的工具提示应该有一个data-year
属性,该属性对应于活动区域的data-xvalue
。以下是完成此项目所需的数据集: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json
: //raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="title"
的title元素。 用户故事#2:我可以看到一个x轴,其对应的id="x-axis"
。 用户故事#3:我可以看到一个y轴,它具有相应的id="y-axis"
。 用户故事#4:我可以看到点,每个点都有一个dot
,表示正在绘制的数据。 用户故事#5:每个点应具有包含其对应的x和y值的属性data-xvalue
和data-yvalue
。 用户故事#6:每个点的data-xvalue
和data-yvalue
应该在实际数据的范围内,并且应该是正确的数据格式。对于data-xvalue
,可以接受整数(全年)或Date对象进行测试评估。对于data-yvalue
(分钟),请使用Date对象。 用户故事#7: data-xvalue
及其对应的点应与x轴上的对应点/值对齐。 用户故事#8: data-yvalue
及其对应的点应与y轴上的对应点/值对齐。 用户故事#9:我可以在y轴上看到多个刻度标签,其中%M:%S
时间格式。 用户故事#10:我可以在x轴上看到显示年份的多个刻度标签。 用户故事#11:我可以看到x轴标签的范围在实际的x轴数据范围内。 用户故事#12:我可以看到y轴标签的范围在实际y轴数据的范围内。 用户故事#13:我可以看到包含id="legend"
描述性文本的id="legend"
。 用户故事#14:我可以将鼠标悬停在一个区域上,并查看带有相应id="tooltip"
,其中显示有关该区域的更多信息。 用户故事#15:我的工具提示应该有一个data-year
属性,该属性对应于活动区域的data-xvalue
。以下是完成此项目所需的数据集: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json
: //raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="title"
。 用户故事#2:我的树图应该有一个对应id="description"
。 用户故事#3:我的树形图应该有一个rect
元素,并且对应的class="tile"
代表数据。 用户故事#4:瓷砖应至少有2种不同的填充颜色。 用户故事#5:每个瓷砖应具有属性data-name
, data-category
,和data-value
包含其相应的名称,类别,和值。 用户故事#6:每个图块的区域应对应于数据值量:具有较大数据值的图块应具有更大的区域。 用户故事#7:我的树形图应该有一个对应id="legend"
。 用户故事#8:我的图例应该有一个带有相应class="legend-item"
rect
元素。 用户故事#9:图例中的rect
元素应使用至少2种不同的填充颜色。 用户故事#10:我可以将鼠标悬停在某个区域上,并查看带有相应id="tooltip"
,其中显示有关该区域的更多信息。 用户故事#11:我的工具提示应具有与活动区域的data-value
对应的data-value
data-value
属性。对于此项目,您可以使用以下任何数据集: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 id="title"
。 用户故事#2:我的树图应该有一个对应id="description"
。 用户故事#3:我的树形图应该有一个rect
元素,并且对应的class="tile"
代表数据。 用户故事#4:瓷砖应至少有2种不同的填充颜色。 用户故事#5:每个瓷砖应具有属性data-name
, data-category
,和data-value
包含其相应的名称,类别,和值。 用户故事#6:每个图块的区域应对应于数据值量:具有较大数据值的图块应具有更大的区域。 用户故事#7:我的树形图应该有一个对应id="legend"
。 用户故事#8:我的图例应该有一个带有相应class="legend-item"
rect
元素。 用户故事#9:图例中的rect
元素应使用至少2种不同的填充颜色。 用户故事#10:我可以将鼠标悬停在某个区域上,并查看带有相应id="tooltip"
,其中显示有关该区域的更多信息。 用户故事#11:我的工具提示应具有与活动区域的data-value
对应的data-value
data-value
属性。对于此项目,您可以使用以下任何数据集: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。 △
或⊕
)数组。给定两个集合(例如集合A = {1, 2, 3}
并且集合B = {2, 3, 4}
),两个集合的数学术语“对称差异”是在任一集合中的元素集合。两组,但两者都没有( A △ B = C = {1, 4}
)。对于你所采取的每一个额外的对称差异(比如在集合D = {2, 3}
),你应该得到具有两个集合中的任何一个但不是两个集合的元素的集合( C △ D = {1, 4} △ {2, 3} = {1, 2, 3, 4}
)。结果数组必须仅包含唯一值( 不重复 )。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 △
或⊕
)数组。给定两个集合(例如集合A = {1, 2, 3}
并且集合B = {2, 3, 4}
),两个集合的数学术语“对称差异”是在任一集合中的元素集合。两组,但两者都没有( A △ B = C = {1, 4}
)。对于你所采取的每一个额外的对称差异(比如在集合D = {2, 3}
),你应该得到具有两个集合中的任何一个但不是两个集合的元素的集合( C △ D = {1, 4} △ {2, 3} = {1, 2, 3, 4}
)。结果数组必须仅包含唯一值( 不重复 )。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 arr1
)。如果找不到商品,请将新商品和数量添加到库存数组中。返回的库存数组应按项目的字母顺序排列。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 arr1
)。如果找不到商品,请将新商品和数量添加到库存数组中。返回的库存数组应按项目的字母顺序排列。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 aab
应该返回2,因为它总共有6个排列( aab
, aab
, aba
, aba
, baa
, baa
),但只有2个( aba
和aba
)没有相同的字母(在这种情况下为a
)重复。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 aab
应该返回2,因为它总共有6个排列( aab
, aab
, aba
, aba
, baa
, baa
),但只有2个( aba
和aba
)没有相同的字母(在这种情况下为a
)重复。如果卡住,请记得使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 arr
,找到其总和等于第二个参数arg
元素对,并返回它们的索引之和。您可以使用具有相同数字元素但索引不同的多个对。每对应使用尽可能低的可用指数。一旦元素被使用,它就不能被重用来与另一个元素配对。例如, pairwise([1, 1, 2], 3)
使用indice 0处的1而不是indice 1处的1创建一对[2, 1]
,因为0 + 2 <1 + 2。例如, pairwise([7, 9, 11, 13, 15], 20)
返回6
。总和为20的对是[7, 13]
和[9, 11]
。然后我们可以用它们的索引和值写出数组。 指数 | 0 | 1 | 2 | 3 | 4 |
---|---|---|---|---|---|
值 | 7 | 9 | 11 | 13 | 15 |
6
如果卡住,请记住使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 arr
,找到其总和等于第二个参数arg
元素对,并返回它们的索引之和。您可以使用具有相同数字元素但索引不同的多个对。每对应使用尽可能低的可用指数。一旦元素被使用,它就不能被重用来与另一个元素配对。例如, pairwise([1, 1, 2], 3)
使用indice 0处的1而不是indice 1处的1创建一对[2, 1]
,因为0 + 2 <1 + 2。例如, pairwise([7, 9, 11, 13, 15], 20)
返回6
。总和为20的对是[7, 13]
和[9, 11]
。然后我们可以用它们的索引和值写出数组。 指数 | 0 | 1 | 2 | 3 | 4 |
---|---|---|---|---|---|
值 | 7 | 9 | 11 | 13 | 15 |
6
如果卡住,请记住使用Read-Search-Ask 。尝试配对程序。编写自己的代码。 https://s3.amazonaws.com/freecodecamp/simonSound1.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3
。如果卡住,请记得使用Read-Search-Ask 。完成后,单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。 https://s3.amazonaws.com/freecodecamp/simonSound1.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3
。如果卡住,请记得使用Read-Search-Ask 。完成后,单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。 https://en.wikipedia.org/wiki/Special:Random
: https://en.wikipedia.org/wiki/Special:Random
:Random。 提示#2:这是使用维基百科API的条目: https://www.mediawiki.org/wiki/API:Main_page
: https://www.mediawiki.org/wiki/API:Main_page
: https://www.mediawiki.org/wiki/API:Main_page
。 提示#3:使用此链接试验维基百科的API。如果卡住,请记得使用Read-Search-Ask 。完成后,单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。 https://en.wikipedia.org/wiki/Special:Random
: https://en.wikipedia.org/wiki/Special:Random
:Random。 提示#2:这是使用维基百科API的条目: https://www.mediawiki.org/wiki/API:Main_page
: https://www.mediawiki.org/wiki/API:Main_page
: https://www.mediawiki.org/wiki/API:Main_page
。 提示#3:使用此链接试验维基百科的API。如果卡住,请记得使用Read-Search-Ask 。完成后,单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。 https://
)连接才能通过HTML5 Geolocation获取用户的语言环境。因此,我们建议使用HTML5 Geolocation获取用户位置,然后使用freeCodeCamp Weather API https://fcc-weather-api.glitch.me ,该API使用HTTP安全连接进行天气预报。此外,请务必通过https://
连接到CodePen.io 。如果卡住,请记得使用Read-Search-Ask 。完成后,单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。 https://
)连接才能通过HTML5 Geolocation获取用户的语言环境。因此,我们建议使用HTML5 Geolocation获取用户位置,然后使用freeCodeCamp Weather API https://fcc-weather-api.glitch.me ,该API使用HTTP安全连接进行天气预报。此外,请务必通过https://
连接到CodePen.io 。如果卡住,请记得使用Read-Search-Ask 。完成后,单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。 ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
更新:由于此处解释的API使用条件发生变化,Twitch.tv现在需要API密钥,但我们已经构建了一种解决方法。使用https://wind-bow.glitch.me/twitch-api而不是twitch的API基本URL(即https://api.twitch.tv/kraken),您仍然可以获取帐户信息,而无需注册API密钥。如果卡住,请记得使用Read-Search-Ask 。完成后,单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。 ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
更新:由于此处解释的API使用条件发生变化,Twitch.tv现在需要API密钥,但我们已经构建了一种解决方法。使用https://wind-bow.glitch.me/twitch-api而不是twitch的API基本URL(即https://api.twitch.tv/kraken),您仍然可以获取帐户信息,而无需注册API密钥。如果卡住,请记得使用Read-Search-Ask 。完成后,单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。 welcome-section
com um id de welcome-section
de welcome-section
. História de usuário # 2: A seção de boas-vindas deve ter um elemento h1
que contenha texto. História de usuário # 3: Meu portfólio deve ter uma seção de projetos com um id de projects
. História de usuário # 4: A seção de projetos deve conter pelo menos um elemento com uma classe de project-tile
de project-tile
para manter um projeto. História de usuário # 5: A seção de projetos deve conter pelo menos um link para um projeto. História de usuário # 6: Meu portfólio deve ter uma barra de navegação com um id de navbar
. História de usuário # 7: A barra de navegação deve conter pelo menos um link no qual eu possa clicar para navegar em diferentes seções da página. História de usuário # 8: Meu portfólio deve ter um link com um id de profile-link
, que abre meu perfil do GitHub ou FCC em uma nova guia. História de usuário # 9: Meu portfólio deve ter pelo menos uma consulta de mídia. História de usuário # 10: A altura da seção de boas vindas deve ser igual à altura da viewport. História de usuário # 11: A barra de navegação deve estar sempre no topo da viewport. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL o seu projeto, já com todos os testes aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso. welcome-section
com um id de welcome-section
de welcome-section
. História de usuário # 2: A seção de boas-vindas deve ter um elemento h1
que contenha texto. História de usuário # 3: Meu portfólio deve ter uma seção de projetos com um id de projects
. História de usuário # 4: A seção de projetos deve conter pelo menos um elemento com uma classe de project-tile
de project-tile
para manter um projeto. História de usuário # 5: A seção de projetos deve conter pelo menos um link para um projeto. História de usuário # 6: Meu portfólio deve ter uma barra de navegação com um id de navbar
. História de usuário # 7: A barra de navegação deve conter pelo menos um link no qual eu possa clicar para navegar em diferentes seções da página. História de usuário # 8: Meu portfólio deve ter um link com um id de profile-link
, que abre meu perfil do GitHub ou FCC em uma nova guia. História de usuário # 9: Meu portfólio deve ter pelo menos uma consulta de mídia. História de usuário # 10: A altura da seção de boas vindas deve ser igual à altura da viewport. História de usuário # 11: A barra de navegação deve estar sempre no topo da viewport. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL o seu projeto, já com todos os testes aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso. header
com um id="header"
. História de usuário # 2: Eu posso ver uma imagem dentro do elemento header
com um id="header-img"
. Um logotipo da empresa faria uma boa imagem aqui. História de usuário # 3: Dentro do elemento #header
eu posso ver um elemento nav
com uma id="nav-bar"
. História do usuário nº 4: posso ver pelo menos três elementos clicáveis dentro do elemento nav
, cada um com o nav-link
class. História de usuário # 5: Quando eu clico em um botão .nav-link
no elemento nav
, sou levado para a seção correspondente da página de destino. História do usuário nº 6: posso assistir a um vídeo do produto incorporado com id="video"
. História de usuário # 7: Minha landing page tem um elemento form
com um id="form"
. História de usuário # 8: Dentro do formulário, há um campo de input
com id="email"
onde posso inserir um endereço de email. História de usuário # 9: O campo de entrada #email
deve ter um texto de espaço reservado para que o usuário saiba para que serve o campo. História de usuário # 10: O campo de entrada #email
usa a validação HTML5 para confirmar que o texto digitado é um endereço de e-mail. História de usuário # 11: Dentro do formulário, há uma input
envio com um id="submit"
. História de usuário # 12: Quando clico no elemento #submit
, o email é enviado para uma página estática (use este URL de simulação: https://www.freecodecamp.com/email-submit ) que confirma que o endereço de email foi digitado e que postou com sucesso. História de usuário # 13: A barra de navegação deve estar sempre no topo da viewport. História do usuário nº 14: a página de destino do meu produto deve ter pelo menos uma consulta de mídia. História de usuário # 15: A página de destino do meu produto deve utilizar o flexbox CSS pelo menos uma vez. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL do seu projeto, já com todos os testes aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso. header
com um id="header"
. História de usuário # 2: Eu posso ver uma imagem dentro do elemento header
com um id="header-img"
. Um logotipo da empresa faria uma boa imagem aqui. História de usuário # 3: Dentro do elemento #header
eu posso ver um elemento nav
com uma id="nav-bar"
. História do usuário nº 4: posso ver pelo menos três elementos clicáveis dentro do elemento nav
, cada um com o nav-link
class. História de usuário # 5: Quando eu clico em um botão .nav-link
no elemento nav
, sou levado para a seção correspondente da página de destino. História do usuário nº 6: posso assistir a um vídeo do produto incorporado com id="video"
. História de usuário # 7: Minha landing page tem um elemento form
com um id="form"
. História de usuário # 8: Dentro do formulário, há um campo de input
com id="email"
onde posso inserir um endereço de email. História de usuário # 9: O campo de entrada #email
deve ter um texto de espaço reservado para que o usuário saiba para que serve o campo. História de usuário # 10: O campo de entrada #email
usa a validação HTML5 para confirmar que o texto digitado é um endereço de e-mail. História de usuário # 11: Dentro do formulário, há uma input
envio com um id="submit"
. História de usuário # 12: Quando clico no elemento #submit
, o email é enviado para uma página estática (use este URL de simulação: https://www.freecodecamp.com/email-submit ) que confirma que o endereço de email foi digitado e que postou com sucesso. História de usuário # 13: A barra de navegação deve estar sempre no topo da viewport. História do usuário nº 14: a página de destino do meu produto deve ter pelo menos uma consulta de mídia. História de usuário # 15: A página de destino do meu produto deve utilizar o flexbox CSS pelo menos uma vez. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL do seu projeto, já com todos os testes aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="title"
em tamanho de texto H1. História de usuário # 2: Eu posso ver uma breve explicação com id="description"
em P tamanho do texto. História de usuário # 3: posso ver um form
com id="survey-form"
. História de usuário # 4: Dentro do elemento form, eu tenho que inserir meu nome em um campo com id="name"
. História de usuário # 5: Dentro do elemento form, eu tenho que inserir um email em um campo com id="email"
. História do usuário nº 6: se eu inserir um e-mail que não esteja formatado corretamente, verei um erro de validação do HTML5. História de usuário # 7: Dentro do formulário, posso inserir um número em um campo com id="number"
. História do usuário nº 8: se eu inserir números diferentes na entrada do número, verei um erro de validação do HTML5. História de usuário # 9: Se eu inserir números fora do intervalo da entrada do número, que são definidos pelos atributos min
e max
, verei um erro de validação HTML5. História de usuário # 10: Para os campos de entrada de nome, email e número dentro do formulário, posso ver rótulos correspondentes que descrevem o objetivo de cada campo com os seguintes IDs: id="name-label"
, id="email-label"
e id="number-label"
. História do usuário nº 11: para os campos de entrada de nome, e-mail e número, posso ver o texto do marcador de posição que fornece uma descrição ou instruções para cada campo. História de usuário # 12: Dentro do elemento form, posso selecionar uma opção em um menu suspenso que tenha um id="dropdown"
. História de usuário # 13: Dentro do elemento form, posso selecionar um campo de um ou mais grupos de botões de opção. Cada grupo deve ser agrupado usando o atributo name
. História de usuário # 14: Dentro do elemento form, posso selecionar vários campos de uma série de checkboxes, cada um dos quais deve ter um atributo value
. História de usuário # 15: Dentro do elemento form, é apresentada uma textarea
no final para comentários adicionais. História de usuário # 16: Dentro do elemento form, eu recebi um botão com id="submit"
para enviar todas as minhas entradas. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL do seu projeto, já com todos os testes aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="title"
em tamanho de texto H1. História de usuário # 2: Eu posso ver uma breve explicação com id="description"
em P tamanho do texto. História de usuário # 3: posso ver um form
com id="survey-form"
. História de usuário # 4: Dentro do elemento form, eu tenho que inserir meu nome em um campo com id="name"
. História de usuário # 5: Dentro do elemento form, eu tenho que inserir um email em um campo com id="email"
. História do usuário nº 6: se eu inserir um e-mail que não esteja formatado corretamente, verei um erro de validação do HTML5. História de usuário # 7: Dentro do formulário, posso inserir um número em um campo com id="number"
. História do usuário nº 8: se eu inserir números diferentes na entrada do número, verei um erro de validação do HTML5. História de usuário # 9: Se eu inserir números fora do intervalo da entrada do número, que são definidos pelos atributos min
e max
, verei um erro de validação HTML5. História de usuário # 10: Para os campos de entrada de nome, email e número dentro do formulário, posso ver rótulos correspondentes que descrevem o objetivo de cada campo com os seguintes IDs: id="name-label"
, id="email-label"
e id="number-label"
. História do usuário nº 11: para os campos de entrada de nome, e-mail e número, posso ver o texto do marcador de posição que fornece uma descrição ou instruções para cada campo. História de usuário # 12: Dentro do elemento form, posso selecionar uma opção em um menu suspenso que tenha um id="dropdown"
. História de usuário # 13: Dentro do elemento form, posso selecionar um campo de um ou mais grupos de botões de opção. Cada grupo deve ser agrupado usando o atributo name
. História de usuário # 14: Dentro do elemento form, posso selecionar vários campos de uma série de checkboxes, cada um dos quais deve ter um atributo value
. História de usuário # 15: Dentro do elemento form, é apresentada uma textarea
no final para comentários adicionais. História de usuário # 16: Dentro do elemento form, eu recebi um botão com id="submit"
para enviar todas as minhas entradas. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL do seu projeto, já com todos os testes aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso. main
com um id="main-doc"
correspondente, que contém o conteúdo principal da página (documentação técnica). História de usuário # 2: Dentro do elemento #main-doc
, posso ver vários elementos de section
, cada um com uma classe de main-section
. Deve haver um mínimo de 5. História de usuário # 3: O primeiro elemento dentro de cada .main-section
deve ser um elemento de header
que contém texto que descreve o tópico dessa seção. História de usuário # 4: Cada elemento de section
com a classe de main-section
também deve ter um id que corresponda ao texto de cada header
contido nele. Quaisquer espaços devem ser substituídos por sublinhados (por exemplo, a section
que contém o cabeçalho "Javascript e Java" deve ter um id="Javascript_and_Java"
). História de usuário # 5: Os elementos de .main-section
devem conter pelo menos 10 elementos p
(não cada um). História de usuário # 6: Os elementos .main-section
devem conter pelo menos 5 elementos de code
total (não cada um). História de usuário # 7: Os elementos .main-section
devem conter no mínimo 5 itens li
(não cada um). História de usuário # 8: Eu posso ver um elemento nav
com um id="navbar"
. História de usuário # 9: O elemento navbar deve conter um elemento de header
que contenha texto que descreva o tópico da documentação técnica. História de usuário # 10: Além disso, a barra de navegação deve conter elementos link ( a
) com a classe de nav-link
. Deve haver um para cada elemento com a main-section
da classe. História de usuário # 11: O elemento de header
na barra de navegação deve vir antes de qualquer elemento de link ( a
) na barra de navegação. História de usuário # 12: Cada elemento com a classe de nav-link
deve conter texto que corresponda ao texto do header
dentro de cada section
(por exemplo, se você tiver uma seção / cabeçalho "Hello world", sua barra de navegação deve ter um elemento que contenha o texto "Olá Mundo"). História de usuário # 13: Quando eu clico em um elemento navbar, a página deve navegar para a seção correspondente do elemento main-doc
(por exemplo, se eu clicar em um elemento nav-link
que contém o texto "Hello world", a página navega a uma section
elemento que tem que id e contém o correspondente header
História de usuário # 14:. no regulares dispositivos do tamanho (laptops, desktops), o elemento com id="navbar"
deve ser mostrado no lado esquerdo da tela e deve sempre História de usuário # 15: Minha página de Documentação Técnica deve usar pelo menos uma consulta de mídia. Você pode criar seu projeto ao bifurcar essa caneta CodePen ou usar esse link CDN para executar os testes em qualquer ambiente que desejar : https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie o URL do seu projeto, já com todos os testes aprovados. Lembre-se de usar o Read-Search-Ask método se você ficar preso. main
com um id="main-doc"
correspondente, que contém o conteúdo principal da página (documentação técnica). História de usuário # 2: Dentro do elemento #main-doc
, posso ver vários elementos de section
, cada um com uma classe de main-section
. Deve haver um mínimo de 5. História de usuário # 3: O primeiro elemento dentro de cada .main-section
deve ser um elemento de header
que contém texto que descreve o tópico dessa seção. História de usuário # 4: Cada elemento de section
com a classe de main-section
também deve ter um id que corresponda ao texto de cada header
contido nele. Quaisquer espaços devem ser substituídos por sublinhados (por exemplo, a section
que contém o cabeçalho "Javascript e Java" deve ter um id="Javascript_and_Java"
). História de usuário # 5: Os elementos de .main-section
devem conter pelo menos 10 elementos p
(não cada um). História de usuário # 6: Os elementos .main-section
devem conter pelo menos 5 elementos de code
total (não cada um). História de usuário # 7: Os elementos .main-section
devem conter no mínimo 5 itens li
(não cada um). História de usuário # 8: Eu posso ver um elemento nav
com um id="navbar"
. História de usuário # 9: O elemento navbar deve conter um elemento de header
que contenha texto que descreva o tópico da documentação técnica. História de usuário # 10: Além disso, a barra de navegação deve conter elementos link ( a
) com a classe de nav-link
. Deve haver um para cada elemento com a main-section
da classe. História de usuário # 11: O elemento de header
na barra de navegação deve vir antes de qualquer elemento de link ( a
) na barra de navegação. História de usuário # 12: Cada elemento com a classe de nav-link
deve conter texto que corresponda ao texto do header
dentro de cada section
(por exemplo, se você tiver uma seção / cabeçalho "Hello world", sua barra de navegação deve ter um elemento que contenha o texto "Olá Mundo"). História de usuário # 13: Quando eu clico em um elemento navbar, a página deve navegar para a seção correspondente do elemento main-doc
(por exemplo, se eu clicar em um elemento nav-link
que contém o texto "Hello world", a página navega a uma section
elemento que tem que id e contém o correspondente header
História de usuário # 14:. no regulares dispositivos do tamanho (laptops, desktops), o elemento com id="navbar"
deve ser mostrado no lado esquerdo da tela e deve sempre História de usuário # 15: Minha página de Documentação Técnica deve usar pelo menos uma consulta de mídia. Você pode criar seu projeto ao bifurcar essa caneta CodePen ou usar esse link CDN para executar os testes em qualquer ambiente que desejar : https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie o URL do seu projeto, já com todos os testes aprovados. Lembre-se de usar o Read-Search-Ask método se você ficar preso. id="main"
, que contém todos os outros elementos. História de usuário # 2: Eu deveria ver um elemento com um id="title"
, que contém uma string (ou seja, texto) que descreve o assunto da página do tributo (por exemplo, "Dr. Norman Borlaug"). História de usuário # 3: Eu deveria ver um elemento div
com um id="img-div"
. História de usuário # 4: Dentro do elemento img-div
, eu deveria ver um elemento img
com uma id="image"
. História de usuário # 5: Dentro do elemento img-div
, eu deveria ver um elemento com um id="img-caption"
que contém conteúdo textual descrevendo a imagem mostrada em img-div
. História de usuário # 6: Eu deveria ver um elemento com um correspondente id="tribute-info"
, que contém conteúdo textual descrevendo o assunto da página de tributo. História de usuário # 7: Eu deveria ver a
elemento com um id="tribute-link"
, que direciona para um site externo que contém informações adicionais sobre o assunto da página do tributo. DICA: Você deve dar ao seu elemento um atributo de target
e configurá-lo para _blank
para que seu link seja aberto em uma nova guia (ou seja, target="_blank"
). História de usuário # 8: O elemento img
deve redimensionar responsavelmente, em relação à largura de seu elemento pai, sem exceder seu tamanho original. História de usuário # 9: O elemento img
deve estar centrado dentro de seu elemento pai. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. Quando terminar, envie o URL do seu projeto, já com todos os testes aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="main"
, que contém todos os outros elementos. História de usuário # 2: Eu deveria ver um elemento com um id="title"
, que contém uma string (ou seja, texto) que descreve o assunto da página do tributo (por exemplo, "Dr. Norman Borlaug"). História de usuário # 3: Eu deveria ver um elemento div
com um id="img-div"
. História de usuário # 4: Dentro do elemento img-div
, eu deveria ver um elemento img
com uma id="image"
. História de usuário # 5: Dentro do elemento img-div
, eu deveria ver um elemento com um id="img-caption"
que contém conteúdo textual descrevendo a imagem mostrada em img-div
. História de usuário # 6: Eu deveria ver um elemento com um correspondente id="tribute-info"
, que contém conteúdo textual descrevendo o assunto da página de tributo. História de usuário # 7: Eu deveria ver a
elemento com um id="tribute-link"
, que direciona para um site externo que contém informações adicionais sobre o assunto da página do tributo. DICA: Você deve dar ao seu elemento um atributo de target
e configurá-lo para _blank
para que seu link seja aberto em uma nova guia (ou seja, target="_blank"
). História de usuário # 8: O elemento img
deve redimensionar responsavelmente, em relação à largura de seu elemento pai, sem exceder seu tamanho original. História de usuário # 9: O elemento img
deve estar centrado dentro de seu elemento pai. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. Quando terminar, envie o URL do seu projeto, já com todos os testes aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso. size
(segundo argumento) e os retorna como um array bidimensional. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. size
(segundo argumento) e os retorna como um array bidimensional. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. str
) termina com a string alvo (segundo argumento, target
). Esse desafio pode ser resolvido com o método .endsWith()
, que foi introduzido no ES2015. Mas, para o propósito deste desafio, gostaríamos que você usasse um dos métodos de substring do JavaScript. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. str
) termina com a string alvo (segundo argumento, target
). Esse desafio pode ser resolvido com o método .endsWith()
, que foi introduzido no ES2015. Mas, para o propósito deste desafio, gostaríamos que você usasse um dos métodos de substring do JavaScript. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. n!
Por exemplo: 5! = 1 * 2 * 3 * 4 * 5 = 120
Somente números inteiros maiores ou iguais a zero serão fornecidos para a função. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. n!
Por exemplo: 5! = 1 * 2 * 3 * 4 * 5 = 120
Somente números inteiros maiores ou iguais a zero serão fornecidos para a função. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. false
, null
, 0
, ""
, undefined
e NaN
. Dica: tente converter cada valor em um booleano. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. false
, null
, 0
, ""
, undefined
e NaN
. Dica: tente converter cada valor em um booleano. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. ["hello", "Hello"]
, deve retornar true porque todas as letras na segunda string estão presentes na primeira, ignorando a diferença entre maiúsculas e minúsculas. Os argumentos ["hello", "hey"]
devem retornar false porque a string "hello" não contém um "y". Por último, ["Alien", "line"]
, deve retornar true porque todas as letras em "line" estão presentes em "Alien". Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. ["hello", "Hello"]
, deve retornar true porque todas as letras na segunda string estão presentes na primeira, ignorando a diferença entre maiúsculas e minúsculas. Os argumentos ["hello", "hey"]
devem retornar false porque a string "hello" não contém um "y". Por último, ["Alien", "line"]
, deve retornar true porque todas as letras em "line" estão presentes em "Alien". Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. str
(primeiro argumento) para num
times (segundo argumento). Retorna uma string vazia se num
não for um número positivo. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. str
(primeiro argumento) para num
times (segundo argumento). Retorna uma string vazia se num
não for um número positivo. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. arr[i]
. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. arr[i]
. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. slice
métodos de matriz e splice
para copiar cada elemento da primeira matriz na segunda matriz, em ordem. Comece inserindo elementos no índice n
do segundo array. Retorna a matriz resultante. As matrizes de entrada devem permanecer as mesmas após a execução da função. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. slice
métodos de matriz e splice
para copiar cada elemento da primeira matriz na segunda matriz, em ordem. Comece inserindo elementos no índice n
do segundo array. Retorna a matriz resultante. As matrizes de entrada devem permanecer as mesmas após a execução da função. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. ...
terminando. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. ...
terminando. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. getIndexToIns([1,2,3,4], 1.5)
deve retornar 1
porque é maior que 1
(índice 0), mas menor que 2
(índice 1). Da mesma forma, getIndexToIns([20,3,5], 19)
deve retornar 2
porque, uma vez que a matriz foi classificada, ela será semelhante a [3,5,20]
e 19
será menor que 20
(índice 2) e maior que 5
( índice 1). Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. getIndexToIns([1,2,3,4], 1.5)
deve retornar 1
porque é maior que 1
(índice 0), mas menor que 2
(índice 1). Da mesma forma, getIndexToIns([20,3,5], 19)
deve retornar 2
porque, uma vez que a matriz foi classificada, ela será semelhante a [3,5,20]
e 19
será menor que 20
(índice 2) e maior que 5
( índice 1). Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. addTogether(2, 3)
deve retornar 5
e addTogether(2)
deve retornar uma função. Chamar essa função retornada com um único argumento retornará a soma: var sumTwoAnd = addTogether(2);
sumTwoAnd(3)
retorna 5
. Se um dos argumentos não for um número válido, retorne indefinido. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. addTogether(2, 3)
deve retornar 5
e addTogether(2)
deve retornar uma função. Chamar essa função retornada com um único argumento retornará a soma: var sumTwoAnd = addTogether(2);
sumTwoAnd(3)
retorna 5
. Se um dos argumentos não for um número válido, retorne indefinido. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. &
, <
, >
, "
(aspas duplas) e '
(apóstrofo), em uma string para as entidades HTML correspondentes. Lembre-se de usar Read-Search-Ask se ficar preso. Tente emparelhar o programa. próprio código. &
, <
, >
, "
(aspas duplas) e '
(apóstrofo), em uma string para as entidades HTML correspondentes. Lembre-se de usar Read-Search-Ask se ficar preso. Tente emparelhar o programa. próprio código. arr
, percorra e remova cada elemento começando do primeiro elemento (o índice 0) até que a função func
retorne true
quando o elemento iterado passar por ele. Em seguida, retorne o restante da matriz quando a condição for satisfeita, caso contrário, o arr
deverá ser retornado como uma matriz vazia. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. arr
, percorra e remova cada elemento começando do primeiro elemento (o índice 0) até que a função func
retorne true
quando o elemento iterado passar por ele. Em seguida, retorne o restante da matriz quando a condição for satisfeita, caso contrário, o arr
deverá ser retornado como uma matriz vazia. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. pre
será uma propriedade do objeto e você precisa retornar true
se o seu valor é truthy
. Caso contrário, retorne false
. Em JavaScript, truthy
valores são valores que traduzem a true
quando avaliada em um contexto booleano. Lembre-se, você pode acessar as propriedades do objeto através da notação de ponto ou da notação []
. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. pre
será uma propriedade do objeto e você precisa retornar true
se o seu valor é truthy
. Caso contrário, retorne false
. Em JavaScript, truthy
valores são valores que traduzem a true
quando avaliada em um contexto booleano. Lembre-se, você pode acessar as propriedades do objeto através da notação de ponto ou da notação []
. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. getFirstName () getLastName () getFullName () setFirstName (primeiro) setLastName (last) setFullName (firstAndLast)Execute os testes para ver a saída esperada para cada método. Os métodos que aceitam um argumento devem aceitar apenas um argumento e ele deve ser uma string. Esses métodos devem ser os únicos meios disponíveis de interação com o objeto. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código.
getFirstName () getLastName () getFullName () setFirstName (primeiro) setLastName (last) setFullName (firstAndLast)Execute os testes para ver a saída esperada para cada método. Os métodos que aceitam um argumento devem aceitar apenas um argumento e ele deve ser uma string. Esses métodos devem ser os únicos meios disponíveis de interação com o objeto. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código.
{name: 'name', avgAlt: avgAlt}
. Você pode ler sobre períodos orbitais na Wikipedia . Os valores devem ser arredondados para o número inteiro mais próximo. O corpo que está sendo orbitado é a Terra. O raio da terra é 6367.4447 quilômetros, e o valor de GM da terra é 398600.4418 km 3 s -2 . Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. {name: 'name', avgAlt: avgAlt}
. Você pode ler sobre períodos orbitais na Wikipedia . Os valores devem ser arredondados para o número inteiro mais próximo. O corpo que está sendo orbitado é a Terra. O raio da terra é 6367.4447 quilômetros, e o valor de GM da terra é 398600.4418 km 3 s -2 . Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. arguments
. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. arguments
. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. num
, retornar a soma de todos os números de Fibonacci impares que são menor ou igual a num
. Os dois primeiros números da sequência de Fibonacci são 1 e 1. Cada número adicional na sequência é a soma dos dois números anteriores. Os primeiros seis números da seqüência de Fibonacci são 1, 1, 2, 3, 5 e 8. Por exemplo, sumFibs(10)
deve retornar 10
porque todos os números de Fibonacci ímpares menores ou iguais a 10
são 1, 1, 3 e 5. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. num
, retornar a soma de todos os números de Fibonacci impares que são menor ou igual a num
. Os dois primeiros números da sequência de Fibonacci são 1 e 1. Cada número adicional na sequência é a soma dos dois números anteriores. Os primeiros seis números da seqüência de Fibonacci são 1, 1, 2, 3, 5 e 8. Por exemplo, sumFibs(10)
deve retornar 10
porque todos os números de Fibonacci ímpares menores ou iguais a 10
são 1, 1, 3 e 5. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]
, e o segundo argumento é { last: "Capulet" }
, então você deve retornar o terceiro objeto da matriz (o primeiro argumento), porque contém o nome e seu valor, que foi passado como segundo argumento. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]
, e o segundo argumento é { last: "Capulet" }
, então você deve retornar o terceiro objeto da matriz (o primeiro argumento), porque contém o nome e seu valor, que foi passado como segundo argumento. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. Caesar cipher
, também conhecida como shift cipher
. Em uma shift cipher
os significados das letras são alterados por um determinado valor. Um uso moderno comum é a cifra ROT13 , onde os valores das letras são deslocados para 13 lugares. Assim 'A' ↔ 'N', 'B' ↔ 'O' e assim por diante. Escreva uma função que tenha uma string codificada em ROT13 como entrada e retorne uma string decodificada. Todas as letras serão maiúsculas. Não transforme qualquer caractere não alfabético (ou seja, espaços, pontuação), mas passe-os adiante. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. Caesar cipher
, também conhecida como shift cipher
. Em uma shift cipher
os significados das letras são alterados por um determinado valor. Um uso moderno comum é a cifra ROT13 , onde os valores das letras são deslocados para 13 lugares. Assim 'A' ↔ 'N', 'B' ↔ 'O' e assim por diante. Escreva uma função que tenha uma string codificada em ROT13 como entrada e retorne uma string decodificada. Todas as letras serão maiúsculas. Não transforme qualquer caractere não alfabético (ou seja, espaços, pontuação), mas passe-os adiante. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. checkCashRegister()
função de gaveta de caixa registradora checkCashRegister()
que aceita o preço de compra como primeiro argumento ( price
), pagamento como o segundo argumento ( cash
) e gaveta com dinheiro ( cid
) como o terceiro argumento. cid
é um array 2D listando a moeda disponível. A função checkCashRegister()
deve sempre retornar um objeto com uma chave de status
e uma chave de change
. Retornar {status: "INSUFFICIENT_FUNDS", change: []}
se a gaveta do caixa for menor que a alteração devida ou se você não puder devolver a alteração exata. Retornar {status: "CLOSED", change: [...]}
com gaveta do caixa como o valor para a change
da chave, se for igual à alteração devida. Caso contrário, retorne {status: "OPEN", change: [...]}
, com a alteração devida em moedas e faturas, classificada na ordem mais alta para a mais baixa, como o valor da chave de change
. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. Unidade monetária | Montante |
---|---|
Centavo | US $ 0,01 (PENNY) |
Níquel | US $ 0,05 (NICKEL) |
Centavo | US $ 0,1 (DIME) |
Trimestre | US $ 0,25 (TRIMESTRE) |
Dólar | US $ 1 (DÓLAR) |
Cinco dólares | US $ 5 (cinco) |
Dez dólares | US $ 10 (DEZ) |
Vinte dólares | US $ 20 (VINTE) |
Cem dólares | US $ 100 (cem) |
checkCashRegister()
função de gaveta de caixa registradora checkCashRegister()
que aceita o preço de compra como primeiro argumento ( price
), pagamento como o segundo argumento ( cash
) e gaveta com dinheiro ( cid
) como o terceiro argumento. cid
é um array 2D listando a moeda disponível. A função checkCashRegister()
deve sempre retornar um objeto com uma chave de status
e uma chave de change
. Retornar {status: "INSUFFICIENT_FUNDS", change: []}
se a gaveta do caixa for menor que a alteração devida ou se você não puder devolver a alteração exata. Retornar {status: "CLOSED", change: [...]}
com gaveta do caixa como o valor para a change
da chave, se for igual à alteração devida. Caso contrário, retorne {status: "OPEN", change: [...]}
, com a alteração devida em moedas e faturas, classificada na ordem mais alta para a mais baixa, como o valor da chave de change
. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. Unidade monetária | Montante |
---|---|
Centavo | US $ 0,01 (PENNY) |
Níquel | US $ 0,05 (NICKEL) |
Centavo | US $ 0,1 (DIME) |
Trimestre | US $ 0,25 (TRIMESTRE) |
Dólar | US $ 1 (DÓLAR) |
Cinco dólares | US $ 5 (cinco) |
Dez dólares | US $ 10 (DEZ) |
Vinte dólares | US $ 20 (VINTE) |
Cem dólares | US $ 100 (cem) |
true
se a string especificada for um palíndromo. Caso contrário, retorne false
. Um palíndromo é uma palavra ou frase que é grafada da mesma maneira tanto para frente quanto para trás, ignorando pontuação, caixa e espaçamento. Nota "racecar"
, "RaceCar"
e "race CAR"
entre outros. Também passaremos strings com símbolos especiais, como "2A3*3a2"
, "2A3 3a2"
e "2_A3*3#A2"
. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. true
se a string especificada for um palíndromo. Caso contrário, retorne false
. Um palíndromo é uma palavra ou frase que é grafada da mesma maneira tanto para frente quanto para trás, ignorando pontuação, caixa e espaçamento. Nota "racecar"
, "RaceCar"
e "race CAR"
entre outros. Também passaremos strings com símbolos especiais, como "2A3*3a2"
, "2A3 3a2"
e "2_A3*3#A2"
. Lembre-se de usar Read-Search-Ask se você ficar preso. Escreva seu próprio código. true
se a string passada parecer um número de telefone válido nos EUA. O usuário pode preencher o campo de formulário da maneira que escolher, desde que tenha o formato de um número válido nos EUA. A seguir, exemplos de formatos válidos para números dos EUA (consulte os testes abaixo para outras variantes): 555-555-5555Para este desafio, você será presenteado com uma seqüência de caracteres, como
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
800-692-7753
ou 8oo-six427676;laskdjf
. Seu trabalho é validar ou rejeitar o número de telefone dos EUA com base em qualquer combinação dos formatos fornecidos acima. O código de área é obrigatório. Se o código do país for fornecido, você deve confirmar que o código do país é 1
. Retorna true
se a string for um número de telefone válido nos EUA. caso contrário, retorne false
. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. true
se a string passada parecer um número de telefone válido nos EUA. O usuário pode preencher o campo de formulário da maneira que escolher, desde que tenha o formato de um número válido nos EUA. A seguir, exemplos de formatos válidos para números dos EUA (consulte os testes abaixo para outras variantes): 555-555-5555Para este desafio, você será presenteado com uma seqüência de caracteres, como
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
800-692-7753
ou 8oo-six427676;laskdjf
. Seu trabalho é validar ou rejeitar o número de telefone dos EUA com base em qualquer combinação dos formatos fornecidos acima. O código de área é obrigatório. Se o código do país for fornecido, você deve confirmar que o código do país é 1
. Retorna true
se a string for um número de telefone válido nos EUA. caso contrário, retorne false
. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. id="drum-machine"
que contém todos os outros elementos. História de usuário # 2: Dentro de #drum-machine
eu posso ver um elemento com um id="display"
. História de usuário # 3: Dentro de #drum-machine
eu posso ver 9 elementos de drum pad clicáveis, cada um com um nome de classe de drum-pad
, um id único que descreve o clipe de áudio que o drum pad será configurado para acionar e um inner texto que corresponde a uma das seguintes teclas no teclado: Q, W, E, A, S, D, Z, X, C. Os pads de bateria DEVEM estar nesta ordem. História de usuário # 4: Dentro de cada .drum-pad
, deve haver um elemento de audio
HTML5 que tenha um atributo src
apontando para um clipe de áudio, um nome de classe de clip
e um id correspondente ao texto interno de seu pai .drum-pad
(por exemplo, id="Q"
, id="W"
, id="E"
etc.). História de usuário # 5: Quando clico em um elemento .drum-pad
, o clipe de áudio contido em seu elemento de audio
filho deve ser acionado. História de usuário # 6: Quando eu pressiono a tecla trigger associada a cada .drum-pad
, o clipe de áudio contido em seu elemento filho de audio
deve ser acionado (por exemplo, pressionar a tecla Q deve acionar o bloco de percussão que contém a string "Q" pressionar a tecla W deve acionar o bloco de percussão que contém a string "W", etc.). História de usuário # 7: Quando um .drum-pad
é acionado, uma string descrevendo o clipe de áudio associado é exibida como o texto interno do elemento #display
(cada string deve ser única). Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="drum-machine"
que contém todos os outros elementos. História de usuário # 2: Dentro de #drum-machine
eu posso ver um elemento com um id="display"
. História de usuário # 3: Dentro de #drum-machine
eu posso ver 9 elementos de drum pad clicáveis, cada um com um nome de classe de drum-pad
, um id único que descreve o clipe de áudio que o drum pad será configurado para acionar e um inner texto que corresponde a uma das seguintes teclas no teclado: Q, W, E, A, S, D, Z, X, C. Os pads de bateria DEVEM estar nesta ordem. História de usuário # 4: Dentro de cada .drum-pad
, deve haver um elemento de audio
HTML5 que tenha um atributo src
apontando para um clipe de áudio, um nome de classe de clip
e um id correspondente ao texto interno de seu pai .drum-pad
(por exemplo, id="Q"
, id="W"
, id="E"
etc.). História de usuário # 5: Quando clico em um elemento .drum-pad
, o clipe de áudio contido em seu elemento de audio
filho deve ser acionado. História de usuário # 6: Quando eu pressiono a tecla trigger associada a cada .drum-pad
, o clipe de áudio contido em seu elemento filho de audio
deve ser acionado (por exemplo, pressionar a tecla Q deve acionar o bloco de percussão que contém a string "Q" pressionar a tecla W deve acionar o bloco de percussão que contém a string "W", etc.). História de usuário # 7: Quando um .drum-pad
é acionado, uma string descrevendo o clipe de áudio associado é exibida como o texto interno do elemento #display
(cada string deve ser única). Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. =
(sinal de igual) com um id="equals"
. História de usuário # 2: Minha calculadora deve conter 10 elementos clicáveis contendo um número cada de 0 a 9, com os seguintes IDs correspondentes: id="zero"
, id="one"
, id="two"
, id="three"
, id="four"
, id="five"
, id="six"
, id="seven"
, id="eight"
e id="nine"
. História de usuário # 3: Minha calculadora deve conter 4 elementos clicáveis, cada um contendo um dos 4 principais operadores matemáticos com as seguintes IDs correspondentes: id="add"
, id="subtract"
, id="multiply"
, id="divide"
. História do usuário nº 4: minha calculadora deve conter um elemento clicável contendo um .
(ponto decimal) símbolo com um id="decimal"
correspondente id="decimal"
. História do usuário nº 5: minha calculadora deve conter um elemento clicável com um id="clear"
. História de usuário # 6: Minha calculadora deve conter um elemento para exibir valores com um id="display"
. História de usuário # 7: A qualquer momento, pressionar o botão Limpar apaga os valores de entrada e saída e retorna a calculadora ao estado inicializado; 0 deve ser mostrado no elemento com o id de display
. História de usuário # 8: Como eu insiro números, eu deveria ser capaz de ver minha entrada no elemento com o id de display
. História de usuário # 9: Em qualquer ordem, eu deveria ser capaz de adicionar, subtrair, multiplicar e dividir uma cadeia de números de qualquer tamanho, e quando eu pressionar =
, o resultado correto deve ser mostrado no elemento com o ID de display
. História de usuário # 10: Ao inserir números, minha calculadora não deve permitir que um número comece com vários zeros. História de usuário # 11: Quando o elemento decimal é clicado, a .
deve anexar ao valor exibido atualmente; dois .
em um número não deve ser aceito. História de usuário # 12: Eu deveria ser capaz de executar qualquer operação (+, -, *, /) em números que contenham pontos decimais. História do usuário nº 13: Se dois ou mais operadores forem inseridos consecutivamente, a operação realizada deve ser o último operador inserido. História de usuário # 14: Pressionando um operador imediatamente após =
deve iniciar um novo cálculo que opera no resultado da avaliação anterior. História de usuário # 15: Minha calculadora deve ter várias casas decimais de precisão quando se trata de arredondamento (note que não existe um padrão exato, mas você deve ser capaz de lidar com cálculos como 2 / 7
com precisão razoável para pelo menos 4 casas decimais) . Nota Na lógica da calculadora: Deve-se notar que existem duas principais escolas de pensamento na lógica de entrada da calculadora: lógica de execução imediata e lógica de fórmula . Nosso exemplo utiliza lógica de fórmula e observa a ordem de precedência de operação, a execução imediata não. Qualquer um é aceitável, mas observe que, dependendo de qual escolher, sua calculadora pode produzir resultados diferentes dos nossos para certas equações (veja o exemplo abaixo). Contanto que sua matemática possa ser verificada por outra calculadora de produção, por favor, não considere isso um bug. EXEMPLO: 3 + 5 x 6 - 2 / 4 =
11.5
32.5
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. =
(sinal de igual) com um id="equals"
. História de usuário # 2: Minha calculadora deve conter 10 elementos clicáveis contendo um número cada de 0 a 9, com os seguintes IDs correspondentes: id="zero"
, id="one"
, id="two"
, id="three"
, id="four"
, id="five"
, id="six"
, id="seven"
, id="eight"
e id="nine"
. História de usuário # 3: Minha calculadora deve conter 4 elementos clicáveis, cada um contendo um dos 4 principais operadores matemáticos com as seguintes IDs correspondentes: id="add"
, id="subtract"
, id="multiply"
, id="divide"
. História do usuário nº 4: minha calculadora deve conter um elemento clicável contendo um .
(ponto decimal) símbolo com um id="decimal"
correspondente id="decimal"
. História do usuário nº 5: minha calculadora deve conter um elemento clicável com um id="clear"
. História de usuário # 6: Minha calculadora deve conter um elemento para exibir valores com um id="display"
. História de usuário # 7: A qualquer momento, pressionar o botão Limpar apaga os valores de entrada e saída e retorna a calculadora ao estado inicializado; 0 deve ser mostrado no elemento com o id de display
. História de usuário # 8: Como eu insiro números, eu deveria ser capaz de ver minha entrada no elemento com o id de display
. História de usuário # 9: Em qualquer ordem, eu deveria ser capaz de adicionar, subtrair, multiplicar e dividir uma cadeia de números de qualquer tamanho, e quando eu pressionar =
, o resultado correto deve ser mostrado no elemento com o ID de display
. História de usuário # 10: Ao inserir números, minha calculadora não deve permitir que um número comece com vários zeros. História de usuário # 11: Quando o elemento decimal é clicado, a .
deve anexar ao valor exibido atualmente; dois .
em um número não deve ser aceito. História de usuário # 12: Eu deveria ser capaz de executar qualquer operação (+, -, *, /) em números que contenham pontos decimais. História do usuário nº 13: Se dois ou mais operadores forem inseridos consecutivamente, a operação realizada deve ser o último operador inserido. História de usuário # 14: Pressionando um operador imediatamente após =
deve iniciar um novo cálculo que opera no resultado da avaliação anterior. História de usuário # 15: Minha calculadora deve ter várias casas decimais de precisão quando se trata de arredondamento (note que não existe um padrão exato, mas você deve ser capaz de lidar com cálculos como 2 / 7
com precisão razoável para pelo menos 4 casas decimais) . Nota Na lógica da calculadora: Deve-se notar que existem duas principais escolas de pensamento na lógica de entrada da calculadora: lógica de execução imediata e lógica de fórmula . Nosso exemplo utiliza lógica de fórmula e observa a ordem de precedência de operação, a execução imediata não. Qualquer um é aceitável, mas observe que, dependendo de qual escolher, sua calculadora pode produzir resultados diferentes dos nossos para certas equações (veja o exemplo abaixo). Contanto que sua matemática possa ser verificada por outra calculadora de produção, por favor, não considere isso um bug. EXEMPLO: 3 + 5 x 6 - 2 / 4 =
11.5
32.5
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. textarea
com um id="editor"
. História de usuário # 2: Eu posso ver um elemento com um id="preview"
. História do usuário nº 3: quando eu #editor
texto no elemento #editor
, o elemento #preview
é atualizado enquanto digito para exibir o conteúdo da área de texto. História de usuário # 4: Quando eu #editor
o markdown com sabor do GitHub no elemento #editor
, o texto é renderizado como HTML no elemento #preview
enquanto digito (DICA: você não precisa analisar o Markdown por conta própria - você pode importar a biblioteca Marked para isso: https://cdnjs.com/libraries/marked ). História de usuário # 5: Quando meu visualizador de markdown é carregado pela primeira vez, o texto padrão no campo #editor
deve conter um markdown válido que represente pelo menos um de cada um dos seguintes elementos: um cabeçalho (tamanho H1), um sub cabeçalho (tamanho H2) , um link, um código embutido, um bloco de código, um item de lista, um blockquote, uma imagem e um texto em negrito. História de usuário # 6: quando meu visualizador de markdown é carregado pela primeira vez, o markdown padrão no campo #editor
deve ser renderizado como HTML no elemento #preview
. Bônus opcional (você não precisa fazer esse teste passar): Meu visualizador de marcação interpreta os retornos de carro e os renderiza como elementos br
(quebra de linha). Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. textarea
com um id="editor"
. História de usuário # 2: Eu posso ver um elemento com um id="preview"
. História do usuário nº 3: quando eu #editor
texto no elemento #editor
, o elemento #preview
é atualizado enquanto digito para exibir o conteúdo da área de texto. História de usuário # 4: Quando eu #editor
o markdown com sabor do GitHub no elemento #editor
, o texto é renderizado como HTML no elemento #preview
enquanto digito (DICA: você não precisa analisar o Markdown por conta própria - você pode importar a biblioteca Marked para isso: https://cdnjs.com/libraries/marked ). História de usuário # 5: Quando meu visualizador de markdown é carregado pela primeira vez, o texto padrão no campo #editor
deve conter um markdown válido que represente pelo menos um de cada um dos seguintes elementos: um cabeçalho (tamanho H1), um sub cabeçalho (tamanho H2) , um link, um código embutido, um bloco de código, um item de lista, um blockquote, uma imagem e um texto em negrito. História de usuário # 6: quando meu visualizador de markdown é carregado pela primeira vez, o markdown padrão no campo #editor
deve ser renderizado como HTML no elemento #preview
. Bônus opcional (você não precisa fazer esse teste passar): Meu visualizador de marcação interpreta os retornos de carro e os renderiza como elementos br
(quebra de linha). Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="break-label"
que contém uma string (por exemplo, "Break Length"). História de usuário # 2: Eu posso ver um elemento com id="session-label"
que contém uma string (por exemplo, "Session Length"). História de usuário # 3: Eu posso ver dois elementos clicáveis com IDs correspondentes: id="break-decrement"
e id="session-decrement"
. História de usuário # 4: Eu posso ver dois elementos clicáveis com IDs correspondentes: id="break-increment"
e id="session-increment"
. História de usuário # 5: Eu posso ver um elemento com um id="break-length"
, que por padrão (on load) exibe um valor de 5. História de usuário # 6: Eu posso ver um elemento com um id="session-length"
correspondente id="session-length"
, que por padrão exibe um valor de 25. História de usuário # 7: Eu posso ver um elemento com um id="timer-label"
, que contém uma string indicando que uma sessão foi inicializada (por exemplo," Session ") . História de usuário # 8: Eu posso ver um elemento com id="time-left"
. NOTA: Pausado ou em execução, o valor nesse campo sempre deve ser exibido no formato mm:ss
(ou seja, 25:00). História do usuário nº 9: posso ver um elemento clicável com um id="start_stop"
. História de usuário # 10: Eu posso ver um elemento clicável com um id="reset"
. História de usuário # 11: Quando eu clico no elemento com o id de reset
, qualquer timer em execução deve ser parado, o valor em id="break-length"
deve retornar para 5
, o valor em id="session-length"
deve retornar para 25, e o elemento com id="time-left"
deve redefinir para seu estado padrão. História de usuário # 12: Quando eu clico no elemento com o id de break-decrement
, o valor dentro de id="break-length"
diminui por um valor de 1, e eu posso ver o valor atualizado. História de usuário # 13: Quando eu clico no elemento com o id de break-increment
, o valor dentro de id="break-length"
incrementado por um valor de 1, e eu posso ver o valor atualizado. História de usuário # 14: Quando eu clico no elemento com o id de session-decrement
de session-decrement
, o valor dentro de id="session-length"
diminui por um valor de 1, e eu posso ver o valor atualizado. História do usuário # 15: quando eu clico no elemento com o id de session-increment
de session-increment
, o valor dentro de id="session-length"
incrementado pelo valor de 1, e eu posso ver o valor atualizado. História de usuário # 16: Eu não deveria ser capaz de definir uma sessão ou quebrar a duração para <= 0. História de usuário # 17: Eu não deveria ser capaz de definir uma sessão ou break length para> 60. História de usuário # 18: Quando eu primeiro clique no elemento com id="start_stop"
, o cronômetro deve começar a ser executado a partir do valor exibido no id="session-length"
, mesmo que o valor tenha sido incrementado ou decrementado em relação ao valor original de 25. História de usuário # 19 : Se o temporizador estiver em execução, o elemento com o id de time-left
deverá exibir o tempo restante no formato mm:ss
(diminuindo por um valor de 1 e atualizando a exibição a cada 1000ms). História de usuário # 20: Se o cronômetro estiver em execução e eu clicar no elemento com id="start_stop"
, a contagem regressiva deverá ser pausada. História do usuário nº 21: se o cronômetro estiver pausado e eu clicar no elemento com id="start_stop"
, a contagem regressiva deverá voltar a ser executada a partir do ponto em que ela foi pausada. História de usuário # 22: Quando uma contagem regressiva da sessão atingir zero (NOTA: o timer DEVE chegar às 00:00), e uma nova contagem regressiva começar, o elemento com o id do timer-label
do timer-label
deverá exibir uma string indicando que uma quebra começou. História de usuário # 23: Quando uma contagem regressiva da sessão atingir zero (NOTA: o timer DEVE chegar às 00:00), uma nova contagem regressiva da pausa deve começar, contando a partir do valor exibido atualmente no elemento id="break-length"
. História do usuário nº 24: Quando uma contagem regressiva da quebra atingir zero (NOTA: o cronômetro DEVE chegar às 00:00), e uma nova contagem regressiva começar, o elemento com o id do timer-label
do timer-label
deverá exibir uma cadeia indicando que uma sessão começou. História de usuário # 25: Quando uma contagem regressiva da quebra chegar a zero (NOTA: o timer DEVE chegar às 00:00), uma nova contagem regressiva da sessão deve começar, contando a partir do valor exibido no elemento id="session-length"
. História de usuário # 26: Quando uma contagem regressiva chegar a zero (NOTA: o temporizador DEVE chegar às 00:00), um som indicando que o tempo acabou deve ser reproduzido. Isso deve utilizar uma tag de audio
HTML5 e ter um id="beep"
correspondente a id="beep"
. História de usuário # 27: O elemento de áudio com id="beep"
deve ser de 1 segundo ou mais. História de usuário # 28: O elemento audio com id de beep
deve parar de tocar e ser rebobinado para o começo quando o elemento com o id de reset
é clicado. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="break-label"
que contém uma string (por exemplo, "Break Length"). História de usuário # 2: Eu posso ver um elemento com id="session-label"
que contém uma string (por exemplo, "Session Length"). História de usuário # 3: Eu posso ver dois elementos clicáveis com IDs correspondentes: id="break-decrement"
e id="session-decrement"
. História de usuário # 4: Eu posso ver dois elementos clicáveis com IDs correspondentes: id="break-increment"
e id="session-increment"
. História de usuário # 5: Eu posso ver um elemento com um id="break-length"
, que por padrão (on load) exibe um valor de 5. História de usuário # 6: Eu posso ver um elemento com um id="session-length"
correspondente id="session-length"
, que por padrão exibe um valor de 25. História de usuário # 7: Eu posso ver um elemento com um id="timer-label"
, que contém uma string indicando que uma sessão foi inicializada (por exemplo," Session ") . História de usuário # 8: Eu posso ver um elemento com id="time-left"
. NOTA: Pausado ou em execução, o valor nesse campo sempre deve ser exibido no formato mm:ss
(ou seja, 25:00). História do usuário nº 9: posso ver um elemento clicável com um id="start_stop"
. História de usuário # 10: Eu posso ver um elemento clicável com um id="reset"
. História de usuário # 11: Quando eu clico no elemento com o id de reset
, qualquer timer em execução deve ser parado, o valor em id="break-length"
deve retornar para 5
, o valor em id="session-length"
deve retornar para 25, e o elemento com id="time-left"
deve redefinir para seu estado padrão. História de usuário # 12: Quando eu clico no elemento com o id de break-decrement
, o valor dentro de id="break-length"
diminui por um valor de 1, e eu posso ver o valor atualizado. História de usuário # 13: Quando eu clico no elemento com o id de break-increment
, o valor dentro de id="break-length"
incrementado por um valor de 1, e eu posso ver o valor atualizado. História de usuário # 14: Quando eu clico no elemento com o id de session-decrement
de session-decrement
, o valor dentro de id="session-length"
diminui por um valor de 1, e eu posso ver o valor atualizado. História do usuário # 15: quando eu clico no elemento com o id de session-increment
de session-increment
, o valor dentro de id="session-length"
incrementado pelo valor de 1, e eu posso ver o valor atualizado. História de usuário # 16: Eu não deveria ser capaz de definir uma sessão ou quebrar a duração para <= 0. História de usuário # 17: Eu não deveria ser capaz de definir uma sessão ou break length para> 60. História de usuário # 18: Quando eu primeiro clique no elemento com id="start_stop"
, o cronômetro deve começar a ser executado a partir do valor exibido no id="session-length"
, mesmo que o valor tenha sido incrementado ou decrementado em relação ao valor original de 25. História de usuário # 19 : Se o temporizador estiver em execução, o elemento com o id de time-left
deverá exibir o tempo restante no formato mm:ss
(diminuindo por um valor de 1 e atualizando a exibição a cada 1000ms). História de usuário # 20: Se o cronômetro estiver em execução e eu clicar no elemento com id="start_stop"
, a contagem regressiva deverá ser pausada. História do usuário nº 21: se o cronômetro estiver pausado e eu clicar no elemento com id="start_stop"
, a contagem regressiva deverá voltar a ser executada a partir do ponto em que ela foi pausada. História de usuário # 22: Quando uma contagem regressiva da sessão atingir zero (NOTA: o timer DEVE chegar às 00:00), e uma nova contagem regressiva começar, o elemento com o id do timer-label
do timer-label
deverá exibir uma string indicando que uma quebra começou. História de usuário # 23: Quando uma contagem regressiva da sessão atingir zero (NOTA: o timer DEVE chegar às 00:00), uma nova contagem regressiva da pausa deve começar, contando a partir do valor exibido atualmente no elemento id="break-length"
. História do usuário nº 24: Quando uma contagem regressiva da quebra atingir zero (NOTA: o cronômetro DEVE chegar às 00:00), e uma nova contagem regressiva começar, o elemento com o id do timer-label
do timer-label
deverá exibir uma cadeia indicando que uma sessão começou. História de usuário # 25: Quando uma contagem regressiva da quebra chegar a zero (NOTA: o timer DEVE chegar às 00:00), uma nova contagem regressiva da sessão deve começar, contando a partir do valor exibido no elemento id="session-length"
. História de usuário # 26: Quando uma contagem regressiva chegar a zero (NOTA: o temporizador DEVE chegar às 00:00), um som indicando que o tempo acabou deve ser reproduzido. Isso deve utilizar uma tag de audio
HTML5 e ter um id="beep"
correspondente a id="beep"
. História de usuário # 27: O elemento de áudio com id="beep"
deve ser de 1 segundo ou mais. História de usuário # 28: O elemento audio com id de beep
deve parar de tocar e ser rebobinado para o começo quando o elemento com o id de reset
é clicado. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="quote-box"
. História de usuário # 2: Dentro de #quote-box
, posso ver um elemento com um id="text"
. História de usuário # 3: dentro de #quote-box
, posso ver um elemento com um id="author"
. História de usuário # 4: dentro de #quote-box
, posso ver um elemento clicável com um id="new-quote"
. História de usuário # 5: dentro de #quote-box
, posso ver um clicável id="tweet-quote"
. História de usuário # 6: No primeiro carregamento, minha máquina de cotação exibe uma cotação aleatória no elemento com id="text"
. História de usuário # 7: No primeiro carregamento, minha máquina de cotação exibe o autor da citação aleatória no elemento com id="author"
. História de usuário # 8: Quando o botão #new-quote
é clicado, minha máquina de cotação deve buscar uma nova cotação e exibi-la no elemento #text
. História de usuário # 9: Minha máquina de cotação deve buscar o autor da nova cotação quando o botão #new-quote
for clicado e exibi-lo no elemento #author
. História de usuário # 10: Eu posso twittar a citação atual clicando no elemento #tweet-quote
a
. Este a
elemento deve incluir o "twitter.com/intent/tweet"
caminho em que é href
atributo para twittar a cotação atual. História de usuário # 11: O elemento wrapper #quote-box
deve ser centrado horizontalmente. Por favor, execute testes com o nível de zoom do navegador em 100% e a página maximizada. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="quote-box"
. História de usuário # 2: Dentro de #quote-box
, posso ver um elemento com um id="text"
. História de usuário # 3: dentro de #quote-box
, posso ver um elemento com um id="author"
. História de usuário # 4: dentro de #quote-box
, posso ver um elemento clicável com um id="new-quote"
. História de usuário # 5: dentro de #quote-box
, posso ver um clicável id="tweet-quote"
. História de usuário # 6: No primeiro carregamento, minha máquina de cotação exibe uma cotação aleatória no elemento com id="text"
. História de usuário # 7: No primeiro carregamento, minha máquina de cotação exibe o autor da citação aleatória no elemento com id="author"
. História de usuário # 8: Quando o botão #new-quote
é clicado, minha máquina de cotação deve buscar uma nova cotação e exibi-la no elemento #text
. História de usuário # 9: Minha máquina de cotação deve buscar o autor da nova cotação quando o botão #new-quote
for clicado e exibi-lo no elemento #author
. História de usuário # 10: Eu posso twittar a citação atual clicando no elemento #tweet-quote
a
. Este a
elemento deve incluir o "twitter.com/intent/tweet"
caminho em que é href
atributo para twittar a cotação atual. História de usuário # 11: O elemento wrapper #quote-box
deve ser centrado horizontalmente. Por favor, execute testes com o nível de zoom do navegador em 100% e a página maximizada. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="title"
. História do usuário # 2: Meu gráfico deve ter um eixo x do elemento g
com um id="x-axis"
. História de usuário # 3: Meu gráfico deve ter um eixo y do elemento g
com um id="y-axis"
. História de usuário # 4: Os dois eixos devem conter vários rótulos de ticks, cada um com a class="tick"
correspondente class="tick"
. História de usuário # 5: Meu gráfico deve ter um elemento rect
para cada ponto de dados com uma class="bar"
exibindo os dados. História de usuário # 6: Cada barra deve ter as propriedades data-date
e data-gdp
contendo data e valores do PIB. História de usuário # 7: As propriedades data-date
dos elementos da barra devem corresponder à ordem dos dados fornecidos. História de usuário # 8: As propriedades do data-gdp
dos elementos da barra devem corresponder à ordem dos dados fornecidos. História do usuário nº 9: a altura de cada elemento da barra deve representar com precisão o PIB correspondente dos dados. História de usuário # 10: O atributo data-date
e seu elemento de barra correspondente devem estar alinhados com o valor correspondente no eixo x. História de usuário # 11: O atributo data-gdp
e seu elemento de barra correspondente devem estar alinhados com o valor correspondente no eixo y. História de usuário # 12: Eu posso passar o mouse sobre uma área e ver uma dica com uma id="tooltip"
que exibe mais informações sobre a área. História de usuário # 13: Minha dica de ferramenta deve ter uma propriedade data-date
que corresponda à data-date
da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="title"
. História do usuário # 2: Meu gráfico deve ter um eixo x do elemento g
com um id="x-axis"
. História de usuário # 3: Meu gráfico deve ter um eixo y do elemento g
com um id="y-axis"
. História de usuário # 4: Os dois eixos devem conter vários rótulos de ticks, cada um com a class="tick"
correspondente class="tick"
. História de usuário # 5: Meu gráfico deve ter um elemento rect
para cada ponto de dados com uma class="bar"
exibindo os dados. História de usuário # 6: Cada barra deve ter as propriedades data-date
e data-gdp
contendo data e valores do PIB. História de usuário # 7: As propriedades data-date
dos elementos da barra devem corresponder à ordem dos dados fornecidos. História de usuário # 8: As propriedades do data-gdp
dos elementos da barra devem corresponder à ordem dos dados fornecidos. História do usuário nº 9: a altura de cada elemento da barra deve representar com precisão o PIB correspondente dos dados. História de usuário # 10: O atributo data-date
e seu elemento de barra correspondente devem estar alinhados com o valor correspondente no eixo x. História de usuário # 11: O atributo data-gdp
e seu elemento de barra correspondente devem estar alinhados com o valor correspondente no eixo y. História de usuário # 12: Eu posso passar o mouse sobre uma área e ver uma dica com uma id="tooltip"
que exibe mais informações sobre a área. História de usuário # 13: Minha dica de ferramenta deve ter uma propriedade data-date
que corresponda à data-date
da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="title"
. História do usuário nº 2: Meu choropleth deve ter um elemento de descrição com um id="description"
. História do usuário nº 3: Meu choropleth deve ter condados com uma class="county"
correspondente class="county"
que represente os dados. História do usuário nº 4: deve haver pelo menos quatro cores de preenchimento diferentes usadas para os municípios. História do usuário # 5: Meus municípios devem ter propriedades de data-fips
e data-education
contendo seus valores de educação e fips correspondentes. História do Usuário # 6: Meu coroplópio deve ter um condado para cada ponto de dados fornecido. História do usuário nº 7: os municípios devem ter dados-fips e valores de dados-educação que correspondam aos dados da amostra. História do usuário nº 8: Meu choropleth deve ter uma legenda com um id="legend"
. História do usuário nº 9: Deve haver pelo menos 4 cores de preenchimento diferentes usadas para a legenda. História do usuário nº 10: Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um id="tooltip"
que exibe mais informações sobre a área. História do usuário nº 11: Minha dica de ferramenta deve ter uma propriedade de data-education
que corresponda à data-education
da área ativa. Aqui estão os conjuntos de dados necessários para concluir este projeto: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="title"
. História do usuário nº 2: Meu choropleth deve ter um elemento de descrição com um id="description"
. História do usuário nº 3: Meu choropleth deve ter condados com uma class="county"
correspondente class="county"
que represente os dados. História do usuário nº 4: deve haver pelo menos quatro cores de preenchimento diferentes usadas para os municípios. História do usuário # 5: Meus municípios devem ter propriedades de data-fips
e data-education
contendo seus valores de educação e fips correspondentes. História do Usuário # 6: Meu coroplópio deve ter um condado para cada ponto de dados fornecido. História do usuário nº 7: os municípios devem ter dados-fips e valores de dados-educação que correspondam aos dados da amostra. História do usuário nº 8: Meu choropleth deve ter uma legenda com um id="legend"
. História do usuário nº 9: Deve haver pelo menos 4 cores de preenchimento diferentes usadas para a legenda. História do usuário nº 10: Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um id="tooltip"
que exibe mais informações sobre a área. História do usuário nº 11: Minha dica de ferramenta deve ter uma propriedade de data-education
que corresponda à data-education
da área ativa. Aqui estão os conjuntos de dados necessários para concluir este projeto: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="title"
. História do usuário nº 2: Meu heat map deve ter uma descrição com um id="description"
. História do usuário nº 3: Meu mapa de calor deve ter um eixo x com um id="x-axis"
. História do Usuário # 4: Meu mapa de calor deve ter um eixo y com um id="y-axis"
. História do usuário nº 5: Meu heat map deve ter elementos rect
com uma class="cell"
que representa os dados. História do usuário nº 6: Deve haver pelo menos 4 cores de preenchimento diferentes usadas para as células. História do usuário nº 7: Cada célula terá as propriedades data-month
, data-year
, data-temp
contendo seus valores correspondentes de mês, ano e temperatura. História do usuário nº 8: O data-month
, data-year
de cada célula deve estar dentro do intervalo dos dados. História do usuário nº 9: Meu mapa de calor deve ter células alinhadas com o mês correspondente no eixo y. História do usuário nº 10: Meu mapa de calor deve ter células alinhadas com o ano correspondente no eixo x. História do usuário nº 11: Meu mapa de calor deve ter vários marcadores de escala no eixo y com o nome completo do mês. História do usuário nº 12: Meu heat map deve ter vários rótulos de ticks no eixo x com os anos entre 1754 e 2015. História do usuário nº 13: Meu heat map deve ter uma legenda com um id="legend"
. História do usuário nº 14: Minha legenda deve conter elementos rect
. História do usuário nº 15: Os elementos rect
na legenda devem usar pelo menos 4 cores de preenchimento diferentes. História do usuário nº 16: Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com uma id="tooltip"
que exibe mais informações sobre a área. História do usuário nº 16: Minha dica de ferramenta deve ter uma propriedade data-year
que corresponda ao data-year
da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json
Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="title"
. História do usuário nº 2: Meu heat map deve ter uma descrição com um id="description"
. História do usuário nº 3: Meu mapa de calor deve ter um eixo x com um id="x-axis"
. História do Usuário # 4: Meu mapa de calor deve ter um eixo y com um id="y-axis"
. História do usuário nº 5: Meu heat map deve ter elementos rect
com uma class="cell"
que representa os dados. História do usuário nº 6: Deve haver pelo menos 4 cores de preenchimento diferentes usadas para as células. História do usuário nº 7: Cada célula terá as propriedades data-month
, data-year
, data-temp
contendo seus valores correspondentes de mês, ano e temperatura. História do usuário nº 8: O data-month
, data-year
de cada célula deve estar dentro do intervalo dos dados. História do usuário nº 9: Meu mapa de calor deve ter células alinhadas com o mês correspondente no eixo y. História do usuário nº 10: Meu mapa de calor deve ter células alinhadas com o ano correspondente no eixo x. História do usuário nº 11: Meu mapa de calor deve ter vários marcadores de escala no eixo y com o nome completo do mês. História do usuário nº 12: Meu heat map deve ter vários rótulos de ticks no eixo x com os anos entre 1754 e 2015. História do usuário nº 13: Meu heat map deve ter uma legenda com um id="legend"
. História do usuário nº 14: Minha legenda deve conter elementos rect
. História do usuário nº 15: Os elementos rect
na legenda devem usar pelo menos 4 cores de preenchimento diferentes. História do usuário nº 16: Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com uma id="tooltip"
que exibe mais informações sobre a área. História do usuário nº 16: Minha dica de ferramenta deve ter uma propriedade data-year
que corresponda ao data-year
da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json
Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="title"
. História do usuário nº 2: Eu posso ver um eixo x que tem um id="x-axis"
. História do usuário nº 3: Eu posso ver um eixo y que tem um id="y-axis"
. História do usuário nº 4: Eu posso ver pontos, cada um com uma classe de dot
, que representa os dados sendo plotados. História do Usuário # 5: Cada ponto deve ter as propriedades data-xvalue
e data-yvalue
contendo seus valores x e y correspondentes. História do usuário nº 6: O valor data-xvalue
data-yvalue
e o data-xvalue
y de data-yvalue
de cada ponto devem estar dentro do intervalo dos dados reais e no formato de dados correto. Para data-xvalue
, inteiros (anos completos) ou objetos Date são aceitáveis para avaliação de teste. Para data-yvalue
(minutos), use objetos Date. História do Usuário # 7: O data-xvalue
e seu ponto correspondente devem estar alinhados com o ponto / valor correspondente no eixo x. História do usuário # 8: O valor de y dos data-yvalue
e seu ponto correspondente devem estar alinhados com o ponto / valor correspondente no eixo y. História do usuário nº 9: posso ver vários rótulos de escala no eixo y com o formato de hora %M:%S
História do usuário nº 10: posso ver vários rótulos de escala no eixo x que mostram o ano. História do usuário nº 11: Eu posso ver que o intervalo dos rótulos do eixo x estão dentro do intervalo dos dados reais do eixo x. História do usuário nº 12: Eu posso ver que o intervalo dos rótulos do eixo y estão dentro do intervalo dos dados reais do eixo y. História do usuário nº 13: Eu posso ver uma legenda contendo um texto descritivo que possui id="legend"
. História do usuário nº 14: Eu posso passar o mouse sobre uma área e ver uma dica com uma id="tooltip"
que exibe mais informações sobre a área. História do usuário nº 15: Minha dica de ferramenta deve ter uma propriedade data-year
que corresponda ao valor data-xvalue
da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json
Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="title"
. História do usuário nº 2: Eu posso ver um eixo x que tem um id="x-axis"
. História do usuário nº 3: Eu posso ver um eixo y que tem um id="y-axis"
. História do usuário nº 4: Eu posso ver pontos, cada um com uma classe de dot
, que representa os dados sendo plotados. História do Usuário # 5: Cada ponto deve ter as propriedades data-xvalue
e data-yvalue
contendo seus valores x e y correspondentes. História do usuário nº 6: O valor data-xvalue
data-yvalue
e o data-xvalue
y de data-yvalue
de cada ponto devem estar dentro do intervalo dos dados reais e no formato de dados correto. Para data-xvalue
, inteiros (anos completos) ou objetos Date são aceitáveis para avaliação de teste. Para data-yvalue
(minutos), use objetos Date. História do Usuário # 7: O data-xvalue
e seu ponto correspondente devem estar alinhados com o ponto / valor correspondente no eixo x. História do usuário # 8: O valor de y dos data-yvalue
e seu ponto correspondente devem estar alinhados com o ponto / valor correspondente no eixo y. História do usuário nº 9: posso ver vários rótulos de escala no eixo y com o formato de hora %M:%S
História do usuário nº 10: posso ver vários rótulos de escala no eixo x que mostram o ano. História do usuário nº 11: Eu posso ver que o intervalo dos rótulos do eixo x estão dentro do intervalo dos dados reais do eixo x. História do usuário nº 12: Eu posso ver que o intervalo dos rótulos do eixo y estão dentro do intervalo dos dados reais do eixo y. História do usuário nº 13: Eu posso ver uma legenda contendo um texto descritivo que possui id="legend"
. História do usuário nº 14: Eu posso passar o mouse sobre uma área e ver uma dica com uma id="tooltip"
que exibe mais informações sobre a área. História do usuário nº 15: Minha dica de ferramenta deve ter uma propriedade data-year
que corresponda ao valor data-xvalue
da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json
Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="title"
. História de usuário # 2: Meu mapa de árvore deve ter uma descrição com um id="description"
. História de usuário # 3: Meu mapa de árvore deve ter elementos rect
com uma class="tile"
que representa os dados. História do usuário nº 4: deve haver pelo menos duas cores de preenchimento diferentes usadas para as peças. História do usuário nº 5: Cada bloco deve ter as propriedades data-name
, data-category
e data-value
contendo seu nome, categoria e valor correspondentes. História do usuário nº 6: a área de cada bloco deve corresponder ao valor do valor dos dados: blocos com um valor de dados maior devem ter uma área maior. História de usuário # 7: Meu mapa da árvore deve ter uma legenda com id="legend"
. História de usuário # 8: Minha legenda deve ter elementos rect
com uma class="legend-item"
. História de usuário # 9: Os elementos rect
na legenda devem usar pelo menos 2 cores de preenchimento diferentes. História de usuário # 10: Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um id="tooltip"
que exibe mais informações sobre a área. História de usuário # 11: minha dica de ferramenta deve ter uma propriedade de data-value
que corresponda ao data-value
de data-value
da área ativa. Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. id="title"
. História de usuário # 2: Meu mapa de árvore deve ter uma descrição com um id="description"
. História de usuário # 3: Meu mapa de árvore deve ter elementos rect
com uma class="tile"
que representa os dados. História do usuário nº 4: deve haver pelo menos duas cores de preenchimento diferentes usadas para as peças. História do usuário nº 5: Cada bloco deve ter as propriedades data-name
, data-category
e data-value
contendo seu nome, categoria e valor correspondentes. História do usuário nº 6: a área de cada bloco deve corresponder ao valor do valor dos dados: blocos com um valor de dados maior devem ter uma área maior. História de usuário # 7: Meu mapa da árvore deve ter uma legenda com id="legend"
. História de usuário # 8: Minha legenda deve ter elementos rect
com uma class="legend-item"
. História de usuário # 9: Os elementos rect
na legenda devem usar pelo menos 2 cores de preenchimento diferentes. História de usuário # 10: Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um id="tooltip"
que exibe mais informações sobre a área. História de usuário # 11: minha dica de ferramenta deve ter uma propriedade de data-value
que corresponda ao data-value
de data-value
da área ativa. Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. △
ou ⊕
) dos arrays fornecidos. Dados dois conjuntos (por exemplo, conjunto A = {1, 2, 3}
e conjunto B = {2, 3, 4}
), o termo matemático "diferença simétrica" de dois conjuntos é o conjunto de elementos que estão em qualquer um dos dois conjuntos, mas não em ambos ( A △ B = C = {1, 4}
). Para cada diferença simétrica adicional que você tomar (digamos em um conjunto D = {2, 3}
), você deve obter o conjunto com elementos que estão em um dos dois conjuntos, mas não em ambos ( C △ D = {1, 4} △ {2, 3} = {1, 2, 3, 4}
). A matriz resultante deve conter apenas valores exclusivos ( sem duplicatas ). Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. △
ou ⊕
) dos arrays fornecidos. Dados dois conjuntos (por exemplo, conjunto A = {1, 2, 3}
e conjunto B = {2, 3, 4}
), o termo matemático "diferença simétrica" de dois conjuntos é o conjunto de elementos que estão em qualquer um dos dois conjuntos, mas não em ambos ( A △ B = C = {1, 4}
). Para cada diferença simétrica adicional que você tomar (digamos em um conjunto D = {2, 3}
), você deve obter o conjunto com elementos que estão em um dos dois conjuntos, mas não em ambos ( C △ D = {1, 4} △ {2, 3} = {1, 2, 3, 4}
). A matriz resultante deve conter apenas valores exclusivos ( sem duplicatas ). Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. arr1
). Se um item não puder ser encontrado, adicione o novo item e a quantidade à matriz de estoque. A matriz de inventário retornada deve estar em ordem alfabética por item. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. arr1
). Se um item não puder ser encontrado, adicione o novo item e a quantidade à matriz de estoque. A matriz de inventário retornada deve estar em ordem alfabética por item. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente emparelhar o programa. Escreva seu próprio código. aab
deve retornar 2 porque tem 6 permutações totais ( aab
, aab
, aba
, aba
, baa
, baa
), mas apenas 2 delas ( aba
e aba
) não têm a mesma letra (neste caso a
) repetida. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente fazer pair programming. Escreva seu próprio código. aab
deve retornar 2 porque tem 6 permutações totais ( aab
, aab
, aba
, aba
, baa
, baa
), mas apenas 2 delas ( aba
e aba
) não têm a mesma letra (neste caso a
) repetida. Lembre-se de usar Read-Search-Ask se você ficar preso. Tente fazer pair programming. Escreva seu próprio código. arr
, encontre pares de elementos cuja soma seja igual ao segundo argumento arg
e retorne a soma de seus índices. Você pode usar vários pares que tenham os mesmos elementos numéricos, mas índices diferentes. Cada par deve usar os menores índices disponíveis possíveis. Uma vez que um elemento tenha sido usado, ele não pode ser reutilizado para emparelhar com outro elemento. Por exemplo, pairwise([1, 1, 2], 3)
cria um par [2, 1]
usando o 1 no índice 0 em vez do 1 no índice 1, porque 0 + 2 <1 + 2. Por exemplo, pairwise([7, 9, 11, 13, 15], 20)
retorna 6
. Os pares que somam 20 são [7, 13]
e [9, 11]
. Podemos então escrever o array com seus índices e valores. Índice | 0 | 1 | 2 | 3 | 4 |
---|---|---|---|---|---|
Valor | 7 | 9 | 11 | 13 | 15 |
6
Lembre-se de usar Read-Search-Ask se você ficar preso. Tente fazer pair programming. Escreva seu próprio código. arr
, encontre pares de elementos cuja soma seja igual ao segundo argumento arg
e retorne a soma de seus índices. Você pode usar vários pares que tenham os mesmos elementos numéricos, mas índices diferentes. Cada par deve usar os menores índices disponíveis possíveis. Uma vez que um elemento tenha sido usado, ele não pode ser reutilizado para emparelhar com outro elemento. Por exemplo, pairwise([1, 1, 2], 3)
cria um par [2, 1]
usando o 1 no índice 0 em vez do 1 no índice 1, porque 0 + 2 <1 + 2. Por exemplo, pairwise([7, 9, 11, 13, 15], 20)
retorna 6
. Os pares que somam 20 são [7, 13]
e [9, 11]
. Podemos então escrever o array com seus índices e valores. Índice | 0 | 1 | 2 | 3 | 4 |
---|---|---|---|---|---|
Valor | 7 | 9 | 11 | 13 | 15 |
6
Lembre-se de usar Read-Search-Ask se você ficar preso. Tente fazer pair programming. Escreva seu próprio código. https://s3.amazonaws.com/freecodecamp/simonSound1.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3
. Lembre-se de usar Read-Search-Ask se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. https://s3.amazonaws.com/freecodecamp/simonSound1.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3
. Lembre-se de usar Read-Search-Ask se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. https://en.wikipedia.org/wiki/Special:Random
. Dica # 2: Aqui está uma entrada sobre o uso da API da Wikipedia: https://www.mediawiki.org/wiki/API:Main_page
. Dica # 3: use este link para experimentar a API da Wikipedia. Lembre-se de usar Read-Search-Ask se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. https://en.wikipedia.org/wiki/Special:Random
. Dica # 2: Aqui está uma entrada sobre o uso da API da Wikipedia: https://www.mediawiki.org/wiki/API:Main_page
. Dica # 3: use este link para experimentar a API da Wikipedia. Lembre-se de usar Read-Search-Ask se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. https://
) para obter a localidade de um usuário por meio da Geolocalização HTML5. Por esse motivo, recomendamos o uso do HTML5 Geolocation para obter a localização do usuário e, em seguida, usar a API do FreeCodeCamp Weather https://fcc-weather-api.glitch.me, que usa uma conexão HTTP segura para o clima. Além disso, certifique-se de conectar-se ao CodePen.io via https://
. Lembre-se de usar Read-Search-Ask se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. https://
) para obter a localidade de um usuário por meio da Geolocalização HTML5. Por esse motivo, recomendamos o uso do HTML5 Geolocation para obter a localização do usuário e, em seguida, usar a API do FreeCodeCamp Weather https://fcc-weather-api.glitch.me, que usa uma conexão HTTP segura para o clima. Além disso, certifique-se de conectar-se ao CodePen.io via https://
. Lembre-se de usar Read-Search-Ask se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
stream regularmente: ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
ATUALIZAÇÃO: Devido a uma alteração nas condições de uso da API, explicado aqui, o Twitch.tv agora requer uma chave de API, mas criamos uma solução alternativa. Use https://wind-bow.glitch.me/twitch-api em vez do URL base da API do twitch (ou seja, https://api.twitch.tv/kraken) e você ainda poderá obter informações da conta, sem precisar para se inscrever em uma chave de API. Lembre-se de usar Read-Search-Ask se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
stream regularmente: ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
ATUALIZAÇÃO: Devido a uma alteração nas condições de uso da API, explicado aqui, o Twitch.tv agora requer uma chave de API, mas criamos uma solução alternativa. Use https://wind-bow.glitch.me/twitch-api em vez do URL base da API do twitch (ou seja, https://api.twitch.tv/kraken) e você ainda poderá obter informações da conta, sem precisar para se inscrever em uma chave de API. Lembre-se de usar Read-Search-Ask se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. welcome-section
. User Story # 2: В разделе приветствия должен быть элемент h1
, содержащий текст. Пользовательская история №3: у моего портфолио должен быть раздел проектов с идентификатором projects
. User Story # 4: Раздел проектов должен содержать по крайней мере один элемент с классом project-tile
для проведения проекта. User Story # 5: Раздел проектов должен содержать как минимум одну ссылку на проект. User Story # 6: Мое портфолио должно иметь навигационную панель с идентификатором navbar
. User Story # 7: Навигация должна содержать хотя бы одну ссылку, на которую я могу щелкнуть, чтобы перейти к различным разделам страницы. User Story # 8: у моего портфолио должна быть ссылка с идентификатором profile-link
, который открывает мою GitHub или FCC-профиль на новой вкладке. User Story # 9: у моего портфолио должен быть хотя бы один медиа-запрос. User Story # 10: Высота секции приветствия должна быть равна высоте окна просмотра. User Story # 11: навигационная панель всегда должна находиться в верхней части окна просмотра. Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своего рабочего проекта с прохождением всех тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+Цель: создать приложение CodePen.io , функционально подобное этому: https://codepen.io/freeCodeCamp/full/zNBOYG . Выполните приведенные ниже истории пользователей и пройдите все тесты для завершения. Созадйте для приложения свой личный стиль. Вы можете использовать HTML, JavaScript и CSS для выполнения этого проекта. Рекомендуется использовать простой CSS, так как это то, что вы изучили в предыдущих уроках, и вы должны получить некоторую практику с простым CSS. Вы можете использовать Bootstrap или SASS. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуется использовать для этого задания, но вы можете применять их на свой страх и риск. Последующие проекты дадут вам возможность работать с другими различными технологиями, напирмер, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливого кодирования! Пользовательская история №1: у моего портфолио должен быть раздел приветствия с идентификатором welcome-section
. User Story # 2: В разделе приветствия должен быть элемент h1
, содержащий текст. Пользовательская история №3: у моего портфолио должен быть раздел проектов с идентификатором projects
. User Story # 4: Раздел проектов должен содержать по крайней мере один элемент с классом project-tile
для проведения проекта. User Story # 5: Раздел проектов должен содержать как минимум одну ссылку на проект. User Story # 6: Мое портфолио должно иметь навигационную панель с идентификатором navbar
. User Story # 7: Навигация должна содержать хотя бы одну ссылку, на которую я могу щелкнуть, чтобы перейти к различным разделам страницы. User Story # 8: у моего портфолио должна быть ссылка с идентификатором profile-link
, который открывает мою GitHub или FCC-профиль на новой вкладке. User Story # 9: у моего портфолио должен быть хотя бы один медиа-запрос. User Story # 10: Высота секции приветствия должна быть равна высоте окна просмотра. User Story # 11: навигационная панель всегда должна находиться в верхней части окна просмотра. Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своего рабочего проекта с прохождением всех тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
header
с соответствующим id="header"
. Пользовательская история # 2: Я вижу изображение внутри элемента header
с соответствующим id="header-img"
. У компании должен быть хороший логотип. Пользовательская история # 3: В элементе #header
я вижу элемент nav
с соответствующим id="nav-bar"
. Пользовательская история # 4: Я вижу как минимум три элемента, которые можно щелкнуть внутри элемента nav
, каждый с классом nav-link
. Пользовательская история # 5: Когда я нажимаю кнопку .nav-link
в элементе nav
, я перемещаюсь в соответствующий раздел целевой страницы. Пользовательская история # 6: Я могу посмотреть встроенное видео с продуктом, с id="video"
. Пользовательская история # 7: Моя целевая страница имеет элемент form
с соответствующим id="form"
. Пользовательская история # 8: В форме есть поле input
с id="email"
, где я могу ввести адрес электронной почты. Пользовательская история # 9: Поле ввода #email
должно содержать плейсхолдер (текст заполнителя), чтобы пользователь знал, для чего это поле. Пользовательская история # 10: Поле ввода #email
использует проверку HTML5, чтобы подтвердить, что введенный текст является адресом электронной почты. Пользовательская история # 11: В форме есть input
с соответствующим id="submit"
. Пользовательская история # 12: Когда я нажимаю на элемент #submit
, электронная почта отправляется на статическую страницу (используйте этот фиктивный URL: https://www.freecodecamp.com/email-submit ), который подтверждает что адрес электронной почты был введен и отправлен успешно. Пользовательская история # 13: Навигационная панель всегда должна находиться в верхней части окна просмотра. Пользовательская история # 14: На целевой странице моего продукта должен быть хотя бы один мультимедийный запрос. Пользовательская история # 15: Моя целевая страница продукта должна использовать CSS flexbox хотя бы один раз. Вы можете создать свой проект от данного шаблона CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своего рабочего проекта с прохождением всех тестов. Не забудьте использовать Read-Search-Ask , если вы зашли в тупик.
+Цель: Создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/RKRbwL . Выполните приведенные ниже пользовательские истории и пройдите все тесты. Сделайте приложение в своем стиле. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать чистый CSS, потому что он использовался в упражнениях, и вы должны получить некоторую практику работы с чистым CSS. Вы можете использовать Bootstrap или SASS, если хотите. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, но вы можете рискнуть их использовать. Другие проекты дадут вам возможность работать с различными пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливого кодирования! Пользовательская история # 1: Моя целевая страница продукта должна иметь элемент header
с соответствующим id="header"
. Пользовательская история # 2: Я вижу изображение внутри элемента header
с соответствующим id="header-img"
. У компании должен быть хороший логотип. Пользовательская история # 3: В элементе #header
я вижу элемент nav
с соответствующим id="nav-bar"
. Пользовательская история # 4: Я вижу как минимум три элемента, которые можно щелкнуть внутри элемента nav
, каждый с классом nav-link
. Пользовательская история # 5: Когда я нажимаю кнопку .nav-link
в элементе nav
, я перемещаюсь в соответствующий раздел целевой страницы. Пользовательская история # 6: Я могу посмотреть встроенное видео с продуктом, с id="video"
. Пользовательская история # 7: Моя целевая страница имеет элемент form
с соответствующим id="form"
. Пользовательская история # 8: В форме есть поле input
с id="email"
, где я могу ввести адрес электронной почты. Пользовательская история # 9: Поле ввода #email
должно содержать плейсхолдер (текст заполнителя), чтобы пользователь знал, для чего это поле. Пользовательская история # 10: Поле ввода #email
использует проверку HTML5, чтобы подтвердить, что введенный текст является адресом электронной почты. Пользовательская история # 11: В форме есть input
с соответствующим id="submit"
. Пользовательская история # 12: Когда я нажимаю на элемент #submit
, электронная почта отправляется на статическую страницу (используйте этот фиктивный URL: https://www.freecodecamp.com/email-submit ), который подтверждает что адрес электронной почты был введен и отправлен успешно. Пользовательская история # 13: Навигационная панель всегда должна находиться в верхней части окна просмотра. Пользовательская история # 14: На целевой странице моего продукта должен быть хотя бы один мультимедийный запрос. Пользовательская история # 15: Моя целевая страница продукта должна использовать CSS flexbox хотя бы один раз. Вы можете создать свой проект от данного шаблона CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своего рабочего проекта с прохождением всех тестов. Не забудьте использовать Read-Search-Ask , если вы зашли в тупик.
id="title"
в формате H1. Пользовательская история # 2: Я вижу короткое описание с id="description"
в формате P. Пользовательская история # 3: Я вижу элемент form
с id="survey-form"
. Пользовательская история # 4: Внутри элемента формы мне нужно ввести мое имя в поле с id="name"
. Пользовательская история # 5: Внутри элемента формы мне нужно ввести электронную почту в поле с id="email"
. Пользовательская история # 6: Если я введу электронную почту, которая не отформатирована правильно, я увижу HTML5 ошибку валидации. Пользовательская история # 7: Внутри формы я могу ввести число в поле с id="number"
. Пользовательская история # 8: Если я введу нечисловое значение в поле ввода, я увижу HTML5 ошибку валидации. Пользовательская история # 9: Если я ввожу число за пределами диапазона ввода, которые определены атрибутами min
и max
, я увижу ошибку проверки HTML5. Пользовательская история # 10: Для полей ввода имени, электронной почты и числа внутри формы я могу видеть соответствующие метки, которые описывают назначение каждого поля со следующими идентификаторами: id="name-label"
, id="email-label"
и id="number-label"
. Пользовательская история # 11: Для полей ввода имени, электронной почты и ввода числа я вижу плейсхолдер, который дает мне описание или инструкции для каждого поля. Пользовательская история # 12: Внутри элемента формы я могу выбрать опцию из раскрывающегося списка, имеющего соответствующий id="dropdown"
. Пользовательская история # 13: Внутри элемента формы я могу выбрать поле из одной или нескольких групп переключателей. Каждая группа должна быть сгруппирована с использованием атрибута name
. Пользовательская история # 14: Внутри элемента формы я могу выбрать несколько полей из ряда флажков, каждый из которых должен иметь атрибут value
. Пользовательская история # 15: Внутри элемента формы, в конце, я вижу textarea
для дополнительных комментариев. Пользовательская история # 16: Внутри элемента формы есть кнопка с id="submit"
для отправки всех моих введённых данных. Вы можете создать свой проект от данного CodePen шаблона . Или вы можете использовать ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми выполненными тестами. Не забудьте использовать Read-Search-Ask, если вы зашли в тупик.
+Цель: Создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/VPaoNP . Выполните приведенные ниже пользовательские истории и пройдите все тесты. Сделайте приложение в своем стиле. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать чистый CSS, потому что он использовался в упражнениях, и вы должны получить некоторую практику работы с чистым CSS. Вы можете использовать Bootstrap или SASS, если вы хотите. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, но вы можете рискнуть их использовать. Другие проекты дадут вам возможность работать с различными пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливого кодирования! Пользовательская история # 1: Я вижу заголовок с id="title"
в формате H1. Пользовательская история # 2: Я вижу короткое описание с id="description"
в формате P. Пользовательская история # 3: Я вижу элемент form
с id="survey-form"
. Пользовательская история # 4: Внутри элемента формы мне нужно ввести мое имя в поле с id="name"
. Пользовательская история # 5: Внутри элемента формы мне нужно ввести электронную почту в поле с id="email"
. Пользовательская история # 6: Если я введу электронную почту, которая не отформатирована правильно, я увижу HTML5 ошибку валидации. Пользовательская история # 7: Внутри формы я могу ввести число в поле с id="number"
. Пользовательская история # 8: Если я введу нечисловое значение в поле ввода, я увижу HTML5 ошибку валидации. Пользовательская история # 9: Если я ввожу число за пределами диапазона ввода, которые определены атрибутами min
и max
, я увижу ошибку проверки HTML5. Пользовательская история # 10: Для полей ввода имени, электронной почты и числа внутри формы я могу видеть соответствующие метки, которые описывают назначение каждого поля со следующими идентификаторами: id="name-label"
, id="email-label"
и id="number-label"
. Пользовательская история # 11: Для полей ввода имени, электронной почты и ввода числа я вижу плейсхолдер, который дает мне описание или инструкции для каждого поля. Пользовательская история # 12: Внутри элемента формы я могу выбрать опцию из раскрывающегося списка, имеющего соответствующий id="dropdown"
. Пользовательская история # 13: Внутри элемента формы я могу выбрать поле из одной или нескольких групп переключателей. Каждая группа должна быть сгруппирована с использованием атрибута name
. Пользовательская история # 14: Внутри элемента формы я могу выбрать несколько полей из ряда флажков, каждый из которых должен иметь атрибут value
. Пользовательская история # 15: Внутри элемента формы, в конце, я вижу textarea
для дополнительных комментариев. Пользовательская история # 16: Внутри элемента формы есть кнопка с id="submit"
для отправки всех моих введённых данных. Вы можете создать свой проект от данного CodePen шаблона . Или вы можете использовать ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми выполненными тестами. Не забудьте использовать Read-Search-Ask, если вы зашли в тупик.
main
элемент с соответствующим id="main-doc"
, который содержит основное содержание страницы (техническая документация). User Story # 2: В элементе #main-doc
я вижу несколько элементов section
, каждый из которых имеет класс main-section
. Должно быть не менее 5. User Story # 3: Первый элемент внутри каждого .main-section
должен быть элементом header
который содержит текст, описывающий тему этого раздела. User Story # 4: Каждый элемент section
с классом main-section
должен также иметь идентификатор, соответствующий тексту каждого содержащегося в нем header
. Любые пробелы должны быть заменены символами подчеркивания (например, section
который содержит заголовок «Javascript и Java», должен иметь соответствующий id="Javascript_and_Java"
). User Story # 5: .main-section
должны содержать не менее 10 p
элементов (не каждый). User Story # 6: .main-section
должны содержать не менее 5 элементов code
(не каждый). User Story # 7: .main-section
должны содержать не менее 5 элементов li
(не каждый). User Story # 8: Я вижу элемент nav
с соответствующим id="navbar"
. User Story # 9: элемент navbar должен содержать один элемент header
который содержит текст, описывающий тему технической документации. User Story # 10: Кроме того, навигационная панель должна содержать элементы ссылки ( a
) с классом nav-link
. Для каждого элемента с main-section
классом класса должен быть один. User Story # 11: Элемент header
на панели навигации должен появиться перед любыми элементами ссылки ( a
) на панели навигации. User Story # 12: Каждый элемент с классом nav-link
должен содержать текст, соответствующий тексту header
в каждом section
(например, если у вас есть раздел / заголовок «Hello world», ваш навигатор должен иметь элемент, который содержит текст "Привет мир"). User Story # 13: Когда я нажимаю элемент navbar, страница должна перейти к соответствующему разделу элемента main-doc
(например, если я нажму на элемент nav-link
который содержит текст «Hello world», страница перемещается к элементу section
который имеет этот идентификатор и содержит соответствующий header
. User Story # 14: на устройствах с обычным размером (ноутбуки, настольные компьютеры) элемент с id="navbar"
должен быть показан в левой части экрана и должен всегда быть видимым пользователю. Пользовательская страница №15: страница «Моя техническая документация» должна использовать по крайней мере один мультимедийный запрос. Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, : https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
После того, как вы закончите, отправьте URL-адрес вашему рабочему проекту со всеми его прохождениями тестов. Не забудьте использовать Read-Search-Ask если вы застряли.
+Цель: создать приложение CodePen.io , функционально подобное этому: https://codepen.io/freeCodeCamp/full/NdrKKL . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать простой CSS, потому что это то, что до сих пор изучали уроки, и вы должны получить некоторую практику с простым CSS. Вы можете использовать Bootstrap или SASS, если вы выберете. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, и использование их на свой страх и риск. Другие проекты дадут вам возможность работать с различными технологическими пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я вижу main
элемент с соответствующим id="main-doc"
, который содержит основное содержание страницы (техническая документация). User Story # 2: В элементе #main-doc
я вижу несколько элементов section
, каждый из которых имеет класс main-section
. Должно быть не менее 5. User Story # 3: Первый элемент внутри каждого .main-section
должен быть элементом header
который содержит текст, описывающий тему этого раздела. User Story # 4: Каждый элемент section
с классом main-section
должен также иметь идентификатор, соответствующий тексту каждого содержащегося в нем header
. Любые пробелы должны быть заменены символами подчеркивания (например, section
который содержит заголовок «Javascript и Java», должен иметь соответствующий id="Javascript_and_Java"
). User Story # 5: .main-section
должны содержать не менее 10 p
элементов (не каждый). User Story # 6: .main-section
должны содержать не менее 5 элементов code
(не каждый). User Story # 7: .main-section
должны содержать не менее 5 элементов li
(не каждый). User Story # 8: Я вижу элемент nav
с соответствующим id="navbar"
. User Story # 9: элемент navbar должен содержать один элемент header
который содержит текст, описывающий тему технической документации. User Story # 10: Кроме того, навигационная панель должна содержать элементы ссылки ( a
) с классом nav-link
. Для каждого элемента с main-section
классом класса должен быть один. User Story # 11: Элемент header
на панели навигации должен появиться перед любыми элементами ссылки ( a
) на панели навигации. User Story # 12: Каждый элемент с классом nav-link
должен содержать текст, соответствующий тексту header
в каждом section
(например, если у вас есть раздел / заголовок «Hello world», ваш навигатор должен иметь элемент, который содержит текст "Привет мир"). User Story # 13: Когда я нажимаю элемент navbar, страница должна перейти к соответствующему разделу элемента main-doc
(например, если я нажму на элемент nav-link
который содержит текст «Hello world», страница перемещается к элементу section
который имеет этот идентификатор и содержит соответствующий header
. User Story # 14: на устройствах с обычным размером (ноутбуки, настольные компьютеры) элемент с id="navbar"
должен быть показан в левой части экрана и должен всегда быть видимым пользователю. Пользовательская страница №15: страница «Моя техническая документация» должна использовать по крайней мере один мультимедийный запрос. Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, : https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
После того, как вы закончите, отправьте URL-адрес вашему рабочему проекту со всеми его прохождениями тестов. Не забудьте использовать Read-Search-Ask если вы застряли.
id="main"
, который содержит все остальные элементы. Пользовательская история # 2: Я должен увидеть элемент с соответствующим id="title"
, который содержит строку (то есть текст), с описанием темы страницы (например, «Доктор Норман Борлауг»). Пользовательская история # 3: Мне нужно увидеть элемент div
с соответствующим id="img-div"
. Пользовательская история # 4: В элементе img-div
я должен увидеть элемент img
с соответствующим id="image"
. Пользовательская история # 5: В элементе img-div
я должен увидеть элемент с соответствующим id="img-caption"
, который содержит текст, описывающий изображение в img-div
. Пользовательская история # 6: Я должен увидеть элемент с соответствующим id="tribute-info"
, который содержит текст, описывающий тему страницы посвящения. Пользовательская история # 7: Я должен увидеть элемент a
с соответствующим id="tribute-link"
, который ссылается на внешний сайт с дополнительной информацией о предмете страницы. ПОДСКАЗКА. Вы должны указать вашему элементу атрибут target
и установить его в _blank
, чтобы ваша ссылка открылась в новой вкладке (т.е. target="_blank"
). Пользовательская история # 8: Элемент img
должен изменяться по размеру относительно ширины его родительского элемента, не превышая его первоначальный размер. Пользовательская история # 9: Элемент img
должен быть центрирован в пределах его родительского элемента. Вы можете создать свой проект от этого CodePen проекта . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, которая вам нравится: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. После того как вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми выполненными тестами. Не забудьте использовать Read-Search-Ask, если вы зашли в тупик.
+Цель: создать приложение CodePen.io , функционально подобное этому: https://codepen.io/freeCodeCamp/full/zNqgVx . Выполните приведенные ниже пользовательские истории и пройдите все тесты. Сделайте приложение в своем стиле. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать чистый CSS, потому что он использовался в упражнениях, и вы должны получить некоторую практику работы с чистым CSS. Вы можете использовать Bootstrap или SASS, если хотите. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, но вы можете рискнуть их использовать. Другие проекты дадут вам возможность работать с различными пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах по предлагаемому стеку технологий. Счастливого кодирования! Пользовательская история # 1: Моя страница посвящения должна иметь элемент с соответствующим id="main"
, который содержит все остальные элементы. Пользовательская история # 2: Я должен увидеть элемент с соответствующим id="title"
, который содержит строку (то есть текст), с описанием темы страницы (например, «Доктор Норман Борлауг»). Пользовательская история # 3: Мне нужно увидеть элемент div
с соответствующим id="img-div"
. Пользовательская история # 4: В элементе img-div
я должен увидеть элемент img
с соответствующим id="image"
. Пользовательская история # 5: В элементе img-div
я должен увидеть элемент с соответствующим id="img-caption"
, который содержит текст, описывающий изображение в img-div
. Пользовательская история # 6: Я должен увидеть элемент с соответствующим id="tribute-info"
, который содержит текст, описывающий тему страницы посвящения. Пользовательская история # 7: Я должен увидеть элемент a
с соответствующим id="tribute-link"
, который ссылается на внешний сайт с дополнительной информацией о предмете страницы. ПОДСКАЗКА. Вы должны указать вашему элементу атрибут target
и установить его в _blank
, чтобы ваша ссылка открылась в новой вкладке (т.е. target="_blank"
). Пользовательская история # 8: Элемент img
должен изменяться по размеру относительно ширины его родительского элемента, не превышая его первоначальный размер. Пользовательская история # 9: Элемент img
должен быть центрирован в пределах его родительского элемента. Вы можете создать свой проект от этого CodePen проекта . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, которая вам нравится: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. После того как вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми выполненными тестами. Не забудьте использовать Read-Search-Ask, если вы зашли в тупик.
size
(второй аргумент) и возвращает их в виде двумерного массива. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Напишите функцию, которая разбивает массив (первый аргумент) на группы по длине size
(второй аргумент) и возвращает их в виде двумерного массива. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
str
) заданной целевой строкой (второй аргумент, target
). Эта проблема может быть решена с помощью .endsWith()
, который был введен в ES2015. Но для этой задачи мы хотели бы, чтобы вы использовали один из методов подстроки JavaScript. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Проверьте, заканчивается ли строка (первый аргумент, str
) заданной целевой строкой (второй аргумент, target
). Эта проблема может быть решена с помощью .endsWith()
, который был введен в ES2015. Но для этой задачи мы хотели бы, чтобы вы использовали один из методов подстроки JavaScript. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
n!
Например: 5! = 1 * 2 * 3 * 4 * 5 = 120
В функцию будут 5! = 1 * 2 * 3 * 4 * 5 = 120
только целые числа, большие или равные нулю. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Верните факториал предоставленного целого числа. Если целое число представлено буквой n, факториал является произведением всех положительных целых чисел, меньших или равных n. Факториалы часто представлены сокращенной нотой n!
Например: 5! = 1 * 2 * 3 * 4 * 5 = 120
В функцию будут 5! = 1 * 2 * 3 * 4 * 5 = 120
только целые числа, большие или равные нулю. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
false
, null
, 0
, ""
, undefined
и NaN
. Подсказка: попробуйте преобразовать каждое значение в логическое. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Удалите все значения фальши из массива. Значения фальши в JavaScript - false
, null
, 0
, ""
, undefined
и NaN
. Подсказка: попробуйте преобразовать каждое значение в логическое. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
["hello", "Hello"]
должен возвращать true, потому что все буквы во второй строке присутствуют в первом, игнорирующем случае. Аргументы ["hello", "hey"]
должны возвращать false, потому что строка "hello" не содержит "y". Наконец, ["Alien", "line"]
должен возвращать true, потому что все буквы в «строке» присутствуют в «Alien». Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Возвращает true, если строка в первом элементе массива содержит все буквы строки во втором элементе массива. Например, ["hello", "Hello"]
должен возвращать true, потому что все буквы во второй строке присутствуют в первом, игнорирующем случае. Аргументы ["hello", "hey"]
должны возвращать false, потому что строка "hello" не содержит "y". Наконец, ["Alien", "line"]
должен возвращать true, потому что все буквы в «строке» присутствуют в «Alien». Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
str
(первый аргумент) для num
times (второй аргумент). Верните пустую строку, если num
не является положительным числом. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Повторите заданную строку str
(первый аргумент) для num
times (второй аргумент). Верните пустую строку, если num
не является положительным числом. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
arr[i]
. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Возвращает массив, состоящий из наибольшего числа из каждого предоставленного подматрица. Для простоты предоставленный массив будет содержать ровно 4 поддиапазона. Помните, вы можете перебирать массив с помощью простого цикла и обращаться к каждому члену с синтаксисом массива arr[i]
. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
slice
и splice
для копирования каждого элемента первого массива во второй массив по порядку. Начните вставлять элементы в индекс n
второго массива. Верните результирующий массив. Входные массивы должны оставаться неизменными после запуска функции. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Вам даны два массива и индекс. Используйте метод массива slice
и splice
для копирования каждого элемента первого массива во второй массив по порядку. Начните вставлять элементы в индекс n
второго массива. Верните результирующий массив. Входные массивы должны оставаться неизменными после запуска функции. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
...
окончанием. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Усечь строку (первый аргумент), если она длиннее заданной максимальной длины строки (второй аргумент). Возвращает усеченную строку с ...
окончанием. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
getIndexToIns([1,2,3,4], 1.5)
должен возвращать 1
потому что он больше 1
(индекс 0), но меньше 2
(индекс 1). Аналогично, getIndexToIns([20,3,5], 19)
должен вернуть 2
потому что, как только массив будет отсортирован, он будет выглядеть как [3,5,20]
а 19
меньше 20
(индекс 2) и больше 5
( индекс 1). Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Возвратите наименьший индекс, по которому значение (второй аргумент) должно быть вставлено в массив (первый аргумент) после его сортировки. Возвращаемое значение должно быть числом. Например, getIndexToIns([1,2,3,4], 1.5)
должен возвращать 1
потому что он больше 1
(индекс 0), но меньше 2
(индекс 1). Аналогично, getIndexToIns([20,3,5], 19)
должен вернуть 2
потому что, как только массив будет отсортирован, он будет выглядеть как [3,5,20]
а 19
меньше 20
(индекс 2) и больше 5
( индекс 1). Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
addTogether(2, 3)
должен возвращать 5
, а addTogether(2)
должен возвращать функцию. Вызов этой возвращенной функции с помощью одного аргумента будет возвращать сумму: var sumTwoAnd = addTogether(2);
sumTwoAnd(3)
возвращает 5
. Если какой-либо аргумент не является допустимым числом, возвращайте undefined. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
+Создайте функцию, которая суммирует два аргумента вместе. Если предоставляется только один аргумент, тогда возвращаем функцию, которая ожидает один аргумент и возвращает сумму. Например, addTogether(2, 3)
должен возвращать 5
, а addTogether(2)
должен возвращать функцию. Вызов этой возвращенной функции с помощью одного аргумента будет возвращать сумму: var sumTwoAnd = addTogether(2);
sumTwoAnd(3)
возвращает 5
. Если какой-либо аргумент не является допустимым числом, возвращайте undefined. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
&
, <
, >
, "
(двойная кавычка) и '
(апострофа) в строку в соответствующие HTML-объекты. Не забудьте использовать Read-Search-Ask, если вы застряли. собственный код.
+Преобразуйте символы &
, <
, >
, "
(двойная кавычка) и '
(апострофа) в строку в соответствующие HTML-объекты. Не забудьте использовать Read-Search-Ask, если вы застряли. собственный код.
arr
, выполните итерацию и удаление каждого элемента, начиная с первого элемента (индекс 0) до тех пор, пока функция func
вернет true
когда итерационный элемент пройдет через него. Затем возвращаем остальную часть массива после выполнения условия, иначе arr
должен быть возвращен как пустой массив. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
+Учитывая массив arr
, выполните итерацию и удаление каждого элемента, начиная с первого элемента (индекс 0) до тех пор, пока функция func
вернет true
когда итерационный элемент пройдет через него. Затем возвращаем остальную часть массива после выполнения условия, иначе arr
должен быть возвращен как пустой массив. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
pre
будет свойством объекта, и вам нужно вернуть true
если его значение является truthy
. В противном случае верните false
. В JavaScript truthy
значениями являются значения, которые переводятся в true
при оценке в булевом контексте. Помните, что вы можете получить доступ к свойствам объекта с помощью либо точечной нотации, либо обозначения []
. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
+Проверьте, является ли предикат (второй аргумент) правдивым для всех элементов коллекции (первый аргумент). Другими словами, вам предоставляется массив объектов. Предикат pre
будет свойством объекта, и вам нужно вернуть true
если его значение является truthy
. В противном случае верните false
. В JavaScript truthy
значениями являются значения, которые переводятся в true
при оценке в булевом контексте. Помните, что вы можете получить доступ к свойствам объекта с помощью либо точечной нотации, либо обозначения []
. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
getFirstName () getLastName () getFullName () setFirstName (first) setLastName (последний) setFullName (firstAndLast)Запустите тесты, чтобы увидеть ожидаемый результат для каждого метода. Методы, принимающие аргумент, должны принимать только один аргумент и должны быть строкой. Эти методы должны быть единственным доступным средством взаимодействия с объектом. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код. +Заполните конструктор объекта следующими способами:
getFirstName () getLastName () getFullName () setFirstName (first) setLastName (последний) setFullName (firstAndLast)Запустите тесты, чтобы увидеть ожидаемый результат для каждого метода. Методы, принимающие аргумент, должны принимать только один аргумент и должны быть строкой. Эти методы должны быть единственным доступным средством взаимодействия с объектом. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
{name: 'name', avgAlt: avgAlt}
. Вы можете прочитать об орбитальных периодах в Википедии . Значения должны округляться до ближайшего целого числа. Тело, находящееся на орбите, - Земля. Радиус земли составляет 6367,4447 километров, а значение GM для Земли составляет 398600,4418 км 3 с -2 . Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
+Верните новый массив, который преобразует среднюю высоту элементов в их орбитальные периоды (в секундах). Массив будет содержать объекты в формате {name: 'name', avgAlt: avgAlt}
. Вы можете прочитать об орбитальных периодах в Википедии . Значения должны округляться до ближайшего целого числа. Тело, находящееся на орбите, - Земля. Радиус земли составляет 6367,4447 километров, а значение GM для Земли составляет 398600,4418 км 3 с -2 . Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
arguments
. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Вам будет предоставлен исходный массив (первый аргумент в функции эсминца), за которым следуют один или несколько аргументов. Удалите все элементы из исходного массива, которые имеют такое же значение, что и эти аргументы. Заметка arguments
. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
num
, возвращаем сумму всех нечетных чисел Фибоначчи, которые меньше или равно num
. Первые два числа в последовательности Фибоначчи равны 1 и 1. Каждое дополнительное число в последовательности представляет собой сумму двух предыдущих чисел. Первые шесть чисел последовательности Фибоначчи - 1, 1, 2, 3, 5 и 8. Например, sumFibs(10)
должен возвращать 10
потому что все нечетные числа Фибоначчи, меньшие или равные 10
равны 1, 1, 3 и 5. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
+Учитывая положительное целое num
, возвращаем сумму всех нечетных чисел Фибоначчи, которые меньше или равно num
. Первые два числа в последовательности Фибоначчи равны 1 и 1. Каждое дополнительное число в последовательности представляет собой сумму двух предыдущих чисел. Первые шесть чисел последовательности Фибоначчи - 1, 1, 2, 3, 5 и 8. Например, sumFibs(10)
должен возвращать 10
потому что все нечетные числа Фибоначчи, меньшие или равные 10
равны 1, 1, 3 и 5. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
[{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]
, и второй аргумент { last: "Capulet" }
, то вы должны вернуть третий объект из массива (первый аргумент), потому что он содержит имя и его значение, которое было передано как второй аргумент. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Создайте функцию, которая просматривает массив объектов (первый аргумент) и возвращает массив всех объектов, имеющих соответствующие пары имени и значения (второй аргумент). Каждая пара имен и значений исходного объекта должна присутствовать в объекте из коллекции, если она должна быть включена в возвращаемый массив. Например, если первым аргументом является [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]
, и второй аргумент { last: "Capulet" }
, то вы должны вернуть третий объект из массива (первый аргумент), потому что он содержит имя и его значение, которое было передано как второй аргумент. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
Caesar cipher
, также известный как shift cipher
. В shift cipher
значения букв сдвигаются на некоторую установленную величину. Обычным современным использованием является шифр ROT13 , где значения букв сдвигаются на 13 мест. Таким образом, «A» ↔ 'N', 'B' ↔ 'O' и т. Д. Напишите функцию, которая берет строку с кодировкой ROT13 в качестве входных данных и возвращает декодированную строку. Все буквы будут заглавными. Не трансформируйте неалфавитный символ (т.е. пробелы, знаки препинания), но передайте их. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
+Одним из простейших и наиболее широко известных шифров является Caesar cipher
, также известный как shift cipher
. В shift cipher
значения букв сдвигаются на некоторую установленную величину. Обычным современным использованием является шифр ROT13 , где значения букв сдвигаются на 13 мест. Таким образом, «A» ↔ 'N', 'B' ↔ 'O' и т. Д. Напишите функцию, которая берет строку с кодировкой ROT13 в качестве входных данных и возвращает декодированную строку. Все буквы будут заглавными. Не трансформируйте неалфавитный символ (т.е. пробелы, знаки препинания), но передайте их. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
checkCashRegister()
функцию ящика checkCashRegister()
которая принимает цену покупки в качестве первого аргумента ( price
), платеж как второй аргумент ( cash
) и денежный ящик ( cid
) в качестве третьего аргумента. cid
- это 2D-массив, в котором доступна доступная валюта. Функция checkCashRegister()
всегда должна возвращать объект со status
ключом change
. Return {status: "INSUFFICIENT_FUNDS", change: []}
если сумма в ящике меньше, чем требуемое изменение, или если вы не можете вернуть точное изменение. Return {status: "CLOSED", change: [...]}
с наличным ящиком в качестве значения для change
ключа, если оно равно требуемому изменению. В противном случае верните {status: "OPEN", change: [...]}
, с внесением изменений в монеты и счета, отсортированные в порядке наивысшего и наименьшего, в качестве значения ключа change
. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код. Валютная единица | Количество |
---|---|
пенс | 0,01 долл. США (PENNY) |
никель | $ 0,05 (NICKEL) |
дайм | $ 0.1 (DIME) |
четверть | 0,25 долл. США (КВАРТАЛ) |
доллар | $ 1 (ДОЛЛАР) |
Пять долларов | $ 5 (ПЯТЬ) |
Десять долларов | 10 долларов США (TEN) |
Двадцать долларов | 20 долларов США (ДВАДЦАТЬ) |
Одна сотня долларов | 100 долларов США (ОДНА СТО) |
checkCashRegister()
функцию ящика checkCashRegister()
которая принимает цену покупки в качестве первого аргумента ( price
), платеж как второй аргумент ( cash
) и денежный ящик ( cid
) в качестве третьего аргумента. cid
- это 2D-массив, в котором доступна доступная валюта. Функция checkCashRegister()
всегда должна возвращать объект со status
ключом change
. Return {status: "INSUFFICIENT_FUNDS", change: []}
если сумма в ящике меньше, чем требуемое изменение, или если вы не можете вернуть точное изменение. Return {status: "CLOSED", change: [...]}
с наличным ящиком в качестве значения для change
ключа, если оно равно требуемому изменению. В противном случае верните {status: "OPEN", change: [...]}
, с внесением изменений в монеты и счета, отсортированные в порядке наивысшего и наименьшего, в качестве значения ключа change
. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код. Валютная единица | Количество |
---|---|
пенс | 0,01 долл. США (PENNY) |
никель | $ 0,05 (NICKEL) |
дайм | $ 0.1 (DIME) |
четверть | 0,25 долл. США (КВАРТАЛ) |
доллар | $ 1 (ДОЛЛАР) |
Пять долларов | $ 5 (ПЯТЬ) |
Десять долларов | 10 долларов США (TEN) |
Двадцать долларов | 20 долларов США (ДВАДЦАТЬ) |
Одна сотня долларов | 100 долларов США (ОДНА СТО) |
true
если данная строка является палиндром. В противном случае верните false
. Палиндром - это слово или предложение, которое написано одинаково как вперед, так и назад, игнорируя знаки препинания, случай и интервал. Заметка "racecar"
, "RaceCar"
и "race CAR"
среди других. Мы также передадим строки со специальными символами, такими как "2A3*3a2"
, "2A3 3a2"
и "2_A3*3#A2"
. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
+Возвращает true
если данная строка является палиндром. В противном случае верните false
. Палиндром - это слово или предложение, которое написано одинаково как вперед, так и назад, игнорируя знаки препинания, случай и интервал. Заметка "racecar"
, "RaceCar"
и "race CAR"
среди других. Мы также передадим строки со специальными символами, такими как "2A3*3a2"
, "2A3 3a2"
и "2_A3*3#A2"
. Не забудьте использовать Read-Search-Ask, если вы застряли. Напишите свой собственный код.
true
если переданная строка выглядит как действительный номер телефона в США. Пользователь может заполнить поле формы любым способом, если он имеет формат действительного номера в США. Ниже приведены примеры допустимых форматов для номеров в США (см. Ниже приведенные ниже тесты для других вариантов): 555-555-5555Для этой задачи вам будет представлена строка, такая как
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
800-692-7753
или 8oo-six427676;laskdjf
. Ваша задача - подтвердить или отклонить телефонный номер США на основе любой комбинации форматов, указанных выше. Код области требуется. Если код страны указан, вы должны подтвердить, что код страны равен 1
. Возвращает true
если строка является действительным номером телефона США; в противном случае верните false
. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
+Возвращает true
если переданная строка выглядит как действительный номер телефона в США. Пользователь может заполнить поле формы любым способом, если он имеет формат действительного номера в США. Ниже приведены примеры допустимых форматов для номеров в США (см. Ниже приведенные ниже тесты для других вариантов): 555-555-5555Для этой задачи вам будет представлена строка, такая как
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
800-692-7753
или 8oo-six427676;laskdjf
. Ваша задача - подтвердить или отклонить телефонный номер США на основе любой комбинации форматов, указанных выше. Код области требуется. Если код страны указан, вы должны подтвердить, что код страны равен 1
. Возвращает true
если строка является действительным номером телефона США; в противном случае верните false
. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
id="drum-machine"
который содержит все остальные элементы. User Story # 2: Внутри #drum-machine
я вижу элемент с соответствующим id="display"
. User Story # 3: В #drum-machine
я могу увидеть 9 кликабельных элементов ударной площадки, каждая из которых имеет имя класса drum-pad
, уникальный идентификатор, который описывает аудиоклип, который будет настроен на ударную площадку для запуска, и внутренний текст, который соответствует одной из следующих клавиш на клавиатуре: Q, W, E, A, S, D, Z, X, C. Барабанные площадки должны быть в этом порядке. User Story # 4: внутри каждого .drum-pad
должен быть audio
элемент HTML5, который имеет атрибут src
указывающий на аудиоклип, имя класса clip
и идентификатор, соответствующий внутреннему тексту его родительского .drum-pad
(например, id="Q"
, id="W"
, id="E"
и т. д.). User Story # 5: Когда я нажимаю элемент .drum-pad
, должен запускаться аудиоклип, содержащийся в его дочернем audio
элементе. User Story # 6: Когда я .drum-pad
клавишу триггера, связанную с каждым .drum-pad
, должен запускаться аудиоклип, содержащийся в его дочернем audio
элементе (например, нажатие клавиши Q должно запускать ударную панель, содержащую строку «Q», нажатие клавиши W должно запускать ударную панель, содержащую строку «W» и т. д.). User Story # 7: Когда .drum-pad
, строка, описывающая связанный аудиоклип, отображается как внутренний текст элемента #display
(каждая строка должна быть уникальной). Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+Цель. Создайте приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/MJyNMd . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Придайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и используются на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я должен видеть внешний контейнер с соответствующим id="drum-machine"
который содержит все остальные элементы. User Story # 2: Внутри #drum-machine
я вижу элемент с соответствующим id="display"
. User Story # 3: В #drum-machine
я могу увидеть 9 кликабельных элементов ударной площадки, каждая из которых имеет имя класса drum-pad
, уникальный идентификатор, который описывает аудиоклип, который будет настроен на ударную площадку для запуска, и внутренний текст, который соответствует одной из следующих клавиш на клавиатуре: Q, W, E, A, S, D, Z, X, C. Барабанные площадки должны быть в этом порядке. User Story # 4: внутри каждого .drum-pad
должен быть audio
элемент HTML5, который имеет атрибут src
указывающий на аудиоклип, имя класса clip
и идентификатор, соответствующий внутреннему тексту его родительского .drum-pad
(например, id="Q"
, id="W"
, id="E"
и т. д.). User Story # 5: Когда я нажимаю элемент .drum-pad
, должен запускаться аудиоклип, содержащийся в его дочернем audio
элементе. User Story # 6: Когда я .drum-pad
клавишу триггера, связанную с каждым .drum-pad
, должен запускаться аудиоклип, содержащийся в его дочернем audio
элементе (например, нажатие клавиши Q должно запускать ударную панель, содержащую строку «Q», нажатие клавиши W должно запускать ударную панель, содержащую строку «W» и т. д.). User Story # 7: Когда .drum-pad
, строка, описывающая связанный аудиоклип, отображается как внутренний текст элемента #display
(каждая строка должна быть уникальной). Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
=
(знак равенства) с соответствующим id="equals"
. User Story # 2: Мой калькулятор должен содержать 10 интерактивных элементов, содержащих по одному номеру от 0 до 9, со следующими идентификаторами: id="zero"
, id="one"
, id="two"
, id="three"
, id="four"
, id="five"
, id="six"
, id="seven"
, id="eight"
и id="nine"
. User Story # 3: Мой калькулятор должен содержать 4 элемента с возможностью клика, каждый из которых содержит один из 4 основных математических операторов со следующими идентификаторами: id="add"
, id="subtract"
, id="multiply"
, id="divide"
, User Story # 4: Мой калькулятор должен содержать интерактивный элемент, содержащий a .
(десятичной точки) с соответствующим id="decimal"
. User Story # 5: Мой калькулятор должен содержать интерактивный элемент с id="clear"
. User Story # 6: Мой калькулятор должен содержать элемент для отображения значений с соответствующим id="display"
. User Story # 7: В любое время нажатие кнопки очистки очищает входные и выходные значения и возвращает калькулятор в исходное состояние; 0 должен отображаться в элементе с идентификатором display
. User Story # 8: Когда я вводил числа, я должен был видеть мой ввод в элементе с идентификатором display
. User Story # 9: В любом порядке я должен иметь возможность добавлять, вычитать, умножать и делить цепочку чисел любой длины, а когда я нажимаю =
, правильный результат должен отображаться в элементе с идентификатором display
. User Story # 10: при вводе чисел мой калькулятор не должен допускать, чтобы число начиналось с нескольких нулей. User Story # 11: После нажатия десятичного элемента a .
следует добавить к отображаемому в данный момент значению; два .
в одном номере не должны приниматься. User Story # 12: Я должен выполнять любую операцию (+, -, *, /) для чисел, содержащих десятичные точки. User Story # 13: Если последовательно введено 2 или более операторов, выполняемая операция должна быть последним введенным оператором. User Story # 14: нажатие оператора, следующего за =
должно начать новый расчет, который работает в результате предыдущей оценки. User Story # 15: Мой калькулятор должен иметь несколько десятичных знаков точности, когда дело доходит до округления (обратите внимание, что нет точного стандарта, но вы должны иметь возможность обрабатывать вычисления, такие как 2 / 7
с разумной точностью, по крайней мере, до 4 знаков после запятой) , Примечание. В калькуляторе калькулятора. Следует отметить, что есть две основные школы мышления в логике ввода калькулятора: логика непосредственного выполнения и логика формулы . В нашем примере используется логика формулы и соблюдается порядок приоритетности операций, немедленное выполнение не выполняется. Любой из них является приемлемым, но учтите, что в зависимости от того, какой вы выбираете, ваш калькулятор может давать разные результаты, чем наши, для определенных уравнений (см. Пример ниже). Пока ваша математика может быть проверена другим калькулятором производства, пожалуйста, не считайте это ошибкой. ПРИМЕР: 3 + 5 x 6 - 2 / 4 =
11.5
32.5
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/wgGVVX . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и использование их на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Мой калькулятор должен содержать интерактивный элемент, содержащий знак =
(знак равенства) с соответствующим id="equals"
. User Story # 2: Мой калькулятор должен содержать 10 интерактивных элементов, содержащих по одному номеру от 0 до 9, со следующими идентификаторами: id="zero"
, id="one"
, id="two"
, id="three"
, id="four"
, id="five"
, id="six"
, id="seven"
, id="eight"
и id="nine"
. User Story # 3: Мой калькулятор должен содержать 4 элемента с возможностью клика, каждый из которых содержит один из 4 основных математических операторов со следующими идентификаторами: id="add"
, id="subtract"
, id="multiply"
, id="divide"
, User Story # 4: Мой калькулятор должен содержать интерактивный элемент, содержащий a .
(десятичной точки) с соответствующим id="decimal"
. User Story # 5: Мой калькулятор должен содержать интерактивный элемент с id="clear"
. User Story # 6: Мой калькулятор должен содержать элемент для отображения значений с соответствующим id="display"
. User Story # 7: В любое время нажатие кнопки очистки очищает входные и выходные значения и возвращает калькулятор в исходное состояние; 0 должен отображаться в элементе с идентификатором display
. User Story # 8: Когда я вводил числа, я должен был видеть мой ввод в элементе с идентификатором display
. User Story # 9: В любом порядке я должен иметь возможность добавлять, вычитать, умножать и делить цепочку чисел любой длины, а когда я нажимаю =
, правильный результат должен отображаться в элементе с идентификатором display
. User Story # 10: при вводе чисел мой калькулятор не должен допускать, чтобы число начиналось с нескольких нулей. User Story # 11: После нажатия десятичного элемента a .
следует добавить к отображаемому в данный момент значению; два .
в одном номере не должны приниматься. User Story # 12: Я должен выполнять любую операцию (+, -, *, /) для чисел, содержащих десятичные точки. User Story # 13: Если последовательно введено 2 или более операторов, выполняемая операция должна быть последним введенным оператором. User Story # 14: нажатие оператора, следующего за =
должно начать новый расчет, который работает в результате предыдущей оценки. User Story # 15: Мой калькулятор должен иметь несколько десятичных знаков точности, когда дело доходит до округления (обратите внимание, что нет точного стандарта, но вы должны иметь возможность обрабатывать вычисления, такие как 2 / 7
с разумной точностью, по крайней мере, до 4 знаков после запятой) , Примечание. В калькуляторе калькулятора. Следует отметить, что есть две основные школы мышления в логике ввода калькулятора: логика непосредственного выполнения и логика формулы . В нашем примере используется логика формулы и соблюдается порядок приоритетности операций, немедленное выполнение не выполняется. Любой из них является приемлемым, но учтите, что в зависимости от того, какой вы выбираете, ваш калькулятор может давать разные результаты, чем наши, для определенных уравнений (см. Пример ниже). Пока ваша математика может быть проверена другим калькулятором производства, пожалуйста, не считайте это ошибкой. ПРИМЕР: 3 + 5 x 6 - 2 / 4 =
11.5
32.5
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
textarea
с соответствующим id="editor"
. User Story # 2: Я вижу элемент с соответствующим id="preview"
. User Story # 3: Когда я ввожу текст в элемент #editor
элемент #preview
обновляется по мере ввода текста для отображения содержимого текстового поля. User Story # 4: Когда я #editor
GitHub в элемент #editor
, текст отображается как HTML в элементе #preview
мере ввода (СОВЕТ: вам не нужно самостоятельно анализировать Markdown - вы можете импортировать отмеченную библиотеку для этого: https://cdnjs.com/libraries/marked ). User Story # 5: Когда мой предварительный просмотр по #editor
сначала загружается, текст по умолчанию в поле #editor
должен содержать допустимую уценку, которая представляет собой по крайней мере один из следующих элементов: заголовок (размер H1), заголовок sub (размер H2) , ссылку, встроенный код, блок кода, элемент списка, блок-образец, изображение и полужирный текст. User Story # 6: Когда мой предварительный просмотр по #editor
сначала загружается, #editor
по умолчанию в поле #editor
должна отображаться как HTML в элементе #preview
. Дополнительный бонус (вам не нужно проходить этот тестовый проход). Мой предварительный просмотр markdown интерпретирует возврат каретки и отображает их как элементы br
(line break). Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/GrZVVO . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и использование их на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я вижу элемент textarea
с соответствующим id="editor"
. User Story # 2: Я вижу элемент с соответствующим id="preview"
. User Story # 3: Когда я ввожу текст в элемент #editor
элемент #preview
обновляется по мере ввода текста для отображения содержимого текстового поля. User Story # 4: Когда я #editor
GitHub в элемент #editor
, текст отображается как HTML в элементе #preview
мере ввода (СОВЕТ: вам не нужно самостоятельно анализировать Markdown - вы можете импортировать отмеченную библиотеку для этого: https://cdnjs.com/libraries/marked ). User Story # 5: Когда мой предварительный просмотр по #editor
сначала загружается, текст по умолчанию в поле #editor
должен содержать допустимую уценку, которая представляет собой по крайней мере один из следующих элементов: заголовок (размер H1), заголовок sub (размер H2) , ссылку, встроенный код, блок кода, элемент списка, блок-образец, изображение и полужирный текст. User Story # 6: Когда мой предварительный просмотр по #editor
сначала загружается, #editor
по умолчанию в поле #editor
должна отображаться как HTML в элементе #preview
. Дополнительный бонус (вам не нужно проходить этот тестовый проход). Мой предварительный просмотр markdown интерпретирует возврат каретки и отображает их как элементы br
(line break). Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
id="break-label"
который содержит строку (например, "Break Length"). User Story # 2: Я вижу элемент с id="session-label"
который содержит строку (например, «Длина сеанса»). User Story # 3: Я вижу два интерактивных элемента с соответствующими идентификаторами: id="break-decrement"
и id="session-decrement"
. User Story # 4: Я вижу два интерактивных элемента с соответствующими идентификаторами: id="break-increment"
и id="session-increment"
. User Story # 5: Я вижу элемент с соответствующим id="break-length"
, который по умолчанию (при загрузке) отображает значение 5. User Story # 6: я могу видеть элемент с соответствующим id="session-length"
, который по умолчанию отображает значение 25. User Story # 7: я могу увидеть элемент с соответствующим id="timer-label"
, который содержит строку, указывающую, что сеанс инициализирован (например,« Session ») , User Story # 8: Я вижу элемент с соответствующим id="time-left"
. ПРИМЕЧАНИЕ. При приостановке или запуске значение в этом поле должно всегда отображаться в формате mm:ss
(т.е. 25:00). User Story # 9: Я вижу кликабельный элемент с соответствующим id="start_stop"
. User Story # 10: Я вижу кликабельный элемент с соответствующим id="reset"
. User Story # 11: Когда я нажимаю элемент с идентификатором reset
, любой рабочий таймер должен быть остановлен, значение в id="break-length"
должно возвращаться к 5
, значение в id="session-length"
должно возвращаться до 25, а элемент с id="time-left"
должен сбрасываться в состояние по умолчанию. User Story # 12: Когда я нажимаю элемент с идентификатором break-decrement
, значение в id="break-length"
уменьшается на значение 1, и я могу видеть обновленное значение. User Story # 13: Когда я нажимаю на элемент с идентификатором break-increment
, значение в id="break-length"
увеличивается на значение 1, и я могу видеть обновленное значение. User Story # 14: Когда я нажимаю элемент с идентификатором сокращения session-decrement
, значение в id="session-length"
уменьшается на значение 1, и я могу видеть обновленное значение. User Story # 15: Когда я нажимаю элемент с идентификатором session-increment
, значение в id="session-length"
увеличивается на значение 1, и я могу видеть обновленное значение. User Story # 16: Я не должен был устанавливать длину сеанса или прерывания до <= 0. User Story # 17: Я не должен был устанавливать сессию или длину прерывания до 60. Пользовательская история № 18: Когда я сначала нажмите элемент с id="start_stop"
, таймер должен начать работать со значения, отображаемого в настоящее время в id="session-length"
, даже если значение было увеличено или уменьшено с первоначального значения 25. User Story # 19 : Если таймер запущен, элемент с id time-left
должен отображать оставшееся время в формате mm:ss
(декрементирование на значение 1 и обновление дисплея каждые 1000 мс). User Story # 20: Если таймер запущен, и я нажимаю на элемент с id="start_stop"
, обратный отсчет должен приостанавливаться. User Story # 21: Если таймер приостановлен, и я нажимаю на элемент с id="start_stop"
, обратный отсчет должен возобновиться с точки, в которой он был приостановлен. User Story # 22: Когда обратный отсчет сеанса достигает нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), и начинается новый обратный отсчет, элемент с идентификатором timer-label
должен отображать строку, указывающую, что начался перерыв. User Story # 23: Когда обратный отсчет сеанса достигнет нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН доходить до 00:00), начинается новый обратный отсчет, отсчитывающий от значения, отображаемого в настоящее время в элементе id="break-length"
. User Story # 24: Когда обратный отсчет доходит до нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), и начинается новый обратный отсчет, элемент с идентификатором timer-label
должен отображать строку, указывающую, что сеанс начался. User Story # 25: Когда обратный отсчет доходит до нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), должен начинаться отсчет нового сеанса, отсчитывающий от значения, отображаемого в настоящее время в элементе id="session-length"
. User Story # 26: Когда обратный отсчет достигает нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), должен звучать звук, указывающий, что время вверх. Это следует использовать в HTML5 audio
тегов и имеет соответствующий id="beep"
. User Story # 27: Звуковой элемент с id="beep"
должен быть 1 секунду или дольше. User Story # 28: Звуковой элемент с идентификатором beep
должен прекратить воспроизведение и перематываться до начала, когда щелкнут элемент с идентификатором reset
. Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+Цель: создать приложение CodePen.io , функционально подобное этому: https://codepen.io/freeCodeCamp/full/XpKrrW . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и использование их на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я вижу элемент с id="break-label"
который содержит строку (например, "Break Length"). User Story # 2: Я вижу элемент с id="session-label"
который содержит строку (например, «Длина сеанса»). User Story # 3: Я вижу два интерактивных элемента с соответствующими идентификаторами: id="break-decrement"
и id="session-decrement"
. User Story # 4: Я вижу два интерактивных элемента с соответствующими идентификаторами: id="break-increment"
и id="session-increment"
. User Story # 5: Я вижу элемент с соответствующим id="break-length"
, который по умолчанию (при загрузке) отображает значение 5. User Story # 6: я могу видеть элемент с соответствующим id="session-length"
, который по умолчанию отображает значение 25. User Story # 7: я могу увидеть элемент с соответствующим id="timer-label"
, который содержит строку, указывающую, что сеанс инициализирован (например,« Session ») , User Story # 8: Я вижу элемент с соответствующим id="time-left"
. ПРИМЕЧАНИЕ. При приостановке или запуске значение в этом поле должно всегда отображаться в формате mm:ss
(т.е. 25:00). User Story # 9: Я вижу кликабельный элемент с соответствующим id="start_stop"
. User Story # 10: Я вижу кликабельный элемент с соответствующим id="reset"
. User Story # 11: Когда я нажимаю элемент с идентификатором reset
, любой рабочий таймер должен быть остановлен, значение в id="break-length"
должно возвращаться к 5
, значение в id="session-length"
должно возвращаться до 25, а элемент с id="time-left"
должен сбрасываться в состояние по умолчанию. User Story # 12: Когда я нажимаю элемент с идентификатором break-decrement
, значение в id="break-length"
уменьшается на значение 1, и я могу видеть обновленное значение. User Story # 13: Когда я нажимаю на элемент с идентификатором break-increment
, значение в id="break-length"
увеличивается на значение 1, и я могу видеть обновленное значение. User Story # 14: Когда я нажимаю элемент с идентификатором сокращения session-decrement
, значение в id="session-length"
уменьшается на значение 1, и я могу видеть обновленное значение. User Story # 15: Когда я нажимаю элемент с идентификатором session-increment
, значение в id="session-length"
увеличивается на значение 1, и я могу видеть обновленное значение. User Story # 16: Я не должен был устанавливать длину сеанса или прерывания до <= 0. User Story # 17: Я не должен был устанавливать сессию или длину прерывания до 60. Пользовательская история № 18: Когда я сначала нажмите элемент с id="start_stop"
, таймер должен начать работать со значения, отображаемого в настоящее время в id="session-length"
, даже если значение было увеличено или уменьшено с первоначального значения 25. User Story # 19 : Если таймер запущен, элемент с id time-left
должен отображать оставшееся время в формате mm:ss
(декрементирование на значение 1 и обновление дисплея каждые 1000 мс). User Story # 20: Если таймер запущен, и я нажимаю на элемент с id="start_stop"
, обратный отсчет должен приостанавливаться. User Story # 21: Если таймер приостановлен, и я нажимаю на элемент с id="start_stop"
, обратный отсчет должен возобновиться с точки, в которой он был приостановлен. User Story # 22: Когда обратный отсчет сеанса достигает нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), и начинается новый обратный отсчет, элемент с идентификатором timer-label
должен отображать строку, указывающую, что начался перерыв. User Story # 23: Когда обратный отсчет сеанса достигнет нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН доходить до 00:00), начинается новый обратный отсчет, отсчитывающий от значения, отображаемого в настоящее время в элементе id="break-length"
. User Story # 24: Когда обратный отсчет доходит до нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), и начинается новый обратный отсчет, элемент с идентификатором timer-label
должен отображать строку, указывающую, что сеанс начался. User Story # 25: Когда обратный отсчет доходит до нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), должен начинаться отсчет нового сеанса, отсчитывающий от значения, отображаемого в настоящее время в элементе id="session-length"
. User Story # 26: Когда обратный отсчет достигает нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), должен звучать звук, указывающий, что время вверх. Это следует использовать в HTML5 audio
тегов и имеет соответствующий id="beep"
. User Story # 27: Звуковой элемент с id="beep"
должен быть 1 секунду или дольше. User Story # 28: Звуковой элемент с идентификатором beep
должен прекратить воспроизведение и перематываться до начала, когда щелкнут элемент с идентификатором reset
. Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
id="quote-box"
. User Story # 2: В #quote-box
я вижу элемент с соответствующим id="text"
. User Story # 3: В #quote-box
я вижу элемент с соответствующим id="author"
. User Story # 4: В #quote-box
я вижу элемент с кликабелем с соответствующим id="new-quote"
. User Story # 5: В #quote-box
я вижу кликабельную id="tweet-quote"
. User Story # 6: При первой загрузке моя машина цитирования отображает случайную цитату в элементе с id="text"
. User Story # 7: При первой загрузке моя машина цитирования отображает автора случайной цитаты в элементе с id="author"
. User Story # 8: Когда нажата кнопка #new-quote
, моя машина цитирования должна получить новую цитату и отобразить ее в элементе #text
. User Story # 9: Моя машина цитирования должна использовать автора #new-quote
нажатии кнопки #new-quote
и отображать ее в элементе #author
. User Story # 10: Я могу прокрутить текущую цитату, щелкнув элемент #tweet-quote
a
. Этот элемент должен включать a
"twitter.com/intent/tweet"
путь в этом href
атрибута чирикать текущую котировку. User Story # 11: Элемент оболочки #quote-box
должен располагаться по горизонтали. Запустите тесты с уровнем масштабирования браузера на 100% и увеличьте страницу. Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли. id="quote-box"
. User Story # 2: В #quote-box
я вижу элемент с соответствующим id="text"
. User Story # 3: В #quote-box
я вижу элемент с соответствующим id="author"
. User Story # 4: В #quote-box
я вижу элемент с кликабелем с соответствующим id="new-quote"
. User Story # 5: В #quote-box
я вижу кликабельную id="tweet-quote"
. User Story # 6: При первой загрузке моя машина цитирования отображает случайную цитату в элементе с id="text"
. User Story # 7: При первой загрузке моя машина цитирования отображает автора случайной цитаты в элементе с id="author"
. User Story # 8: Когда нажата кнопка #new-quote
, моя машина цитирования должна получить новую цитату и отобразить ее в элементе #text
. User Story # 9: Моя машина цитирования должна использовать автора #new-quote
нажатии кнопки #new-quote
и отображать ее в элементе #author
. User Story # 10: Я могу прокрутить текущую цитату, щелкнув элемент #tweet-quote
a
. Этот элемент должен включать a
"twitter.com/intent/tweet"
путь в этом href
атрибута чирикать текущую котировку. User Story # 11: Элемент оболочки #quote-box
должен располагаться по горизонтали. Запустите тесты с уровнем масштабирования браузера на 100% и увеличьте страницу. Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли. id="title"
. История пользователя # 2: Ваша диаграмма должна иметь g
элемент оси х с соответствующим id="x-axis"
. User Story # 3: Ваша диаграмма должна иметь ось y элемента g
с соответствующим id="y-axis"
. User Story # 4: Обе оси должны содержать несколько меток ярлыков, каждый из которых имеет соответствующий class="tick"
. User Story # 5: Ваша диаграмма должна иметь rect
элемент для каждой точки данных с соответствующим class="bar"
отображающим данные. User Story # 6: В каждом баре должны быть data-date
и data-gdp
содержащие значения даты и ВВП. User Story # 7: свойства data-date
бара должны соответствовать порядку предоставленных данных. User Story # 8: Свойства data-gdp
элементов бара должны соответствовать порядку предоставленных данных. User Story # 9: Высота каждого элемента бара должна точно представлять соответствующий ВВП. User Story # 10: Атрибут data-date
и его соответствующий элемент бара должны совпадать с соответствующим значением по оси x. User Story # 11: атрибут data-gdp
и его соответствующий элемент бара должны совпадать с соответствующим значением по оси y. User Story # 12: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip"
которая отображает больше информации об этой области. User Story # 13: Моя подсказка должна иметь свойство data-date
, соответствующее data-date
данных активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
Вы можете создать свой проект, на CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, которая вам нравится: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. После того, как вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми результатами тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+Цель: создать приложение CodePen.io , функционально подобное этому: https://codepen.io/freeCodeCamp/full/GrZVaM . Выполните приведенные ниже истории пользователей и пройдите все тесты для выполнения задания. Создайте для приложения свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк для создания интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге это исправим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Ваша диаграмма должна иметь заголовок с соответствующим id="title"
. История пользователя # 2: Ваша диаграмма должна иметь g
элемент оси х с соответствующим id="x-axis"
. User Story # 3: Ваша диаграмма должна иметь ось y элемента g
с соответствующим id="y-axis"
. User Story # 4: Обе оси должны содержать несколько меток ярлыков, каждый из которых имеет соответствующий class="tick"
. User Story # 5: Ваша диаграмма должна иметь rect
элемент для каждой точки данных с соответствующим class="bar"
отображающим данные. User Story # 6: В каждом баре должны быть data-date
и data-gdp
содержащие значения даты и ВВП. User Story # 7: свойства data-date
бара должны соответствовать порядку предоставленных данных. User Story # 8: Свойства data-gdp
элементов бара должны соответствовать порядку предоставленных данных. User Story # 9: Высота каждого элемента бара должна точно представлять соответствующий ВВП. User Story # 10: Атрибут data-date
и его соответствующий элемент бара должны совпадать с соответствующим значением по оси x. User Story # 11: атрибут data-gdp
и его соответствующий элемент бара должны совпадать с соответствующим значением по оси y. User Story # 12: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip"
которая отображает больше информации об этой области. User Story # 13: Моя подсказка должна иметь свойство data-date
, соответствующее data-date
данных активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
Вы можете создать свой проект, на CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, которая вам нравится: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. После того, как вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми результатами тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
id="title"
. User Story # 2: У моего choropleth должен быть элемент описания с соответствующим id="description"
. User Story # 3: Мой choropleth должен иметь графства с соответствующим class="county"
которые представляют данные. User Story # 4: должно быть не менее 4 разных цветов заливки, используемых для округов. User Story # 5: Мои округа должны иметь характеристики data-fips
и data-education
имеющие соответствующие значения fips и education. User Story # 6: Мой choropleth должен иметь графство для каждой предоставленной точки данных. User Story # 7: В округах должны быть значения данных и данных, которые соответствуют данным образца. User Story # 8: Мой choropleth должен иметь легенду с соответствующим id="legend"
. User Story # 9: Для легенды должно быть не менее 4 различных цветов заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip"
которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-education
которое соответствует data-education
данных в активной области. Вот данные, которые вам нужно будет выполнить для этого проекта: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/EZKqza . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Мой choropleth должен иметь заголовок с соответствующим id="title"
. User Story # 2: У моего choropleth должен быть элемент описания с соответствующим id="description"
. User Story # 3: Мой choropleth должен иметь графства с соответствующим class="county"
которые представляют данные. User Story # 4: должно быть не менее 4 разных цветов заливки, используемых для округов. User Story # 5: Мои округа должны иметь характеристики data-fips
и data-education
имеющие соответствующие значения fips и education. User Story # 6: Мой choropleth должен иметь графство для каждой предоставленной точки данных. User Story # 7: В округах должны быть значения данных и данных, которые соответствуют данным образца. User Story # 8: Мой choropleth должен иметь легенду с соответствующим id="legend"
. User Story # 9: Для легенды должно быть не менее 4 различных цветов заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip"
которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-education
которое соответствует data-education
данных в активной области. Вот данные, которые вам нужно будет выполнить для этого проекта: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
id="title"
. User Story # 2: Моя карта тепла должна иметь описание с соответствующим id="description"
. User Story # 3: Моя карта тепла должна иметь ось x с соответствующим id="x-axis"
. User Story # 4: Моя карта тепла должна иметь ось y с соответствующим id="y-axis"
. User Story # 5: Моя карта тепла должна иметь rect
элементы с class="cell"
которые представляют данные. User Story # 6: Для ячеек должно быть не менее 4 различных цветов заливки. User Story # 7: Каждая ячейка будет иметь свойства data-month
, data-year
, data-temp
содержащие их соответствующие значения месяца, года и температуры. User Story # 8: data-month
, data-year
каждой ячейки должен находиться в пределах диапазона данных. User Story # 9: Моя карта тепла должна иметь ячейки, которые выравниваются с соответствующим месяцем по оси y. User Story # 10: Моя карта тепла должна иметь ячейки, которые совпадают с соответствующим годом по оси x. User Story # 11: Моя карта тепла должна иметь несколько меток ярлыков по оси Y с полным именем месяца. User Story # 12: Моя карта тепла должна иметь несколько меток ярлыков по оси x с годами между 1754 и 2015 годами. Пользовательская история №13: Моя карта тепла должна иметь легенду с соответствующим id="legend"
. User Story # 14: Моя легенда должна содержать rect
элементы. User Story # 15: rect
элементы в легенде должны использовать как минимум 4 разных цвета заливки. User Story # 16: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip"
которая отображает больше информации об этой области. User Story # 16: Моя подсказка должна обладать свойством data-year
которое соответствует году data-year
активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json
Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/JEXgeY . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Моя карта тепла должна иметь заголовок с соответствующим id="title"
. User Story # 2: Моя карта тепла должна иметь описание с соответствующим id="description"
. User Story # 3: Моя карта тепла должна иметь ось x с соответствующим id="x-axis"
. User Story # 4: Моя карта тепла должна иметь ось y с соответствующим id="y-axis"
. User Story # 5: Моя карта тепла должна иметь rect
элементы с class="cell"
которые представляют данные. User Story # 6: Для ячеек должно быть не менее 4 различных цветов заливки. User Story # 7: Каждая ячейка будет иметь свойства data-month
, data-year
, data-temp
содержащие их соответствующие значения месяца, года и температуры. User Story # 8: data-month
, data-year
каждой ячейки должен находиться в пределах диапазона данных. User Story # 9: Моя карта тепла должна иметь ячейки, которые выравниваются с соответствующим месяцем по оси y. User Story # 10: Моя карта тепла должна иметь ячейки, которые совпадают с соответствующим годом по оси x. User Story # 11: Моя карта тепла должна иметь несколько меток ярлыков по оси Y с полным именем месяца. User Story # 12: Моя карта тепла должна иметь несколько меток ярлыков по оси x с годами между 1754 и 2015 годами. Пользовательская история №13: Моя карта тепла должна иметь легенду с соответствующим id="legend"
. User Story # 14: Моя легенда должна содержать rect
элементы. User Story # 15: rect
элементы в легенде должны использовать как минимум 4 разных цвета заливки. User Story # 16: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip"
которая отображает больше информации об этой области. User Story # 16: Моя подсказка должна обладать свойством data-year
которое соответствует году data-year
активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json
Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
id="title"
. User Story # 2: Я вижу ось x, которая имеет соответствующий id="x-axis"
. User Story # 3: Я вижу ось y, которая имеет соответствующий id="y-axis"
. User Story # 4: Я вижу точки, каждая из которых имеет класс dot
, которые представляют собой данные, которые отображаются. User Story # 5: Каждая точка должна иметь свойства data-xvalue
и data-yvalue
содержащие их соответствующие значения x и y. User Story # 6: Значение data-xvalue
data-yvalue
и значение data-xvalue
data-yvalue
каждой точки должны находиться в пределах диапазона фактических данных и в правильном формате данных. Для data-xvalue
целые числа (полные годы) или объекты Date приемлемы для оценки теста. Для data-yvalue
(минут) используйте объекты Date. User Story # 7: Значение data-xvalue
и соответствующая точка должны совпадать с соответствующей точкой / значением по оси x. User Story # 8: Значение data-yvalue
и соответствующая точка должны совпадать с соответствующей точкой / значением по оси y. User Story # 9: Я вижу несколько меток ярлыков по оси Y с временным форматом %M:%S
User Story # 10: Я вижу несколько меток ярлыков по оси x, которые показывают год. User Story # 11: Я вижу, что диапазон меток оси X находится в пределах диапазона фактических данных по оси x. User Story # 12: Я вижу, что диапазон меток оси Y находится в пределах диапазона фактических данных оси Y. User Story # 13: Я вижу легенду, содержащую описательный текст с id="legend"
. User Story # 14: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip"
которая отображает больше информации о области. User Story # 15: Моя подсказка должна иметь свойство data-year
которое соответствует data-xvalue
активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json
Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/bgpXyK . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Я вижу элемент заголовка, который имеет соответствующий id="title"
. User Story # 2: Я вижу ось x, которая имеет соответствующий id="x-axis"
. User Story # 3: Я вижу ось y, которая имеет соответствующий id="y-axis"
. User Story # 4: Я вижу точки, каждая из которых имеет класс dot
, которые представляют собой данные, которые отображаются. User Story # 5: Каждая точка должна иметь свойства data-xvalue
и data-yvalue
содержащие их соответствующие значения x и y. User Story # 6: Значение data-xvalue
data-yvalue
и значение data-xvalue
data-yvalue
каждой точки должны находиться в пределах диапазона фактических данных и в правильном формате данных. Для data-xvalue
целые числа (полные годы) или объекты Date приемлемы для оценки теста. Для data-yvalue
(минут) используйте объекты Date. User Story # 7: Значение data-xvalue
и соответствующая точка должны совпадать с соответствующей точкой / значением по оси x. User Story # 8: Значение data-yvalue
и соответствующая точка должны совпадать с соответствующей точкой / значением по оси y. User Story # 9: Я вижу несколько меток ярлыков по оси Y с временным форматом %M:%S
User Story # 10: Я вижу несколько меток ярлыков по оси x, которые показывают год. User Story # 11: Я вижу, что диапазон меток оси X находится в пределах диапазона фактических данных по оси x. User Story # 12: Я вижу, что диапазон меток оси Y находится в пределах диапазона фактических данных оси Y. User Story # 13: Я вижу легенду, содержащую описательный текст с id="legend"
. User Story # 14: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip"
которая отображает больше информации о области. User Story # 15: Моя подсказка должна иметь свойство data-year
которое соответствует data-xvalue
активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json
Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
id="title"
. User Story # 2: Моя древовидная карта должна иметь описание с соответствующим id="description"
. User Story # 3: Моя карта деревьев должна иметь rect
элементы с соответствующим class="tile"
которые представляют данные. User Story # 4: Для плиток должно быть не менее двух разных цветов заливки. User Story # 5: Каждая плитка должна иметь свойства data-name
, data-category
и data-value
содержащие их соответствующее имя, категорию и значение. User Story # 6: Площадь каждой плитки должна соответствовать размеру данных: плитки с большим значением данных должны иметь большую площадь. User Story # 7: Моя карта деревьев должна иметь легенду с соответствующим id="legend"
. User Story # 8: Моя легенда должна иметь rect
элементы с соответствующим class="legend-item"
. User Story # 9: rect
элементы в легенде должны использовать как минимум 2 разных цвета заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip"
которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-value
, соответствующее data-value
данных активной области. Для этого проекта вы можете использовать любой из следующих наборов данных: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/KaNGNR . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Моя карта дерева должна иметь заголовок с соответствующим id="title"
. User Story # 2: Моя древовидная карта должна иметь описание с соответствующим id="description"
. User Story # 3: Моя карта деревьев должна иметь rect
элементы с соответствующим class="tile"
которые представляют данные. User Story # 4: Для плиток должно быть не менее двух разных цветов заливки. User Story # 5: Каждая плитка должна иметь свойства data-name
, data-category
и data-value
содержащие их соответствующее имя, категорию и значение. User Story # 6: Площадь каждой плитки должна соответствовать размеру данных: плитки с большим значением данных должны иметь большую площадь. User Story # 7: Моя карта деревьев должна иметь легенду с соответствующим id="legend"
. User Story # 8: Моя легенда должна иметь rect
элементы с соответствующим class="legend-item"
. User Story # 9: rect
элементы в легенде должны использовать как минимум 2 разных цвета заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip"
которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-value
, соответствующее data-value
данных активной области. Для этого проекта вы можете использовать любой из следующих наборов данных: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
△
или ⊕
) предоставленных массивов. Для двух множеств (например, для множества A = {1, 2, 3}
и множества B = {2, 3, 4}
) математический термин «симметричная разность» двух множеств представляет собой включающее все элементы исходных множеств, не принадлежащие одновременно обоим исходным множествам ( A △ B = C = {1, 4}
). Для каждой дополнительной симметричной разности, которую вы принимаете (допустим, множество D = {2, 3}
), вы должны получить набор с элементами, которые находятся в любом из двух наборов, но не в обоих одновременно ( C △ D = {1, 4} △ {2, 3} = {1, 2, 3, 4}
). Результирующий массив должен содержать только уникальные значения ( без дубликатов ). Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте парное программирование. Напишите свой собственный код.
+Создайте функцию, которая принимает два или более массива и возвращает массив симметричной разности ( △
или ⊕
) предоставленных массивов. Для двух множеств (например, для множества A = {1, 2, 3}
и множества B = {2, 3, 4}
) математический термин «симметричная разность» двух множеств представляет собой включающее все элементы исходных множеств, не принадлежащие одновременно обоим исходным множествам ( A △ B = C = {1, 4}
). Для каждой дополнительной симметричной разности, которую вы принимаете (допустим, множество D = {2, 3}
), вы должны получить набор с элементами, которые находятся в любом из двух наборов, но не в обоих одновременно ( C △ D = {1, 4} △ {2, 3} = {1, 2, 3, 4}
). Результирующий массив должен содержать только уникальные значения ( без дубликатов ). Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте парное программирование. Напишите свой собственный код.
arr1
). Если элемент не найден, добавьте новый элемент и количество в массив инвентаря. Возвращаемый массив инвентаря должен быть в алфавитном порядке по позиции. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
+Сравните и обновите инвентарь, хранящийся в 2D-массиве, против второго 2D-массива новой доставки. Обновите текущие объемы инвентарных количеств (в arr1
). Если элемент не найден, добавьте новый элемент и количество в массив инвентаря. Возвращаемый массив инвентаря должен быть в алфавитном порядке по позиции. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
aab
должен возвращать 2, поскольку имеет 6 полных перестановок ( aab
, aab
, aba
, aba
, baa
, baa
), но только 2 из них ( aba
и aba
) не имеют одинаковой буквы (в данном случае a
) повторяющееся. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
+Возвращает число полных перестановок предоставленной строки, которые не имеют повторяющихся последовательных букв. Предположим, что все символы в предоставленной строке уникальны. Например, aab
должен возвращать 2, поскольку имеет 6 полных перестановок ( aab
, aab
, aba
, aba
, baa
, baa
), но только 2 из них ( aba
и aba
) не имеют одинаковой буквы (в данном случае a
) повторяющееся. Не забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
arr
, найдите пары элементов, сумма которых равна второму аргументу arg
и возвращает сумму их индексов. Вы можете использовать несколько пар, которые имеют одинаковые числовые элементы, но разные индексы. Каждая пара должна использовать самые низкие доступные индексы. Как только элемент был использован, его нельзя повторно использовать для соединения с другим элементом. Например, pairwise([1, 1, 2], 3)
создает пару [2, 1]
используя 1 в индексе 0, а не 1 в индексе 1, потому что 0 + 2 <1 + 2. Например, pairwise([7, 9, 11, 13, 15], 20)
возвращает 6
. Парами, суммирующимися до 20, являются [7, 13]
и [9, 11]
. Затем мы можем записать массив с их индексами и значениями. Индекс | 0 | 1 | 2 | 3 | 4 |
---|---|---|---|---|---|
Стоимость | 7 | 9 | 11 | 13 | 15 |
6
забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
+Учитывая массив arr
, найдите пары элементов, сумма которых равна второму аргументу arg
и возвращает сумму их индексов. Вы можете использовать несколько пар, которые имеют одинаковые числовые элементы, но разные индексы. Каждая пара должна использовать самые низкие доступные индексы. Как только элемент был использован, его нельзя повторно использовать для соединения с другим элементом. Например, pairwise([1, 1, 2], 3)
создает пару [2, 1]
используя 1 в индексе 0, а не 1 в индексе 1, потому что 0 + 2 <1 + 2. Например, pairwise([7, 9, 11, 13, 15], 20)
возвращает 6
. Парами, суммирующимися до 20, являются [7, 13]
и [9, 11]
. Затем мы можем записать массив с их индексами и значениями. Индекс | 0 | 1 | 2 | 3 | 4 |
---|---|---|---|---|---|
Стоимость | 7 | 9 | 11 | 13 | 15 |
6
забудьте использовать Read-Search-Ask, если вы застряли. Попробуйте подключить программу. Напишите свой собственный код.
https://s3.amazonaws.com/freecodecamp/simonSound1.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3
. Не забудьте использовать Read-Search-Ask, если вы застряли. Когда вы закончите, нажмите кнопку «Я закончил эту задачу» и включите ссылку на вашу CodePen. Вы можете получить отзывы о своем проекте, поделившись с друзьями на Facebook.
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/obYBjE . Выполняйте приведенные ниже истории пользователей . Используйте любые библиотеки или API, которые вам нужны. Дайте ему свой личный стиль. User Story: Мне представлена случайная серия кнопочных прессов. User Story: каждый раз, когда я нажимаю кнопку серии, я вижу ту же серию нажатий кнопок, но с дополнительным шагом. User Story: Я слышу звук, соответствующий каждой кнопке, как при нажатии серии нажатий, так и при нажатии кнопки. User Story: Если я нажимаю неправильную кнопку, меня уведомляют, что я сделал это, и эта серия нажатий на кнопки снова начинается, чтобы напомнить мне о шаблоне, поэтому я могу попробовать еще раз. User Story: Я вижу, сколько шагов в текущей серии нажатий кнопок. User Story: Если я хочу перезапустить, я могу нажать кнопку, чтобы сделать это, и игра вернется на один шаг. User Story: Я могу играть в строгом режиме, если, если я нажимаю кнопку, неправильно, она уведомляет меня о том, что я сделал это, и игра перезапускается при новой случайной серии нажатий на кнопки. История пользователя: я могу выиграть игру, выполнив последовательность из 20 шагов. Меня уведомляют о моей победе, затем игра начинается. Подсказка. Вот mp3, которые вы можете использовать для каждой кнопки: https://s3.amazonaws.com/freecodecamp/simonSound1.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3
. Не забудьте использовать Read-Search-Ask, если вы застряли. Когда вы закончите, нажмите кнопку «Я закончил эту задачу» и включите ссылку на вашу CodePen. Вы можете получить отзывы о своем проекте, поделившись с друзьями на Facebook.
https://en.wikipedia.org/wiki/Special:Random
. Подсказка # 2: вот запись об использовании API Википедии: https://www.mediawiki.org/wiki/API:Main_page
. Подсказка №3: Используйте эту ссылку, чтобы поэкспериментировать с API Википедии. Не забудьте использовать Read-Search-Ask, если вы застряли. Когда вы закончите, нажмите кнопку «Я закончил эту задачу» и включите ссылку на вашу CodePen. Вы можете получить отзывы о своем проекте, поделившись с друзьями на Facebook.
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/wGqEga/ . Выполняйте приведенные ниже истории пользователей . Используйте любые библиотеки или API, которые вам нужны. Дайте ему свой личный стиль. User Story: я могу искать записи в Википедии в окне поиска и просматривать полученные записи в Википедии. User Story: Я могу нажать кнопку, чтобы увидеть случайную запись в Википедии. Подсказка №1: Вот URL, который вы можете использовать для получения случайной статьи в Википедии: https://en.wikipedia.org/wiki/Special:Random
. Подсказка # 2: вот запись об использовании API Википедии: https://www.mediawiki.org/wiki/API:Main_page
. Подсказка №3: Используйте эту ссылку, чтобы поэкспериментировать с API Википедии. Не забудьте использовать Read-Search-Ask, если вы застряли. Когда вы закончите, нажмите кнопку «Я закончил эту задачу» и включите ссылку на вашу CodePen. Вы можете получить отзывы о своем проекте, поделившись с друзьями на Facebook.
https://
) для получения локали пользователя через геолокацию HTML5. По этой причине мы рекомендуем использовать HTML5 Geolocation, чтобы получить местоположение пользователя, а затем использовать freeCodeCamp Weather API https://fcc-weather-api.glitch.me, который использует соединение HTTP Secure для погоды. Кроме того, обязательно подключитесь к CodePen.io через https://
. Не забудьте использовать Read-Search-Ask, если вы застряли. Когда вы закончите, нажмите кнопку «Я закончил эту задачу» и включите ссылку на вашу CodePen. Вы можете получить отзывы о своем проекте, поделившись с друзьями на Facebook.
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/bELRjV . Правило №1: Не смотрите на код примера проекта. Подумайте сами. Правило № 2: выполните приведенные ниже истории пользователей . Используйте любые библиотеки или API, которые вам нужны. Дайте ему свой личный стиль. User Story: Я могу видеть погоду в моем текущем местоположении. User Story: Я вижу другой значок или фоновое изображение (например, снежная гора, горячая пустыня) в зависимости от погоды. User Story: Я могу нажать кнопку для переключения между Фаренгейтом и Цельсием. Примечание. Многие интернет-браузеры теперь требуют подключения HTTP Secure ( https://
) для получения локали пользователя через геолокацию HTML5. По этой причине мы рекомендуем использовать HTML5 Geolocation, чтобы получить местоположение пользователя, а затем использовать freeCodeCamp Weather API https://fcc-weather-api.glitch.me, который использует соединение HTTP Secure для погоды. Кроме того, обязательно подключитесь к CodePen.io через https://
. Не забудьте использовать Read-Search-Ask, если вы застряли. Когда вы закончите, нажмите кнопку «Я закончил эту задачу» и включите ссылку на вашу CodePen. Вы можете получить отзывы о своем проекте, поделившись с друзьями на Facebook.
["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
: ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
ОБНОВЛЕНИЕ. Из-за изменения условий использования API, описанных здесь, Twitch.tv теперь требует ключа API, но мы построили обходное решение. Используйте https://wind-bow.glitch.me/twitch-api вместо URL-адреса API-интерфейса twitch (например, https://api.twitch.tv/kraken), и вы все равно сможете получать информацию об учетной записи, не требуя для подписки на ключ API. Не забудьте использовать Read-Search-Ask, если вы застряли. Когда вы закончите, нажмите кнопку «Я закончил эту задачу» и включите ссылку на вашу CodePen. Вы можете получить отзывы о своем проекте, поделившись с друзьями на Facebook.
+Цель. Создайте приложение CodePen.io , которое функционально похоже на это: https://codepen.io/freeCodeCamp/full/Myvqmo/ . Выполняйте приведенные ниже истории пользователей . Используйте любые библиотеки или API, которые вам нужны. Дайте ему свой личный стиль. User Story: Я вижу, что в настоящее время streamCodeCamp работает на Twitch.tv. User Story: Я могу щелкнуть вывод состояния и отправить его прямо на канал Twitch.tv freeCodeCamp. User Story: если пользователь Twitch в настоящее время работает в потоковом режиме, я могу видеть дополнительные сведения о потоках. Подсказка: см. Пример вызова JSONP API Twitch.tv по адресу http://forum.freecodecamp.org/t/use-the-twitchtv-json-api/19541 . Подсказка . Соответствующая документация об этом вызове API находится здесь: https://dev.twitch.tv/docs/v5/reference/streams/#get-stream-by-user . Подсказка: вот массив пользовательских имен Twitch.tv людей, которые регулярно ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
: ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
ОБНОВЛЕНИЕ. Из-за изменения условий использования API, описанных здесь, Twitch.tv теперь требует ключа API, но мы построили обходное решение. Используйте https://wind-bow.glitch.me/twitch-api вместо URL-адреса API-интерфейса twitch (например, https://api.twitch.tv/kraken), и вы все равно сможете получать информацию об учетной записи, не требуя для подписки на ключ API. Не забудьте использовать Read-Search-Ask, если вы застряли. Когда вы закончите, нажмите кнопку «Я закончил эту задачу» и включите ссылку на вашу CodePen. Вы можете получить отзывы о своем проекте, поделившись с друзьями на Facebook.
welcome-section
de welcome-section
. Historia de usuario n. ° 2: La sección de bienvenida debe tener un elemento h1
que contenga texto. Historia de usuario n. ° 3: Mi portafolio debe tener una sección de proyectos con una identificación de projects
. Historia de usuario n. ° 4: La sección de proyectos debe contener al menos un elemento con una clase de project-tile
para contener un proyecto. Historia de usuario n. ° 5: La sección de proyectos debe contener al menos un enlace a un proyecto. Historia de usuario n. ° 6: Mi portafolio debe tener una barra de navegación con un ID de navbar
de navbar
. Historia de usuario n. ° 7: La barra de navegación debe contener al menos un enlace en el que pueda hacer clic para navegar a diferentes secciones de la página. Historia de usuario n. ° 8: Mi portafolio debe tener un enlace con un ID de profile-link
, que abre mi perfil de GitHub o FCC en una nueva pestaña. Historia de usuario n. ° 9: Mi portafolio debe tener al menos una consulta de medios. Historia de usuario n. ° 10: La altura de la sección de bienvenida debe ser igual a la altura de la ventana gráfica. Historia de usuario n. ° 11: la barra de navegación siempre debe estar en la parte superior de la ventana gráfica. Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. welcome-section
de welcome-section
. Historia de usuario n. ° 2: La sección de bienvenida debe tener un elemento h1
que contenga texto. Historia de usuario n. ° 3: Mi portafolio debe tener una sección de proyectos con una identificación de projects
. Historia de usuario n. ° 4: La sección de proyectos debe contener al menos un elemento con una clase de project-tile
para contener un proyecto. Historia de usuario n. ° 5: La sección de proyectos debe contener al menos un enlace a un proyecto. Historia de usuario n. ° 6: Mi portafolio debe tener una barra de navegación con un ID de navbar
de navbar
. Historia de usuario n. ° 7: La barra de navegación debe contener al menos un enlace en el que pueda hacer clic para navegar a diferentes secciones de la página. Historia de usuario n. ° 8: Mi portafolio debe tener un enlace con un ID de profile-link
, que abre mi perfil de GitHub o FCC en una nueva pestaña. Historia de usuario n. ° 9: Mi portafolio debe tener al menos una consulta de medios. Historia de usuario n. ° 10: La altura de la sección de bienvenida debe ser igual a la altura de la ventana gráfica. Historia de usuario n. ° 11: la barra de navegación siempre debe estar en la parte superior de la ventana gráfica. Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. header
con un id="header"
. Historia de usuario n. ° 2: Puedo ver una imagen dentro del elemento del header
con un id="header-img"
correspondiente id="header-img"
. Un logo de empresa sería una buena imagen aquí. Historia de usuario n. ° 3: Dentro del elemento #header
puedo ver un elemento de nav
con una id="nav-bar"
correspondiente id="nav-bar"
. Historia de usuario n. ° 4: Puedo ver al menos tres elementos seleccionables dentro del elemento de nav
, cada uno con la clase nav-link
. Historia de usuario n. ° 5: Cuando hago clic en un botón .nav-link
en el elemento de nav
, me lleva a la sección correspondiente de la página de destino. Historia de usuario n. ° 6: Puedo ver un video de un producto integrado con id="video"
. Historia de usuario n. ° 7: Mi página de destino tiene un elemento de form
con una id="form"
correspondiente id="form"
. Historia de usuario n. ° 8: Dentro del formulario, hay un campo de input
con id="email"
donde puedo ingresar una dirección de correo electrónico. Historia de usuario n. ° 9: el campo de entrada #email
debe tener un texto de marcador de posición para que el usuario sepa para qué sirve el campo. Historia de usuario n. ° 10: el campo de entrada #email
usa validación HTML5 para confirmar que el texto ingresado es una dirección de correo electrónico. Historia de usuario n. ° 11: Dentro del formulario, hay una input
envío con una id="submit"
correspondiente id="submit"
. Historia de usuario n. ° 12: Cuando hago clic en el elemento #submit
, el correo electrónico se envía a una página estática (use esta URL simulada: https://www.freecodecamp.com/email-submit ) que confirma que se ingresó la dirección de correo electrónico y que Se publicó con éxito. Historia de usuario n. ° 13: la barra de navegación siempre debe estar en la parte superior de la ventana gráfica. Historia de usuario n. ° 14: La página de inicio de mi producto debe tener al menos una consulta de medios. Historia de usuario n. ° 15: La página de inicio de mi producto debe utilizar CSS Flexbox al menos una vez. Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. header
con un id="header"
. Historia de usuario n. ° 2: Puedo ver una imagen dentro del elemento del header
con un id="header-img"
correspondiente id="header-img"
. Un logo de empresa sería una buena imagen aquí. Historia de usuario n. ° 3: Dentro del elemento #header
puedo ver un elemento de nav
con una id="nav-bar"
correspondiente id="nav-bar"
. Historia de usuario n. ° 4: Puedo ver al menos tres elementos seleccionables dentro del elemento de nav
, cada uno con la clase nav-link
. Historia de usuario n. ° 5: Cuando hago clic en un botón .nav-link
en el elemento de nav
, me lleva a la sección correspondiente de la página de destino. Historia de usuario n. ° 6: Puedo ver un video de un producto integrado con id="video"
. Historia de usuario n. ° 7: Mi página de destino tiene un elemento de form
con una id="form"
correspondiente id="form"
. Historia de usuario n. ° 8: Dentro del formulario, hay un campo de input
con id="email"
donde puedo ingresar una dirección de correo electrónico. Historia de usuario n. ° 9: el campo de entrada #email
debe tener un texto de marcador de posición para que el usuario sepa para qué sirve el campo. Historia de usuario n. ° 10: el campo de entrada #email
usa validación HTML5 para confirmar que el texto ingresado es una dirección de correo electrónico. Historia de usuario n. ° 11: Dentro del formulario, hay una input
envío con una id="submit"
correspondiente id="submit"
. Historia de usuario n. ° 12: Cuando hago clic en el elemento #submit
, el correo electrónico se envía a una página estática (use esta URL simulada: https://www.freecodecamp.com/email-submit ) que confirma que se ingresó la dirección de correo electrónico y que Se publicó con éxito. Historia de usuario n. ° 13: la barra de navegación siempre debe estar en la parte superior de la ventana gráfica. Historia de usuario n. ° 14: La página de inicio de mi producto debe tener al menos una consulta de medios. Historia de usuario n. ° 15: La página de inicio de mi producto debe utilizar CSS Flexbox al menos una vez. Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="title"
en texto de tamaño H1. Historia de usuario n. ° 2: Puedo ver una breve explicación con id="description"
en texto de tamaño P. Historia de usuario n. ° 3: Puedo ver un form
con id="survey-form"
. Historia de usuario # 4: Dentro del elemento del formulario, debo ingresar mi nombre en un campo con id="name"
. Historia de usuario n. ° 5: Dentro del elemento del formulario, debo ingresar un correo electrónico en un campo con id="email"
. Historia de usuario n. ° 6: Si ingreso un correo electrónico que no tiene el formato correcto, veré un error de validación de HTML5. Historia de usuario n. ° 7: Dentro del formulario, puedo ingresar un número en un campo con id="number"
. Historia de usuario n. ° 8: Si ingreso números que no son números en la entrada del número, veré un error de validación de HTML5. Historia de usuario n. ° 9: si ingreso números fuera del rango del ingreso de números, que están definidos por los atributos min
y max
, veré un error de validación de HTML5. Historia de usuario n. ° 10: Para los campos de ingreso de nombre, correo electrónico y número dentro del formulario, puedo ver las etiquetas correspondientes que describen el propósito de cada campo con los siguientes id="name-label"
: id="name-label"
, id="email-label"
, y id="number-label"
. Historia de usuario n. ° 11: Para los campos de ingreso de nombre, correo electrónico y número, puedo ver el texto del marcador de posición que me da una descripción o instrucciones para cada campo. Historia del usuario n. ° 12: Dentro del elemento del formulario, puedo seleccionar una opción de un menú desplegable que tiene un id="dropdown"
correspondiente id="dropdown"
. Historia de usuario n. ° 13: Dentro del elemento del formulario, puedo seleccionar un campo de uno o más grupos de botones de radio. Cada grupo debe agruparse usando el atributo de name
. Historia de usuario n. ° 14: Dentro del elemento del formulario, puedo seleccionar varios campos de una serie de casillas de verificación, cada una de las cuales debe tener un atributo de value
. Historia de usuario # 15: Dentro del elemento del formulario, me presentan un área de textarea
al final para comentarios adicionales. Historia de usuario n. ° 16: Dentro del elemento de formulario, se me presenta un botón con id="submit"
para enviar todas mis entradas. Puedes construir tu proyecto por medio de este CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="title"
en texto de tamaño H1. Historia de usuario n. ° 2: Puedo ver una breve explicación con id="description"
en texto de tamaño P. Historia de usuario n. ° 3: Puedo ver un form
con id="survey-form"
. Historia de usuario # 4: Dentro del elemento del formulario, debo ingresar mi nombre en un campo con id="name"
. Historia de usuario n. ° 5: Dentro del elemento del formulario, debo ingresar un correo electrónico en un campo con id="email"
. Historia de usuario n. ° 6: Si ingreso un correo electrónico que no tiene el formato correcto, veré un error de validación de HTML5. Historia de usuario n. ° 7: Dentro del formulario, puedo ingresar un número en un campo con id="number"
. Historia de usuario n. ° 8: Si ingreso números que no son números en la entrada del número, veré un error de validación de HTML5. Historia de usuario n. ° 9: si ingreso números fuera del rango del ingreso de números, que están definidos por los atributos min
y max
, veré un error de validación de HTML5. Historia de usuario n. ° 10: Para los campos de ingreso de nombre, correo electrónico y número dentro del formulario, puedo ver las etiquetas correspondientes que describen el propósito de cada campo con los siguientes id="name-label"
: id="name-label"
, id="email-label"
, y id="number-label"
. Historia de usuario n. ° 11: Para los campos de ingreso de nombre, correo electrónico y número, puedo ver el texto del marcador de posición que me da una descripción o instrucciones para cada campo. Historia del usuario n. ° 12: Dentro del elemento del formulario, puedo seleccionar una opción de un menú desplegable que tiene un id="dropdown"
correspondiente id="dropdown"
. Historia de usuario n. ° 13: Dentro del elemento del formulario, puedo seleccionar un campo de uno o más grupos de botones de radio. Cada grupo debe agruparse usando el atributo de name
. Historia de usuario n. ° 14: Dentro del elemento del formulario, puedo seleccionar varios campos de una serie de casillas de verificación, cada una de las cuales debe tener un atributo de value
. Historia de usuario # 15: Dentro del elemento del formulario, me presentan un área de textarea
al final para comentarios adicionales. Historia de usuario n. ° 16: Dentro del elemento de formulario, se me presenta un botón con id="submit"
para enviar todas mis entradas. Puedes construir tu proyecto por medio de este CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. main
con un id="main-doc"
correspondiente id="main-doc"
, que contiene el contenido principal de la página (documentación técnica). Historia de usuario # 2: Dentro del elemento #main-doc
, puedo ver varios elementos de section
, cada uno con una clase de main-section
. Debe haber un mínimo de 5. Historia del usuario n.º 3: el primer elemento dentro de cada .main-section
debe ser un elemento de header
que contenga texto que describa el tema de esa sección. Historia de usuario n. ° 4: Cada elemento de section
con la clase de main-section
también debe tener un ID que se corresponda con el texto de cada header
contenido en él. Cualquier espacio debe reemplazarse con guiones bajos (por ejemplo, la section
que contiene el encabezado "Javascript y Java" debe tener una id="Javascript_and_Java"
correspondiente id="Javascript_and_Java"
). Historia de usuario n. ° 5: Los elementos .main-section
deben contener al menos 10 p
elementos en total (no cada uno). Historia de usuario n. ° 6: Los .main-section
deben contener al menos 5 elementos de code
total (no cada uno). Historia de usuario # 7: Los .main-section
elementos deben contener al menos 5 li
total de los artículos (no cada uno). Historia de usuario n. ° 8: Puedo ver un elemento de nav
con una id="navbar"
correspondiente id="navbar"
. Historia de usuario n. ° 9: el elemento de la barra de navegación debe contener un elemento de header
que contenga texto que describa el tema de la documentación técnica. Historia de usuario # 10: Además, la barra de navegación debe contener elementos del enlace ( a
) con la clase de nav-link
de nav-link
. Debe haber uno para cada elemento con la clase main-section
. Historia de usuario n. ° 11: El elemento de header
en la barra de navegación debe aparecer antes que cualquier elemento de enlace ( a
) en la barra de navegación. Historia del usuario n. ° 12: Cada elemento con la clase de nav-link
de nav-link
debe contener texto que corresponda al texto del header
dentro de cada section
(por ejemplo, si tiene una sección / encabezado de "Hola mundo", su barra de navegación debe tener un elemento que contenga el texto "Hola Mundo"). Historia de usuario n. ° 13: cuando hago clic en un elemento de la barra de navegación, la página debe navegar a la sección correspondiente del elemento main-doc
(por ejemplo, si hago clic en un elemento de nav-link
que contiene el texto "Hola mundo", la página navega a un elemento de section
que tiene ese ID y contiene el header
correspondiente. Historia del usuario n . ° 14: En dispositivos de tamaño normal (computadoras portátiles, computadoras de escritorio), el elemento con id="navbar"
debe mostrar en el lado izquierdo de la pantalla y siempre debe El usuario puede verlo . Historia del usuario n. ° 15: La página Mi documentación técnica debería usar al menos una consulta de medios. Puede crear su proyecto por medio de este bolígrafo CodePen o puede usar este enlace CDN para ejecutar las pruebas en cualquier entorno que desee. : https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su proyecto de trabajo con todas las pruebas aprobadas. Recuerde utilizar la función de lectura-búsqueda-preguntar Método si te quedas atascado. main
con un id="main-doc"
correspondiente id="main-doc"
, que contiene el contenido principal de la página (documentación técnica). Historia de usuario # 2: Dentro del elemento #main-doc
, puedo ver varios elementos de section
, cada uno con una clase de main-section
. Debe haber un mínimo de 5. Historia del usuario n.º 3: el primer elemento dentro de cada .main-section
debe ser un elemento de header
que contenga texto que describa el tema de esa sección. Historia de usuario n. ° 4: Cada elemento de section
con la clase de main-section
también debe tener un ID que se corresponda con el texto de cada header
contenido en él. Cualquier espacio debe reemplazarse con guiones bajos (por ejemplo, la section
que contiene el encabezado "Javascript y Java" debe tener una id="Javascript_and_Java"
correspondiente id="Javascript_and_Java"
). Historia de usuario n. ° 5: Los elementos .main-section
deben contener al menos 10 p
elementos en total (no cada uno). Historia de usuario n. ° 6: Los .main-section
deben contener al menos 5 elementos de code
total (no cada uno). Historia de usuario # 7: Los .main-section
elementos deben contener al menos 5 li
total de los artículos (no cada uno). Historia de usuario n. ° 8: Puedo ver un elemento de nav
con una id="navbar"
correspondiente id="navbar"
. Historia de usuario n. ° 9: el elemento de la barra de navegación debe contener un elemento de header
que contenga texto que describa el tema de la documentación técnica. Historia de usuario # 10: Además, la barra de navegación debe contener elementos del enlace ( a
) con la clase de nav-link
de nav-link
. Debe haber uno para cada elemento con la clase main-section
. Historia de usuario n. ° 11: El elemento de header
en la barra de navegación debe aparecer antes que cualquier elemento de enlace ( a
) en la barra de navegación. Historia del usuario n. ° 12: Cada elemento con la clase de nav-link
de nav-link
debe contener texto que corresponda al texto del header
dentro de cada section
(por ejemplo, si tiene una sección / encabezado de "Hola mundo", su barra de navegación debe tener un elemento que contenga el texto "Hola Mundo"). Historia de usuario n. ° 13: cuando hago clic en un elemento de la barra de navegación, la página debe navegar a la sección correspondiente del elemento main-doc
(por ejemplo, si hago clic en un elemento de nav-link
que contiene el texto "Hola mundo", la página navega a un elemento de section
que tiene ese ID y contiene el header
correspondiente. Historia del usuario n . ° 14: En dispositivos de tamaño normal (computadoras portátiles, computadoras de escritorio), el elemento con id="navbar"
debe mostrar en el lado izquierdo de la pantalla y siempre debe El usuario puede verlo . Historia del usuario n. ° 15: La página Mi documentación técnica debería usar al menos una consulta de medios. Puede crear su proyecto por medio de este bolígrafo CodePen o puede usar este enlace CDN para ejecutar las pruebas en cualquier entorno que desee. : https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su proyecto de trabajo con todas las pruebas aprobadas. Recuerde utilizar la función de lectura-búsqueda-preguntar Método si te quedas atascado. img
debe redimensionarse responsivamente, en relación con el ancho de su elemento principal, sin exceder su tamaño original.
-Historia de usuario no. 9: el elemento img
debe estar centrado dentro de su elemento primario. Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. Una vez que haya terminado, envíe la URL a su proyecto de trabajo con todas las pruebas aprobadas. Recuerde usar el método de lectura-búsqueda-pregunta si se atasca. img
debe estar centrado dentro de su elemento primario. Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. Una vez que haya terminado, envíe la URL a su proyecto de trabajo con todas las pruebas aprobadas. Recuerde usar el método de lectura-búsqueda-pregunta si se atasca. size
(segundo argumento) y los devuelva como una matriz bidimensional. Recuerda usar la técnica de Leer-Buscar-Preguntar si te atascas. Escribe tu propio código. size
(segundo argumento) y los devuelva como una matriz bidimensional. Recuerda usar la técnica de Leer-Buscar-Preguntar si te atascas. Escribe tu propio código. str
) termina con la cadena de destino dada (segundo argumento, target
). Este desafío se se puede resolver con el método .endsWith()
, que se introdujo en ES2015. Pero para el propósito de este desafío, nos gustaría que utilices uno de los métodos de subcadena de JavaScript. Recuerda usar la técnica de Leer-Buscar-Preguntar si te atascas. Escribe tu propio código. str
) termina con la cadena de destino dada (segundo argumento, target
). Este desafío se se puede resolver con el método .endsWith()
, que se introdujo en ES2015. Pero para el propósito de este desafío, nos gustaría que utilices uno de los métodos de subcadena de JavaScript. Recuerda usar la técnica de Leer-Buscar-Preguntar si te atascas. Escribe tu propio código. n!
Por ejemplo: 5! = 1 * 2 * 3 * 4 * 5 = 120
Solo se proporcionarán a la función números enteros mayores o iguales a cero. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. n!
Por ejemplo: 5! = 1 * 2 * 3 * 4 * 5 = 120
Solo se proporcionarán a la función números enteros mayores o iguales a cero. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. false
en JavaScript son false
, null
, 0
, ""
, undefined
y NaN
. Sugerencia: intente convertir cada valor a un booleano. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. false
en JavaScript son false
, null
, 0
, ""
, undefined
y NaN
. Sugerencia: intente convertir cada valor a un booleano. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. ["hello", "Hello"]
, debería devolver verdadero porque todas las letras en la segunda cadena están presentes en la primera, sin distinción de mayúsculas y minúsculas. Los argumentos ["hello", "hey"]
deben devolver falso porque la cadena "hola" no contiene una "y". Por último, ["Alien", "line"]
, debe devolver verdadero porque todas las letras en "line" están presentes en "Alien". Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. ["hello", "Hello"]
, debería devolver verdadero porque todas las letras en la segunda cadena están presentes en la primera, sin distinción de mayúsculas y minúsculas. Los argumentos ["hello", "hey"]
deben devolver falso porque la cadena "hola" no contiene una "y". Por último, ["Alien", "line"]
, debe devolver verdadero porque todas las letras en "line" están presentes en "Alien". Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. str
(primer argumento) para num
veces (segundo argumento). Devuelve una cadena vacía si num
no es un número positivo. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. str
(primer argumento) para num
veces (segundo argumento). Devuelve una cadena vacía si num
no es un número positivo. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. arr[i]
. Recuerda usar Read-Search-Ask si se atasca. Escribe su propio código. arr[i]
. Recuerda usar Read-Search-Ask si se atasca. Escribe su propio código. slice
y splice
para copiar cada elemento de la primera matriz en la segunda matriz, en orden. Comience a insertar elementos en el índice n
de la segunda matriz. Devuelve la matriz resultante. Las matrices de entrada deben permanecer iguales después de que se ejecute la función. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. slice
y splice
para copiar cada elemento de la primera matriz en la segunda matriz, en orden. Comience a insertar elementos en el índice n
de la segunda matriz. Devuelve la matriz resultante. Las matrices de entrada deben permanecer iguales después de que se ejecute la función. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. ...
final. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. ...
final. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. getIndexToIns([1,2,3,4], 1.5)
debe devolver 1
porque es mayor que 1
(índice 0), pero menor que 2
(índice 1). Del mismo modo, getIndexToIns([20,3,5], 19)
debe devolver 2
porque una vez que se ha ordenado la matriz se verá como [3,5,20]
y 19
es menor que 20
(índice 2) y mayor que 5
( índice 1). Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. getIndexToIns([1,2,3,4], 1.5)
debe devolver 1
porque es mayor que 1
(índice 0), pero menor que 2
(índice 1). Del mismo modo, getIndexToIns([20,3,5], 19)
debe devolver 2
porque una vez que se ha ordenado la matriz se verá como [3,5,20]
y 19
es menor que 20
(índice 2) y mayor que 5
( índice 1). Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. addTogether(2, 3)
debe devolver 5
y addTogether(2)
debe devolver una función. Llamar a esta función devuelta con un solo argumento devolverá la suma: var sumTwoAnd = addTogether(2);
sumTwoAnd(3)
devuelve 5
. Si cualquiera de los argumentos no es un número válido, devuelva indefinido. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. addTogether(2, 3)
debe devolver 5
y addTogether(2)
debe devolver una función. Llamar a esta función devuelta con un solo argumento devolverá la suma: var sumTwoAnd = addTogether(2);
sumTwoAnd(3)
devuelve 5
. Si cualquiera de los argumentos no es un número válido, devuelva indefinido. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. &
, <
, >
, "
(comillas dobles) y '
(apóstrofe), en una cadena con sus correspondientes entidades en HTML. Recuerde usar la Lectura-Búsqueda-Preguntar si tiene dificultades. Intente vincular el programa. Escriba su propio código. &
, <
, >
, "
(comillas dobles) y '
(apóstrofe), en una cadena con sus correspondientes entidades en HTML. Recuerde usar la Lectura-Búsqueda-Preguntar si tiene dificultades. Intente vincular el programa. Escriba su propio código. arr
, iterar a través y eliminar cada elemento a partir del primer elemento (el índice 0) hasta que la función func
devuelva true
cuando el elemento iterado se pasa a través de él. Luego, devuelva el resto de la matriz una vez que se cumpla la condición; de lo contrario, arr
debe devolverse como una matriz vacía. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. arr
, iterar a través y eliminar cada elemento a partir del primer elemento (el índice 0) hasta que la función func
devuelva true
cuando el elemento iterado se pasa a través de él. Luego, devuelva el resto de la matriz una vez que se cumpla la condición; de lo contrario, arr
debe devolverse como una matriz vacía. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. pre
será una propiedad de objeto y debe devolver true
si su valor es truthy
. De lo contrario, devuelve false
. En JavaScript, los valores de truthy
son valores que se convierten en true
cuando se evalúan en un contexto booleano. Recuerde, puede acceder a las propiedades del objeto a través de la notación de puntos o la notación []
. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. pre
será una propiedad de objeto y debe devolver true
si su valor es truthy
. De lo contrario, devuelve false
. En JavaScript, los valores de truthy
son valores que se convierten en true
cuando se evalúan en un contexto booleano. Recuerde, puede acceder a las propiedades del objeto a través de la notación de puntos o la notación []
. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. getFirstName () getLastName () getFullName () setFirstName (primero) setLastName (último) setFullName (firstAndLast)Ejecute las pruebas para ver el resultado esperado para cada método. Los métodos que toman un argumento deben aceptar solo un argumento y tiene que ser una cadena. Estos métodos deben ser los únicos medios disponibles para interactuar con el objeto. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código.
getFirstName () getLastName () getFullName () setFirstName (primero) setLastName (último) setFullName (firstAndLast)Ejecute las pruebas para ver el resultado esperado para cada método. Los métodos que toman un argumento deben aceptar solo un argumento y tiene que ser una cadena. Estos métodos deben ser los únicos medios disponibles para interactuar con el objeto. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código.
{name: 'name', avgAlt: avgAlt}
. Puedes leer sobre periodos orbitales en Wikipedia . Los valores se deben redondear al número entero más cercano. El cuerpo que está siendo orbitado es la Tierra. El radio de la Tierra es de 6367,4447 kilómetros, y el valor GM de la Tierra es de 398600.4418 km 3 s -2 . Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. {name: 'name', avgAlt: avgAlt}
. Puedes leer sobre periodos orbitales en Wikipedia . Los valores se deben redondear al número entero más cercano. El cuerpo que está siendo orbitado es la Tierra. El radio de la Tierra es de 6367,4447 kilómetros, y el valor GM de la Tierra es de 398600.4418 km 3 s -2 . Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. arguments
. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. arguments
. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. num
, devolver la suma de todos los números impares de Fibonacci que son menos que o igual a num
. Los primeros dos números en la secuencia de Fibonacci son 1 y 1. Cada número adicional en la secuencia es la suma de los dos números anteriores. Los primeros seis números de la secuencia de Fibonacci son 1, 1, 2, 3, 5 y 8. Por ejemplo, sumFibs(10)
debe devolver 10
porque todos los números de Fibonacci impares menores o iguales a 10
son 1, 1, 3 y 5. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. num
, devolver la suma de todos los números impares de Fibonacci que son menos que o igual a num
. Los primeros dos números en la secuencia de Fibonacci son 1 y 1. Cada número adicional en la secuencia es la suma de los dos números anteriores. Los primeros seis números de la secuencia de Fibonacci son 1, 1, 2, 3, 5 y 8. Por ejemplo, sumFibs(10)
debe devolver 10
porque todos los números de Fibonacci impares menores o iguales a 10
son 1, 1, 3 y 5. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]
, y el segundo argumento es { last: "Capulet" }
, luego debe devolver el tercer objeto de la matriz (el primer argumento), porque contiene el nombre y su valor, que se pasó como el segundo argumento. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]
, y el segundo argumento es { last: "Capulet" }
, luego debe devolver el tercer objeto de la matriz (el primer argumento), porque contiene el nombre y su valor, que se pasó como el segundo argumento. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. cifrado César
, también conocido como shift cipher
. En un shift cipher
los significados de las letras se desplazan en una cantidad determinada. Un uso moderno común es el cifrado ROT13, donde los valores de las letras se desplazan en 13 lugares. Así, 'A' ↔ 'N', 'B' ↔ 'O' y así sucesivamente. Escribe una función que tome una cadena codificada ROT13 como entrada y devuelva una cadena decodificada. Todas las letras serán mayúsculas. No transformes ningún carácter no alfabético (es decir, espacios, signos de puntuación), pero sí pásalos. Recuerda Leer-Buscar-Preguntar si te atascas. Intenta programando con alguien. Escribe tu propio código.cifrado César
, también conocido como shift cipher
. En un shift cipher
los significados de las letras se desplazan en una cantidad determinada. Un uso moderno común es el cifrado ROT13, donde los valores de las letras se desplazan en 13 lugares. Así, 'A' ↔ 'N', 'B' ↔ 'O' y así sucesivamente. Escribe una función que tome una cadena codificada ROT13 como entrada y devuelva una cadena decodificada. Todas las letras serán mayúsculas. No transformes ningún carácter no alfabético (es decir, espacios, signos de puntuación), pero sí pásalos. Recuerda Leer-Buscar-Preguntar si te atascas. Intenta programando con alguien. Escribe tu propio código.checkCashRegister()
que acepte el precio de compra como primer argumento ( price
), el pago como segundo argumento ( cash
) y el efectivo en caja ( cid
) como tercer argumento. cid
es una matriz 2D que muestra el dinero disponible. La función checkCashRegister()
siempre debe devolver un objeto con una clave de status
y una clave de change
. Devuelva {status: "INSUFFICIENT_FUNDS", change: []}
si el efectivo en caja es inferior al cambio debido, o si no puede devolver el cambio exacto. Devuelva {status: "CLOSED", change: [...]}
con cid
como el valor para la clave change
si este es igual al cambio debido. De lo contrario, devuelva {status: "OPEN", change: [...]}
, con el cambio en monedas y billetes, ordenados de mayor a menor, como el valor de la clave change
. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. Unidad monetaria | Cantidad |
---|---|
Centavo | $ 0.01 (PENNY) |
Níquel | $ 0.05 (níquel) |
Moneda de diez centavos | $ 0.1 (DIME) |
Trimestre | $ 0.25 (TRIMESTRE) |
Dólar | $ 1 (DÓLAR) |
Cinco dólares | $ 5 (CINCO) |
Diez dólares | $ 10 (DIEZ) |
Veinte dólares | $ 20 (VEINTE) |
Cien dolares | $ 100 (100) |
checkCashRegister()
que acepte el precio de compra como primer argumento ( price
), el pago como segundo argumento ( cash
) y el efectivo en caja ( cid
) como tercer argumento. cid
es una matriz 2D que muestra el dinero disponible. La función checkCashRegister()
siempre debe devolver un objeto con una clave de status
y una clave de change
. Devuelva {status: "INSUFFICIENT_FUNDS", change: []}
si el efectivo en caja es inferior al cambio debido, o si no puede devolver el cambio exacto. Devuelva {status: "CLOSED", change: [...]}
con cid
como el valor para la clave change
si este es igual al cambio debido. De lo contrario, devuelva {status: "OPEN", change: [...]}
, con el cambio en monedas y billetes, ordenados de mayor a menor, como el valor de la clave change
. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. Unidad monetaria | Cantidad |
---|---|
Centavo | $ 0.01 (PENNY) |
Níquel | $ 0.05 (níquel) |
Moneda de diez centavos | $ 0.1 (DIME) |
Trimestre | $ 0.25 (TRIMESTRE) |
Dólar | $ 1 (DÓLAR) |
Cinco dólares | $ 5 (CINCO) |
Diez dólares | $ 10 (DIEZ) |
Veinte dólares | $ 20 (VEINTE) |
Cien dolares | $ 100 (100) |
true
si la cadena dada es un palíndromo. De lo contrario, devuelve false
. Un palíndromo es una palabra u oración que se escribe de la misma manera tanto hacia adelante como hacia atrás, ignorando la puntuación, el caso y el espaciado. Nota "racecar"
, "RaceCar"
y "race CAR"
entre otros. También pasaremos cadenas con símbolos especiales, como "2A3*3a2"
, "2A3 3a2"
y "2_A3*3#A2"
. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. true
si la cadena dada es un palíndromo. De lo contrario, devuelve false
. Un palíndromo es una palabra u oración que se escribe de la misma manera tanto hacia adelante como hacia atrás, ignorando la puntuación, el caso y el espaciado. Nota "racecar"
, "RaceCar"
y "race CAR"
entre otros. También pasaremos cadenas con símbolos especiales, como "2A3*3a2"
, "2A3 3a2"
y "2_A3*3#A2"
. Recuerda usar Read-Search-Ask si te atascas. Escribe tu propio código. true
si la cadena pasada parece un número de teléfono válido de EE. UU. El usuario puede completar el campo del formulario de la forma que elija, siempre que tenga el formato de un número de EE. UU. Válido. Los siguientes son ejemplos de formatos válidos para números de EE. UU. (Consulte las siguientes pruebas para otras variantes): 555-555-5555Para este desafío, se te presentará una cadena como
(555) 555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
800-692-7753
o 8oo-six427676;laskdjf
. Su trabajo es validar o rechazar el número de teléfono de los EE. UU. En función de cualquier combinación de los formatos proporcionados anteriormente. El código de área es obligatorio. Si se proporciona el código de país, debe confirmar que el código de país es 1
. Devuelva true
si la cadena es un número de teléfono de EE. UU. Válido; de lo contrario devuelve false
. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. true
si la cadena pasada parece un número de teléfono válido de EE. UU. El usuario puede completar el campo del formulario de la forma que elija, siempre que tenga el formato de un número de EE. UU. Válido. Los siguientes son ejemplos de formatos válidos para números de EE. UU. (Consulte las siguientes pruebas para otras variantes): 555-555-5555Para este desafío, se te presentará una cadena como
(555) 555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
800-692-7753
o 8oo-six427676;laskdjf
. Su trabajo es validar o rechazar el número de teléfono de los EE. UU. En función de cualquier combinación de los formatos proporcionados anteriormente. El código de área es obligatorio. Si se proporciona el código de país, debe confirmar que el código de país es 1
. Devuelva true
si la cadena es un número de teléfono de EE. UU. Válido; de lo contrario devuelve false
. Recuerda usar Read-Search-Ask si te atascas. Trate de emparejar el programa. Escribe tu propio código. id="drum-machine"
que contiene todos los demás elementos. Historia de usuario n. ° 2: Dentro de #drum-machine
puedo ver un elemento con el correspondiente id="display"
. Historia de usuario n. ° 3: Dentro de #drum-machine
puedo ver 9 elementos de pad de batería que se pueden hacer clic, cada uno con un nombre de clase de drum-pad
, una identificación única que describe el clip de audio que la almohadilla de batería se configurará para disparar, y un interior Texto que corresponde a una de las siguientes teclas del teclado: Q, W, E, A, S, D, Z, X, C. Los pads de batería DEBEN estar en este orden. Historia de usuario # 4: Dentro de cada .drum-pad
, debe haber un elemento de audio
HTML5 que tenga un atributo src
apunte a un clip de audio, un nombre de clase de clip
y una identificación correspondiente al texto interno de su .drum-pad
primario .drum-pad
(por ejemplo, id="Q"
, id="W"
, id="E"
etc.). Historia de usuario n. ° 5: Cuando hago clic en un elemento .drum-pad
, se debe activar el clip de audio contenido en su elemento de audio
secundario. Historia de usuario n. ° 6: Cuando .drum-pad
la tecla de activación asociada con cada .drum-pad
, el clip de audio contenido en su elemento de audio
secundario debe activarse (por ejemplo, al presionar la tecla Q debe activar la batería que contiene la cadena "Q", presionando la tecla W debería activar el pad de batería que contiene la cuerda "W", etc.). Historia de usuario # 7: cuando se .drum-pad
un .drum-pad
, una cadena que describe el clip de audio asociado se muestra como el texto interno del elemento #display
(cada cadena debe ser única). Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="drum-machine"
que contiene todos los demás elementos. Historia de usuario n. ° 2: Dentro de #drum-machine
puedo ver un elemento con el correspondiente id="display"
. Historia de usuario n. ° 3: Dentro de #drum-machine
puedo ver 9 elementos de pad de batería que se pueden hacer clic, cada uno con un nombre de clase de drum-pad
, una identificación única que describe el clip de audio que la almohadilla de batería se configurará para disparar, y un interior Texto que corresponde a una de las siguientes teclas del teclado: Q, W, E, A, S, D, Z, X, C. Los pads de batería DEBEN estar en este orden. Historia de usuario # 4: Dentro de cada .drum-pad
, debe haber un elemento de audio
HTML5 que tenga un atributo src
apunte a un clip de audio, un nombre de clase de clip
y una identificación correspondiente al texto interno de su .drum-pad
primario .drum-pad
(por ejemplo, id="Q"
, id="W"
, id="E"
etc.). Historia de usuario n. ° 5: Cuando hago clic en un elemento .drum-pad
, se debe activar el clip de audio contenido en su elemento de audio
secundario. Historia de usuario n. ° 6: Cuando .drum-pad
la tecla de activación asociada con cada .drum-pad
, el clip de audio contenido en su elemento de audio
secundario debe activarse (por ejemplo, al presionar la tecla Q debe activar la batería que contiene la cadena "Q", presionando la tecla W debería activar el pad de batería que contiene la cuerda "W", etc.). Historia de usuario # 7: cuando se .drum-pad
un .drum-pad
, una cadena que describe el clip de audio asociado se muestra como el texto interno del elemento #display
(cada cadena debe ser única). Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. =
(signo igual) con un id="equals"
correspondiente id="equals"
. Historia de usuario n. ° 2: Mi calculadora debe contener 10 elementos seleccionables que contengan un número cada uno de 0 a 9, con las siguientes ID correspondientes: id="zero"
, id="one"
, id="two"
, id="three"
, id="four"
, id="five"
, id="six"
, id="seven"
, id="eight"
, e id="nine"
. Historia de usuario n. ° 3: Mi calculadora debe contener 4 elementos seleccionables, cada uno de los cuales contiene uno de los 4 operadores matemáticos primarios con las siguientes ID correspondientes: id="add"
, id="subtract"
, id="multiply"
, id="divide"
. Historia de usuario n. ° 4: Mi calculadora debe contener un elemento pulsable que contenga un .
Símbolo (punto decimal) con un id="decimal"
correspondiente id="decimal"
. Historia de usuario n. ° 5: Mi calculadora debe contener un elemento seleccionable con un id="clear"
. Historia de usuario n. ° 6: Mi calculadora debe contener un elemento para mostrar los valores con una id="display"
correspondiente id="display"
. Historia de usuario n. ° 7: En cualquier momento, al presionar el botón de borrar se borran los valores de entrada y salida, y la calculadora vuelve a su estado inicializado; 0 debe mostrarse en el elemento con el id de display
. Historia de usuario n. ° 8: Al ingresar números, debería poder ver mi entrada en el elemento con la identificación de la display
. Historia de usuario n. ° 9: en cualquier orden, debería poder sumar, restar, multiplicar y dividir una cadena de números de cualquier longitud, y cuando presiono =
, el resultado correcto debe mostrarse en el elemento con la identificación de la display
. Historia de usuario n. ° 10: al ingresar números, mi calculadora no debe permitir que un número comience con varios ceros. Historia de usuario # 11: Cuando se hace clic en el elemento decimal, a .
debe añadirse al valor mostrado actualmente; dos .
en un número no debe ser aceptado. Historia de usuario n. ° 12: Debería poder realizar cualquier operación (+, -, *, /) en números que contengan puntos decimales. Historia de usuario n. ° 13: Si se ingresan 2 o más operadores consecutivamente, la operación realizada debe ser la última que se ingresó. Historia de usuario n. ° 14: Al presionar a un operador inmediatamente después de =
debería comenzar un nuevo cálculo que opera sobre el resultado de la evaluación anterior. Historia de usuario n. ° 15: Mi calculadora debe tener varios decimales de precisión cuando se trata de redondeo (tenga en cuenta que no hay un estándar exacto, pero debería poder manejar cálculos como 2 / 7
con una precisión razonable hasta al menos 4 decimales) . Nota sobre la lógica de la calculadora: debe tenerse en cuenta que hay dos escuelas principales de pensamiento en la lógica de entrada de la calculadora: lógica de ejecución inmediata y lógica de fórmula . Nuestro ejemplo utiliza la fórmula lógica y observa el orden de prioridad de operación, la ejecución inmediata no. Cualquiera de los dos es aceptable, pero tenga en cuenta que dependiendo de lo que elija, su calculadora puede producir resultados diferentes a los nuestros para ciertas ecuaciones (vea el ejemplo a continuación). Siempre que sus cálculos puedan ser verificados por otra calculadora de producción, no considere esto como un error. EJEMPLO: 3 + 5 x 6 - 2 / 4 =
11.5
32.5
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que hayas terminado, envía la URL a tu cuenta "Proyecto" con todas las pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si necesitas ayuda. =
(signo igual) con un id="equals"
correspondiente id="equals"
. Historia de usuario n. ° 2: Mi calculadora debe contener 10 elementos seleccionables que contengan un número cada uno de 0 a 9, con las siguientes ID correspondientes: id="zero"
, id="one"
, id="two"
, id="three"
, id="four"
, id="five"
, id="six"
, id="seven"
, id="eight"
, e id="nine"
. Historia de usuario n. ° 3: Mi calculadora debe contener 4 elementos seleccionables, cada uno de los cuales contiene uno de los 4 operadores matemáticos primarios con las siguientes ID correspondientes: id="add"
, id="subtract"
, id="multiply"
, id="divide"
. Historia de usuario n. ° 4: Mi calculadora debe contener un elemento pulsable que contenga un .
Símbolo (punto decimal) con un id="decimal"
correspondiente id="decimal"
. Historia de usuario n. ° 5: Mi calculadora debe contener un elemento seleccionable con un id="clear"
. Historia de usuario n. ° 6: Mi calculadora debe contener un elemento para mostrar los valores con una id="display"
correspondiente id="display"
. Historia de usuario n. ° 7: En cualquier momento, al presionar el botón de borrar se borran los valores de entrada y salida, y la calculadora vuelve a su estado inicializado; 0 debe mostrarse en el elemento con el id de display
. Historia de usuario n. ° 8: Al ingresar números, debería poder ver mi entrada en el elemento con la identificación de la display
. Historia de usuario n. ° 9: en cualquier orden, debería poder sumar, restar, multiplicar y dividir una cadena de números de cualquier longitud, y cuando presiono =
, el resultado correcto debe mostrarse en el elemento con la identificación de la display
. Historia de usuario n. ° 10: al ingresar números, mi calculadora no debe permitir que un número comience con varios ceros. Historia de usuario # 11: Cuando se hace clic en el elemento decimal, a .
debe añadirse al valor mostrado actualmente; dos .
en un número no debe ser aceptado. Historia de usuario n. ° 12: Debería poder realizar cualquier operación (+, -, *, /) en números que contengan puntos decimales. Historia de usuario n. ° 13: Si se ingresan 2 o más operadores consecutivamente, la operación realizada debe ser la última que se ingresó. Historia de usuario n. ° 14: Al presionar a un operador inmediatamente después de =
debería comenzar un nuevo cálculo que opera sobre el resultado de la evaluación anterior. Historia de usuario n. ° 15: Mi calculadora debe tener varios decimales de precisión cuando se trata de redondeo (tenga en cuenta que no hay un estándar exacto, pero debería poder manejar cálculos como 2 / 7
con una precisión razonable hasta al menos 4 decimales) . Nota sobre la lógica de la calculadora: debe tenerse en cuenta que hay dos escuelas principales de pensamiento en la lógica de entrada de la calculadora: lógica de ejecución inmediata y lógica de fórmula . Nuestro ejemplo utiliza la fórmula lógica y observa el orden de prioridad de operación, la ejecución inmediata no. Cualquiera de los dos es aceptable, pero tenga en cuenta que dependiendo de lo que elija, su calculadora puede producir resultados diferentes a los nuestros para ciertas ecuaciones (vea el ejemplo a continuación). Siempre que sus cálculos puedan ser verificados por otra calculadora de producción, no considere esto como un error. EJEMPLO: 3 + 5 x 6 - 2 / 4 =
11.5
32.5
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que hayas terminado, envía la URL a tu cuenta "Proyecto" con todas las pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si necesitas ayuda. textarea
con un id="editor"
. Historia de usuario n. ° 2: Puedo ver un elemento con un id="preview"
correspondiente id="preview"
. Historia de usuario # 3: Cuando ingreso texto en el elemento #editor
, el elemento #preview
se actualiza a medida que #preview
para mostrar el contenido del área de texto. Historia de usuario n. ° 4: cuando ingrese la #editor
GitHub en el elemento #editor
, el texto se representa como HTML en el elemento #preview
mientras #preview
(SUGERENCIA: No necesita analizar Markdown usted mismo: puede importar la biblioteca marcada para esto: https://cdnjs.com/libraries/marked ). Historia de usuario n. ° 5: Cuando mi previsualizador de markdown se carga por primera vez, el texto predeterminado en el campo #editor
debe contener un markdown válido que represente al menos uno de cada uno de los siguientes elementos: un encabezado (tamaño H1), un encabezado secundario (tamaño H2) , un enlace, código en línea, un bloque de código, un elemento de la lista, una nota de bloque, una imagen y texto en negrita. Historia de usuario n. ° 6: Cuando mi previsualizador de markdown se carga por primera vez, el markdown predeterminado en el campo #editor
debe representarse como HTML en el elemento #preview
. Bonificación opcional (no es necesario que pase esta prueba): mi previsualizador markdown interpreta los retornos de carro y los presenta como elementos br
(salto de línea). Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. textarea
con un id="editor"
. Historia de usuario n. ° 2: Puedo ver un elemento con un id="preview"
correspondiente id="preview"
. Historia de usuario # 3: Cuando ingreso texto en el elemento #editor
, el elemento #preview
se actualiza a medida que #preview
para mostrar el contenido del área de texto. Historia de usuario n. ° 4: cuando ingrese la #editor
GitHub en el elemento #editor
, el texto se representa como HTML en el elemento #preview
mientras #preview
(SUGERENCIA: No necesita analizar Markdown usted mismo: puede importar la biblioteca marcada para esto: https://cdnjs.com/libraries/marked ). Historia de usuario n. ° 5: Cuando mi previsualizador de markdown se carga por primera vez, el texto predeterminado en el campo #editor
debe contener un markdown válido que represente al menos uno de cada uno de los siguientes elementos: un encabezado (tamaño H1), un encabezado secundario (tamaño H2) , un enlace, código en línea, un bloque de código, un elemento de la lista, una nota de bloque, una imagen y texto en negrita. Historia de usuario n. ° 6: Cuando mi previsualizador de markdown se carga por primera vez, el markdown predeterminado en el campo #editor
debe representarse como HTML en el elemento #preview
. Bonificación opcional (no es necesario que pase esta prueba): mi previsualizador markdown interpreta los retornos de carro y los presenta como elementos br
(salto de línea). Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="break-label"
que contiene una cadena (por ejemplo, "Break Length"). Historia de usuario n. ° 2: Puedo ver un elemento con id="session-label"
que contiene una cadena (por ejemplo, "Session Length"). Historia de usuario n. ° 3: Puedo ver dos elementos seleccionables con las ID correspondientes: id="break-decrement"
e id="session-decrement"
. Historia de usuario n. ° 4: Puedo ver dos elementos seleccionables con las ID correspondientes: id="break-increment"
e id="session-increment"
. Historia de usuario n. ° 5: Puedo ver un elemento con un id="break-length"
correspondiente id="break-length"
, que de manera predeterminada (en carga) muestra un valor de 5. Historia de usuario n. ° 6: puedo ver un elemento con un id="session-length"
correspondiente id="session-length"
, que por defecto muestra un valor de 25. Historia de usuario n. ° 7: Puedo ver un elemento con una id="timer-label"
correspondiente id="timer-label"
, que contiene una cadena que indica que una sesión está inicializada (por ejemplo," Sesión ") . Historia de usuario n. ° 8: Puedo ver un elemento con id="time-left"
correspondiente id="time-left"
. NOTA: En pausa o en ejecución, el valor en este campo siempre debe mostrarse en formato mm:ss
(es decir, 25:00). Historia de usuario n. ° 9: Puedo ver un elemento seleccionable con un id="start_stop"
correspondiente id="start_stop"
. Historia de usuario n. ° 10: Puedo ver un elemento seleccionable con un id="reset"
correspondiente id="reset"
. Historia de usuario n. ° 11: Cuando hago clic en el elemento con el ID de reset
, se debe detener cualquier temporizador en ejecución, el valor dentro de id="break-length"
debe regresar a 5
, el valor dentro de id="session-length"
debe regresar a 25, y el elemento con id="time-left"
debería restablecerse a su estado predeterminado. Historia de usuario n. ° 12: Cuando hago clic en el elemento con el id de break-decrement
, el valor dentro de id="break-length"
reduce en un valor de 1, y puedo ver el valor actualizado. Historia de usuario n. ° 13: Cuando hago clic en el elemento con la identificación de break-increment
de break-increment
, el valor dentro de id="break-length"
aumenta en un valor de 1, y puedo ver el valor actualizado. Historia de usuario n. ° 14: Cuando hago clic en el elemento con el id de session-decrement
de session-decrement
, el valor dentro de id="session-length"
reduce en un valor de 1, y puedo ver el valor actualizado. Historia de usuario n. ° 15: Cuando hago clic en el elemento con el id de session-increment
de session-increment
, el valor dentro de id="session-length"
incrementa en un valor de 1, y puedo ver el valor actualizado. Historia de usuario n. ° 16: No debería poder establecer una sesión o una duración de descanso en <= 0. Historia de usuario n. ° 17: No debería poder establecer una sesión o duración de desconexión en> 60. Historia de usuario n. ° 18: Cuando primero haga clic en el elemento con id="start_stop"
, el temporizador debe comenzar a ejecutarse desde el valor actualmente mostrado en id="session-length"
, incluso si el valor se ha incrementado o disminuido desde el valor original de 25. User Story # 19 : Si el temporizador se está ejecutando, el elemento con el id de time-left
debería mostrar el tiempo restante en formato mm:ss
(disminuyendo en un valor de 1 y actualizando la pantalla cada 1000 ms). Historia de usuario n. ° 20: Si el temporizador se está ejecutando y hago clic en el elemento con id="start_stop"
, la cuenta regresiva debe id="start_stop"
. Historia de usuario n. ° 21: si el temporizador está en pausa y hago clic en el elemento con id="start_stop"
, la cuenta regresiva debe reanudarse desde el punto en que se pausó. Historia de usuario n. ° 22: cuando la cuenta regresiva de la sesión llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), y comienza una nueva cuenta regresiva, el elemento con el id de timer-label
del timer-label
debe mostrar una cadena que indica que ha comenzado una ruptura. Historia de usuario n. ° 23: cuando la cuenta regresiva de la sesión llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), debe comenzar una nueva cuenta regresiva de receso, contando desde el valor que se muestra actualmente en el elemento id="break-length"
. Historia de usuario n. ° 24: Cuando una cuenta regresiva de ruptura llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), y comienza una nueva cuenta regresiva, el elemento con el id de timer-label
del timer-label
debe mostrar una cadena que indica que la sesión ha comenzado. Historia de usuario n. ° 25: cuando una cuenta regresiva de interrupción llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), debe comenzar una nueva cuenta regresiva de la sesión, contando desde el valor que se muestra actualmente en el elemento id="session-length"
. Historia de usuario n. ° 26: cuando una cuenta regresiva llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), debe reproducirse un sonido que indique que el tiempo ha transcurrido. Esto debe utilizar una etiqueta de audio
HTML5 y tener un id="beep"
correspondiente id="beep"
. Historia de usuario # 27: El elemento de audio con id="beep"
debe ser de 1 segundo o más. Historia de usuario n. ° 28: el elemento de audio con id de beep
debe dejar de reproducirse y rebobinarse al principio cuando se hace clic en el elemento con el id de reset
. Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="break-label"
que contiene una cadena (por ejemplo, "Break Length"). Historia de usuario n. ° 2: Puedo ver un elemento con id="session-label"
que contiene una cadena (por ejemplo, "Session Length"). Historia de usuario n. ° 3: Puedo ver dos elementos seleccionables con las ID correspondientes: id="break-decrement"
e id="session-decrement"
. Historia de usuario n. ° 4: Puedo ver dos elementos seleccionables con las ID correspondientes: id="break-increment"
e id="session-increment"
. Historia de usuario n. ° 5: Puedo ver un elemento con un id="break-length"
correspondiente id="break-length"
, que de manera predeterminada (en carga) muestra un valor de 5. Historia de usuario n. ° 6: puedo ver un elemento con un id="session-length"
correspondiente id="session-length"
, que por defecto muestra un valor de 25. Historia de usuario n. ° 7: Puedo ver un elemento con una id="timer-label"
correspondiente id="timer-label"
, que contiene una cadena que indica que una sesión está inicializada (por ejemplo," Sesión ") . Historia de usuario n. ° 8: Puedo ver un elemento con id="time-left"
correspondiente id="time-left"
. NOTA: En pausa o en ejecución, el valor en este campo siempre debe mostrarse en formato mm:ss
(es decir, 25:00). Historia de usuario n. ° 9: Puedo ver un elemento seleccionable con un id="start_stop"
correspondiente id="start_stop"
. Historia de usuario n. ° 10: Puedo ver un elemento seleccionable con un id="reset"
correspondiente id="reset"
. Historia de usuario n. ° 11: Cuando hago clic en el elemento con el ID de reset
, se debe detener cualquier temporizador en ejecución, el valor dentro de id="break-length"
debe regresar a 5
, el valor dentro de id="session-length"
debe regresar a 25, y el elemento con id="time-left"
debería restablecerse a su estado predeterminado. Historia de usuario n. ° 12: Cuando hago clic en el elemento con el id de break-decrement
, el valor dentro de id="break-length"
reduce en un valor de 1, y puedo ver el valor actualizado. Historia de usuario n. ° 13: Cuando hago clic en el elemento con la identificación de break-increment
de break-increment
, el valor dentro de id="break-length"
aumenta en un valor de 1, y puedo ver el valor actualizado. Historia de usuario n. ° 14: Cuando hago clic en el elemento con el id de session-decrement
de session-decrement
, el valor dentro de id="session-length"
reduce en un valor de 1, y puedo ver el valor actualizado. Historia de usuario n. ° 15: Cuando hago clic en el elemento con el id de session-increment
de session-increment
, el valor dentro de id="session-length"
incrementa en un valor de 1, y puedo ver el valor actualizado. Historia de usuario n. ° 16: No debería poder establecer una sesión o una duración de descanso en <= 0. Historia de usuario n. ° 17: No debería poder establecer una sesión o duración de desconexión en> 60. Historia de usuario n. ° 18: Cuando primero haga clic en el elemento con id="start_stop"
, el temporizador debe comenzar a ejecutarse desde el valor actualmente mostrado en id="session-length"
, incluso si el valor se ha incrementado o disminuido desde el valor original de 25. User Story # 19 : Si el temporizador se está ejecutando, el elemento con el id de time-left
debería mostrar el tiempo restante en formato mm:ss
(disminuyendo en un valor de 1 y actualizando la pantalla cada 1000 ms). Historia de usuario n. ° 20: Si el temporizador se está ejecutando y hago clic en el elemento con id="start_stop"
, la cuenta regresiva debe id="start_stop"
. Historia de usuario n. ° 21: si el temporizador está en pausa y hago clic en el elemento con id="start_stop"
, la cuenta regresiva debe reanudarse desde el punto en que se pausó. Historia de usuario n. ° 22: cuando la cuenta regresiva de la sesión llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), y comienza una nueva cuenta regresiva, el elemento con el id de timer-label
del timer-label
debe mostrar una cadena que indica que ha comenzado una ruptura. Historia de usuario n. ° 23: cuando la cuenta regresiva de la sesión llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), debe comenzar una nueva cuenta regresiva de receso, contando desde el valor que se muestra actualmente en el elemento id="break-length"
. Historia de usuario n. ° 24: Cuando una cuenta regresiva de ruptura llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), y comienza una nueva cuenta regresiva, el elemento con el id de timer-label
del timer-label
debe mostrar una cadena que indica que la sesión ha comenzado. Historia de usuario n. ° 25: cuando una cuenta regresiva de interrupción llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), debe comenzar una nueva cuenta regresiva de la sesión, contando desde el valor que se muestra actualmente en el elemento id="session-length"
. Historia de usuario n. ° 26: cuando una cuenta regresiva llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), debe reproducirse un sonido que indique que el tiempo ha transcurrido. Esto debe utilizar una etiqueta de audio
HTML5 y tener un id="beep"
correspondiente id="beep"
. Historia de usuario # 27: El elemento de audio con id="beep"
debe ser de 1 segundo o más. Historia de usuario n. ° 28: el elemento de audio con id de beep
debe dejar de reproducirse y rebobinarse al principio cuando se hace clic en el elemento con el id de reset
. Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="quote-box"
correspondiente id="quote-box"
. Historia de usuario n. ° 2: Dentro de #quote-box
, puedo ver un elemento con su id="text"
correspondiente id="text"
. Historia de usuario # 3: Dentro de #quote-box
, puedo ver un elemento con su id="author"
correspondiente id="author"
. Historia de usuario # 4: Dentro de #quote-box
, puedo ver un elemento clickable con su id="new-quote"
correspondiente id="new-quote"
. Historia de usuario n. ° 5: Dentro de #quote-box
, puedo ver un elemento clickable id="tweet-quote"
correspondiente id="tweet-quote"
. Historia de usuario n. ° 6: En la primera carga, mi máquina de citas muestra una cita aleatoria en el elemento con id="text"
. Historia de usuario n. ° 7: En la primera carga, mi máquina de citas muestra el autor de la cita aleatoria en el elemento con id="author"
. Historia de usuario n. ° 8: cuando se hace clic en el botón #new-quote
, mi máquina de citas debería buscar una nueva cita y mostrarla en el elemento #text
. Historia de usuario n. ° 9: Mi máquina de citas debe buscar al autor de la nueva cita cuando se hace clic en el botón #new-quote
y mostrarla en el elemento #author
. Historia usuario # 10: Puedo Twittear la cita actual haciendo clic en el elemento #tweet-quote
a
. Este elemento a
debe incluir la ruta de acceso "twitter.com/intent/tweet"
en su atributo href
para twittear la cita actual. Historia de usuario n. ° 11: El elemento contenedor #quote-box
debe estar centrado horizontalmente. Ejecute las pruebas con el nivel de zoom del navegador al 100% y la página maximizada. Puedes construir tu proyecto por medio de este pen de CodePen . O puedes usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL de su Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lee-busca-pregunta si te atascas. id="quote-box"
correspondiente id="quote-box"
. Historia de usuario n. ° 2: Dentro de #quote-box
, puedo ver un elemento con su id="text"
correspondiente id="text"
. Historia de usuario # 3: Dentro de #quote-box
, puedo ver un elemento con su id="author"
correspondiente id="author"
. Historia de usuario # 4: Dentro de #quote-box
, puedo ver un elemento clickable con su id="new-quote"
correspondiente id="new-quote"
. Historia de usuario n. ° 5: Dentro de #quote-box
, puedo ver un elemento clickable id="tweet-quote"
correspondiente id="tweet-quote"
. Historia de usuario n. ° 6: En la primera carga, mi máquina de citas muestra una cita aleatoria en el elemento con id="text"
. Historia de usuario n. ° 7: En la primera carga, mi máquina de citas muestra el autor de la cita aleatoria en el elemento con id="author"
. Historia de usuario n. ° 8: cuando se hace clic en el botón #new-quote
, mi máquina de citas debería buscar una nueva cita y mostrarla en el elemento #text
. Historia de usuario n. ° 9: Mi máquina de citas debe buscar al autor de la nueva cita cuando se hace clic en el botón #new-quote
y mostrarla en el elemento #author
. Historia usuario # 10: Puedo Twittear la cita actual haciendo clic en el elemento #tweet-quote
a
. Este elemento a
debe incluir la ruta de acceso "twitter.com/intent/tweet"
en su atributo href
para twittear la cita actual. Historia de usuario n. ° 11: El elemento contenedor #quote-box
debe estar centrado horizontalmente. Ejecute las pruebas con el nivel de zoom del navegador al 100% y la página maximizada. Puedes construir tu proyecto por medio de este pen de CodePen . O puedes usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL de su Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lee-busca-pregunta si te atascas. id="title"
correspondiente id="title"
. Historia de usuario n. ° 2: Mi gráfico debe tener un eje x del elemento g
con un id="x-axis"
correspondiente id="x-axis"
. Historia de usuario n. ° 3: Mi gráfico debe tener un eje g
elemento y con su correspondiente id="y-axis"
. Historia de usuario n. ° 4: Ambos ejes deben contener varias etiquetas de tilde, cada una con la class="tick"
correspondiente class="tick"
. Historia de usuario n. ° 5: Mi gráfico debe tener un elemento rect
para cada punto de datos con una class="bar"
correspondiente class="bar"
muestra los datos. Historia de usuario n. ° 6: Cada barra debe tener las propiedades data-date
y data-gdp
, que contienen la fecha y los valores de GDP. Historia de usuario n. ° 7: Las propiedades de data-date
los elementos de la barra deben coincidir con el orden de los datos proporcionados. Historia de usuario n. ° 8: Las propiedades data-gdp
elementos de la barra deben coincidir con el orden de los datos proporcionados. Historia de usuario n. ° 9: la altura de cada elemento de barra debe representar con precisión el PIB correspondiente de los datos. Historia de usuario n. ° 10: el atributo data-date
y su elemento de barra correspondiente deben alinearse con el valor correspondiente en el eje x. Historia de usuario # 11: El atributo data-gdp
y su elemento de barra correspondiente deben alinearse con el valor correspondiente en el eje y. Historia de usuario n. ° 12: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip"
que muestra más información sobre el área. Historia de usuario n. ° 13: Mi información sobre herramientas debe tener una propiedad de data-date
que corresponda a la data-date
de data-date
del área activa. Aquí está el conjunto de datos que necesitará para completar este proyecto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
Puede compilar su proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. Una vez que haya terminado, envíe la URL a su proyecto de trabajo con todas las pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="title"
correspondiente id="title"
. Historia de usuario n. ° 2: Mi gráfico debe tener un eje x del elemento g
con un id="x-axis"
correspondiente id="x-axis"
. Historia de usuario n. ° 3: Mi gráfico debe tener un eje g
elemento y con su correspondiente id="y-axis"
. Historia de usuario n. ° 4: Ambos ejes deben contener varias etiquetas de tilde, cada una con la class="tick"
correspondiente class="tick"
. Historia de usuario n. ° 5: Mi gráfico debe tener un elemento rect
para cada punto de datos con una class="bar"
correspondiente class="bar"
muestra los datos. Historia de usuario n. ° 6: Cada barra debe tener las propiedades data-date
y data-gdp
, que contienen la fecha y los valores de GDP. Historia de usuario n. ° 7: Las propiedades de data-date
los elementos de la barra deben coincidir con el orden de los datos proporcionados. Historia de usuario n. ° 8: Las propiedades data-gdp
elementos de la barra deben coincidir con el orden de los datos proporcionados. Historia de usuario n. ° 9: la altura de cada elemento de barra debe representar con precisión el PIB correspondiente de los datos. Historia de usuario n. ° 10: el atributo data-date
y su elemento de barra correspondiente deben alinearse con el valor correspondiente en el eje x. Historia de usuario # 11: El atributo data-gdp
y su elemento de barra correspondiente deben alinearse con el valor correspondiente en el eje y. Historia de usuario n. ° 12: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip"
que muestra más información sobre el área. Historia de usuario n. ° 13: Mi información sobre herramientas debe tener una propiedad de data-date
que corresponda a la data-date
de data-date
del área activa. Aquí está el conjunto de datos que necesitará para completar este proyecto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
Puede compilar su proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. Una vez que haya terminado, envíe la URL a su proyecto de trabajo con todas las pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="title"
correspondiente id="title"
. Historia de usuario n. ° 2: Mi choropleth debe tener un elemento de descripción con un id="description"
. Historia de usuario n. ° 3: Mi coropleta debe tener condados con una class="county"
correspondiente class="county"
que represente los datos. Historia de usuario n. ° 4: Debe haber al menos 4 colores de relleno diferentes utilizados para los condados. Historia de usuario n. ° 5: Mis condados deben tener cada uno data-fips
y propiedades de data-education
contengan sus fips y valores de educación correspondientes. Historia de usuario n. ° 6: Mi coropleta debe tener un condado para cada punto de datos proporcionado. Historia de usuario n. ° 7: Los condados deben tener datos de fips y valores de educación de datos que coincidan con los datos de muestra. Historia de usuario n. ° 8: Mi coropleta debe tener una leyenda con su correspondiente id="legend"
. Historia de usuario n. ° 9: Debe haber al menos 4 colores de relleno diferentes utilizados para la leyenda. Historia de usuario n. ° 10: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip"
que muestra más información sobre el área. Historia de usuario n. ° 11: Mi información sobre herramientas debe tener una propiedad de data-education
que corresponda a la data-education
de data-education
del área activa. Aquí están los conjuntos de datos que necesitará para completar este proyecto: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="title"
correspondiente id="title"
. Historia de usuario n. ° 2: Mi choropleth debe tener un elemento de descripción con un id="description"
. Historia de usuario n. ° 3: Mi coropleta debe tener condados con una class="county"
correspondiente class="county"
que represente los datos. Historia de usuario n. ° 4: Debe haber al menos 4 colores de relleno diferentes utilizados para los condados. Historia de usuario n. ° 5: Mis condados deben tener cada uno data-fips
y propiedades de data-education
contengan sus fips y valores de educación correspondientes. Historia de usuario n. ° 6: Mi coropleta debe tener un condado para cada punto de datos proporcionado. Historia de usuario n. ° 7: Los condados deben tener datos de fips y valores de educación de datos que coincidan con los datos de muestra. Historia de usuario n. ° 8: Mi coropleta debe tener una leyenda con su correspondiente id="legend"
. Historia de usuario n. ° 9: Debe haber al menos 4 colores de relleno diferentes utilizados para la leyenda. Historia de usuario n. ° 10: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip"
que muestra más información sobre el área. Historia de usuario n. ° 11: Mi información sobre herramientas debe tener una propiedad de data-education
que corresponda a la data-education
de data-education
del área activa. Aquí están los conjuntos de datos que necesitará para completar este proyecto: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="title"
correspondiente id="title"
. Historia de usuario n. ° 2: Mi mapa de calor debe tener una descripción con una id="description"
correspondiente id="description"
. Historia de usuario n. ° 3: Mi mapa de calor debe tener un eje x con una id="x-axis"
correspondiente id="x-axis"
. Historia de usuario n. ° 4: Mi mapa de calor debe tener un eje y con una id="y-axis"
correspondiente id="y-axis"
. Historia de usuario n. ° 5: Mi mapa de calor debe tener elementos rect
con una class="cell"
que representa los datos. Historia de usuario n. ° 6: Debe haber al menos 4 colores de relleno diferentes utilizados para las celdas. Historia de usuario n. ° 7: Cada celda tendrá las propiedades data-month
, data-year
, data-temp
contienen sus valores correspondientes de mes, año y temperatura. Historia de usuario n. ° 8: El data-month
data-year
de data-year
de cada celda debe estar dentro del rango de los datos. Historia de usuario n. ° 9: Mi mapa de calor debe tener celdas que se alineen con el mes correspondiente en el eje y. Historia de usuario # 10: Mi mapa de calor debe tener celdas que se alineen con el año correspondiente en el eje x. Historia de usuario n. ° 11: Mi mapa de calor debe tener varias etiquetas de tic en el eje y con el nombre completo del mes. Historia de usuario n. ° 12: Mi mapa de calor debe tener varias etiquetas de marca en el eje x con los años comprendidos entre 1754 y 2015. Historia de usuario n. ° 13: Mi mapa de calor debe tener una leyenda con una id="legend"
correspondiente id="legend"
. Historia de usuario n. ° 14: Mi leyenda debe contener elementos rect
. Historia de usuario n. ° 15: Los elementos rect
en la leyenda deben usar al menos 4 colores de relleno diferentes. Historia de usuario n. ° 16: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip"
que muestra más información sobre el área. Historia de usuario n. ° 16: Mi información sobre herramientas debe tener una propiedad de data-year
que corresponda con el data-year
de data-year
del área activa. Aquí está el conjunto de datos que necesitará para completar este proyecto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json
Puede construir su proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="title"
correspondiente id="title"
. Historia de usuario n. ° 2: Mi mapa de calor debe tener una descripción con una id="description"
correspondiente id="description"
. Historia de usuario n. ° 3: Mi mapa de calor debe tener un eje x con una id="x-axis"
correspondiente id="x-axis"
. Historia de usuario n. ° 4: Mi mapa de calor debe tener un eje y con una id="y-axis"
correspondiente id="y-axis"
. Historia de usuario n. ° 5: Mi mapa de calor debe tener elementos rect
con una class="cell"
que representa los datos. Historia de usuario n. ° 6: Debe haber al menos 4 colores de relleno diferentes utilizados para las celdas. Historia de usuario n. ° 7: Cada celda tendrá las propiedades data-month
, data-year
, data-temp
contienen sus valores correspondientes de mes, año y temperatura. Historia de usuario n. ° 8: El data-month
data-year
de data-year
de cada celda debe estar dentro del rango de los datos. Historia de usuario n. ° 9: Mi mapa de calor debe tener celdas que se alineen con el mes correspondiente en el eje y. Historia de usuario # 10: Mi mapa de calor debe tener celdas que se alineen con el año correspondiente en el eje x. Historia de usuario n. ° 11: Mi mapa de calor debe tener varias etiquetas de tic en el eje y con el nombre completo del mes. Historia de usuario n. ° 12: Mi mapa de calor debe tener varias etiquetas de marca en el eje x con los años comprendidos entre 1754 y 2015. Historia de usuario n. ° 13: Mi mapa de calor debe tener una leyenda con una id="legend"
correspondiente id="legend"
. Historia de usuario n. ° 14: Mi leyenda debe contener elementos rect
. Historia de usuario n. ° 15: Los elementos rect
en la leyenda deben usar al menos 4 colores de relleno diferentes. Historia de usuario n. ° 16: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip"
que muestra más información sobre el área. Historia de usuario n. ° 16: Mi información sobre herramientas debe tener una propiedad de data-year
que corresponda con el data-year
de data-year
del área activa. Aquí está el conjunto de datos que necesitará para completar este proyecto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json
Puede construir su proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="title"
. Historia de usuario n. ° 2: Puedo ver un eje x que tiene una id="x-axis"
correspondiente id="x-axis"
. Historia de usuario n. ° 3: Puedo ver un eje y que tiene una id="y-axis"
correspondiente id="y-axis"
. Historia de usuario n. ° 4: Puedo ver puntos, cada uno con una clase de dot
, que representan los datos que se trazan. Historia de usuario n. ° 5: Cada punto debe tener las propiedades data-xvalue
y data-yvalue
contienen sus valores x e y correspondientes. Historia de usuario n. ° 6: El valor de data-xvalue
y el valor de data-yvalue
de cada punto deben estar dentro del rango de los datos reales y en el formato de datos correcto. Para data-xvalue
, los enteros (años completos) o los objetos Date son aceptables para la evaluación de la prueba. Para data-yvalue
(minutos), use objetos Date. Historia de usuario n. ° 7: el valor data-xvalue
y su punto correspondiente deben alinearse con el punto / valor correspondiente en el eje x. Historia de usuario n. ° 8: el data-yvalue
y del data-yvalue
y su punto correspondiente deben alinearse con el punto / valor correspondiente en el eje y. Historia de usuario n. ° 9: Puedo ver varias etiquetas de tic en el eje y con el formato de hora %M:%S
Historia de usuario n. ° 10: Puedo ver varias etiquetas de tick en el eje x que muestran el año. Historia de usuario n. ° 11: Puedo ver que el rango de las etiquetas del eje x está dentro del rango de los datos reales del eje x. Historia de usuario n. ° 12: Puedo ver que el rango de las etiquetas del eje y está dentro del rango de los datos reales del eje y. Historia de usuario n. ° 13: Puedo ver una leyenda que contiene texto descriptivo que tiene id="legend"
. Historia de usuario n. ° 14: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip"
que muestra más información sobre el área. Historia de usuario n. ° 15: Mi información sobre herramientas debe tener una propiedad de data-year
que se corresponda con el valor de data-xvalue
del área activa. Aquí está el conjunto de datos que necesitará para completar este proyecto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json
Puede construir su proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="title"
. Historia de usuario n. ° 2: Puedo ver un eje x que tiene una id="x-axis"
correspondiente id="x-axis"
. Historia de usuario n. ° 3: Puedo ver un eje y que tiene una id="y-axis"
correspondiente id="y-axis"
. Historia de usuario n. ° 4: Puedo ver puntos, cada uno con una clase de dot
, que representan los datos que se trazan. Historia de usuario n. ° 5: Cada punto debe tener las propiedades data-xvalue
y data-yvalue
contienen sus valores x e y correspondientes. Historia de usuario n. ° 6: El valor de data-xvalue
y el valor de data-yvalue
de cada punto deben estar dentro del rango de los datos reales y en el formato de datos correcto. Para data-xvalue
, los enteros (años completos) o los objetos Date son aceptables para la evaluación de la prueba. Para data-yvalue
(minutos), use objetos Date. Historia de usuario n. ° 7: el valor data-xvalue
y su punto correspondiente deben alinearse con el punto / valor correspondiente en el eje x. Historia de usuario n. ° 8: el data-yvalue
y del data-yvalue
y su punto correspondiente deben alinearse con el punto / valor correspondiente en el eje y. Historia de usuario n. ° 9: Puedo ver varias etiquetas de tic en el eje y con el formato de hora %M:%S
Historia de usuario n. ° 10: Puedo ver varias etiquetas de tick en el eje x que muestran el año. Historia de usuario n. ° 11: Puedo ver que el rango de las etiquetas del eje x está dentro del rango de los datos reales del eje x. Historia de usuario n. ° 12: Puedo ver que el rango de las etiquetas del eje y está dentro del rango de los datos reales del eje y. Historia de usuario n. ° 13: Puedo ver una leyenda que contiene texto descriptivo que tiene id="legend"
. Historia de usuario n. ° 14: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip"
que muestra más información sobre el área. Historia de usuario n. ° 15: Mi información sobre herramientas debe tener una propiedad de data-year
que se corresponda con el valor de data-xvalue
del área activa. Aquí está el conjunto de datos que necesitará para completar este proyecto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json
Puede construir su proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="title"
correspondiente id="title"
. Historia de usuario n. ° 2: el mapa de mi árbol debe tener una descripción con una id="description"
correspondiente id="description"
. Historia de usuario n. ° 3: Mi mapa de árbol debe tener elementos rect
con una class="tile"
correspondiente class="tile"
que representa los datos. Historia de usuario n. ° 4: Debe haber al menos 2 colores de relleno diferentes utilizados para los azulejos. Historia de usuario n. ° 5: Cada mosaico debe tener las propiedades data-name
data-category
data-value
contengan su nombre, categoría y valor correspondientes. Historia de usuario n. ° 6: El área de cada mosaico debe corresponder a la cantidad del valor de los datos: los mosaicos con un valor de datos más grande deben tener un área más grande. Historia de usuario n. ° 7: Mi mapa de árbol debe tener una leyenda con el id="legend"
correspondiente id="legend"
. Historia de usuario n. ° 8: Mi leyenda debe tener elementos rect
con una class="legend-item"
correspondiente class="legend-item"
. Historia de usuario n. ° 9: Los elementos rect
en la leyenda deben usar al menos 2 colores de relleno diferentes. Historia de usuario n. ° 10: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip"
que muestra más información sobre el área. Historia de usuario n. ° 11: Mi información sobre herramientas debe tener una propiedad de data-value
que corresponda al data-value
de data-value
del área activa. Para este proyecto puedes usar cualquiera de los siguientes conjuntos de datos: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. id="title"
correspondiente id="title"
. Historia de usuario n. ° 2: el mapa de mi árbol debe tener una descripción con una id="description"
correspondiente id="description"
. Historia de usuario n. ° 3: Mi mapa de árbol debe tener elementos rect
con una class="tile"
correspondiente class="tile"
que representa los datos. Historia de usuario n. ° 4: Debe haber al menos 2 colores de relleno diferentes utilizados para los azulejos. Historia de usuario n. ° 5: Cada mosaico debe tener las propiedades data-name
data-category
data-value
contengan su nombre, categoría y valor correspondientes. Historia de usuario n. ° 6: El área de cada mosaico debe corresponder a la cantidad del valor de los datos: los mosaicos con un valor de datos más grande deben tener un área más grande. Historia de usuario n. ° 7: Mi mapa de árbol debe tener una leyenda con el id="legend"
correspondiente id="legend"
. Historia de usuario n. ° 8: Mi leyenda debe tener elementos rect
con una class="legend-item"
correspondiente class="legend-item"
. Historia de usuario n. ° 9: Los elementos rect
en la leyenda deben usar al menos 2 colores de relleno diferentes. Historia de usuario n. ° 10: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip"
que muestra más información sobre el área. Historia de usuario n. ° 11: Mi información sobre herramientas debe tener una propiedad de data-value
que corresponda al data-value
de data-value
del área activa. Para este proyecto puedes usar cualquiera de los siguientes conjuntos de datos: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. △
o ⊕
) de las matrices proporcionadas. Dados dos conjuntos (por ejemplo, conjunto A = {1, 2, 3}
y conjunto B = {2, 3, 4}
), el término matemático "diferencia simétrica" es el conjunto de elementos que se encuentran en cualquiera de los dos conjuntos, pero no en ambos ( A △ B = C = {1, 4}
). Por cada diferencia simétrica adicional que tome (por ejemplo, en un conjunto D = {2, 3}
), debe obtener el conjunto de los elementos que están en cualquiera de los dos pero no en ambos ( C △ D = {1, 4} △ {2, 3} = {1, 2, 3, 4}
). La matriz resultante debe contener solo valores únicos ( no duplicados ). Recuerda usar Read-Search-Ask si te atascas. Trata de realizar el programa. Escribe tu propio código. △
o ⊕
) de las matrices proporcionadas. Dados dos conjuntos (por ejemplo, conjunto A = {1, 2, 3}
y conjunto B = {2, 3, 4}
), el término matemático "diferencia simétrica" es el conjunto de elementos que se encuentran en cualquiera de los dos conjuntos, pero no en ambos ( A △ B = C = {1, 4}
). Por cada diferencia simétrica adicional que tome (por ejemplo, en un conjunto D = {2, 3}
), debe obtener el conjunto de los elementos que están en cualquiera de los dos pero no en ambos ( C △ D = {1, 4} △ {2, 3} = {1, 2, 3, 4}
). La matriz resultante debe contener solo valores únicos ( no duplicados ). Recuerda usar Read-Search-Ask si te atascas. Trata de realizar el programa. Escribe tu propio código. arr1
). Si no se puede encontrar un artículo, agregue el nuevo artículo y la cantidad en la matriz de inventario. La matriz de inventario devuelta debe estar ordenada alfabéticamente por artículo. Recuerda usar Read-Search-Ask si te atascas. Trate de hacer programación en pareja. Escribe tu propio código. arr1
). Si no se puede encontrar un artículo, agregue el nuevo artículo y la cantidad en la matriz de inventario. La matriz de inventario devuelta debe estar ordenada alfabéticamente por artículo. Recuerda usar Read-Search-Ask si te atascas. Trate de hacer programación en pareja. Escribe tu propio código. aab
debe devolver 2 porque tiene 6 permutaciones totales ( aab
, aab
, aba
, aba
, baa
, baa
), pero solo 2 de ellas ( aba
y aba
) no tienen la misma letra (en este caso a
) repitiendo Recuerda usar Read-Search-Ask si te atascas. Trate de hacer programación en pareja. Escribe tu propio código. aab
debe devolver 2 porque tiene 6 permutaciones totales ( aab
, aab
, aba
, aba
, baa
, baa
), pero solo 2 de ellas ( aba
y aba
) no tienen la misma letra (en este caso a
) repitiendo Recuerda usar Read-Search-Ask si te atascas. Trate de hacer programación en pareja. Escribe tu propio código. arr
, encuentre pares de elementos cuya suma sea igual al segundo argumento arg
y devuelva la suma de sus índices. Puede usar varios pares que tengan los mismos elementos numéricos pero diferentes índices. Cada par debe usar los índices disponibles más bajos posibles. Una vez que se ha utilizado un elemento, no puede reutilizarse para emparejarse con otro elemento. Por ejemplo, por pairwise([1, 1, 2], 3)
crea un par [2, 1]
usando el 1 en el índice 0 en lugar del 1 en el índice 1, porque 0 + 2 <1 + 2. Por ejemplo, por pairwise([7, 9, 11, 13, 15], 20)
devuelve 6
. Los pares que suman 20 son [7, 13]
y [9, 11]
. Luego podemos escribir la matriz con sus índices y valores. Índice | 0 | 1 | 2 | 3 | 4 |
---|---|---|---|---|---|
Valor | 7 | 9 | 11 | 13 | 15 |
6
Recuerde usar Lectura-Búsqueda-Preguntar si se atasca. Trate de hacer programación en pareja. Escribe tu propio código. arr
, encuentre pares de elementos cuya suma sea igual al segundo argumento arg
y devuelva la suma de sus índices. Puede usar varios pares que tengan los mismos elementos numéricos pero diferentes índices. Cada par debe usar los índices disponibles más bajos posibles. Una vez que se ha utilizado un elemento, no puede reutilizarse para emparejarse con otro elemento. Por ejemplo, por pairwise([1, 1, 2], 3)
crea un par [2, 1]
usando el 1 en el índice 0 en lugar del 1 en el índice 1, porque 0 + 2 <1 + 2. Por ejemplo, por pairwise([7, 9, 11, 13, 15], 20)
devuelve 6
. Los pares que suman 20 son [7, 13]
y [9, 11]
. Luego podemos escribir la matriz con sus índices y valores. Índice | 0 | 1 | 2 | 3 | 4 |
---|---|---|---|---|---|
Valor | 7 | 9 | 11 | 13 | 15 |
6
Recuerde usar Lectura-Búsqueda-Preguntar si se atasca. Trate de hacer programación en pareja. Escribe tu propio código. https://s3.amazonaws.com/freecodecamp/simonSound1.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3
. Recuerda usar Read-Search-Ask si te atascas. Cuando haya terminado, haga clic en el botón "He completado este desafío" e incluya un enlace a su CodePen. Puedes obtener comentarios sobre tu proyecto compartiéndolo con tus amigos en Facebook. https://s3.amazonaws.com/freecodecamp/simonSound1.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3
, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3
. Recuerda usar Read-Search-Ask si te atascas. Cuando haya terminado, haga clic en el botón "He completado este desafío" e incluya un enlace a su CodePen. Puedes obtener comentarios sobre tu proyecto compartiéndolo con tus amigos en Facebook. https://en.wikipedia.org/wiki/Special:Random
. Pista # 2: Aquí hay una entrada sobre el uso de la API de Wikipedia: https://www.mediawiki.org/wiki/API:Main_page
. Sugerencia # 3: Usa este enlace para experimentar con la API de Wikipedia. Recuerda usar Read-Search-Ask si te atascas. Cuando haya terminado, haga clic en el botón "He completado este desafío" e incluya un enlace a su CodePen. Puedes obtener comentarios sobre tu proyecto compartiéndolo con tus amigos en Facebook. https://en.wikipedia.org/wiki/Special:Random
. Pista # 2: Aquí hay una entrada sobre el uso de la API de Wikipedia: https://www.mediawiki.org/wiki/API:Main_page
. Sugerencia # 3: Usa este enlace para experimentar con la API de Wikipedia. Recuerda usar Read-Search-Ask si te atascas. Cuando haya terminado, haga clic en el botón "He completado este desafío" e incluya un enlace a su CodePen. Puedes obtener comentarios sobre tu proyecto compartiéndolo con tus amigos en Facebook. https://
) para obtener la configuración regional de un usuario a través de la geolocalización HTML5. Por este motivo, recomendamos utilizar la geolocalización HTML5 para obtener la ubicación del usuario y luego usar la API del tiempo libre de códigoCampo https://fcc-weather-api.glitch.me que usa una conexión HTTP segura para el clima. Además, asegúrese de conectarse a CodePen.io a través de https://
. Recuerda usar Read-Search-Ask si te atascas. Cuando haya terminado, haga clic en el botón "He completado este desafío" e incluya un enlace a su CodePen. Puedes obtener comentarios sobre tu proyecto compartiéndolo con tus amigos en Facebook. https://
) para obtener la configuración regional de un usuario a través de la geolocalización HTML5. Por este motivo, recomendamos utilizar la geolocalización HTML5 para obtener la ubicación del usuario y luego usar la API del tiempo libre de códigoCampo https://fcc-weather-api.glitch.me que usa una conexión HTTP segura para el clima. Además, asegúrese de conectarse a CodePen.io a través de https://
. Recuerda usar Read-Search-Ask si te atascas. Cuando haya terminado, haga clic en el botón "He completado este desafío" e incluya un enlace a su CodePen. Puedes obtener comentarios sobre tu proyecto compartiéndolo con tus amigos en Facebook. ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
ACTUALIZACIÓN: debido a un cambio en las condiciones del uso de la API que se explica aquí, Twitch.tv ahora requiere una clave API, pero hemos creado una solución alternativa. Use https://wind-bow.glitch.me/twitch-api en lugar de la URL base de la API de twitch (es decir, https://api.twitch.tv/kraken) y aún podrá obtener información de la cuenta, sin necesidad de para registrarse en una clave API. Recuerda usar Read-Search-Ask si te atascas. Cuando haya terminado, haga clic en el botón "He completado este desafío" e incluya un enlace a su CodePen. Puedes obtener comentarios sobre tu proyecto compartiéndolo con tus amigos en Facebook. ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
ACTUALIZACIÓN: debido a un cambio en las condiciones del uso de la API que se explica aquí, Twitch.tv ahora requiere una clave API, pero hemos creado una solución alternativa. Use https://wind-bow.glitch.me/twitch-api en lugar de la URL base de la API de twitch (es decir, https://api.twitch.tv/kraken) y aún podrá obtener información de la cuenta, sin necesidad de para registrarse en una clave API. Recuerda usar Read-Search-Ask si te atascas. Cuando haya terminado, haga clic en el botón "He completado este desafío" e incluya un enlace a su CodePen. Puedes obtener comentarios sobre tu proyecto compartiéndolo con tus amigos en Facebook.