mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat: adding sports team project to new JS curriculum (#49135)
* fix: linting error * fix: updating correct super block name for project * feat: adding steps 15-20 * feat: adding more steps * feat: adding more steps for setPlayerCards function * feat: adding more steps * feat: adding rest of steps * fix: missing commas from json file * feat: adding tests * feat: adding more tests * fix: broken test for step 5 * feat: adding more tests * chore: adding tests * chore: adding more tests * feat: adding tests 16-20 * feat: adding more tests * feat: adding tests 25-29 * feat: adding more tests * feat: adding switch statement tests * feat: adding rest of tests * fix: adding column layout for small devices * fix: step 16 test * fix: step 17 test * fix: incorrect test for step 30 * fix: step 36 * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2ab4f6c52c5eec6d68de4.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e95e39860dc5b01ebe9be0.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/641fc88d8fa7127f76e0324f.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2a4a8087e6dec8ec47f16.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2a5f09a785aed155c0a56.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2a8e14fb388edd3242527.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2aa36fcdc63ee4e18fc37.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63d1214a0ac7a9389793269b.md Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f28972973504e7bb58b0b3.md Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63cf8ec006a776ff5f6e3c68.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63cf8ec006a776ff5f6e3c68.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63cf90d4696d8f00851873a4.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63cf90d4696d8f00851873a4.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63cf91b0ff6e9300ead140cc.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2a8e14fb388edd3242527.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2a8e14fb388edd3242527.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2aa36fcdc63ee4e18fc37.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2aa36fcdc63ee4e18fc37.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2ab4f6c52c5eec6d68de4.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63cf91b0ff6e9300ead140cc.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63cf920228531a0145abd0b3.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63cf920228531a0145abd0b3.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63cf920228531a0145abd0b3.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63cf93472de77d01bf8474bf.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63cf93472de77d01bf8474bf.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63d120a05ee93f38353b84c0.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63d120a05ee93f38353b84c0.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63d1214a0ac7a9389793269b.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63d1214a0ac7a9389793269b.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63d128eaedcc773d2ded2128.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63d128eaedcc773d2ded2128.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63d12b9c7aaee43de1ba265d.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63d12fe2a595263e8f5084f7.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63d12fe2a595263e8f5084f7.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e02a333354343b595d64ca.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e0334b7a24bd3c96aca4de.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e03b86008bbb3e1c3de846.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e060df21bca347b2d2b374.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e062d6090ebb486a4eda3a.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e949b8327aa2aca2ca8eac.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e95a45dce95baf41dd4f78.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e95e39860dc5b01ebe9be0.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e95e39860dc5b01ebe9be0.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e9667c881b61b1e338d276.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e96938d2a347b2734a1587.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e96eb94c97b6b31ee50f63.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e96eb94c97b6b31ee50f63.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e9718d7d490bb3940d5a0a.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e9737f686c76b4078a60f4.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63e9737f686c76b4078a60f4.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f28972973504e7bb58b0b3.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f28ef082d771e8bf71f94a.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f293c804d6f9e9a83ca4c5.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f29804e3ec00ea6fab1ec4.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f29ce62aea65eb041758c8.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2a0a860790eebe61bf908.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2a0a860790eebe61bf908.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/641fc88d8fa7127f76e0324f.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/641fcfd468185384ac218b7d.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2a4a8087e6dec8ec47f16.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2a4a8087e6dec8ec47f16.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2a5f09a785aed155c0a56.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63f2a5f09a785aed155c0a56.md Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * fix: applying rest of code review suggestions * Update client/i18n/locales/english/intro.json Co-authored-by: Rafael D. Hernandez <6822714+RafaelDavisH@users.noreply.github.com> * Update client/src/pages/learn/2022/javascript-algorithms-and-data-structures/learn-modern-javascript-methods-by-building-sports-team-cards/index.md Co-authored-by: Rafael D. Hernandez <6822714+RafaelDavisH@users.noreply.github.com> * Update client/src/pages/learn/2022/javascript-algorithms-and-data-structures/learn-modern-javascript-methods-by-building-sports-team-cards/index.md Co-authored-by: Rafael D. Hernandez <6822714+RafaelDavisH@users.noreply.github.com> * Update client/utils/help-category-map.json Co-authored-by: Rafael D. Hernandez <6822714+RafaelDavisH@users.noreply.github.com> * Update client/src/pages/learn/2022/javascript-algorithms-and-data-structures/learn-modern-javascript-methods-by-building-sports-team-cards/index.md Co-authored-by: Rafael D. Hernandez <6822714+RafaelDavisH@users.noreply.github.com> * Update curriculum/challenges/_meta/learn-modern-javascript-methods-by-building-sports-team-cards/meta.json Co-authored-by: Rafael D. Hernandez <6822714+RafaelDavisH@users.noreply.github.com> * Update curriculum/challenges/_meta/learn-modern-javascript-methods-by-building-sports-team-cards/meta.json Co-authored-by: Rafael D. Hernandez <6822714+RafaelDavisH@users.noreply.github.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-sports-team-cards/63c620161fc2b49ac340ffc4.md Co-authored-by: Rafael D. Hernandez <6822714+RafaelDavisH@users.noreply.github.com> * refactor: rename project folder * Update client/i18n/locales/english/intro.json Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * fix: updating folder names * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md Co-authored-by: Kolade Chris <65571316+Ksound22@users.noreply.github.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: syntax erorr for broken test * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * Update curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> --------- Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com> Co-authored-by: Rafael D. Hernandez <6822714+RafaelDavisH@users.noreply.github.com> Co-authored-by: Kolade Chris <65571316+Ksound22@users.noreply.github.com> Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>
This commit is contained in:
Jessica Wilkins
@@ -336,6 +336,10 @@
|
||||
"title": "Learn Functional Programming by Building a Spreadsheet",
|
||||
"intro": ["", ""]
|
||||
},
|
||||
"learn-modern-javascript-methods-by-building-football-team-cards": {
|
||||
"title": "Learn Modern JavaScript Methods By Building Football Team Cards",
|
||||
"intro": ["", ""]
|
||||
},
|
||||
"learn-advanced-array-methods-by-building-a-statistics-calculator": {
|
||||
"title": "Learn Advanced Array Methods by Building a Statistics Calculator",
|
||||
"intro": ["", ""]
|
||||
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Introduction to the Learn Modern JavaScript Methods By Building Football Team Cards
|
||||
block: Learn Modern JavaScript Methods By Building Football Team Cards
|
||||
superBlock: JavaScript Algorithms and Data Structures
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Introduction to the Learn Modern JavaScript Methods By Building Football Team Cards
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@@ -105,6 +105,7 @@
|
||||
"build-a-palindrome-checker-project": "JavaScript",
|
||||
"build-a-roman-numeral-converter-project": "JavaScript",
|
||||
"build-a-telephone-number-validator-project": "JavaScript",
|
||||
"learn-modern-javascript-methods-by-building-football-team-cards": "JavaScript",
|
||||
"learn-advanced-array-methods-by-building-a-statistics-calculator": "JavaScript",
|
||||
"build-a-multi-function-calculator-project": "Python",
|
||||
"build-a-graphing-calculator-project": "Python",
|
||||
|
||||
+208
@@ -0,0 +1,208 @@
|
||||
{
|
||||
"name": "Learn Modern JavaScript Methods By Building Football Team Cards",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-modern-javascript-methods-by-building-football-team-cards",
|
||||
"order": 4,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "2022/javascript-algorithms-and-data-structures",
|
||||
"superOrder": 4,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"63c620161fc2b49ac340ffc4",
|
||||
"Step 1"
|
||||
],
|
||||
[
|
||||
"63cf7e324c1831f8d936b3ae",
|
||||
"Step 2"
|
||||
],
|
||||
[
|
||||
"63cf7f97e7f99af9348f5068",
|
||||
"Step 3"
|
||||
],
|
||||
[
|
||||
"63cf812bb8ecd4f9cf749b8f",
|
||||
"Step 4"
|
||||
],
|
||||
[
|
||||
"63cf83fdbb51d9fa54654ae6",
|
||||
"Step 5"
|
||||
],
|
||||
[
|
||||
"63cf8ec006a776ff5f6e3c68",
|
||||
"Step 6"
|
||||
],
|
||||
[
|
||||
"63cf90d4696d8f00851873a4",
|
||||
"Step 7"
|
||||
],
|
||||
[
|
||||
"63cf91b0ff6e9300ead140cc",
|
||||
"Step 8"
|
||||
],
|
||||
[
|
||||
"63cf920228531a0145abd0b3",
|
||||
"Step 9"
|
||||
],
|
||||
[
|
||||
"63cf93472de77d01bf8474bf",
|
||||
"Step 10"
|
||||
],
|
||||
[
|
||||
"63d120a05ee93f38353b84c0",
|
||||
"Step 11"
|
||||
],
|
||||
[
|
||||
"63d1214a0ac7a9389793269b",
|
||||
"Step 12"
|
||||
],
|
||||
[
|
||||
"63d128eaedcc773d2ded2128",
|
||||
"Step 13"
|
||||
],
|
||||
[
|
||||
"63d12b9c7aaee43de1ba265d",
|
||||
"Step 14"
|
||||
],
|
||||
[
|
||||
"63d12fe2a595263e8f5084f7",
|
||||
"Step 15"
|
||||
],
|
||||
[
|
||||
"63e02a333354343b595d64ca",
|
||||
"Step 16"
|
||||
],
|
||||
[
|
||||
"63e0334b7a24bd3c96aca4de",
|
||||
"Step 17"
|
||||
],
|
||||
[
|
||||
"63e036373fc9173d284e165a",
|
||||
"Step 18"
|
||||
],
|
||||
[
|
||||
"63e03b86008bbb3e1c3de846",
|
||||
"Step 19"
|
||||
],
|
||||
[
|
||||
"63e042661ad2663f0d468740",
|
||||
"Step 20"
|
||||
],
|
||||
[
|
||||
"63e050bf935ac341b88326d6",
|
||||
"Step 21"
|
||||
],
|
||||
[
|
||||
"63e05557016dfd45ea49152c",
|
||||
"Step 22"
|
||||
],
|
||||
[
|
||||
"63e05c00b615bb46ac87273a",
|
||||
"Step 23"
|
||||
],
|
||||
[
|
||||
"63e060df21bca347b2d2b374",
|
||||
"Step 24"
|
||||
],
|
||||
[
|
||||
"63e062d6090ebb486a4eda3a",
|
||||
"Step 25"
|
||||
],
|
||||
[
|
||||
"63e949b8327aa2aca2ca8eac",
|
||||
"Step 26"
|
||||
],
|
||||
[
|
||||
"63e94dae6dcedbad73f2f6ee",
|
||||
"Step 27"
|
||||
],
|
||||
[
|
||||
"63e954321b0a77ae4f6d9650",
|
||||
"Step 28"
|
||||
],
|
||||
[
|
||||
"63e95a45dce95baf41dd4f78",
|
||||
"Step 29"
|
||||
],
|
||||
[
|
||||
"63e95e39860dc5b01ebe9be0",
|
||||
"Step 30"
|
||||
],
|
||||
[
|
||||
"63e9667c881b61b1e338d276",
|
||||
"Step 31"
|
||||
],
|
||||
[
|
||||
"63e96938d2a347b2734a1587",
|
||||
"Step 32"
|
||||
],
|
||||
[
|
||||
"63e96eb94c97b6b31ee50f63",
|
||||
"Step 33"
|
||||
],
|
||||
[
|
||||
"63e9718d7d490bb3940d5a0a",
|
||||
"Step 34"
|
||||
],
|
||||
[
|
||||
"63e9737f686c76b4078a60f4",
|
||||
"Step 35"
|
||||
],
|
||||
[
|
||||
"63f28972973504e7bb58b0b3",
|
||||
"Step 36"
|
||||
],
|
||||
[
|
||||
"63f28ef082d771e8bf71f94a",
|
||||
"Step 37"
|
||||
],
|
||||
[
|
||||
"63f293c804d6f9e9a83ca4c5",
|
||||
"Step 38"
|
||||
],
|
||||
[
|
||||
"63f29804e3ec00ea6fab1ec4",
|
||||
"Step 39"
|
||||
],
|
||||
[
|
||||
"63f29ce62aea65eb041758c8",
|
||||
"Step 40"
|
||||
],
|
||||
[
|
||||
"63f2a0a860790eebe61bf908",
|
||||
"Step 41"
|
||||
],
|
||||
[
|
||||
"641fc88d8fa7127f76e0324f",
|
||||
"Step 42"
|
||||
],
|
||||
[
|
||||
"641fcfd468185384ac218b7d",
|
||||
"Step 43"
|
||||
],
|
||||
[
|
||||
"63f2a4a8087e6dec8ec47f16",
|
||||
"Step 44"
|
||||
],
|
||||
[
|
||||
"63f2a5f09a785aed155c0a56",
|
||||
"Step 45"
|
||||
],
|
||||
[
|
||||
"63f2a8e14fb388edd3242527",
|
||||
"Step 46"
|
||||
],
|
||||
[
|
||||
"63f2aa36fcdc63ee4e18fc37",
|
||||
"Step 47"
|
||||
],
|
||||
[
|
||||
"63f2ab4f6c52c5eec6d68de4",
|
||||
"Step 48"
|
||||
]
|
||||
]
|
||||
}
|
||||
+278
@@ -0,0 +1,278 @@
|
||||
---
|
||||
id: 63c620161fc2b49ac340ffc4
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this project, you will build a set of football team cards and learn about nested objects, object destructuring, default parameters, event listeners, and switch statements. All of the HTML and CSS for this project has been provided for you.
|
||||
|
||||
Start by accessing the `id` called `team` from the HTML document and storing it in a `const` variable called `teamName`.
|
||||
|
||||
Remember, you can use the `getElementById` method for this.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `document.getElementById()` method to get the `#team` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare the variable called `teamName` and assign it the `#team` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+287
@@ -0,0 +1,287 @@
|
||||
---
|
||||
id: 63cf7e324c1831f8d936b3ae
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, access the `id` called `sport` from the HTML document and store it in a `const` variable called `typeOfSport`. Below that variable, assign the `id` of `year` to a `const` variable called `worldCupYear`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `document.getElementById()` method to get the `#sport` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use the `document.getElementById()` method to get the `#year` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+289
@@ -0,0 +1,289 @@
|
||||
---
|
||||
id: 63cf7f97e7f99af9348f5068
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, access the `id` called `head-coach` from the HTML document and store it in a `const` variable called `headCoach`. Below that variable, assign the `id` of `player-cards` to a `const` variable called `playerCards`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `document.getElementById()` method to get the `#head-coach` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare the variable called `headCoach` and assign it the `#head-coach` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+headCoach\s*=\s*document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use the `document.getElementById()` method to get the `#player-cards` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare the variable called `playerCards` and assign it the `#player-cards` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+playerCards\s*=\s*document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+279
@@ -0,0 +1,279 @@
|
||||
---
|
||||
id: 63cf812bb8ecd4f9cf749b8f
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create one more `const` variable called `playersDropdownList` and assign it the `id` of `players` using the `getElementById` method.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `document.getElementById()` method to get the `#players` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+276
@@ -0,0 +1,276 @@
|
||||
---
|
||||
id: 63cf83fdbb51d9fa54654ae6
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to build out the data structure that will hold all of the information for your football team.
|
||||
|
||||
Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+283
@@ -0,0 +1,283 @@
|
||||
---
|
||||
id: 63cf8ec006a776ff5f6e3c68
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `myFavoriteFootballTeam` object, add a new property with a `key` named `team` and a string value of `Argentina`.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `myFavoriteFootballTeam` object should have a `team` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam, 'team');
|
||||
```
|
||||
|
||||
Your `team` property should be set to `Argentina`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.team, 'Argentina');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
--fcc-editable-region--
|
||||
const myFavoriteFootballTeam = {
|
||||
|
||||
};
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+283
@@ -0,0 +1,283 @@
|
||||
---
|
||||
id: 63cf90d4696d8f00851873a4
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `team` property, add a new property with a `key` named `sport` and a string value of `Football`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `myFavoriteFootballTeam` object should have a `sport` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam, 'sport');
|
||||
```
|
||||
|
||||
Your `team` property should be set to `Football`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.sport, 'Football');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
--fcc-editable-region--
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
|
||||
};
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+290
@@ -0,0 +1,290 @@
|
||||
---
|
||||
id: 63cf91b0ff6e9300ead140cc
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `sport` property, add a new property with a `key` named `year` and a number value of `1986`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `myFavoriteFootballTeam` object should have a `year` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam, 'year');
|
||||
```
|
||||
|
||||
Your `year` property should be a number.
|
||||
|
||||
```js
|
||||
assert.isNumber(myFavoriteFootballTeam.year);
|
||||
```
|
||||
|
||||
Your `year` property should be set to `1986`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.year, 1986);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
--fcc-editable-region--
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
|
||||
};
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+291
@@ -0,0 +1,291 @@
|
||||
---
|
||||
id: 63cf920228531a0145abd0b3
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `year` property, add a new property with a `key` named `isWorldCupWinner` and a boolean value set to `true`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam, 'isWorldCupWinner');
|
||||
```
|
||||
|
||||
Your `isWorldCupWinner` property should be a boolean.
|
||||
|
||||
```js
|
||||
assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner);
|
||||
```
|
||||
|
||||
Your `isWorldCupWinner` property should be set to `true`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
--fcc-editable-region--
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
|
||||
};
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+316
@@ -0,0 +1,316 @@
|
||||
---
|
||||
id: 63cf93472de77d01bf8474bf
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `isWorldCupWinner` property, add a new `key` called `headCoach` with a value of an empty object. Inside that object, add a property with a `key` of `coachName` and a string value of `Carlos Bilardo`. Below that property, add another `key` called `matches` with a number value of 7.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `myFavoriteFootballTeam` object should have a `headCoach` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam, 'headCoach');
|
||||
```
|
||||
|
||||
Your `headCoach` value should be an object.
|
||||
|
||||
```js
|
||||
assert.isObject(myFavoriteFootballTeam.headCoach)
|
||||
```
|
||||
|
||||
Your `headCoach` object should have a `coachName` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam.headCoach, 'coachName');
|
||||
```
|
||||
|
||||
Your `coachName` property should be set to `Carlos Bilardo`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo');
|
||||
```
|
||||
|
||||
Your `headCoach` object should have a `matches` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam.headCoach, 'matches');
|
||||
```
|
||||
|
||||
Your `matches` property should be a number.
|
||||
|
||||
```js
|
||||
assert.isNumber(myFavoriteFootballTeam.headCoach.matches);
|
||||
```
|
||||
|
||||
Your `matches` property should be set to `7`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.headCoach.matches, 7);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
```
|
||||
+296
@@ -0,0 +1,296 @@
|
||||
---
|
||||
id: 63d120a05ee93f38353b84c0
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `headCoach` property, create a new property with a `key` named `players` with the value of an empty array.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `myFavoriteFootballTeam` object should have a `players` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam, 'players');
|
||||
```
|
||||
|
||||
Your `players` value should be an array.
|
||||
|
||||
```js
|
||||
assert.isArray(myFavoriteFootballTeam.players)
|
||||
```
|
||||
|
||||
Your `players` array should be empty.
|
||||
|
||||
```js
|
||||
assert.deepEqual(myFavoriteFootballTeam.players, [])
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
--fcc-editable-region--
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
```
|
||||
+369
@@ -0,0 +1,369 @@
|
||||
---
|
||||
id: 63d1214a0ac7a9389793269b
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside that `players` array, create a new object with the following properties:
|
||||
|
||||
|
||||
```md
|
||||
|
||||
name: "Sergio Almirón"
|
||||
position: "forward"
|
||||
number: 1
|
||||
isCaptain: false
|
||||
nickname: null
|
||||
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `myFavoriteFootballTeam.players` array should have the value of an object.
|
||||
|
||||
```js
|
||||
assert.isObject(myFavoriteFootballTeam.players[0])
|
||||
```
|
||||
|
||||
Your new object should have a `name` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam.players[0], 'name');
|
||||
```
|
||||
|
||||
Your `name` property should be set to `Sergio Almirón`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón');
|
||||
```
|
||||
|
||||
Your new object should have a `position` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam.players[0], 'position');
|
||||
```
|
||||
|
||||
Your `position` property should be set to `forward`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward');
|
||||
```
|
||||
|
||||
Your new object should have a `number` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam.players[0], 'number');
|
||||
```
|
||||
|
||||
Your `number` property should be a number.
|
||||
|
||||
```js
|
||||
assert.isNumber(myFavoriteFootballTeam.players[0]?.number);
|
||||
```
|
||||
|
||||
Your `number` property should be set to `1`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.players[0]?.number, 1);
|
||||
```
|
||||
|
||||
Your new object should have a `isCaptain` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam.players[0], 'isCaptain');
|
||||
```
|
||||
|
||||
Your `isCaptain` property should be a boolean.
|
||||
|
||||
```js
|
||||
assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain);
|
||||
```
|
||||
|
||||
Your `isCaptain` property should be set to `false`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false);
|
||||
```
|
||||
|
||||
Your new object should have a `nickname` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam.players[0], 'nickname');
|
||||
```
|
||||
|
||||
Your `nickname` property should be set to `null`.
|
||||
|
||||
```js
|
||||
assert.isNull(myFavoriteFootballTeam.players[0]?.nickname);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
]
|
||||
};
|
||||
```
|
||||
+380
@@ -0,0 +1,380 @@
|
||||
---
|
||||
id: 63d128eaedcc773d2ded2128
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below that object, create a new object with the following properties:
|
||||
|
||||
```md
|
||||
name: "Sergio Batista"
|
||||
position: "midfielder"
|
||||
number: 2
|
||||
isCaptain: false
|
||||
nickname: null
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `myFavoriteFootballTeam.players` array should have two values.
|
||||
|
||||
```js
|
||||
// Have to assert at least, because we pre-populate data in the next step.
|
||||
assert.isAtLeast(myFavoriteFootballTeam.players.length, 2);
|
||||
```
|
||||
|
||||
Your `myFavoriteFootballTeam.players` array should have an object as the second value.
|
||||
|
||||
```js
|
||||
assert.isObject(myFavoriteFootballTeam.players[1])
|
||||
```
|
||||
|
||||
Your new object should have a `name` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam.players[1], 'name');
|
||||
```
|
||||
|
||||
Your `name` property should be set to `Sergio Batista`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista');
|
||||
```
|
||||
|
||||
Your new object should have a `position` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam.players[1], 'position');
|
||||
```
|
||||
|
||||
Your `position` property should be set to `midfielder`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder');
|
||||
```
|
||||
|
||||
Your new object should have a `number` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam.players[1], 'number');
|
||||
```
|
||||
|
||||
Your `number` property should be a number.
|
||||
|
||||
```js
|
||||
assert.isNumber(myFavoriteFootballTeam.players[1]?.number);
|
||||
```
|
||||
|
||||
Your `number` property should be set to `2`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.players[1]?.number, 2);
|
||||
```
|
||||
|
||||
Your new object should have a `isCaptain` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam.players[1], 'isCaptain');
|
||||
```
|
||||
|
||||
Your `isCaptain` property should be a boolean.
|
||||
|
||||
```js
|
||||
assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain);
|
||||
```
|
||||
|
||||
Your `isCaptain` property should be set to `false`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false);
|
||||
```
|
||||
|
||||
Your new object should have a `nickname` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam.players[1], 'nickname');
|
||||
```
|
||||
|
||||
Your `nickname` property should be set to `null`.
|
||||
|
||||
```js
|
||||
assert.isNull(myFavoriteFootballTeam.players[1]?.nickname);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
]
|
||||
};
|
||||
```
|
||||
+446
@@ -0,0 +1,446 @@
|
||||
---
|
||||
id: 63d12b9c7aaee43de1ba265d
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The rest of the data for the `myFavoriteFootballTeam.players` array has been filled out for you.
|
||||
|
||||
The next step is to ensure that you can't modify this object by adding or removing any properties. We are going to use a method called `Object.freeze(obj)` which will freeze this object and prevent any changes being made to it.
|
||||
|
||||
Use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object.
|
||||
|
||||
```js
|
||||
assert.isFrozen(myFavoriteFootballTeam);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+458
@@ -0,0 +1,458 @@
|
||||
---
|
||||
id: 63d12fe2a595263e8f5084f7
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To check if the `Object.freeze()` method is working, you can try to assign a new value to one of the existing properties.
|
||||
|
||||
Below the `Object.freeze(myFavoriteFootballTeam)`, assign the `USA` string to `myFavoriteFootballTeam.team`. Below that, add a `console.log` for `myFavoriteFootballTeam.team`.
|
||||
|
||||
When you open up the console, you will see an `Uncaught TypeError` message. This error appears because the `Object.freeze()` method does not allow you to overwrite that value.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign the `USA` string to `myFavoriteFootballTeam.team`.
|
||||
|
||||
```js
|
||||
|
||||
assert.match(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/);
|
||||
|
||||
```
|
||||
|
||||
You should add a `console.log` for `myFavoriteFootballTeam.team`.
|
||||
|
||||
```js
|
||||
|
||||
assert.match(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/);
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+470
@@ -0,0 +1,470 @@
|
||||
---
|
||||
id: 63e02a333354343b595d64ca
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you have tested the `Object.freeze()` method, you can delete those two lines of code from the last lesson.
|
||||
|
||||
The next step is to access the `key` called `sport` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `sport`.
|
||||
|
||||
Remember you can use dot notation for this.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove your assignment of the `USA` string to `myFavoriteFootballTeam.team`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/);
|
||||
```
|
||||
|
||||
You should remove your `console.log` for `myFavoriteFootballTeam.team`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare a `sport` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sport\s*=/);
|
||||
```
|
||||
|
||||
You should assign the value of the `sport` `key` from the `myFavoriteFootballTeam` object to the `sport` variable.
|
||||
|
||||
```js
|
||||
assert.equal(sport, myFavoriteFootballTeam.sport);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
myFavoriteFootballTeam.team = "USA";
|
||||
console.log(myFavoriteFootballTeam.team);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+454
@@ -0,0 +1,454 @@
|
||||
---
|
||||
id: 63e0334b7a24bd3c96aca4de
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `sport` variable, access the `key` called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `team` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+team\s*=/);
|
||||
```
|
||||
|
||||
You should assign the value of the `team` `key` from the `myFavoriteFootballTeam` object to the `team` variable.
|
||||
|
||||
```js
|
||||
assert.equal(team, myFavoriteFootballTeam.team);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const sport = myFavoriteFootballTeam.sport;
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+464
@@ -0,0 +1,464 @@
|
||||
---
|
||||
id: 63e036373fc9173d284e165a
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal.
|
||||
|
||||
The <dfn>object destructuring</dfn> syntax allows you to unpack values from arrays and objects:
|
||||
|
||||
```js
|
||||
const developerObj = {
|
||||
name: "Jessica Wilkins",
|
||||
isDeveloper: true
|
||||
};
|
||||
|
||||
// Object destructuring
|
||||
const { name, isDeveloper } = developerObj;
|
||||
```
|
||||
|
||||
Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code.
|
||||
|
||||
# --hints--
|
||||
|
||||
Use object destructuring to access the `sport` and `team` values.
|
||||
|
||||
```js
|
||||
|
||||
assert.match(code, /const\s*{\s*(sport\s*\,\s*team)|(team\s*\,\s*sport)\s*}\s*=\s*myFavoriteFootballTeam\s*/)
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const sport = myFavoriteFootballTeam.sport;
|
||||
const team = myFavoriteFootballTeam.team;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+449
@@ -0,0 +1,449 @@
|
||||
---
|
||||
id: 63e03b86008bbb3e1c3de846
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, add the `year` and `players` to your destructuring assignment.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the `year` and `players` values to your destructuring assignment.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/);
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const { sport, team } = myFavoriteFootballTeam;
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+448
@@ -0,0 +1,448 @@
|
||||
---
|
||||
id: 63e042661ad2663f0d468740
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to access the `coachName` value from the `myFavoriteFootballTeam.headCoach` object using the destructuring syntax.
|
||||
|
||||
# --hints--
|
||||
|
||||
Use object destructuring to access the `coachName` value.
|
||||
|
||||
```js
|
||||
|
||||
assert.match(code, /const\s*{\s*coachName\s*}\s*=\s*myFavoriteFootballTeam.headCoach\s*/)
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+453
@@ -0,0 +1,453 @@
|
||||
---
|
||||
id: 63e050bf935ac341b88326d6
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to start displaying the team's information on the screen.
|
||||
|
||||
Below your destructuring assignments, assign the `sport` variable to `typeOfSport.innerHTML`. Remember that the `innerHTML` property sets the HTML for that particular element.
|
||||
|
||||
Once you complete that task, you should see the result in the preview window.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign the `sport` variable to `typeOfSport.innerHTML`.
|
||||
|
||||
```js
|
||||
|
||||
assert.match(code, /typeOfSport.innerHTML\s*=\s*sport\s*/)
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+451
@@ -0,0 +1,451 @@
|
||||
---
|
||||
id: 63e05557016dfd45ea49152c
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below `typeOfSport.innerHTML`, assign the `team` variable to `teamName.innerHTML`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign the `team` variable to `teamName.innerHTML`.
|
||||
|
||||
```js
|
||||
|
||||
assert.match(code, /teamName.innerHTML\s*=\s*team\s*/)
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+462
@@ -0,0 +1,462 @@
|
||||
---
|
||||
id: 63e05c00b615bb46ac87273a
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below `teamName.innerHTML`, assign the `year` variable to `worldCupYear.innerHTML`. Below that, assign the `coachName` variable to `headCoach.innerHTML`.
|
||||
|
||||
You should now see all of that information displayed on the screen below `Team stats`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign the `year` variable to `worldCupYear.innerHTML`.
|
||||
|
||||
```js
|
||||
|
||||
assert.match(code, /worldCupYear.innerHTML\s*=\s*year\s*/)
|
||||
|
||||
```
|
||||
|
||||
You should assign the `coachName` variable to `headCoach.innerHTML`.
|
||||
|
||||
```js
|
||||
|
||||
assert.match(code, /headCoach.innerHTML\s*=\s*coachName\s*/)
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+479
@@ -0,0 +1,479 @@
|
||||
---
|
||||
id: 63e060df21bca347b2d2b374
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you will start building out the function that will show player cards based on the selections made by the user in the `Filter Teammates` dropdown menu.
|
||||
|
||||
Start by creating an empty arrow function called `setPlayerCards`. You do not need to add a parameter because that will be taken care of in the next step.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `setPlayerCards` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+setPlayerCards\s*=/);
|
||||
```
|
||||
|
||||
Your `setPlayerCards` variable should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(setPlayerCards);
|
||||
```
|
||||
|
||||
Your `setPlayerCards` function should use arrow syntax.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+setPlayerCards\s*=\s*\(.*\)\s*=>/);
|
||||
```
|
||||
|
||||
Your `setPlayerCards` function should not take a parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>/);
|
||||
```
|
||||
|
||||
Your `setPlayerCards` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+470
@@ -0,0 +1,470 @@
|
||||
---
|
||||
id: 63e062d6090ebb486a4eda3a
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used:
|
||||
|
||||
```js
|
||||
const greeting = (name = "Anonymous") => {
|
||||
return "Hello " + name;
|
||||
}
|
||||
|
||||
console.log(greeting("John")); // Hello John
|
||||
console.log(greeting()); // Hello Anonymous
|
||||
```
|
||||
|
||||
Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `setPlayerCards` function should take an `arr` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/);
|
||||
```
|
||||
|
||||
Your `arr` parameter should have a default value of `players`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const setPlayerCards = () => {};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+478
@@ -0,0 +1,478 @@
|
||||
---
|
||||
id: 63e949b8327aa2aca2ca8eac
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to create a new array that will be responsible for adding the player card information to the page.
|
||||
|
||||
Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`.
|
||||
|
||||
Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `.map()` method on your `arr` parameter.
|
||||
|
||||
```js
|
||||
assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/);
|
||||
```
|
||||
|
||||
Your `.map()` method should take an empty callback function.
|
||||
|
||||
```js
|
||||
assert.match(code, /arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
|
||||
```
|
||||
|
||||
You should use the `+=` operator on `playerCards.innerHTML`.
|
||||
|
||||
```js
|
||||
assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/);
|
||||
```
|
||||
|
||||
You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator.
|
||||
|
||||
```js
|
||||
assert.match(code, /playerCards\.innerHTML\s+\+=\s*arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
};
|
||||
|
||||
```
|
||||
+472
@@ -0,0 +1,472 @@
|
||||
---
|
||||
id: 63e94dae6dcedbad73f2f6ee
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`arr` contains a series of objects that each contain a `name`, `position`, `number`, `isCaptain` and `nickname` property. In order to access each of those properties inside the callback function, you will need to use object destructuring to unpack them into variables.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```js
|
||||
function myExampleFunction({ name, age, job, city }) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Inside the parameter list in the callback function for the `map` method, unpack all 5 object properties from objects in `arr` using object destructuring.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should unpack all 5 object properties from objects in `arr` using object destructuring.
|
||||
|
||||
```js
|
||||
|
||||
assert.match(code, /{\s*((name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname))\s*}\s*/)
|
||||
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
playerCards.innerHTML += arr.map(() => {
|
||||
|
||||
})
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
};
|
||||
|
||||
```
|
||||
+467
@@ -0,0 +1,467 @@
|
||||
---
|
||||
id: 63e954321b0a77ae4f6d9650
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the body of the callback function, you will need to add template literals ``` `` ``` which will contain the HTML content for the player cards.
|
||||
|
||||
Inside the template literals, add an empty `div` with a class of `player-card`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use template literals to add an empty `div` with a class of `player-card`.
|
||||
|
||||
|
||||
```js
|
||||
|
||||
assert.match(code, /`\s*<div\s+class=("|')\s*player-card\s*\1\s*>\s*<\/div>\s*`\s*/)
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
playerCards.innerHTML += arr.map(
|
||||
({ name, position, number, isCaptain, nickname }) => {
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
};
|
||||
|
||||
```
|
||||
+475
@@ -0,0 +1,475 @@
|
||||
---
|
||||
id: 63e95a45dce95baf41dd4f78
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter:
|
||||
|
||||
```js
|
||||
${expression goes here}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `h2` element with the `name` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*<h2\s*>\s*\${\s*name\s*}\s*<\/h2>\s*/)
|
||||
```
|
||||
|
||||
Your `h2` should be nested in your `div`.
|
||||
|
||||
```js
|
||||
assert.match(code, /`\s*<div\s+class="\s*player-card\s*"\s*>\s*<h2\s*>\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
playerCards.innerHTML += arr.map(
|
||||
({ name, position, number, isCaptain, nickname }) => {
|
||||
`
|
||||
<div class="player-card">
|
||||
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
};
|
||||
|
||||
```
|
||||
+467
@@ -0,0 +1,467 @@
|
||||
---
|
||||
id: 63e95e39860dc5b01ebe9be0
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step would be to display the word `(Captain)` next to the player if they are listed as a captain for the team.
|
||||
|
||||
Right next to the `${name}` expression, add a new embedded expression. Inside that expression, use a ternary operator to check if `isCaptain` is true. If so, return `(Captain)` otherwise return an empty string.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a ternary operator to check if `isCaptain` is true and return `(Captain)` or return an empty string.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*<h2\s*>\s*\${\s*name\s*}\s*\$\{isCaptain\s*\?\s*('|"|`)\(Captain\)\1\s*:\s*('|"|`)\2\}\s*<\/h2>\s*/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
playerCards.innerHTML += arr.map(
|
||||
({ name, position, number, isCaptain, nickname }) => {
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name}</h2>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
};
|
||||
|
||||
```
|
||||
+472
@@ -0,0 +1,472 @@
|
||||
---
|
||||
id: 63e9667c881b61b1e338d276
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `h2` element, add a paragraph element with the text `Position: ` and an embedded expression that contains the `position` parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new paragraph element with the text `Position: ` followed by the `position` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*<p\s*>\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/)
|
||||
```
|
||||
|
||||
Your new `p` element should come after the `h2` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/h2>\s*<p\s*>\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
playerCards.innerHTML += arr.map(
|
||||
({ name, position, number, isCaptain, nickname }) => {
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
};
|
||||
|
||||
```
|
||||
+472
@@ -0,0 +1,472 @@
|
||||
---
|
||||
id: 63e96938d2a347b2734a1587
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the paragraph element, add another paragraph element with the text `Number: ` and an embedded expression that contains the `number` parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new paragraph element with the text `Number: ` followed by the `number` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*<p\s*>\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/)
|
||||
```
|
||||
|
||||
Your new `p` element should come after your existing `p` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/h2>\s*<p\s*>\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*<p\s*>\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
playerCards.innerHTML += arr.map(
|
||||
({ name, position, number, isCaptain, nickname }) => {
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
};
|
||||
|
||||
```
|
||||
+473
@@ -0,0 +1,473 @@
|
||||
---
|
||||
id: 63e96eb94c97b6b31ee50f63
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your existing paragraph elements, add another paragraph element with the text `Nickname: `.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new paragraph element with the text `Nickname: `.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*<p\s*>\s*Nickname:\s*<\/p>\s*/)
|
||||
```
|
||||
|
||||
Your new `p` element should come after the `h2` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/h2>\s*<p\s*>\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*<p\s*>\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*<p\s*>\s*Nickname:\s*<\/p>\s*/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
playerCards.innerHTML += arr.map(
|
||||
({ name, position, number, isCaptain, nickname }) => {
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
};
|
||||
|
||||
```
|
||||
+482
@@ -0,0 +1,482 @@
|
||||
---
|
||||
id: 63e9718d7d490bb3940d5a0a
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next to the `Nickname: ` text, add an embedded expression that will show the player's nickname if they have one.
|
||||
|
||||
Use a ternary operator to check if `nickname` is not `null`. If the player has a nickname, display `nickname` otherwise display `"N/A"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a ternary operator to check if `nickname` is not `null`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*<p\s*>\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?/)
|
||||
```
|
||||
|
||||
If your ternary is truthy, it should display the player's `nickname`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*<p\s*>\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:/)
|
||||
```
|
||||
|
||||
If your ternary is falsy, it should display the string `N/A`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*<p\s*>\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:\s*('|"|`)\N\/A\1}\s*<\/p>\s*/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
playerCards.innerHTML += arr.map(
|
||||
({ name, position, number, isCaptain, nickname }) => {
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: </p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
};
|
||||
|
||||
```
|
||||
+477
@@ -0,0 +1,477 @@
|
||||
---
|
||||
id: 63e9737f686c76b4078a60f4
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `.map()` method will return a new array of `player-card` items separated by commas.
|
||||
|
||||
To remove the commas between each `player-card` so it does not show up on screen, chain the `.join()` method to the `.map()` method. Pass an empty string as the argument for the `.join()` method.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should chain the `.join()` method to the `.map()` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(/s);
|
||||
```
|
||||
|
||||
You should pass an empty string to the `.join()` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(\s*('|"|`)\1\s*\)/s);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
playerCards.innerHTML += arr.map(
|
||||
({ name, position, number, isCaptain, nickname }) => {
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
)
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
};
|
||||
|
||||
```
|
||||
+485
@@ -0,0 +1,485 @@
|
||||
---
|
||||
id: 63f28972973504e7bb58b0b3
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to create a function that will detect when a user makes a selection from the `playersDropdownList`.
|
||||
|
||||
Use the `.addEventListener()` method on `playersDropdownList`. Inside the event listener, pass in a `change` event type and an empty callback function.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `.addEventListener()` method on the `playersDropdownList` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /playersDropdownList\.addEventListener\(/);
|
||||
```
|
||||
|
||||
Your event listener should listen for the `change` event.
|
||||
|
||||
```js
|
||||
assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/);
|
||||
```
|
||||
|
||||
Your event listener should have an empty callback function.
|
||||
|
||||
```js
|
||||
assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
```
|
||||
+475
@@ -0,0 +1,475 @@
|
||||
---
|
||||
id: 63f28ef082d771e8bf71f94a
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the callback function, pass in `e` as a parameter.
|
||||
|
||||
`e` represents an object which contains the information for that event.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should pass in `e` as a parameter to your callback function.
|
||||
|
||||
```js
|
||||
assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*e\s*\)\s*=>\s*\{\s*\}\s*\)/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
playersDropdownList.addEventListener("change", () => {
|
||||
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
```
|
||||
+477
@@ -0,0 +1,477 @@
|
||||
---
|
||||
id: 63f293c804d6f9e9a83ca4c5
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the callback function, add a `console.log` with the value of `e.target.value`.
|
||||
|
||||
Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console.
|
||||
|
||||
`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `console.log` with the value of `e.target.value`.
|
||||
|
||||
```js
|
||||
assert.match(code, /console.log\s*\(e.target.value\)\s*/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
playersDropdownList.addEventListener("change", (e) => {
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
});
|
||||
|
||||
```
|
||||
+489
@@ -0,0 +1,489 @@
|
||||
---
|
||||
id: 63f29804e3ec00ea6fab1ec4
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the `console.log` statement you created in the previous step.
|
||||
|
||||
The next step would be to reset the content for the `playerCards` element.
|
||||
|
||||
Inside the callback function, access the `innerHTML` property of the `playerCards` element and assign it a value of an empty string.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not have the `console.log` statement in your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /\s*console.log\(e.target.value\)/);
|
||||
```
|
||||
|
||||
You should access the `innerHTML` property of the `playerCards` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /playerCards\.innerHTML\s*=/);
|
||||
```
|
||||
|
||||
You should set the `innerHTML` property to an empty string.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*playerCards.innerHTML\s*=\s*('|"|`)\1/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
playersDropdownList.addEventListener("change", (e) => {
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
console.log(e.target.value)
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
});
|
||||
|
||||
```
|
||||
+508
@@ -0,0 +1,508 @@
|
||||
---
|
||||
id: 63f29ce62aea65eb041758c8
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step would be to add a `switch` statement which will check for the user's selection from the player dropdown menu and filter out cards based on the player's positions.
|
||||
|
||||
A `switch` statement is a control-flow statement that tests the value of an expression against multiple `case` clauses, and can include an optional `default` clause.
|
||||
|
||||
This is the basic syntax for a `switch` statement:
|
||||
|
||||
```js
|
||||
switch (expression) {
|
||||
case 1:
|
||||
/*
|
||||
this code will execute
|
||||
if the case matches the expression
|
||||
*/
|
||||
break;
|
||||
default:
|
||||
/*
|
||||
the default will execute if none
|
||||
of the other cases match the expression
|
||||
*/
|
||||
}
|
||||
```
|
||||
|
||||
Add a `switch` statement and use `e.target.value` for the expression.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `switch` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /switch/);
|
||||
```
|
||||
|
||||
Your `switch` statement should use `e.target.value` for the expression.
|
||||
|
||||
```js
|
||||
assert.match(code, /switch\s*\(\s*e\.target\.value\s*\)/);
|
||||
```
|
||||
|
||||
Your `switch` statement should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*switch\s*\(e\.target\.value\)\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
playersDropdownList.addEventListener("change", (e) => {
|
||||
playerCards.innerHTML = "";
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
});
|
||||
|
||||
```
|
||||
+478
@@ -0,0 +1,478 @@
|
||||
---
|
||||
id: 63f2a0a860790eebe61bf908
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If the user selects `Nicknames` from the dropdown menu you will want to filter out player cards that have a nickname.
|
||||
|
||||
Start by adding a `case` clause for `nickname` inside your `switch` statement.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `case` clause for ``"nickname"`` inside your `switch` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
playersDropdownList.addEventListener("change", (e) => {
|
||||
playerCards.innerHTML = "";
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (e.target.value) {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
});
|
||||
|
||||
```
|
||||
+521
@@ -0,0 +1,521 @@
|
||||
---
|
||||
id: 63f2a4a8087e6dec8ec47f16
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, add a `case` clause for `forward`.
|
||||
|
||||
Inside that `case`, call the `setPlayerCards` function with an argument of `players.filter()`.
|
||||
|
||||
Inside the `filter()` method, add a callback function with a parameter of `player` that will check if `player.position` equals `forward`.
|
||||
|
||||
Lastly, add a `break` statement below the `setPlayerCards` function call.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `case` for `forward` inside your `switch` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*/)
|
||||
```
|
||||
|
||||
In your `forward` `case`, you should call the `setPlayerCards` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(/)
|
||||
```
|
||||
|
||||
You should pass `players.filter()` to your `setPlayerCards` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/)
|
||||
```
|
||||
|
||||
You should pass an arrow callback function to your `players.filter()` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/);
|
||||
```
|
||||
|
||||
Your `filter()` callback should take a `player` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/)
|
||||
```
|
||||
|
||||
Your `filter()` callback should implicitly return the result of checking if `player.position` is `forward`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)/)
|
||||
```
|
||||
|
||||
You will need to add a `break` statement below your `setPlayerCards` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)\s*\);?\s*break/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
playersDropdownList.addEventListener("change", (e) => {
|
||||
playerCards.innerHTML = "";
|
||||
|
||||
switch (e.target.value) {
|
||||
case "nickname":
|
||||
setPlayerCards(players.filter((player) => player.nickname !== null));
|
||||
break;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
+517
@@ -0,0 +1,517 @@
|
||||
---
|
||||
id: 63f2a5f09a785aed155c0a56
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a new `case` for `midfielder` that checks if `player.position` equals `midfielder` following the same pattern from the previous step.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `case` for `midfielder` inside your `switch` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/)
|
||||
```
|
||||
|
||||
In your `midfielder` `case`, you should call the `setPlayerCards` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/)
|
||||
```
|
||||
|
||||
You should pass `players.filter()` to your `setPlayerCards` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/)
|
||||
```
|
||||
|
||||
You should pass an arrow callback function to your `players.filter()` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/);
|
||||
```
|
||||
|
||||
Your `filter()` callback should take a `player` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/)
|
||||
```
|
||||
|
||||
Your `filter()` callback should implicitly return the result of checking if `player.position` is `midfielder`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)/)
|
||||
```
|
||||
|
||||
You will need to add a `break` statement below your `setPlayerCards` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)\s*\);?\s*break/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
playersDropdownList.addEventListener("change", (e) => {
|
||||
playerCards.innerHTML = "";
|
||||
|
||||
switch (e.target.value) {
|
||||
case "nickname":
|
||||
setPlayerCards(players.filter((player) => player.nickname !== null));
|
||||
break;
|
||||
case "forward":
|
||||
setPlayerCards(players.filter((player) => player.position === "forward"));
|
||||
break;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
+521
@@ -0,0 +1,521 @@
|
||||
---
|
||||
id: 63f2a8e14fb388edd3242527
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a new `case` for `defender` that checks if `player.position` equals `defender` following the same pattern as the previous step.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `case` for `defender` inside your `switch` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/)
|
||||
```
|
||||
|
||||
In your `defender` `case`, you should call the `setPlayerCards` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/)
|
||||
```
|
||||
|
||||
You should pass `players.filter()` to your `setPlayerCards` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/)
|
||||
```
|
||||
|
||||
You should pass an arrow callback function to your `players.filter()` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/);
|
||||
```
|
||||
|
||||
Your `filter()` callback should take a `player` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/)
|
||||
```
|
||||
|
||||
Your `filter()` callback should implicitly return the result of checking if `player.position` is `defender`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)/)
|
||||
```
|
||||
|
||||
You will need to add a `break` statement below your `setPlayerCards` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)\s*\);?\s*break/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
playersDropdownList.addEventListener("change", (e) => {
|
||||
playerCards.innerHTML = "";
|
||||
|
||||
switch (e.target.value) {
|
||||
case "nickname":
|
||||
setPlayerCards(players.filter((player) => player.nickname !== null));
|
||||
break;
|
||||
case "forward":
|
||||
setPlayerCards(players.filter((player) => player.position === "forward"));
|
||||
break;
|
||||
case "midfielder":
|
||||
setPlayerCards(players.filter((player) => player.position === "midfielder"));
|
||||
break;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
+527
@@ -0,0 +1,527 @@
|
||||
---
|
||||
id: 63f2aa36fcdc63ee4e18fc37
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a new `case` for `goalkeeper` that checks if `player.position` equals `goalkeeper` following the same pattern as the previous step.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `case` for `goalkeeper` inside your `switch` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/)
|
||||
```
|
||||
|
||||
In your `goalkeeper` `case`, you should call the `setPlayerCards` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/)
|
||||
```
|
||||
|
||||
You should pass `players.filter()` to your `setPlayerCards` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/)
|
||||
```
|
||||
|
||||
You should pass an arrow callback function to your `players.filter()` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/);
|
||||
```
|
||||
|
||||
Your `filter()` callback should take a `player` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/)
|
||||
```
|
||||
|
||||
Your `filter()` callback should implicitly return the result of checking if `player.position` is `goalkeeper`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)/)
|
||||
```
|
||||
|
||||
You will need to add a `break` statement below your `setPlayerCards` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)\s*\);?\s*break/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
playersDropdownList.addEventListener("change", (e) => {
|
||||
playerCards.innerHTML = "";
|
||||
switch (e.target.value) {
|
||||
case "nickname":
|
||||
setPlayerCards(players.filter((player) => player.nickname !== null));
|
||||
break;
|
||||
case "forward":
|
||||
setPlayerCards(players.filter((player) => player.position === "forward"));
|
||||
break;
|
||||
case "midfielder":
|
||||
setPlayerCards(
|
||||
players.filter((player) => player.position === "midfielder")
|
||||
);
|
||||
break;
|
||||
case "defender":
|
||||
setPlayerCards(
|
||||
players.filter((player) => player.position === "defender")
|
||||
);
|
||||
break;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
+979
@@ -0,0 +1,979 @@
|
||||
---
|
||||
id: 63f2ab4f6c52c5eec6d68de4
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The final step is to add a `default` clause if none of the other `case` clauses match the user selection.
|
||||
|
||||
For the `default` clause, call the `setPlayerCards` function without any arguments passed in.
|
||||
|
||||
Test out your dropdown menu, and you should see the player cards be filtered out by position or nickname.
|
||||
|
||||
Congratulations on completing the football team cards project!
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `default` clause to your `switch` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /default\s*:\s*/)
|
||||
```
|
||||
|
||||
In your `default` clause, you should call the `setPlayerCards` function without any arguments passed in.
|
||||
|
||||
```js
|
||||
assert.match(code, /default\s*:\s*setPlayerCards\(\s*\)/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
playersDropdownList.addEventListener("change", (e) => {
|
||||
playerCards.innerHTML = "";
|
||||
|
||||
switch (e.target.value) {
|
||||
case "nickname":
|
||||
setPlayerCards(players.filter((player) => player.nickname !== null));
|
||||
break;
|
||||
case "forward":
|
||||
setPlayerCards(players.filter((player) => player.position === "forward"));
|
||||
break;
|
||||
case "midfielder":
|
||||
setPlayerCards(
|
||||
players.filter((player) => player.position === "midfielder")
|
||||
);
|
||||
break;
|
||||
case "defender":
|
||||
setPlayerCards(
|
||||
players.filter((player) => player.position === "defender")
|
||||
);
|
||||
break;
|
||||
case "goalkeeper":
|
||||
setPlayerCards(
|
||||
players.filter((player) => player.position === "goalkeeper")
|
||||
);
|
||||
break;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
playersDropdownList.addEventListener("change", (e) => {
|
||||
playerCards.innerHTML = "";
|
||||
|
||||
switch (e.target.value) {
|
||||
case "nickname":
|
||||
setPlayerCards(players.filter((player) => player.nickname !== null));
|
||||
break;
|
||||
case "forward":
|
||||
setPlayerCards(players.filter((player) => player.position === "forward"));
|
||||
break;
|
||||
case "midfielder":
|
||||
setPlayerCards(
|
||||
players.filter((player) => player.position === "midfielder")
|
||||
);
|
||||
break;
|
||||
case "defender":
|
||||
setPlayerCards(
|
||||
players.filter((player) => player.position === "defender")
|
||||
);
|
||||
break;
|
||||
case "goalkeeper":
|
||||
setPlayerCards(
|
||||
players.filter((player) => player.position === "goalkeeper")
|
||||
);
|
||||
break;
|
||||
default:
|
||||
setPlayerCards();
|
||||
}
|
||||
});
|
||||
+504
@@ -0,0 +1,504 @@
|
||||
---
|
||||
id: 641fc88d8fa7127f76e0324f
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
|
||||
Call the `setPlayerCards` function with an argument of `players.filter()`.
|
||||
|
||||
Inside the `filter` method, add a callback function with a parameter called `player` and implicitly return `player.nickname` is not `null`.
|
||||
|
||||
# --hints--
|
||||
|
||||
In your `nickname` case, you should call the `setPlayerCards` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(/)
|
||||
```
|
||||
|
||||
You should pass `players.filter()` to your `setPlayerCards` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/)
|
||||
```
|
||||
|
||||
You should pass an arrow callback function to your `players.filter()` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/);
|
||||
```
|
||||
|
||||
Your `filter()` callback should take a `player` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/)
|
||||
```
|
||||
|
||||
Your `filter()` callback should implicitly return the result of checking if `player.nickname` is not `null`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
playersDropdownList.addEventListener("change", (e) => {
|
||||
playerCards.innerHTML = "";
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (e.target.value) {
|
||||
case "nickname":
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
});
|
||||
|
||||
```
|
||||
+488
@@ -0,0 +1,488 @@
|
||||
---
|
||||
id: 641fcfd468185384ac218b7d
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Before you can move onto the next case, you will need to add a `break` statement:
|
||||
|
||||
```js
|
||||
case "example":
|
||||
// code goes here
|
||||
break;
|
||||
```
|
||||
|
||||
The `break` statement breaks out of the `switch` statement early, usually after executing some code after a `case` clause matches the expression. If a `break` statement is not present, execution will continue through the rest of the causes in the `switch` statement.
|
||||
|
||||
Below your `setPlayerCards` call, add a `break` statement.
|
||||
|
||||
# --hints--
|
||||
|
||||
You will need to add a `break` statement below your `setPlayerCards` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)\s*\);?\s*break/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Learn Modern JavaScript methods by building football team cards
|
||||
</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Team stats</h1>
|
||||
<main>
|
||||
<div class="team-stats">
|
||||
<p>Team: <span id="team"></span></p>
|
||||
<p>Sport: <span id="sport"></span></p>
|
||||
<p>Year: <span id="year"></span></p>
|
||||
<p>Head coach: <span id="head-coach"></span></p>
|
||||
</div>
|
||||
<label class="options-label" for="players">Filter Teammates:</label>
|
||||
<select name="players" id="players">
|
||||
<option value="all">All Players</option>
|
||||
<option value="nickname">Nicknames</option>
|
||||
<option value="forward">Position Forward</option>
|
||||
<option value="midfielder">Position Midfielder</option>
|
||||
<option value="defender">Position Defender</option>
|
||||
<option value="goalkeeper">Position Goalkeeper</option>
|
||||
</select>
|
||||
<div class="cards" id="player-cards">
|
||||
<div class="player-card">
|
||||
<h2>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--light-grey: #f5f6f7;
|
||||
--white: #ffffff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--dark-grey);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.options-label,
|
||||
.team-stats,
|
||||
footer {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
.team-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.3rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background-color: var(--light-grey);
|
||||
padding: 1.3rem;
|
||||
margin: 1.2rem;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
headCoach: {
|
||||
coachName: "Carlos Bilardo",
|
||||
matches: 7,
|
||||
},
|
||||
players: [
|
||||
{
|
||||
name: "Sergio Almirón",
|
||||
position: "forward",
|
||||
number: 1,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Sergio Batista",
|
||||
position: "midfielder",
|
||||
number: 2,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Bochini",
|
||||
position: "midfielder",
|
||||
number: 3,
|
||||
isCaptain: false,
|
||||
nickname: "El Bocha",
|
||||
},
|
||||
{
|
||||
name: "Claudio Borghi",
|
||||
position: "midfielder",
|
||||
number: 4,
|
||||
isCaptain: false,
|
||||
nickname: "Bichi",
|
||||
},
|
||||
{
|
||||
name: "José Luis Brown",
|
||||
position: "defender",
|
||||
number: 5,
|
||||
isCaptain: false,
|
||||
nickname: "Tata",
|
||||
},
|
||||
{
|
||||
name: "Daniel Passarella",
|
||||
position: "defender",
|
||||
number: 6,
|
||||
isCaptain: false,
|
||||
nickname: "El Gran Capitán",
|
||||
},
|
||||
{
|
||||
name: "Jorge Burruchaga",
|
||||
position: "forward",
|
||||
number: 7,
|
||||
isCaptain: false,
|
||||
nickname: "Burru",
|
||||
},
|
||||
{
|
||||
name: "Néstor Clausen",
|
||||
position: "defender",
|
||||
number: 8,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "José Luis Cuciuffo",
|
||||
position: "defender",
|
||||
number: 9,
|
||||
isCaptain: false,
|
||||
nickname: "El Cuchu",
|
||||
},
|
||||
{
|
||||
name: "Diego Maradona",
|
||||
position: "midfielder",
|
||||
number: 10,
|
||||
isCaptain: true,
|
||||
nickname: "El Pibe de Oro",
|
||||
},
|
||||
{
|
||||
name: "Jorge Valdano",
|
||||
position: "forward",
|
||||
number: 11,
|
||||
isCaptain: false,
|
||||
nickname: "The Philosopher of Football",
|
||||
},
|
||||
{
|
||||
name: "Héctor Enrique",
|
||||
position: "midfielder",
|
||||
number: 12,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Garré",
|
||||
position: "defender",
|
||||
number: 13,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Ricardo Giusti",
|
||||
position: "midfielder",
|
||||
number: 14,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Luis Islas",
|
||||
position: "goalkeeper",
|
||||
number: 15,
|
||||
isCaptain: false,
|
||||
nickname: "El loco",
|
||||
},
|
||||
{
|
||||
name: "Julio Olarticoechea",
|
||||
position: "defender",
|
||||
number: 16,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Pedro Pasculli",
|
||||
position: "forward",
|
||||
number: 17,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Nery Pumpido",
|
||||
position: "goalkeeper",
|
||||
number: 18,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Oscar Ruggeri",
|
||||
position: "defender",
|
||||
number: 19,
|
||||
isCaptain: false,
|
||||
nickname: "El Cabezón",
|
||||
},
|
||||
{
|
||||
name: "Carlos Tapia",
|
||||
position: "midfielder",
|
||||
number: 20,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
{
|
||||
name: "Marcelo Trobbiani",
|
||||
position: "midfielder",
|
||||
number: 21,
|
||||
isCaptain: false,
|
||||
nickname: "Calesita",
|
||||
},
|
||||
{
|
||||
name: "Héctor Zelada",
|
||||
position: "goalkeeper",
|
||||
number: 22,
|
||||
isCaptain: false,
|
||||
nickname: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Object.freeze(myFavoriteFootballTeam);
|
||||
const { sport, team, year, players } = myFavoriteFootballTeam;
|
||||
const { coachName } = myFavoriteFootballTeam.headCoach;
|
||||
|
||||
typeOfSport.innerHTML = sport;
|
||||
teamName.innerHTML = team;
|
||||
worldCupYear.innerHTML = year;
|
||||
headCoach.innerHTML = coachName;
|
||||
|
||||
const setPlayerCards = (arr = players) => {
|
||||
playerCards.innerHTML += arr
|
||||
.map(
|
||||
({ name, position, number, isCaptain, nickname }) =>
|
||||
`
|
||||
<div class="player-card">
|
||||
<h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
|
||||
<p>Position: ${position}</p>
|
||||
<p>Number: ${number}</p>
|
||||
<p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
};
|
||||
|
||||
playersDropdownList.addEventListener("change", (e) => {
|
||||
playerCards.innerHTML = "";
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (e.target.value) {
|
||||
case "nickname":
|
||||
setPlayerCards(players.filter((player) => player.nickname !== null));
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
});
|
||||
|
||||
```
|
||||
Reference in New Issue
Block a user