From a976dcbf0ce3c9a1d7f4129aa3f9bcae86934c4e Mon Sep 17 00:00:00 2001 From: freeCodeCamp's Camper Bot Date: Mon, 1 Jul 2024 09:28:10 -0500 Subject: [PATCH] chore(i18n,learn): processed translations (#55391) --- .../front-end-development.yml | 10 + .../sass/create-reusable-css-with-mixins.md | 161 +++++++---- .../stock-price-checker.md | 2 +- .../5f3477cb2e27333b1ab2b955.md | 2 +- .../build-a-pokemon-search-app.md | 2 +- .../62a7bfabe119461eb13ccbd6.md | 3 +- .../660f535ec33a285b33af3774.md | 2 +- .../65388edfdf364fbb04e426f2.md | 10 +- .../65389a63d3b1d6c764c0e10e.md | 14 +- .../65389eff4893facbbe6eae67.md | 10 +- .../build-a-rock-paper-scissors-game.md | 261 ++++++++++++++++++ .../645147516c245de4d11eb7ba.md | 20 ++ .../66731cd027ef3acb155669f5.md | 28 ++ .../front-end-development.yml | 10 + .../sass/create-reusable-css-with-mixins.md | 161 +++++++---- .../stock-price-checker.md | 2 +- .../5f3477cb2e27333b1ab2b955.md | 2 +- .../build-a-pokemon-search-app.md | 2 +- .../62a7bfabe119461eb13ccbd6.md | 3 +- .../660ef31a5be625914a0102cd.md | 2 +- .../660f039ff313dbb696b007ca.md | 10 +- .../660f09a2694b59c3a10ee304.md | 8 +- .../660f207334fabaeac3269c38.md | 8 +- .../660f23b53db70af0f2620e78.md | 14 +- .../660f280dda5040f707c76b4a.md | 12 +- .../660f2eccfe3f820304af1b39.md | 10 +- .../660f359af3e32e0f1a6880b7.md | 12 +- .../660f447efc0e722f016c1be0.md | 10 +- .../660f535ec33a285b33af3774.md | 2 +- .../6610b741b54b90f0c0fb3d58.md | 12 +- .../6610b9f7619764fad5fd516d.md | 14 +- .../6610bf6fa14d700beed1b109.md | 8 +- .../6610c105bbdacc114d6cdc44.md | 8 +- .../6610c71600966a2191d3a64a.md | 6 +- .../65388edfdf364fbb04e426f2.md | 10 +- .../65389a63d3b1d6c764c0e10e.md | 14 +- .../65389eff4893facbbe6eae67.md | 10 +- .../build-a-rock-paper-scissors-game.md | 261 ++++++++++++++++++ .../645147516c245de4d11eb7ba.md | 20 ++ .../66731cd027ef3acb155669f5.md | 28 ++ .../front-end-development.yml | 10 + .../sass/create-reusable-css-with-mixins.md | 161 +++++++---- .../stock-price-checker.md | 2 +- .../5f3477cb2e27333b1ab2b955.md | 2 +- .../build-a-pokemon-search-app.md | 2 +- .../62a7bfabe119461eb13ccbd6.md | 3 +- .../660ef31a5be625914a0102cd.md | 2 +- .../660f039ff313dbb696b007ca.md | 10 +- .../660f09a2694b59c3a10ee304.md | 8 +- .../660f207334fabaeac3269c38.md | 8 +- .../660f23b53db70af0f2620e78.md | 14 +- .../660f280dda5040f707c76b4a.md | 12 +- .../660f2eccfe3f820304af1b39.md | 10 +- .../660f359af3e32e0f1a6880b7.md | 12 +- .../660f447efc0e722f016c1be0.md | 10 +- .../660f535ec33a285b33af3774.md | 2 +- .../6610b741b54b90f0c0fb3d58.md | 12 +- .../6610b9f7619764fad5fd516d.md | 14 +- .../6610bf6fa14d700beed1b109.md | 8 +- .../6610c105bbdacc114d6cdc44.md | 8 +- .../6610c71600966a2191d3a64a.md | 6 +- .../65388edfdf364fbb04e426f2.md | 10 +- .../65389a63d3b1d6c764c0e10e.md | 14 +- .../65389eff4893facbbe6eae67.md | 10 +- .../build-a-rock-paper-scissors-game.md | 261 ++++++++++++++++++ .../645147516c245de4d11eb7ba.md | 20 ++ .../66731cd027ef3acb155669f5.md | 28 ++ .../front-end-development.yml | 10 + .../sass/create-reusable-css-with-mixins.md | 161 +++++++---- .../stock-price-checker.md | 2 +- .../5f3477cb2e27333b1ab2b955.md | 2 +- .../5dc24614f86c76b9248c6ebd.md | 4 +- .../5dfa22d1b521be39a3de7be0.md | 8 +- .../5dfa30b9eacea3f48c6300ad.md | 22 +- .../5dfa37b9eacea3f48c6300b0.md | 2 +- .../5dfb6a35eacea3f48c6300b4.md | 4 +- .../5ef9b03c81a63668521804d0.md | 2 +- .../5ef9b03c81a63668521804d2.md | 2 +- .../5ef9b03c81a63668521804d6.md | 2 +- .../5ef9b03c81a63668521804da.md | 2 +- .../5ef9b03c81a63668521804dd.md | 6 +- .../5ef9b03c81a63668521804de.md | 2 +- .../5ef9b03c81a63668521804df.md | 2 +- .../5ef9b03c81a63668521804e2.md | 2 +- .../5ef9b03c81a63668521804e5.md | 6 +- .../5ef9b03c81a63668521804e7.md | 2 +- .../5ef9b03c81a63668521804ea.md | 2 +- .../5ef9b03c81a63668521804ec.md | 4 +- .../5efada803cbd2bbdab94e332.md | 2 +- .../5efc4f528d6a74d05e68af74.md | 8 +- .../5f07be6ef7412fbad0c5626b.md | 2 +- .../62bb4009e3458a128ff57d5d.md | 6 +- .../62dabe2ef403a12d5d295273.md | 4 +- .../build-a-pokemon-search-app.md | 2 +- .../62a7bfabe119461eb13ccbd6.md | 3 +- .../660f535ec33a285b33af3774.md | 2 +- .../65388edfdf364fbb04e426f2.md | 10 +- .../65389a63d3b1d6c764c0e10e.md | 14 +- .../65389eff4893facbbe6eae67.md | 10 +- .../build-a-rock-paper-scissors-game.md | 261 ++++++++++++++++++ .../645147516c245de4d11eb7ba.md | 20 ++ .../66731cd027ef3acb155669f5.md | 28 ++ .../front-end-development.yml | 10 + .../override-styles-in-subsequent-css.md | 2 +- .../turn-an-image-into-a-link.md | 2 +- .../sass/create-reusable-css-with-mixins.md | 161 +++++++---- .../stock-price-checker.md | 2 +- .../install-and-require-helmet.md | 2 +- .../613e2546d0594208229ada50.md | 4 +- .../613e275749ebd008e74bb62e.md | 6 +- .../614796cb8086be482d60e0ac.md | 6 +- .../5f33071498eb2472b87ddee4.md | 10 +- .../5f344f9c805cd193c33d829c.md | 2 +- .../5f3477ae9675db8bb7655b30.md | 2 +- .../5f3477cb2e27333b1ab2b955.md | 2 +- .../5f3ef6e056bdde6ae6892ba2.md | 2 +- .../616d595270d902f0e7086e18.md | 2 +- .../619b761916dac02643940022.md | 2 +- .../5dc2385ff86c76b9248c6eb7.md | 2 +- .../5dc23991f86c76b9248c6eb8.md | 2 +- .../5dc24073f86c76b9248c6ebb.md | 6 +- .../5dc24165f86c76b9248c6ebc.md | 2 +- .../5dc24614f86c76b9248c6ebd.md | 4 +- .../5ddbd81294d8ddc1510a8e56.md | 4 +- .../5dfa30b9eacea3f48c6300ad.md | 4 +- .../5dfa37b9eacea3f48c6300b0.md | 2 +- .../5dfb6a35eacea3f48c6300b4.md | 4 +- .../5ef9b03c81a63668521804d0.md | 2 +- .../5ef9b03c81a63668521804d6.md | 2 +- .../5ef9b03c81a63668521804d7.md | 6 +- .../5ef9b03c81a63668521804d9.md | 2 +- .../5ef9b03c81a63668521804da.md | 2 +- .../5ef9b03c81a63668521804dd.md | 6 +- .../5ef9b03c81a63668521804e2.md | 2 +- .../5ef9b03c81a63668521804e5.md | 4 +- .../5ef9b03c81a63668521804e7.md | 2 +- .../5ef9b03c81a63668521804ea.md | 2 +- .../5ef9b03c81a63668521804ec.md | 4 +- .../5ef9b03c81a63668521804ee.md | 2 +- .../5efada803cbd2bbdab94e332.md | 2 +- .../5efc4f528d6a74d05e68af74.md | 2 +- .../5f07be6ef7412fbad0c5626b.md | 2 +- .../62bb4009e3458a128ff57d5d.md | 6 +- .../7cf9b03d81a65668421804c3.md | 4 +- .../60f1922fcbd2410527b3bd89.md | 2 +- .../60fab4a123ce4b04526b082b.md | 2 +- .../60fab8367d35de04e5cb7929.md | 4 +- .../60fad1cafcde010995e15306.md | 2 +- .../62ff8e998d3e7eae14d6ae3b.md | 6 +- .../646c5ace05e4be4211407935.md | 2 +- .../646c5e727e56e743c9aed4a1.md | 6 +- .../646ce8bb4b35544d501c7184.md | 2 +- .../646ce9d790d2a44de5f99e04.md | 14 +- .../646ceb843412c74edee27a79.md | 2 +- .../646cecc9eb5c4f4f73dafd07.md | 4 +- .../646cef0c2b98915094df7099.md | 2 +- .../646cf1206cac5f51804f49cf.md | 4 +- .../646cf2249f02ca5233d9af7c.md | 2 +- .../646cf48d8f8e1f535a1821d3.md | 4 +- .../646cf6cbca98e258da65c979.md | 4 +- .../646cf88aa884405a11ea5bcc.md | 6 +- .../646cfc2b8e6fe95c20a819d5.md | 8 +- .../646cfd853634255d02b64cc1.md | 4 +- .../646cfde6ac612e5d60391f50.md | 6 +- .../646dd556d524bc61c0139bd6.md | 2 +- .../646dd6f9caa862627dd87772.md | 2 +- .../646dd7cfd0cfac630c1dd520.md | 2 +- .../646dd8c79ec23463a3d0e356.md | 2 +- .../646dd9d9a729916460724f16.md | 2 +- .../646ddab8afd73764f5241bbf.md | 4 +- .../646ddb61ff08366570cc5902.md | 4 +- .../646ddd3f9f97a0667b964bdb.md | 14 +- .../646dde7dc20dc167489faa69.md | 2 +- .../646ddf888632fa67f1180940.md | 4 +- .../646de5dc8988076a1d992afd.md | 4 +- .../646de6a97b50a86ac487de86.md | 2 +- .../646de7b64467e96b7d35b5cd.md | 2 +- .../646de8478d6f796bfbdccfb2.md | 4 +- .../646de8d204a3426c7d184372.md | 2 +- .../646dea1c98c2426d43a705c3.md | 2 +- .../646deb169847f86df0f95bfc.md | 2 +- .../646dec359bef3b7811fba5a6.md | 2 +- .../646dedbcba062079128b2ecc.md | 2 +- .../646def5e863abf7a14501421.md | 2 +- .../646df03c8f79337ab46f148b.md | 2 +- .../646df0cf26413a7b35e4b8b3.md | 2 +- .../646df1d1aa4ae57bdf1869c4.md | 6 +- .../646dffd8ce9ac77ec1906f2e.md | 2 +- .../646f0417322c0e04983a5149.md | 4 +- .../646f08293804a30685533c6f.md | 4 +- .../646f09293eb3230723a62f77.md | 2 +- .../646f0c9a1e3360092d1bbd33.md | 4 +- .../646f0ce5737243098ad6e494.md | 2 +- .../646f0ef13604420a8744f7d4.md | 2 +- .../646f0f7c5933560af8e7e380.md | 2 +- .../646f102bf87b350b593baa72.md | 2 +- .../646f107abb89d00bb99f387a.md | 2 +- .../646f12da0b4c5d0ca162834a.md | 2 +- .../646f135eab69d90d0c6d4e9b.md | 2 +- .../646f159b2cffb21150b927cb.md | 2 +- .../646f164bf100dd11d226161f.md | 2 +- .../646f1764e2f1d212ba9785a7.md | 2 +- .../646f1802a09a171332e14630.md | 2 +- .../646f4d6c42dc5f214f4e7444.md | 2 +- .../646f4e46e81f7021d5fd9c1d.md | 2 +- .../646f4f6a14e3c522d130a0d2.md | 4 +- .../646f4fe12b7985232bf475a5.md | 2 +- .../646f507e4d1cd323f17db4fc.md | 2 +- .../646f516dbfc1342495515625.md | 2 +- .../6476f5c17f99146071ee884c.md | 6 +- .../6476f7a4827bcc61682f2347.md | 6 +- .../6476fd4213318f6ee211028a.md | 6 +- .../64770351e8586671ec0911f0.md | 6 +- .../6477062778c85972eb648030.md | 14 +- .../64a2687ef267e5934a2f93e3.md | 2 +- .../64a26ac5540c5493f4641f10.md | 2 +- .../64a3bcbc83e574b58c8ed048.md | 2 +- .../60a3e3396c7b40068ad6996b.md | 2 +- .../60a3e3396c7b40068ad6997e.md | 2 +- .../build-a-pokemon-search-app.md | 2 +- .../62a7bfabe119461eb13ccbd6.md | 3 +- .../660f535ec33a285b33af3774.md | 2 +- .../65388edfdf364fbb04e426f2.md | 10 +- .../65389a63d3b1d6c764c0e10e.md | 14 +- .../65389eff4893facbbe6eae67.md | 10 +- .../build-a-rock-paper-scissors-game.md | 261 ++++++++++++++++++ .../645147516c245de4d11eb7ba.md | 20 ++ .../66731cd027ef3acb155669f5.md | 28 ++ .../front-end-development.yml | 10 + .../sass/create-reusable-css-with-mixins.md | 161 +++++++---- .../stock-price-checker.md | 2 +- .../5f3477cb2e27333b1ab2b955.md | 2 +- .../build-a-pokemon-search-app.md | 2 +- .../62a7bfabe119461eb13ccbd6.md | 3 +- .../660f535ec33a285b33af3774.md | 2 +- .../65388edfdf364fbb04e426f2.md | 10 +- .../65389a63d3b1d6c764c0e10e.md | 14 +- .../65389eff4893facbbe6eae67.md | 10 +- .../build-a-rock-paper-scissors-game.md | 261 ++++++++++++++++++ .../645147516c245de4d11eb7ba.md | 20 ++ .../66731cd027ef3acb155669f5.md | 28 ++ .../front-end-development.yml | 10 + .../sass/create-reusable-css-with-mixins.md | 161 +++++++---- .../stock-price-checker.md | 2 +- .../613e275749ebd008e74bb62e.md | 4 +- .../5f3477cb2e27333b1ab2b955.md | 2 +- .../60fab8367d35de04e5cb7929.md | 4 +- .../646c5e727e56e743c9aed4a1.md | 6 +- .../646cecc9eb5c4f4f73dafd07.md | 2 +- .../646cf1206cac5f51804f49cf.md | 2 +- .../646cf48d8f8e1f535a1821d3.md | 2 +- .../646cf6cbca98e258da65c979.md | 2 +- .../646cf88aa884405a11ea5bcc.md | 4 +- .../646cfc2b8e6fe95c20a819d5.md | 2 +- .../646cfd853634255d02b64cc1.md | 2 +- .../646cfde6ac612e5d60391f50.md | 2 +- .../646de5dc8988076a1d992afd.md | 2 +- .../646de8478d6f796bfbdccfb2.md | 2 +- .../6476f5c17f99146071ee884c.md | 6 +- .../6476f7a4827bcc61682f2347.md | 6 +- .../6476fd4213318f6ee211028a.md | 6 +- .../64770351e8586671ec0911f0.md | 4 +- .../6477062778c85972eb648030.md | 12 +- .../build-a-pokemon-search-app.md | 2 +- .../62a7bfabe119461eb13ccbd6.md | 3 +- .../660f535ec33a285b33af3774.md | 2 +- .../65388edfdf364fbb04e426f2.md | 10 +- .../65389a63d3b1d6c764c0e10e.md | 14 +- .../65389eff4893facbbe6eae67.md | 10 +- .../build-a-rock-paper-scissors-game.md | 261 ++++++++++++++++++ .../645147516c245de4d11eb7ba.md | 20 ++ .../66731cd027ef3acb155669f5.md | 28 ++ .../front-end-development.yml | 10 + .../sass/create-reusable-css-with-mixins.md | 161 +++++++---- .../stock-price-checker.md | 2 +- .../5f3477cb2e27333b1ab2b955.md | 2 +- .../build-a-pokemon-search-app.md | 2 +- .../62a7bfabe119461eb13ccbd6.md | 3 +- .../660f535ec33a285b33af3774.md | 2 +- .../65388edfdf364fbb04e426f2.md | 10 +- .../65389a63d3b1d6c764c0e10e.md | 14 +- .../65389eff4893facbbe6eae67.md | 10 +- .../build-a-rock-paper-scissors-game.md | 261 ++++++++++++++++++ .../645147516c245de4d11eb7ba.md | 20 ++ .../66731cd027ef3acb155669f5.md | 28 ++ .../front-end-development.yml | 10 + .../sass/create-reusable-css-with-mixins.md | 161 +++++++---- .../stock-price-checker.md | 2 +- .../5f3477cb2e27333b1ab2b955.md | 2 +- .../build-a-pokemon-search-app.md | 2 +- .../62a7bfabe119461eb13ccbd6.md | 3 +- .../660f535ec33a285b33af3774.md | 2 +- .../65388edfdf364fbb04e426f2.md | 10 +- .../65389a63d3b1d6c764c0e10e.md | 14 +- .../65389eff4893facbbe6eae67.md | 10 +- .../build-a-rock-paper-scissors-game.md | 261 ++++++++++++++++++ .../645147516c245de4d11eb7ba.md | 20 ++ .../66731cd027ef3acb155669f5.md | 28 ++ .../front-end-development.yml | 10 + .../sass/create-reusable-css-with-mixins.md | 161 +++++++---- .../stock-price-checker.md | 2 +- .../5f3477cb2e27333b1ab2b955.md | 2 +- .../build-a-pokemon-search-app.md | 2 +- .../62a7bfabe119461eb13ccbd6.md | 3 +- .../660f535ec33a285b33af3774.md | 2 +- .../65388edfdf364fbb04e426f2.md | 10 +- .../65389a63d3b1d6c764c0e10e.md | 14 +- .../65389eff4893facbbe6eae67.md | 10 +- .../build-a-rock-paper-scissors-game.md | 261 ++++++++++++++++++ .../645147516c245de4d11eb7ba.md | 20 ++ .../66731cd027ef3acb155669f5.md | 28 ++ .../front-end-development.yml | 10 + .../sass/create-reusable-css-with-mixins.md | 161 +++++++---- .../stock-price-checker.md | 2 +- .../5f3477cb2e27333b1ab2b955.md | 2 +- .../build-a-pokemon-search-app.md | 2 +- .../62a7bfabe119461eb13ccbd6.md | 3 +- .../660f535ec33a285b33af3774.md | 2 +- .../65388edfdf364fbb04e426f2.md | 10 +- .../65389a63d3b1d6c764c0e10e.md | 14 +- .../65389eff4893facbbe6eae67.md | 10 +- .../build-a-rock-paper-scissors-game.md | 261 ++++++++++++++++++ ...oblems-and-understand-errors-question-a.md | 2 +- .../645147516c245de4d11eb7ba.md | 20 ++ .../66731cd027ef3acb155669f5.md | 28 ++ 325 files changed, 5392 insertions(+), 1201 deletions(-) create mode 100644 curriculum/challenges/arabic/00-certifications/front-end-development-certification/front-end-development.yml create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md create mode 100644 curriculum/challenges/arabic/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md create mode 100644 curriculum/challenges/arabic/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md create mode 100644 curriculum/challenges/chinese-traditional/00-certifications/front-end-development-certification/front-end-development.yml create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md create mode 100644 curriculum/challenges/chinese/00-certifications/front-end-development-certification/front-end-development.yml create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md create mode 100644 curriculum/challenges/chinese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md create mode 100644 curriculum/challenges/chinese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md create mode 100644 curriculum/challenges/espanol/00-certifications/front-end-development-certification/front-end-development.yml create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md create mode 100644 curriculum/challenges/espanol/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md create mode 100644 curriculum/challenges/espanol/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md create mode 100644 curriculum/challenges/german/00-certifications/front-end-development-certification/front-end-development.yml create mode 100644 curriculum/challenges/german/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md create mode 100644 curriculum/challenges/german/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md create mode 100644 curriculum/challenges/german/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md create mode 100644 curriculum/challenges/italian/00-certifications/front-end-development-certification/front-end-development.yml create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md create mode 100644 curriculum/challenges/italian/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md create mode 100644 curriculum/challenges/italian/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md create mode 100644 curriculum/challenges/japanese/00-certifications/front-end-development-certification/front-end-development.yml create mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md create mode 100644 curriculum/challenges/japanese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md create mode 100644 curriculum/challenges/japanese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md create mode 100644 curriculum/challenges/korean/00-certifications/front-end-development-certification/front-end-development.yml create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md create mode 100644 curriculum/challenges/korean/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md create mode 100644 curriculum/challenges/korean/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md create mode 100644 curriculum/challenges/portuguese/00-certifications/front-end-development-certification/front-end-development.yml create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md create mode 100644 curriculum/challenges/portuguese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md create mode 100644 curriculum/challenges/portuguese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md create mode 100644 curriculum/challenges/swahili/00-certifications/front-end-development-certification/front-end-development.yml create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md create mode 100644 curriculum/challenges/swahili/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md create mode 100644 curriculum/challenges/swahili/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md create mode 100644 curriculum/challenges/ukrainian/00-certifications/front-end-development-certification/front-end-development.yml create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md diff --git a/curriculum/challenges/arabic/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/arabic/00-certifications/front-end-development-certification/front-end-development.yml new file mode 100644 index 00000000000..25d1e081292 --- /dev/null +++ b/curriculum/challenges/arabic/00-certifications/front-end-development-certification/front-end-development.yml @@ -0,0 +1,10 @@ +--- +id: 64514fda6c245de4d11eb7bb +title: Front End Development Certification +certification: front-end-development +challengeType: 7 +isPrivate: true +tests: + - + id: 645147516c245de4d11eb7ba + title: Front End Development Certification Exam diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md index 7a3150ab57b..1df40c93426 100644 --- a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md @@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins # --description-- -في الـ Sass، الـ mixin هو مجموعة من تعريفات الـ CSS التي يمكن إعادة استخدامها في الـ stylesheet. - -تتطلب ميزات CSS الأحدث وقتاً قبل اعتمادها بالكامل و قبل ان تكون جاهزة للاستخدام في جميع المتصفحات. مع إضافة الميزات إلى المتصفحات، قد تحتاج قواعد CSS التي تستخدمها إلى vendor prefixes. فكّر في `box-shadow`: +In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule. ```scss -div { - -webkit-box-shadow: 0px 0px 4px #fff; - -moz-box-shadow: 0px 0px 4px #fff; - -ms-box-shadow: 0px 0px 4px #fff; - box-shadow: 0px 0px 4px #fff; +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +nav ul { + @include reset-list; } ``` -يعتبر الامر الكثير من الكتابة لاعادة كتابة هذه القاعدة لجميع العناصر التي تحتوي على `box-shadow` أو لتغيير كل قيمة لاختبار تأثيرات مختلفة. يعدّ Mixins مثل الوظائف (functions) في CSS. إليك كيفية كتابة واحدة: +Compiles to: -```scss -@mixin box-shadow($x, $y, $blur, $c){ - -webkit-box-shadow: $x $y $blur $c; - -moz-box-shadow: $x $y $blur $c; - -ms-box-shadow: $x $y $blur $c; - box-shadow: $x $y $blur $c; +```css +nav ul { + margin: 0; + padding: 0; + list-style: none; } ``` -يبدأ تعريف `@mixin` يتبعه اسم مخصص. هذه الحجج ( `$x`, و `$y`, و `$blur`, و `$c` في المثال أعلاه) اختيارية. الآن في أي وقت تكون قاعدة `box-shadow` مطلوبة، خط واحد فقط يستبدل mixin الذي يضطر إلى كتابة جميع رموز (vendor prefixes). يتم استدعاء mixin مع توجيه `@include`: +Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin. ```scss -div { - @include box-shadow(0px, 0px, 4px, #fff); +@mixin prose($font-size, $spacing) { + font-size: $font-size; + margin: 0; + margin-block-end: $spacing; +} + +p { + @include prose(1.25rem, 1rem); +} + +h2 { + @include prose(2.4rem, 1.5rem); +} +``` + +You can make arguments optional by giving the parameters default values. + +```scss +@mixin text-color($color: black) { + color: $color; +} + +p { + @include text-color(); /* color: black */ +} + +nav a { + @include text-color(orange); } ``` # --instructions-- -اكتب mixin إلى `border-radius` وأعطيه حجة `$radius`. ينبغي أن تستخدم جميع الرموز (vendor prefixes) من المثال. ثم استخدم mixin باسم `border-radius` لإعطاء عنصر `#awesome` حدود نصف قطر بقيمة `15px`. +Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`. + +Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`. # --hints-- -يجب أن تعلن التعليمات البرمجية الخاصة بك mixin اسمه `border-radius` يحتوي على حِجَّة اسمها `$radius`. +You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`. ```js -assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); +assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi); ``` -يجب أن يتضمن تعليماتك البرمجية `-webkit-border-radius` رموز (vendor prefix) التي تستخدم حِجَّة `$radius`. +Your mixin should include a `width` property that uses the `$w` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi); ``` -يجب أن يتضمن تعليماتك البرمجية `-moz-border-radius` رموز (vendor prefix) التي تستخدم حِجَّة `$radius`. +Your mixin should include a `height` property that uses the `$h` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi); ``` -يجب أن يتضمن تعليماتك البرمجية `-ms-border-radius` رموز (vendor prefix) التي تستخدم حِجَّة `$radius`. +Your mixin should include a `background-color` property that uses the `$bg-color` parameter. ```js -assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi)); +assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi); ``` -يجب أن يتضمن تعليماتك البرمجية `border-radius` رموز (vendor prefix) التي تستخدم حِجَّة `$radius`. +You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length == - 4 -); +assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi); ``` -يجب أن تتصل التعليمات البرمجية الخاصة بك إلى `border-radius mixin` باستخدام الكلمة المفتاحية `@include`، ثم تضعها إلى `15px`. +You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`. ```js -assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); +assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi); +``` + +You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`. + +```js +assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi); ``` # --seed-- @@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); ```html -
+
+
+
``` # --solutions-- ```html -
+
+
+
``` diff --git a/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md index 3e0a2f372e1..56afef7ec73 100644 --- a/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md @@ -20,7 +20,7 @@ Working on this project will involve you writing your code using one of the foll # --instructions-- -1. SET `NODE_ENV` to `test` without quotes and set `DB` to your MongoDB connection string +1. Set the `NODE_ENV` environment variable to `test`, without quotes 2. Complete the project in `routes/api.js` or by creating a handler/controller 3. You will add any security features to `server.js` 4. You will create all of the functional tests in `tests/2_functional-tests.js` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md index a50cc8af454..51c6097d90c 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -الآن تحتاج إلى ربط ملف `styles.css` حتى يتم تطبيق الأنماط مرة أخرى. أدخل عنصر `link` ذاتي الأغلاق في عنصر `head`. اعطيها سمة `rel` بقيمة `stylesheet` و `href` بقيمة `styles.css`. +Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`. # --hints-- diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md index bb3473d98b8..eea08a88900 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md @@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID **User Stories:** 1. You should have an `input` element with an `id` of `"search-input"` -1. You should have a `button` element with an `id` of `"search-button` +1. You should have a `button` element with an `id` of `"search-button"` 1. You should have an element with an `id` of `"pokemon-name"` 1. You should have an element with an `id` of `"pokemon-id"` 1. You should have an element with an `id` of `"weight"` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md index 6040d1028d3..c2bbf7a9cf9 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -Now you need to modify your display text. Change the `innerText` property of the `text` to be `"You enter the store."`. +Now you need to modify your display text. Change the `innerText` property of the `text` variable to be `"You enter the store."`. # --hints-- @@ -153,6 +153,7 @@ function goStore() { button1.onclick = buyHealth; button2.onclick = buyWeapon; button3.onclick = goTown; + } --fcc-editable-region-- diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md index 7e389b0a832..b0e53680056 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md @@ -17,7 +17,7 @@ You should call the `.push()` method of `rows` in your `else` block. assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/); ``` -You should pass a `padRow()` call as the argument for your `.unshift()` method. +You should pass a `padRow()` call as the argument for your `.push()` method. ```js assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/); diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md index 10442ac529b..e921c4081f3 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md @@ -23,10 +23,16 @@ Add a `case` where the value is `"yyyy-mm-dd"`. Inside the `case`, set the text # --hints-- -You should add a `case` where the condition is `"yyyy-mm-dd"`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`. +You should add a `case` with the value `"yyyy-mm-dd"`. ```js -assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/); +``` + +You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case. + +```js +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/); ``` # --seed-- diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md index ec2be7c5c0b..f90f4e48115 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md @@ -13,16 +13,22 @@ Also, make sure to include a `break` statement to terminate the `switch` stateme # --hints-- -You should add a `case` where the condition is `"mm-dd-yyyy-h-mm"`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals. +You should add a `case` with the value `"mm-dd-yyyy-h-mm"`. ```js -assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/); ``` -You should include a `break` statement within the `case` after your logic. +You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case. ```js -assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/); +``` + +You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic. + +```js +assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/); ``` # --seed-- diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md index f1028ed1966..ee16ad24222 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md @@ -31,10 +31,16 @@ And with that, your date formatter is complete! You can now format the current d # --hints-- -You should use the `default` case to set the `textContent` property of `currentDateParagraph` to the value of `formattedDate`. +You should have a `default` case after the existing cases. ```js -assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /default\s*:\s*/) +``` + +In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`. + +```js +assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g); ``` # --seed-- diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/arabic/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md new file mode 100644 index 00000000000..d31a63c9495 --- /dev/null +++ b/curriculum/challenges/arabic/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md @@ -0,0 +1,261 @@ +--- +id: 66629f407d679d3105e8317f +title: Build a Rock Paper Scissors Game +challengeType: 14 +dashedName: top-build-a-rock-paper-scissors-game +--- + +# --description-- +Your game will be played against the computer. You will write a function that randomly returns `"rock"`, `"paper"` or `"scissors"`. + +You do not need to worry about the front-end part of the game. You will only write the logic for the game. Open the `script.js` and start following the instructions. + +**User stories:** + +1. You should have a function named `getComputerChoice`. + +1. Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +**Hint:** The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. + +Your game will be played by a human player. You will write a function that takes the user's choice and returns it. + +1. Create a function named `getHumanChoice`. + +1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs. + +**Hint:** Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user’s input. + +Your game will keep track of the player's score. You will write variables to keep track of the player's score. + +1. Create two new variables named `humanScore` and `computerScore` in the global scope. + +1. Initialize those variables with the value of `0`. + +Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement. + +1. Create a new function named `playRound`. + +1. Define two parameters for `playRound`. Parameter one `humanChoice` and parameter two `computerChoice`. Use these two parameters to take the human and computer choices as arguments. + +1. Make your function’s `humanChoice` parameter case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +1. Write the code for your `playRound` function that returns a string value representing the round winner. + +- If it is a tie, it should return `"It's a tie!"`. + +- If the player wins, it should return `"You win! [player choice] beats [computer choice]"`. + +- If the computer wins, it should return `"You lose! [computer choice] beats [player choice]"`. + +1. Increment the `humanScore` or `computerScore` variable based on the round winner. + +Your game will play 3 rounds. You will write a function named `playGame` that calls `playRound` to play 3 rounds, keeps track of the scores, and declares a winner at the end. + +1. Create a new function named `playGame`. + +1. Create a loop that plays 3 rounds and calls the `playRound` function each time with the human's choice and the computer's choice functions as arguments. + +1. At the end of the game, return the winner of the game based on who won the most rounds. + +- If the human player wins more rounds than the computer player, return a message that says `"You win the game!"`. + +- If the computer player wins more rounds than the human player, return a message that says `"You lose the game!"`. + +# --hints-- + +You should have a function called `getComputerChoice` + +```js +assert.isFunction(getComputerChoice); +``` + +Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +```js +const counts = {} +for (let i = 0; i < 100; i++) { + const result = getComputerChoice(); + counts[result] = (counts[result] ?? 0) + 1; +} +assert.lengthOf(Object.keys(counts), 3); +assert.include(Object.keys(counts), "rock"); +assert.include(Object.keys(counts), "paper"); +assert.include(Object.keys(counts), "scissors"); +``` + +You should have a function called `getHumanChoice` + +```js +assert.isFunction(getHumanChoice); +``` + +You should have two variables named `humanScore` and `computerScore` in the global scope. + +```js +assert.exists(humanScore); +assert.exists(computerScore); +``` + +You should have a function called `playRound` + +```js +assert.isFunction(playRound); +``` + +Your `playRound` function should take the human and computer player choices as arguments with the parameters `humanChoice` and `computerChoice`. + +```js +assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/); +``` + +Your `playRound` function should be case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +```js +assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/); +``` + +Your `playRound` function should return the string `"It's a tie!"` if the human and computer choices are the same. + +```js +assert.equal(playRound("rock", "rock"), "It's a tie!"); +``` + +Your `playRound` function should return the string `"You win! [player choice] beats [computer choice]"` if the player wins. + +```js +assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors"); +``` + +Your `playRound` function should return the string `"You lose! [computer choice] beats [player choice]"` if the computer wins. + +```js +assert.equal(playRound("rock", "paper"), "You lose! paper beats rock"); +``` + +Your `playRound` function should increment the `humanScore` or `computerScore` variable based on the round winner. + +```js +humanScore = 0; +computerScore = 0; +playRound("rock", "scissors"); +assert.equal(humanScore, 1); +``` + +You should have a function called `playGame`. + +```js +assert.isFunction(playGame); +``` + +You should use a loop to play 3 rounds. + +```js +assert.match(playGame.toString(), /\bfor\s*\(/); +``` + +You should return the winner of the game based on who won the most rounds. + +```js +window.prompt = () => "rock"; +assert.match(playGame(), /You (win|lose) the game!/); +``` + +# --seed-- + +## --seed-contents-- + +```js +const hand = ['rock', 'paper', 'scissor']; +``` + +```html + + + + + +``` + +# --solutions-- + +```html + + + + + +``` + +```js +const hand = ['rock', 'paper', 'scissors']; + + +let computerScore = 0; +let humanScore = 0; + +const getComputerChoice = () => { + return hand[Math.floor(Math.random() * hand.length)]; +} + +const getHumanChoice = () => { + return prompt(); +} + +const playRound = (humanChoice, computerChoice) => { + humanChoice = humanChoice.toLowerCase() + + const tie = "It's a tie!" + const win = `You win! ${humanChoice} beats ${computerChoice}` + const lose = `You lose! ${computerChoice} beats ${humanChoice}` + + + if (humanChoice == 'rock') { + if (computerChoice == 'rock') { + computerScore++; + humanScore++; + return tie; + } else if (computerChoice == 'paper') { + computerScore++; + return lose; + } else { + humanScore++; + return win; + } + } else if (humanChoice == 'paper') { + if (computerChoice == 'rock') { + humanScore++; + return win; + } else if (computerChoice == 'paper') { + computerScore++; + humanScore++; + return tie; + } else { + computerScore++; + return lose; + } + } else if (humanChoice == 'scissors') { + if (computerChoice == 'rock') { + computerScore++; + return lose; + } else if (computerChoice == 'paper') { + humanScore++; + return win; + } else { + computerScore++; + humanScore++; + return tie; + } + } +} + +const playGame = () => { + for(let i = 0; i < 3; i++){ + playRound(getHumanChoice(), getComputerChoice()) + } + + return humanScore > computerScore ? "You win the game!" : "You lose the game!" +} + +``` + diff --git a/curriculum/challenges/arabic/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/arabic/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md new file mode 100644 index 00000000000..28af96694df --- /dev/null +++ b/curriculum/challenges/arabic/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md @@ -0,0 +1,20 @@ +--- +id: 645147516c245de4d11eb7ba +title: Front End Development Certification Exam +challengeType: 17 +dashedName: front-end-development-certification-exam +--- + +# --description-- + +Here are some rules: + +- click start + +# --instructions-- + +# --hints-- + +# --seed-- + +# --solutions-- diff --git a/curriculum/challenges/arabic/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/arabic/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md new file mode 100644 index 00000000000..2b1a9d0a9de --- /dev/null +++ b/curriculum/challenges/arabic/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md @@ -0,0 +1,28 @@ +--- +id: 66731cd027ef3acb155669f5 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +step 1 instructions + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/chinese-traditional/00-certifications/front-end-development-certification/front-end-development.yml new file mode 100644 index 00000000000..25d1e081292 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/00-certifications/front-end-development-certification/front-end-development.yml @@ -0,0 +1,10 @@ +--- +id: 64514fda6c245de4d11eb7bb +title: Front End Development Certification +certification: front-end-development +challengeType: 7 +isPrivate: true +tests: + - + id: 645147516c245de4d11eb7ba + title: Front End Development Certification Exam diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md index 1722751ea7c..5d1ecb6a1e1 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md @@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins # --description-- -在 Sass 中,mixin 是一組 CSS 聲明,可以在整個樣式表中重複使用。 - -CSS 的新功能需要一段時間適配後,所有瀏覽器後才能完全使用。 隨着瀏覽器的不斷升級,使用這些 CSS 規則時可能需要添加瀏覽器前綴。 考慮 `box-shadow`: +In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule. ```scss -div { - -webkit-box-shadow: 0px 0px 4px #fff; - -moz-box-shadow: 0px 0px 4px #fff; - -ms-box-shadow: 0px 0px 4px #fff; - box-shadow: 0px 0px 4px #fff; +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +nav ul { + @include reset-list; } ``` -對於所有具有 `box-shadow` 屬性的元素重寫此規則,或者更改每個值以測試不同的效果,需要花費大量的精力。 Mixins 就像 CSS 的函數。 以下是一個例子: +Compiles to: -```scss -@mixin box-shadow($x, $y, $blur, $c){ - -webkit-box-shadow: $x $y $blur $c; - -moz-box-shadow: $x $y $blur $c; - -ms-box-shadow: $x $y $blur $c; - box-shadow: $x $y $blur $c; +```css +nav ul { + margin: 0; + padding: 0; + list-style: none; } ``` -定義以 `@mixin` 開頭,後跟自定義名稱。 參數(`$x`,`$y`,`$blur`,以及上例中的 `$c` )是可選的。 現在在需要 `box-shadow` 規則的地方,只需一行 mixin 調用而無需添加所有的瀏覽器前綴。 mixin 可以通過 `@include` 指令調用。 +Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin. ```scss -div { - @include box-shadow(0px, 0px, 4px, #fff); +@mixin prose($font-size, $spacing) { + font-size: $font-size; + margin: 0; + margin-block-end: $spacing; +} + +p { + @include prose(1.25rem, 1rem); +} + +h2 { + @include prose(2.4rem, 1.5rem); +} +``` + +You can make arguments optional by giving the parameters default values. + +```scss +@mixin text-color($color: black) { + color: $color; +} + +p { + @include text-color(); /* color: black */ +} + +nav a { + @include text-color(orange); } ``` # --instructions-- -爲 `border-radius` 寫一個 mixin,並給它一個 `$radius` 參數。 應該使用之前例子中的所有瀏覽器前綴。 然後使用 `border-radius` mixin 爲 `#awesome` 元素提供 `15px` 的邊框半徑。 +Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`. + +Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`. # --hints-- -應聲明名爲 `border-radius` 的 mixin,其中包含名爲 `$radius` 的參數。 +You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`. ```js -assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); +assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi); ``` -應該給 `$radius` 添加 `-webkit-border-radius` 瀏覽器前綴。 +Your mixin should include a `width` property that uses the `$w` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi); ``` -應該給 `$radius` 添加 `-moz-border-radius` 瀏覽器前綴。 +Your mixin should include a `height` property that uses the `$h` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi); ``` -應該給 `$radius` 添加 `-ms-border-radius` 瀏覽器前綴。 +Your mixin should include a `background-color` property that uses the `$bg-color` parameter. ```js -assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi)); +assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi); ``` -應該給 `$radius` 添加 `border-radius`。 +You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length == - 4 -); +assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi); ``` -應使用 `@include` 關鍵字調用 `border-radius mixin`,並將其設置爲 `15px`。 +You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`. ```js -assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); +assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi); +``` + +You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`. + +```js +assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi); ``` # --seed-- @@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); ```html -
+
+
+
``` # --solutions-- ```html -
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md index cf74a2efd59..75aa48e4eba 100644 --- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md @@ -20,7 +20,7 @@ dashedName: stock-price-checker # --instructions-- -1. 將 `NODE_ENV` 設置爲 `test`,不帶引號,並將 `DB` 設爲你的 MongoDB 連接字符串。 +1. Set the `NODE_ENV` environment variable to `test`, without quotes 2. 在 `routes/api.js` 中完成項目,或者通過創建一個處理程序/控制器來完成項目 3. 添加安全功能到 `server.js`。 4. 在 `tests/2_functional-tests.js` 中創建所有的功能測試 diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md index a5c3c1ea1b4..d5c51a6f67c 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -現在你需要鏈接 `styles.css` 文件,以便再次應用這些樣式。 在 `head` 元素中嵌套一個自閉合 `link` 元素。 給它一個 `rel` 屬性,值爲 `stylesheet` 和一個 `href` 屬性,值爲 `styles.css`。 +Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`. # --hints-- diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md index 01999562d80..81108aec3d1 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md @@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID **User Stories:** 1. You should have an `input` element with an `id` of `"search-input"` -1. You should have a `button` element with an `id` of `"search-button` +1. You should have a `button` element with an `id` of `"search-button"` 1. You should have an element with an `id` of `"pokemon-name"` 1. You should have an element with an `id` of `"pokemon-id"` 1. You should have an element with an `id` of `"weight"` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md index 6040d1028d3..c2bbf7a9cf9 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -Now you need to modify your display text. Change the `innerText` property of the `text` to be `"You enter the store."`. +Now you need to modify your display text. Change the `innerText` property of the `text` variable to be `"You enter the store."`. # --hints-- @@ -153,6 +153,7 @@ function goStore() { button1.onclick = buyHealth; button2.onclick = buyWeapon; button3.onclick = goTown; + } --fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md index 168a21853ad..4a146d01066 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md @@ -14,7 +14,7 @@ let programmer = "Naomi"; programmer = "CamperChan"; ``` -Note that when reassigning a variable, you do **not** use the `let` keyword again. +請注意,當重新賦值一個變量時,你 **不需要** 再使用 `let` 關鍵字。 在 `console.log` 語句後,將 `"World"` 賦值給變量 `character`。 diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md index 85e60cf01cb..3815fee940f 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md @@ -7,29 +7,29 @@ dashedName: step-19 # --description-- -When an array holds values, or elements, those values are separated by commas. Here is an array that holds two strings: +當數組包含值或 元素 時,這些值以逗號分隔。 這是一個包含兩個字符串的數組: ```js let array = ["first", "second"]; ``` -Change your `rows` declaration to be an array with the strings `"Naomi"`, `"Quincy"`, and `"CamperChan"`. The order of values in an array is important, so follow that order. Remember that strings are case-sensitive. +將 `rows` 聲明更改爲包含字符串 `"Naomi"`、`"Quincy"` 和 `"CamperChan"` 的數組。 數組中值的順序很重要,因此請遵循該順序。 請記住,字符串區分大小寫。 # --hints-- -The first element in your array should be the string `"Naomi"`. +數組中的第一個元素應該是字符串 `"Naomi"`。 ```js assert.equal(rows[0], "Naomi"); ``` -The second element in your array should be the string `"Quincy"`. +數組中的第二個元素應該是字符串 `"Quincy"`。 ```js assert.equal(rows[1], "Quincy"); ``` -The third element in your array should be the string `"CamperChan"`. +數組中的第三個元素應該是字符串 `"CamperChan"`。 ```js assert.equal(rows[2], "CamperChan"); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md index 10548b4f96f..cf2d3a2c2e3 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md @@ -7,23 +7,23 @@ dashedName: step-23 # --description-- -For now, remove your first console log and your `rows[rows.length - 1]` assignment. Leave the second `rows` log statement for later. +現在,刪除你的第一個控制檯日誌和 `rows[rows.length - 1]` 賦值。 將第二個 `rows` 日誌語句留待以後使用。 # --hints-- -You should remove your `console.log(rows[0])` statement. +你應該刪除 `console.log(rows[0])` 語句。 ```js assert.notMatch(__helpers.removeJSComments(code), /console\.log\(\s*rows\[\s*0\s*\]\s*\)/); ``` -You should remove your `rows[rows.length - 1]` reassignment. +你應該刪除 `rows[rows.length - 1]` 重新賦值。 ```js assert.notMatch(__helpers.removeJSComments(code), /rows\[\s*rows\.length\s*-\s*1\s*\]/); ``` -You should not remove your `console.log(rows)` statement. +你不應刪除 `console.log(rows)` 語句。 ```js assert.match(__helpers.removeJSComments(code), /console\.log\(\s*rows\s*\);/); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md index 25be5a84396..4d40c6a1fc1 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md @@ -7,9 +7,9 @@ dashedName: step-41 # --description-- -To manipulate the `result` string, you will use a different type of loop. Specifically, a `for...of` loop, which iterates over each item in an iterable object and temporarily assigns it to a variable. +要操作 `result` 字符串,你將使用不同類型的循環。 具體來說,`for...of` 循環遍歷可迭代對象中的每個項目並將其臨時分配給變量。 -The syntax for a `for...of` loop looks like: +`for...of` 循環的語法如下: ```js for (const value of iterable) { @@ -17,9 +17,9 @@ for (const value of iterable) { } ``` -Note that you can use `const` because the variable only exists for a single iteration, not during the entire loop. +請注意,你可以使用 `const`,因爲該變量僅在一次迭代中存在,而不是在整個循環期間存在。 -Create a `for...of` loop to iterate through your `rows` array, assigning each value to a `row` variable. +創建一個 `for...of` 循環來遍歷 `rows` 數組,並將每個值分配給 `row` 變量。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md index cd49712ba2d..d20a9984e07 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md @@ -7,37 +7,37 @@ dashedName: step-43 # --description-- -Now all of your numbers are appearing on the same line. This will not work for creating a pyramid. +現在,你的所有數字都出現在同一行上。 這對於創建金字塔不起作用。 -You will need to add a new line to each row. However, pressing the return key to insert a line break between quotes in JavaScript will result in a parsing error. Instead, you need to use the special escape sequence `\n`, which is interpreted as a new line when the string is logged. For example: +你需要在每一行中添加一個新行。 但是,在 JavaScript 中按回車鍵在引號之間插入換行符將導致解析錯誤。 相反,你需要使用特殊的 轉義序列 `\n`,它在記錄字符串時被解釋爲新行。 例如: ```js lineOne = lineOne + "\n" + lineTwo; ``` -Use a second addition operator to concatenate a new line between the existing `result` value and the added `row` value. +使用第二個加法運算符在現有的 `result` 值和添加的 `row` 值之間連接一個新行。 # --hints-- -You should use the `\n` escape sequence. Remember that it needs to be a string, so it is wrapped in quotes. +你應該使用 `\n` 轉義序列。 請記住,它需要是一個字符串,因此用引號括起來。 ```js assert.match(__helpers.removeJSComments(code), /('|")\\n\1/); ``` -You should concatenate the `\n` escape sequence to your `result` variable. +你應該將 `\n` 轉義序列連接到 `result` 變量。 ```js assert.match(__helpers.removeJSComments(code), /result\s*\+\s*('|")\\n\1/); ``` -You should concatenate your `row` variable to your `\n` escape sequence. +你應該將 `row` 變量連接到 `\n` 轉義序列。 ```js assert.match(__helpers.removeJSComments(code), /result\s*\+\s*('|")\\n\1\s*\+\s*row/); ``` -You should assign the entire concatenation back to your `result` variable. Don't forget your semicolon. +你應該將整個連接分配回你的 `result` 變量。 Don't forget your semicolon. ```js assert.match(__helpers.removeJSComments(code), /result\s*=\s*result\s*\+\s*('|")\\n\1\s*\+\s*row;/); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md index 5254f9ff694..4f2e08e778e 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md @@ -7,32 +7,32 @@ dashedName: step-45 # --description-- -Now you have a series of `#` characters, but the pyramid shape is still missing. Fortunately, the `i` variable represents the current "row" number in your loop, enabling you to use it for crafting a pyramid-like structure. +現在你有一系列 `#` 字符,但仍然缺少金字塔形狀。 幸運的是,`i` 變量代表循環中的當前“行”號,使你能夠使用它來製作類似金字塔的結構。 -To achieve this, you will use the `.repeat()` method available to strings. This method accepts a number as an argument, specifying the number of times to repeat the target string. For example, using `.repeat()` to generate the string `"Code! Code! Code!"`: +爲了實現這一點,你將使用字符串可用的 `.repeat()` 方法。 該方法接受一個數字作爲參數,指定重複目標字符串的次數。 例如使用 `.repeat()` 生成字符串 `"Code! Code! Code!"`: ```js const activity = "Code! "; activity.repeat(3); ``` -Use the `.repeat()` method on your `character`, and give it `i` for the number. +在你的 `character` 上使用 `.repeat()` 方法,併爲其提供 `i` 作爲數字。 # --hints-- -You should use the `.repeat()` method. +你應該使用 `.repeat()` 方法。 ```js assert.match(__helpers.removeJSComments(code), /\.repeat\(/); ``` -You should use the `.repeat()` method on your `character` variable. +你應該在 `character` 變量上使用 `.repeat()` 方法。 ```js assert.match(__helpers.removeJSComments(code), /character\.repeat\(/); ``` -You should pass `i` to your `.repeat()` method. +你應該將 `i` 傳遞給你的 `.repeat()` 方法。 ```js assert.match(__helpers.removeJSComments(code), /character\.repeat\(\s*i\s*\)/) diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md index 86345a8a9f0..5fb86520a96 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md @@ -7,9 +7,9 @@ dashedName: step-64 # --description-- -In order to know how to format a row, your `padRow` function will need to know which row number you are on, and how many rows in total are being generated. +要知道如何格式化一行,你的 `padRow` 函數需要知道你所在的行號,以及總共生成了多少行。 -The best way to do this is by creating function parameters for them. Give your `padRow` function a `rowNumber` and `rowCount` parameter. Multiple parameters are separated by a comma: +最好的方法是給它們創建函數參數。 爲 `padRow` 函數提供 `rowNumber` 和 `rowCount` 參數。 多個參數以逗號分隔: ```js function name(first, second) { @@ -19,19 +19,19 @@ function name(first, second) { # --hints-- -Your `padRow` function should have a `rowNumber` parameter. +你的 `padRow` 函數應該有一個 `rowNumber` 參數。 ```js assert.match(__helpers.removeJSComments(code), /function\s+padRow\s*\(\s*rowNumber/); ``` -You should add a comma after your `rowNumber` parameter. +你應該在 `rowNumber` 參數後添加一個逗號。 ```js assert.match(__helpers.removeJSComments(code), /function\s+padRow\s*\(\s*rowNumber\s*,\s*/); ``` -Your `padRow` function should have a `rowCount` parameter. +你的 `padRow` 函數應該有一個 `rowCount` 參數。 ```js assert.match(__helpers.removeJSComments(code), /function\s+padRow\s*\(\s*rowNumber\s*,\s*rowCount\s*\)/); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md index 06d3c8f0d71..047149f8cde 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md @@ -7,11 +7,11 @@ dashedName: step-68 # --description-- -You should now see the same bunch of characters in your console. Your `padRow` function is doing the exact same thing you were doing earlier, but now it's in a reusable section of its own. +現在你應該在控制檯中看到同一組字符。 你的 `padRow` 函數正在執行與你之前完全相同的操作,但現在它位於其自己的可重複使用部分中。 -Use the addition operator to concatenate a single space `" "` to the beginning and end of your repeated `character` string. +使用加法運算符將單個空格 `" "` 連接到重複 `character` 字符串的開頭和結尾。 -Remember that you can use the `+` operator to concatenate strings like this: +請記住,你可以使用 `+` 運算符來連接字符串,如下所示: ```js " " + "string" @@ -19,19 +19,19 @@ Remember that you can use the `+` operator to concatenate strings like this: # --hints-- -You should concatenate a single space to the beginning of your returned value. +你應該將一個空格連接到返回值的開頭。 ```js assert.match(padRow(1, 1), /^\s/); ``` -You should concatenate a single space to the end of your returned value. +你應該將一個空格連接到返回值的末尾。 ```js assert.match(padRow(1, 1), /\s$/); ``` -Your `padRow()` function should return the repeated `character` series with a space before and after the series. +你的 `padRow()` 函數應返回重複的 `character` 系列,並且在系列前後都有空格。 ```js assert.equal(padRow(1, 1), " # "); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md index 0fb6f075d43..442897d0a49 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md @@ -7,17 +7,17 @@ dashedName: step-81 # --description-- -The text has appeared again! This is because `"false"` is a string, which when evaluated to a boolean becomes `true`. This means `"false"` is a truthy value. +文字又出現了! 這是因爲 `"false"` 是一個字符串,當將其計算爲布爾值時變爲 `true`。 這意味着 `"false"` 是一個真值。 -A truthy value is a value that is considered true when evaluated as a boolean. Most of the values you encounter in JavaScript will be truthy. +真值是作爲布爾值評估時被視爲真的值。 你在 JavaScript 中遇到的大多數值都是真值。 -A falsy value is the opposite - a value considered false when evaluated as a boolean. JavaScript has a defined list of falsy values. Some of them include `false`, `0`, `""`, `null`, `undefined`, and `NaN`. +假值則相反 - 當作爲布爾值評估時被視爲假的值。 JavaScript 有一個定義的假值列表。 其中包括 `false`、`0`、`""`、`null`、`undefined` 和 `NaN`。 -Try changing your `if` condition to an empty string `""`, which is a falsy value. +嘗試將你的 `if` 條件更改爲空字符串 `""`,這是一個假值。 # --hints-- -Your `if` statement should have `""` as the condition. +你的 `if` 語句應以 `""` 作爲條件。 ```js assert.match(__helpers.removeJSComments(code), /if\s*\(\s*("|')\1\s*\)/); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md index 43dde2a1425..e0943fe32bf 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md @@ -17,7 +17,7 @@ dashedName: step-116 assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/); ``` -你應該將 `padRow()` 調用作爲 `.unshift()` 方法的參數傳遞。 +You should pass a `padRow()` call as the argument for your `.push()` method. ```js assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md index e1ff7a25c53..c178516ae8f 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md @@ -7,9 +7,9 @@ dashedName: step-8 # --description-- -When variable names are more than one word, there are specific naming conventions for how you capitalize the words. In JavaScript, the convention to use is camel case. +當變量名超過一個單詞時,對於如何將單詞大寫,有特定的命名約定。 在 JavaScript 中,使用的約定是 駝峯式命名法。 -Camel case means that the first word in the name is entirely lowercase, but the following words are all title-cased. Here are some examples of camel case: +駝峯式大小寫是指名稱中的第一個單詞全部小寫,但後續單詞均採用首字母大寫。 以下是駝峯式命名法的一些示例: ```js let variableOne; @@ -18,23 +18,23 @@ let yetAnotherVariable; let thisIsAnAbsurdlyLongName; ``` -Use camel case to declare a new `secondCharacter` variable. +使用駝峯式命名法聲明一個新的 `secondCharacter` 變量。 # --hints-- -You should declare a `secondCharacter` variable. +你應該聲明一個 `secondCharacter` 變量。 ```js assert.match(__helpers.removeJSComments(code), /secondCharacter/); ``` -You should use `let` to declare your `secondCharacter` variable. +你應該使用 `let` 來聲明你的 `secondCharacter` 變量。 ```js assert.match(__helpers.removeJSComments(code), /let\s+secondCharacter/); ``` -You should not assign a value to your `secondCharacter` variable. Do not forget your semicolon. +你不應該爲 `secondCharacter` 變量賦值。 Do not forget your semicolon. ```js assert.match(__helpers.removeJSComments(code), /let\s+secondCharacter;/); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md index c9c1d800377..9684361ece8 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -You can also assign the value of a variable to another variable. For example: +你還可以將一個變量的值分配給另一個變量。 例如: ```js let first = "One"; @@ -15,27 +15,27 @@ let second = "Two"; second = first; ``` -The `second` variable would now have the value `"One"`. +`second` 變量現在的值爲 `"One"`。 -To see this in action, change your `secondCharacter` assignment from `"Test"` to your `character` variable. +要查看實際效果,請將 `secondCharacter` 賦值從 `"Test"` 更改爲 `character` 變量。 -Then open the console to see what gets logged. +然後打開控制檯查看記錄的內容。 # --hints-- -You should not assign the value `"Test"` to your `secondCharacter` variable. +你不應將值 `"Test"` 分配給 `secondCharacter` 變量。 ```js assert.notEqual(secondCharacter, "Test"); ``` -You should assign the value of the `character` variable to your `secondCharacter` variable. Don't forget your semicolon. +你應該將 `character` 變量的值分配給 `secondCharacter` 變量。 Don't forget your semicolon. ```js assert.match(__helpers.removeJSComments(code), /secondCharacter\s*=\s*character;/); ``` -Your `secondCharacter` variable should now have the value `"World"`. +你的 `secondCharacter` 變量現在應該具有值 `"World"`。 ```js diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md index 95026e413cd..574a58c87e9 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md @@ -7,19 +7,19 @@ dashedName: step-87 # --description-- -The equality operator `==` is used to check if two values are equal. To compare two values, you'd use a statement like `value == 8`. +相等運算符 `==` 用於檢查兩個值是否相等。 要比較兩個值,你可以使用類似 `value == 8` 的語句。 -Add an `if` statement to your loop. The statement should check if `done` is equal to `count` using the equality operator. +在循環中添加 `if` 語句。 該語句應使用相等運算符檢查 `done` 是否等於 `count`。 # --hints-- -You should use an `if` statement in your loop. +你應該在循環中使用 `if` 語句。 ```js assert.match(__helpers.removeJSComments(code), /while\s*\(\s*continueLoop\s*\)\s*\{\s*done\+\+;\s*if/); ``` -Your `if` statement should use the equality operator to compare `done` and `count` in the condition. +你的 `if` 語句應使用相等運算符來比較條件中的 `done` 和 `count`。 ```js assert.match(__helpers.removeJSComments(code), /while\s*\(\s*continueLoop\s*\)\s*\{\s*done\+\+;\s*if\s*\(\s*(?:done\s*==\s*count|count\s*==\s*done)\s*\)\s*\{/); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md index fac7d621a19..c7f815ec8bd 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md @@ -7,7 +7,7 @@ dashedName: step-48 # --description-- -In order to use a function, you need to call it. A function call tells your application to run the code from the function wherever you choose to call it. The syntax for a function call is the function name followed by parentheses. For example, this code defines and calls a `test` function. +爲了使用函數,你需要調用它。 函數調用 告訴你的應用程序在你選擇調用該函數的任何地方運行該函數的代碼。 函數調用的語法是函數名稱後跟括號。 例如,此代碼定義並調用 `test` 函數。 ```js function test() { @@ -16,17 +16,17 @@ function test() { test(); ``` -Call your `padRow` function. +調用你的 `padRow` 函數。 # --hints-- -You should call the `padRow` function. +你應該調用 `padRow` 函數。 ```js assert.lengthOf(__helpers.removeJSComments(code).match(/padRow\(\)/g), 2); ``` -Your `padRow` function body should be empty. +你的 `padRow` 函數體應該是空的。 ```js assert.match(padRow.toString(), /\{\s*\}/); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md index 7445639f34d..712d62950c6 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md @@ -7,7 +7,7 @@ dashedName: step-59 # --description-- -Values returned out of a function are used by calling the function. You can use the function call directly as the value it returns, or capture the returned value in a variable. This way, you can use the value assigned to a locally scoped variable, outside the function it was created in. +函數返回的值可通過調用該函數來使用。 你可以直接使用函數調用作爲其返回的值,或者在變量中捕獲返回的值。 這樣,你就可以在創建該變量的函數之外使用分配給本地作用域變量的值。 ```js function getName() { @@ -23,12 +23,12 @@ console.log(capturedReturnValue); // "Camper cat" console.log(name); // reference error ``` -To use your `"Testing"` value, return it out of the `padRow` function by updating your `return` statement to return only the `test` variable. +要使用 `"Testing"` 值,請通過更新 `return` 語句以僅返回 `test` 變量,將其從 `padRow` 函數中返回。 # --hints-- -Your `padRow` function should return the `test` variable. +你的 `padRow` 函數應該返回 `test` 變量。 ```js assert.equal(padRow("Naomi"), "Testing"); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md index 038fb05191a..3c1ae00439d 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md @@ -23,10 +23,16 @@ switch (expr) { # --hints-- -你應該添加一個 `case`,條件是 `"yyyy-mm-dd"`。 然後將 `currentDateParagraph` 的 `textContent` 屬性設置爲 `formattedDate`。 +You should add a `case` with the value `"yyyy-mm-dd"`. ```js -assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/); +``` + +You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case. + +```js +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md index fa9420f6dd5..3fc5ac3cd5b 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md @@ -13,16 +13,22 @@ dashedName: step-27 # --hints-- -你應該添加一個 `case`,條件是 `"mm-dd-yyyy-h-mm"`,然後將 `currentDateParagraph` 的 `textContent` 屬性設置爲空的模板字面量。 +You should add a `case` with the value `"mm-dd-yyyy-h-mm"`. ```js -assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/); ``` -你應該在邏輯代碼後面的 `case` 語句中包含 `break` 語句。 +You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case. ```js -assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/); +``` + +You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic. + +```js +assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md index 88c41bd37fa..28ecdd4df0d 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md @@ -31,10 +31,16 @@ switch (dayOfWeek) { # --hints-- -你應該使用 `default` 情況將 `currentDateParagraph` 的 `textContent` 屬性設置爲 `formattedDate` 的值。 +You should have a `default` case after the existing cases. ```js -assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /default\s*:\s*/) +``` + +In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`. + +```js +assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md new file mode 100644 index 00000000000..d31a63c9495 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md @@ -0,0 +1,261 @@ +--- +id: 66629f407d679d3105e8317f +title: Build a Rock Paper Scissors Game +challengeType: 14 +dashedName: top-build-a-rock-paper-scissors-game +--- + +# --description-- +Your game will be played against the computer. You will write a function that randomly returns `"rock"`, `"paper"` or `"scissors"`. + +You do not need to worry about the front-end part of the game. You will only write the logic for the game. Open the `script.js` and start following the instructions. + +**User stories:** + +1. You should have a function named `getComputerChoice`. + +1. Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +**Hint:** The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. + +Your game will be played by a human player. You will write a function that takes the user's choice and returns it. + +1. Create a function named `getHumanChoice`. + +1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs. + +**Hint:** Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user’s input. + +Your game will keep track of the player's score. You will write variables to keep track of the player's score. + +1. Create two new variables named `humanScore` and `computerScore` in the global scope. + +1. Initialize those variables with the value of `0`. + +Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement. + +1. Create a new function named `playRound`. + +1. Define two parameters for `playRound`. Parameter one `humanChoice` and parameter two `computerChoice`. Use these two parameters to take the human and computer choices as arguments. + +1. Make your function’s `humanChoice` parameter case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +1. Write the code for your `playRound` function that returns a string value representing the round winner. + +- If it is a tie, it should return `"It's a tie!"`. + +- If the player wins, it should return `"You win! [player choice] beats [computer choice]"`. + +- If the computer wins, it should return `"You lose! [computer choice] beats [player choice]"`. + +1. Increment the `humanScore` or `computerScore` variable based on the round winner. + +Your game will play 3 rounds. You will write a function named `playGame` that calls `playRound` to play 3 rounds, keeps track of the scores, and declares a winner at the end. + +1. Create a new function named `playGame`. + +1. Create a loop that plays 3 rounds and calls the `playRound` function each time with the human's choice and the computer's choice functions as arguments. + +1. At the end of the game, return the winner of the game based on who won the most rounds. + +- If the human player wins more rounds than the computer player, return a message that says `"You win the game!"`. + +- If the computer player wins more rounds than the human player, return a message that says `"You lose the game!"`. + +# --hints-- + +You should have a function called `getComputerChoice` + +```js +assert.isFunction(getComputerChoice); +``` + +Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +```js +const counts = {} +for (let i = 0; i < 100; i++) { + const result = getComputerChoice(); + counts[result] = (counts[result] ?? 0) + 1; +} +assert.lengthOf(Object.keys(counts), 3); +assert.include(Object.keys(counts), "rock"); +assert.include(Object.keys(counts), "paper"); +assert.include(Object.keys(counts), "scissors"); +``` + +You should have a function called `getHumanChoice` + +```js +assert.isFunction(getHumanChoice); +``` + +You should have two variables named `humanScore` and `computerScore` in the global scope. + +```js +assert.exists(humanScore); +assert.exists(computerScore); +``` + +You should have a function called `playRound` + +```js +assert.isFunction(playRound); +``` + +Your `playRound` function should take the human and computer player choices as arguments with the parameters `humanChoice` and `computerChoice`. + +```js +assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/); +``` + +Your `playRound` function should be case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +```js +assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/); +``` + +Your `playRound` function should return the string `"It's a tie!"` if the human and computer choices are the same. + +```js +assert.equal(playRound("rock", "rock"), "It's a tie!"); +``` + +Your `playRound` function should return the string `"You win! [player choice] beats [computer choice]"` if the player wins. + +```js +assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors"); +``` + +Your `playRound` function should return the string `"You lose! [computer choice] beats [player choice]"` if the computer wins. + +```js +assert.equal(playRound("rock", "paper"), "You lose! paper beats rock"); +``` + +Your `playRound` function should increment the `humanScore` or `computerScore` variable based on the round winner. + +```js +humanScore = 0; +computerScore = 0; +playRound("rock", "scissors"); +assert.equal(humanScore, 1); +``` + +You should have a function called `playGame`. + +```js +assert.isFunction(playGame); +``` + +You should use a loop to play 3 rounds. + +```js +assert.match(playGame.toString(), /\bfor\s*\(/); +``` + +You should return the winner of the game based on who won the most rounds. + +```js +window.prompt = () => "rock"; +assert.match(playGame(), /You (win|lose) the game!/); +``` + +# --seed-- + +## --seed-contents-- + +```js +const hand = ['rock', 'paper', 'scissor']; +``` + +```html + + + + + +``` + +# --solutions-- + +```html + + + + + +``` + +```js +const hand = ['rock', 'paper', 'scissors']; + + +let computerScore = 0; +let humanScore = 0; + +const getComputerChoice = () => { + return hand[Math.floor(Math.random() * hand.length)]; +} + +const getHumanChoice = () => { + return prompt(); +} + +const playRound = (humanChoice, computerChoice) => { + humanChoice = humanChoice.toLowerCase() + + const tie = "It's a tie!" + const win = `You win! ${humanChoice} beats ${computerChoice}` + const lose = `You lose! ${computerChoice} beats ${humanChoice}` + + + if (humanChoice == 'rock') { + if (computerChoice == 'rock') { + computerScore++; + humanScore++; + return tie; + } else if (computerChoice == 'paper') { + computerScore++; + return lose; + } else { + humanScore++; + return win; + } + } else if (humanChoice == 'paper') { + if (computerChoice == 'rock') { + humanScore++; + return win; + } else if (computerChoice == 'paper') { + computerScore++; + humanScore++; + return tie; + } else { + computerScore++; + return lose; + } + } else if (humanChoice == 'scissors') { + if (computerChoice == 'rock') { + computerScore++; + return lose; + } else if (computerChoice == 'paper') { + humanScore++; + return win; + } else { + computerScore++; + humanScore++; + return tie; + } + } +} + +const playGame = () => { + for(let i = 0; i < 3; i++){ + playRound(getHumanChoice(), getComputerChoice()) + } + + return humanScore > computerScore ? "You win the game!" : "You lose the game!" +} + +``` + diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/chinese-traditional/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md new file mode 100644 index 00000000000..28af96694df --- /dev/null +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md @@ -0,0 +1,20 @@ +--- +id: 645147516c245de4d11eb7ba +title: Front End Development Certification Exam +challengeType: 17 +dashedName: front-end-development-certification-exam +--- + +# --description-- + +Here are some rules: + +- click start + +# --instructions-- + +# --hints-- + +# --seed-- + +# --solutions-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md new file mode 100644 index 00000000000..2b1a9d0a9de --- /dev/null +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md @@ -0,0 +1,28 @@ +--- +id: 66731cd027ef3acb155669f5 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +step 1 instructions + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/chinese/00-certifications/front-end-development-certification/front-end-development.yml new file mode 100644 index 00000000000..25d1e081292 --- /dev/null +++ b/curriculum/challenges/chinese/00-certifications/front-end-development-certification/front-end-development.yml @@ -0,0 +1,10 @@ +--- +id: 64514fda6c245de4d11eb7bb +title: Front End Development Certification +certification: front-end-development +challengeType: 7 +isPrivate: true +tests: + - + id: 645147516c245de4d11eb7ba + title: Front End Development Certification Exam diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/chinese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md index 5d0cad0f57d..27117f4c24f 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md @@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins # --description-- -在 Sass 中,mixin 是一组 CSS 声明,可以在整个样式表中重复使用。 - -CSS 的新功能需要一段时间适配后,所有浏览器后才能完全使用。 随着浏览器的不断升级,使用这些 CSS 规则时可能需要添加浏览器前缀。 考虑 `box-shadow`: +In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule. ```scss -div { - -webkit-box-shadow: 0px 0px 4px #fff; - -moz-box-shadow: 0px 0px 4px #fff; - -ms-box-shadow: 0px 0px 4px #fff; - box-shadow: 0px 0px 4px #fff; +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +nav ul { + @include reset-list; } ``` -对于所有具有 `box-shadow` 属性的元素重写此规则,或者更改每个值以测试不同的效果,需要花费大量的精力。 Mixins 就像 CSS 的函数。 以下是一个例子: +Compiles to: -```scss -@mixin box-shadow($x, $y, $blur, $c){ - -webkit-box-shadow: $x $y $blur $c; - -moz-box-shadow: $x $y $blur $c; - -ms-box-shadow: $x $y $blur $c; - box-shadow: $x $y $blur $c; +```css +nav ul { + margin: 0; + padding: 0; + list-style: none; } ``` -定义以 `@mixin` 开头,后跟自定义名称。 参数(`$x`,`$y`,`$blur`,以及上例中的 `$c` )是可选的。 现在在需要 `box-shadow` 规则的地方,只需一行 mixin 调用而无需添加所有的浏览器前缀。 mixin 可以通过 `@include` 指令调用。 +Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin. ```scss -div { - @include box-shadow(0px, 0px, 4px, #fff); +@mixin prose($font-size, $spacing) { + font-size: $font-size; + margin: 0; + margin-block-end: $spacing; +} + +p { + @include prose(1.25rem, 1rem); +} + +h2 { + @include prose(2.4rem, 1.5rem); +} +``` + +You can make arguments optional by giving the parameters default values. + +```scss +@mixin text-color($color: black) { + color: $color; +} + +p { + @include text-color(); /* color: black */ +} + +nav a { + @include text-color(orange); } ``` # --instructions-- -为 `border-radius` 写一个 mixin,并给它一个 `$radius` 参数。 应该使用之前例子中的所有浏览器前缀。 然后使用 `border-radius` mixin 为 `#awesome` 元素提供 `15px` 的边框半径。 +Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`. + +Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`. # --hints-- -应声明名为 `border-radius` 的 mixin,其中包含名为 `$radius` 的参数。 +You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`. ```js -assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); +assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi); ``` -应该给 `$radius` 添加 `-webkit-border-radius` 浏览器前缀。 +Your mixin should include a `width` property that uses the `$w` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi); ``` -应该给 `$radius` 添加 `-moz-border-radius` 浏览器前缀。 +Your mixin should include a `height` property that uses the `$h` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi); ``` -应该给 `$radius` 添加 `-ms-border-radius` 浏览器前缀。 +Your mixin should include a `background-color` property that uses the `$bg-color` parameter. ```js -assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi)); +assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi); ``` -应该给 `$radius` 添加 `border-radius`。 +You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length == - 4 -); +assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi); ``` -应使用 `@include` 关键字调用 `border-radius mixin`,并将其设置为 `15px`。 +You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`. ```js -assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); +assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi); +``` + +You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`. + +```js +assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi); ``` # --seed-- @@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); ```html -
+
+
+
``` # --solutions-- ```html -
+
+
+
``` diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md index 085eb1a5153..09311fb3d9e 100644 --- a/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md @@ -20,7 +20,7 @@ dashedName: stock-price-checker # --instructions-- -1. 将 `NODE_ENV` 设置为 `test`,不带引号,并将 `DB` 设为你的 MongoDB 连接字符串。 +1. Set the `NODE_ENV` environment variable to `test`, without quotes 2. 在 `routes/api.js` 中完成项目,或者通过创建一个处理程序/控制器来完成项目 3. 添加安全功能到 `server.js`。 4. 在 `tests/2_functional-tests.js` 中创建所有的功能测试 diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md index 09911569de8..5478917805d 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -现在你需要链接 `styles.css` 文件,以便再次应用这些样式。 在 `head` 元素中嵌套一个自闭合 `link` 元素。 给它一个 `rel` 属性,值为 `stylesheet` 和一个 `href` 属性,值为 `styles.css`。 +Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`. # --hints-- diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md index da2f209682f..bb830dcb862 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md @@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID **User Stories:** 1. You should have an `input` element with an `id` of `"search-input"` -1. You should have a `button` element with an `id` of `"search-button` +1. You should have a `button` element with an `id` of `"search-button"` 1. You should have an element with an `id` of `"pokemon-name"` 1. You should have an element with an `id` of `"pokemon-id"` 1. You should have an element with an `id` of `"weight"` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md index 6040d1028d3..c2bbf7a9cf9 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -Now you need to modify your display text. Change the `innerText` property of the `text` to be `"You enter the store."`. +Now you need to modify your display text. Change the `innerText` property of the `text` variable to be `"You enter the store."`. # --hints-- @@ -153,6 +153,7 @@ function goStore() { button1.onclick = buyHealth; button2.onclick = buyWeapon; button3.onclick = goTown; + } --fcc-editable-region-- diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md index f8da7138cbb..a9c94c52992 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md @@ -14,7 +14,7 @@ let programmer = "Naomi"; programmer = "CamperChan"; ``` -Note that when reassigning a variable, you do **not** use the `let` keyword again. +请注意,当重新赋值一个变量时,你 **不需要** 再使用 `let` 关键字。 在 `console.log` 语句后,将 `"World"` 赋值给变量 `character`。 diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md index 85e60cf01cb..d4009b5e6f0 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md @@ -7,29 +7,29 @@ dashedName: step-19 # --description-- -When an array holds values, or elements, those values are separated by commas. Here is an array that holds two strings: +当数组包含值或 元素 时,这些值以逗号分隔。 这是一个包含两个字符串的数组: ```js let array = ["first", "second"]; ``` -Change your `rows` declaration to be an array with the strings `"Naomi"`, `"Quincy"`, and `"CamperChan"`. The order of values in an array is important, so follow that order. Remember that strings are case-sensitive. +将 `rows` 声明更改为包含字符串 `"Naomi"`、`"Quincy"` 和 `"CamperChan"` 的数组。 数组中值的顺序很重要,因此请遵循该顺序。 请记住,字符串区分大小写。 # --hints-- -The first element in your array should be the string `"Naomi"`. +数组中的第一个元素应该是字符串 `"Naomi"`。 ```js assert.equal(rows[0], "Naomi"); ``` -The second element in your array should be the string `"Quincy"`. +数组中的第二个元素应该是字符串 `"Quincy"`。 ```js assert.equal(rows[1], "Quincy"); ``` -The third element in your array should be the string `"CamperChan"`. +数组中的第三个元素应该是字符串 `"CamperChan"`。 ```js assert.equal(rows[2], "CamperChan"); diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md index 10548b4f96f..e18c9f032a2 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md @@ -7,23 +7,23 @@ dashedName: step-23 # --description-- -For now, remove your first console log and your `rows[rows.length - 1]` assignment. Leave the second `rows` log statement for later. +现在,删除你的第一个控制台日志和 `rows[rows.length - 1]` 赋值。 将第二个 `rows` 日志语句留待以后使用。 # --hints-- -You should remove your `console.log(rows[0])` statement. +你应该删除 `console.log(rows[0])` 语句。 ```js assert.notMatch(__helpers.removeJSComments(code), /console\.log\(\s*rows\[\s*0\s*\]\s*\)/); ``` -You should remove your `rows[rows.length - 1]` reassignment. +你应该删除 `rows[rows.length - 1]` 重新赋值。 ```js assert.notMatch(__helpers.removeJSComments(code), /rows\[\s*rows\.length\s*-\s*1\s*\]/); ``` -You should not remove your `console.log(rows)` statement. +你不应删除 `console.log(rows)` 语句。 ```js assert.match(__helpers.removeJSComments(code), /console\.log\(\s*rows\s*\);/); diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md index 25be5a84396..262ae2f81f6 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md @@ -7,9 +7,9 @@ dashedName: step-41 # --description-- -To manipulate the `result` string, you will use a different type of loop. Specifically, a `for...of` loop, which iterates over each item in an iterable object and temporarily assigns it to a variable. +要操作 `result` 字符串,你将使用不同类型的循环。 具体来说,`for...of` 循环遍历可迭代对象中的每个项目并将其临时分配给变量。 -The syntax for a `for...of` loop looks like: +`for...of` 循环的语法如下: ```js for (const value of iterable) { @@ -17,9 +17,9 @@ for (const value of iterable) { } ``` -Note that you can use `const` because the variable only exists for a single iteration, not during the entire loop. +请注意,你可以使用 `const`,因为该变量仅在一次迭代中存在,而不是在整个循环期间存在。 -Create a `for...of` loop to iterate through your `rows` array, assigning each value to a `row` variable. +创建一个 `for...of` 循环来遍历 `rows` 数组,并将每个值分配给 `row` 变量。 # --hints-- diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md index cd49712ba2d..4824005ad7b 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md @@ -7,37 +7,37 @@ dashedName: step-43 # --description-- -Now all of your numbers are appearing on the same line. This will not work for creating a pyramid. +现在,你的所有数字都出现在同一行上。 这对于创建金字塔不起作用。 -You will need to add a new line to each row. However, pressing the return key to insert a line break between quotes in JavaScript will result in a parsing error. Instead, you need to use the special escape sequence `\n`, which is interpreted as a new line when the string is logged. For example: +你需要在每一行中添加一个新行。 但是,在 JavaScript 中按回车键在引号之间插入换行符将导致解析错误。 相反,你需要使用特殊的 转义序列 `\n`,它在记录字符串时被解释为新行。 例如: ```js lineOne = lineOne + "\n" + lineTwo; ``` -Use a second addition operator to concatenate a new line between the existing `result` value and the added `row` value. +使用第二个加法运算符在现有的 `result` 值和添加的 `row` 值之间连接一个新行。 # --hints-- -You should use the `\n` escape sequence. Remember that it needs to be a string, so it is wrapped in quotes. +你应该使用 `\n` 转义序列。 请记住,它需要是一个字符串,因此用引号括起来。 ```js assert.match(__helpers.removeJSComments(code), /('|")\\n\1/); ``` -You should concatenate the `\n` escape sequence to your `result` variable. +你应该将 `\n` 转义序列连接到 `result` 变量。 ```js assert.match(__helpers.removeJSComments(code), /result\s*\+\s*('|")\\n\1/); ``` -You should concatenate your `row` variable to your `\n` escape sequence. +你应该将 `row` 变量连接到 `\n` 转义序列。 ```js assert.match(__helpers.removeJSComments(code), /result\s*\+\s*('|")\\n\1\s*\+\s*row/); ``` -You should assign the entire concatenation back to your `result` variable. Don't forget your semicolon. +你应该将整个连接分配回你的 `result` 变量。 Don't forget your semicolon. ```js assert.match(__helpers.removeJSComments(code), /result\s*=\s*result\s*\+\s*('|")\\n\1\s*\+\s*row;/); diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md index 5254f9ff694..ea96135cc38 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md @@ -7,32 +7,32 @@ dashedName: step-45 # --description-- -Now you have a series of `#` characters, but the pyramid shape is still missing. Fortunately, the `i` variable represents the current "row" number in your loop, enabling you to use it for crafting a pyramid-like structure. +现在你有一系列 `#` 字符,但仍然缺少金字塔形状。 幸运的是,`i` 变量代表循环中的当前“行”号,使你能够使用它来制作类似金字塔的结构。 -To achieve this, you will use the `.repeat()` method available to strings. This method accepts a number as an argument, specifying the number of times to repeat the target string. For example, using `.repeat()` to generate the string `"Code! Code! Code!"`: +为了实现这一点,你将使用字符串可用的 `.repeat()` 方法。 该方法接受一个数字作为参数,指定重复目标字符串的次数。 例如使用 `.repeat()` 生成字符串 `"Code! Code! Code!"`: ```js const activity = "Code! "; activity.repeat(3); ``` -Use the `.repeat()` method on your `character`, and give it `i` for the number. +在你的 `character` 上使用 `.repeat()` 方法,并为其提供 `i` 作为数字。 # --hints-- -You should use the `.repeat()` method. +你应该使用 `.repeat()` 方法。 ```js assert.match(__helpers.removeJSComments(code), /\.repeat\(/); ``` -You should use the `.repeat()` method on your `character` variable. +你应该在 `character` 变量上使用 `.repeat()` 方法。 ```js assert.match(__helpers.removeJSComments(code), /character\.repeat\(/); ``` -You should pass `i` to your `.repeat()` method. +你应该将 `i` 传递给你的 `.repeat()` 方法。 ```js assert.match(__helpers.removeJSComments(code), /character\.repeat\(\s*i\s*\)/) diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md index 86345a8a9f0..315ba0ca2e9 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md @@ -7,9 +7,9 @@ dashedName: step-64 # --description-- -In order to know how to format a row, your `padRow` function will need to know which row number you are on, and how many rows in total are being generated. +要知道如何格式化一行,你的 `padRow` 函数需要知道你所在的行号,以及总共生成了多少行。 -The best way to do this is by creating function parameters for them. Give your `padRow` function a `rowNumber` and `rowCount` parameter. Multiple parameters are separated by a comma: +最好的方法是给它们创建函数参数。 为 `padRow` 函数提供 `rowNumber` 和 `rowCount` 参数。 多个参数以逗号分隔: ```js function name(first, second) { @@ -19,19 +19,19 @@ function name(first, second) { # --hints-- -Your `padRow` function should have a `rowNumber` parameter. +你的 `padRow` 函数应该有一个 `rowNumber` 参数。 ```js assert.match(__helpers.removeJSComments(code), /function\s+padRow\s*\(\s*rowNumber/); ``` -You should add a comma after your `rowNumber` parameter. +你应该在 `rowNumber` 参数后添加一个逗号。 ```js assert.match(__helpers.removeJSComments(code), /function\s+padRow\s*\(\s*rowNumber\s*,\s*/); ``` -Your `padRow` function should have a `rowCount` parameter. +你的 `padRow` 函数应该有一个 `rowCount` 参数。 ```js assert.match(__helpers.removeJSComments(code), /function\s+padRow\s*\(\s*rowNumber\s*,\s*rowCount\s*\)/); diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md index 06d3c8f0d71..5b4ce16ae7b 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md @@ -7,11 +7,11 @@ dashedName: step-68 # --description-- -You should now see the same bunch of characters in your console. Your `padRow` function is doing the exact same thing you were doing earlier, but now it's in a reusable section of its own. +现在你应该在控制台中看到同一组字符。 你的 `padRow` 函数正在执行与你之前完全相同的操作,但现在它位于其自己的可重复使用部分中。 -Use the addition operator to concatenate a single space `" "` to the beginning and end of your repeated `character` string. +使用加法运算符将单个空格 `" "` 连接到重复 `character` 字符串的开头和结尾。 -Remember that you can use the `+` operator to concatenate strings like this: +请记住,你可以使用 `+` 运算符来连接字符串,如下所示: ```js " " + "string" @@ -19,19 +19,19 @@ Remember that you can use the `+` operator to concatenate strings like this: # --hints-- -You should concatenate a single space to the beginning of your returned value. +你应该将一个空格连接到返回值的开头。 ```js assert.match(padRow(1, 1), /^\s/); ``` -You should concatenate a single space to the end of your returned value. +你应该将一个空格连接到返回值的末尾。 ```js assert.match(padRow(1, 1), /\s$/); ``` -Your `padRow()` function should return the repeated `character` series with a space before and after the series. +你的 `padRow()` 函数应返回重复的 `character` 系列,并且在系列前后都有空格。 ```js assert.equal(padRow(1, 1), " # "); diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md index 0fb6f075d43..5b7075f17bc 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md @@ -7,17 +7,17 @@ dashedName: step-81 # --description-- -The text has appeared again! This is because `"false"` is a string, which when evaluated to a boolean becomes `true`. This means `"false"` is a truthy value. +文字又出现了! 这是因为 `"false"` 是一个字符串,当将其计算为布尔值时变为 `true`。 这意味着 `"false"` 是一个真值。 -A truthy value is a value that is considered true when evaluated as a boolean. Most of the values you encounter in JavaScript will be truthy. +真值是作为布尔值评估时被视为真的值。 你在 JavaScript 中遇到的大多数值都是真值。 -A falsy value is the opposite - a value considered false when evaluated as a boolean. JavaScript has a defined list of falsy values. Some of them include `false`, `0`, `""`, `null`, `undefined`, and `NaN`. +假值则相反 - 当作为布尔值评估时被视为假的值。 JavaScript 有一个定义的假值列表。 其中包括 `false`、`0`、`""`、`null`、`undefined` 和 `NaN`。 -Try changing your `if` condition to an empty string `""`, which is a falsy value. +尝试将你的 `if` 条件更改为空字符串 `""`,这是一个假值。 # --hints-- -Your `if` statement should have `""` as the condition. +你的 `if` 语句应以 `""` 作为条件。 ```js assert.match(__helpers.removeJSComments(code), /if\s*\(\s*("|')\1\s*\)/); diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md index 896a6633cde..69ab5841b0c 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md @@ -17,7 +17,7 @@ dashedName: step-116 assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/); ``` -你应该将 `padRow()` 调用作为 `.unshift()` 方法的参数传递。 +You should pass a `padRow()` call as the argument for your `.push()` method. ```js assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/); diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md index e1ff7a25c53..9c0e4d9e314 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md @@ -7,9 +7,9 @@ dashedName: step-8 # --description-- -When variable names are more than one word, there are specific naming conventions for how you capitalize the words. In JavaScript, the convention to use is camel case. +当变量名超过一个单词时,对于如何将单词大写,有特定的命名约定。 在 JavaScript 中,使用的约定是 驼峰式命名法。 -Camel case means that the first word in the name is entirely lowercase, but the following words are all title-cased. Here are some examples of camel case: +驼峰式大小写是指名称中的第一个单词全部小写,但后续单词均采用首字母大写。 以下是驼峰式命名法的一些示例: ```js let variableOne; @@ -18,23 +18,23 @@ let yetAnotherVariable; let thisIsAnAbsurdlyLongName; ``` -Use camel case to declare a new `secondCharacter` variable. +使用驼峰式命名法声明一个新的 `secondCharacter` 变量。 # --hints-- -You should declare a `secondCharacter` variable. +你应该声明一个 `secondCharacter` 变量。 ```js assert.match(__helpers.removeJSComments(code), /secondCharacter/); ``` -You should use `let` to declare your `secondCharacter` variable. +你应该使用 `let` 来声明你的 `secondCharacter` 变量。 ```js assert.match(__helpers.removeJSComments(code), /let\s+secondCharacter/); ``` -You should not assign a value to your `secondCharacter` variable. Do not forget your semicolon. +你不应该为 `secondCharacter` 变量赋值。 Do not forget your semicolon. ```js assert.match(__helpers.removeJSComments(code), /let\s+secondCharacter;/); diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md index c9c1d800377..fca6e8b1775 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -You can also assign the value of a variable to another variable. For example: +你还可以将一个变量的值分配给另一个变量。 例如: ```js let first = "One"; @@ -15,27 +15,27 @@ let second = "Two"; second = first; ``` -The `second` variable would now have the value `"One"`. +`second` 变量现在的值为 `"One"`。 -To see this in action, change your `secondCharacter` assignment from `"Test"` to your `character` variable. +要查看实际效果,请将 `secondCharacter` 赋值从 `"Test"` 更改为 `character` 变量。 -Then open the console to see what gets logged. +然后打开控制台查看记录的内容。 # --hints-- -You should not assign the value `"Test"` to your `secondCharacter` variable. +你不应将值 `"Test"` 分配给 `secondCharacter` 变量。 ```js assert.notEqual(secondCharacter, "Test"); ``` -You should assign the value of the `character` variable to your `secondCharacter` variable. Don't forget your semicolon. +你应该将 `character` 变量的值分配给 `secondCharacter` 变量。 Don't forget your semicolon. ```js assert.match(__helpers.removeJSComments(code), /secondCharacter\s*=\s*character;/); ``` -Your `secondCharacter` variable should now have the value `"World"`. +你的 `secondCharacter` 变量现在应该具有值 `"World"`。 ```js diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md index 95026e413cd..d0e6ab2584e 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md @@ -7,19 +7,19 @@ dashedName: step-87 # --description-- -The equality operator `==` is used to check if two values are equal. To compare two values, you'd use a statement like `value == 8`. +相等运算符 `==` 用于检查两个值是否相等。 要比较两个值,你可以使用类似 `value == 8` 的语句。 -Add an `if` statement to your loop. The statement should check if `done` is equal to `count` using the equality operator. +在循环中添加 `if` 语句。 该语句应使用相等运算符检查 `done` 是否等于 `count`。 # --hints-- -You should use an `if` statement in your loop. +你应该在循环中使用 `if` 语句。 ```js assert.match(__helpers.removeJSComments(code), /while\s*\(\s*continueLoop\s*\)\s*\{\s*done\+\+;\s*if/); ``` -Your `if` statement should use the equality operator to compare `done` and `count` in the condition. +你的 `if` 语句应使用相等运算符来比较条件中的 `done` 和 `count`。 ```js assert.match(__helpers.removeJSComments(code), /while\s*\(\s*continueLoop\s*\)\s*\{\s*done\+\+;\s*if\s*\(\s*(?:done\s*==\s*count|count\s*==\s*done)\s*\)\s*\{/); diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md index fac7d621a19..d1eef88ab19 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md @@ -7,7 +7,7 @@ dashedName: step-48 # --description-- -In order to use a function, you need to call it. A function call tells your application to run the code from the function wherever you choose to call it. The syntax for a function call is the function name followed by parentheses. For example, this code defines and calls a `test` function. +为了使用函数,你需要调用它。 函数调用 告诉你的应用程序在你选择调用该函数的任何地方运行该函数的代码。 函数调用的语法是函数名称后跟括号。 例如,此代码定义并调用 `test` 函数。 ```js function test() { @@ -16,17 +16,17 @@ function test() { test(); ``` -Call your `padRow` function. +调用你的 `padRow` 函数。 # --hints-- -You should call the `padRow` function. +你应该调用 `padRow` 函数。 ```js assert.lengthOf(__helpers.removeJSComments(code).match(/padRow\(\)/g), 2); ``` -Your `padRow` function body should be empty. +你的 `padRow` 函数体应该是空的。 ```js assert.match(padRow.toString(), /\{\s*\}/); diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md index 7445639f34d..e94c2aeefdc 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md @@ -7,7 +7,7 @@ dashedName: step-59 # --description-- -Values returned out of a function are used by calling the function. You can use the function call directly as the value it returns, or capture the returned value in a variable. This way, you can use the value assigned to a locally scoped variable, outside the function it was created in. +函数返回的值可通过调用该函数来使用。 你可以直接使用函数调用作为其返回的值,或者在变量中捕获返回的值。 这样,你就可以在创建该变量的函数之外使用分配给本地作用域变量的值。 ```js function getName() { @@ -23,12 +23,12 @@ console.log(capturedReturnValue); // "Camper cat" console.log(name); // reference error ``` -To use your `"Testing"` value, return it out of the `padRow` function by updating your `return` statement to return only the `test` variable. +要使用 `"Testing"` 值,请通过更新 `return` 语句以仅返回 `test` 变量,将其从 `padRow` 函数中返回。 # --hints-- -Your `padRow` function should return the `test` variable. +你的 `padRow` 函数应该返回 `test` 变量。 ```js assert.equal(padRow("Naomi"), "Testing"); diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md index b21cece2190..a8eade0ea59 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md @@ -23,10 +23,16 @@ switch (expr) { # --hints-- -你应该添加一个 `case`,条件是 `"yyyy-mm-dd"`。 然后将 `currentDateParagraph` 的 `textContent` 属性设置为 `formattedDate`。 +You should add a `case` with the value `"yyyy-mm-dd"`. ```js -assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/); +``` + +You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case. + +```js +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/); ``` # --seed-- diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md index d1267d86e57..1bfc1453e3f 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md @@ -13,16 +13,22 @@ dashedName: step-27 # --hints-- -你应该添加一个 `case`,条件是 `"mm-dd-yyyy-h-mm"`,然后将 `currentDateParagraph` 的 `textContent` 属性设置为空的模板字面量。 +You should add a `case` with the value `"mm-dd-yyyy-h-mm"`. ```js -assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/); ``` -你应该在逻辑代码后面的 `case` 语句中包含 `break` 语句。 +You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case. ```js -assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/); +``` + +You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic. + +```js +assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/); ``` # --seed-- diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md index 08caadba92f..89898b1ce9f 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md @@ -31,10 +31,16 @@ switch (dayOfWeek) { # --hints-- -你应该使用 `default` 情况将 `currentDateParagraph` 的 `textContent` 属性设置为 `formattedDate` 的值。 +You should have a `default` case after the existing cases. ```js -assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /default\s*:\s*/) +``` + +In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`. + +```js +assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g); ``` # --seed-- diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/chinese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md new file mode 100644 index 00000000000..d31a63c9495 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md @@ -0,0 +1,261 @@ +--- +id: 66629f407d679d3105e8317f +title: Build a Rock Paper Scissors Game +challengeType: 14 +dashedName: top-build-a-rock-paper-scissors-game +--- + +# --description-- +Your game will be played against the computer. You will write a function that randomly returns `"rock"`, `"paper"` or `"scissors"`. + +You do not need to worry about the front-end part of the game. You will only write the logic for the game. Open the `script.js` and start following the instructions. + +**User stories:** + +1. You should have a function named `getComputerChoice`. + +1. Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +**Hint:** The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. + +Your game will be played by a human player. You will write a function that takes the user's choice and returns it. + +1. Create a function named `getHumanChoice`. + +1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs. + +**Hint:** Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user’s input. + +Your game will keep track of the player's score. You will write variables to keep track of the player's score. + +1. Create two new variables named `humanScore` and `computerScore` in the global scope. + +1. Initialize those variables with the value of `0`. + +Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement. + +1. Create a new function named `playRound`. + +1. Define two parameters for `playRound`. Parameter one `humanChoice` and parameter two `computerChoice`. Use these two parameters to take the human and computer choices as arguments. + +1. Make your function’s `humanChoice` parameter case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +1. Write the code for your `playRound` function that returns a string value representing the round winner. + +- If it is a tie, it should return `"It's a tie!"`. + +- If the player wins, it should return `"You win! [player choice] beats [computer choice]"`. + +- If the computer wins, it should return `"You lose! [computer choice] beats [player choice]"`. + +1. Increment the `humanScore` or `computerScore` variable based on the round winner. + +Your game will play 3 rounds. You will write a function named `playGame` that calls `playRound` to play 3 rounds, keeps track of the scores, and declares a winner at the end. + +1. Create a new function named `playGame`. + +1. Create a loop that plays 3 rounds and calls the `playRound` function each time with the human's choice and the computer's choice functions as arguments. + +1. At the end of the game, return the winner of the game based on who won the most rounds. + +- If the human player wins more rounds than the computer player, return a message that says `"You win the game!"`. + +- If the computer player wins more rounds than the human player, return a message that says `"You lose the game!"`. + +# --hints-- + +You should have a function called `getComputerChoice` + +```js +assert.isFunction(getComputerChoice); +``` + +Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +```js +const counts = {} +for (let i = 0; i < 100; i++) { + const result = getComputerChoice(); + counts[result] = (counts[result] ?? 0) + 1; +} +assert.lengthOf(Object.keys(counts), 3); +assert.include(Object.keys(counts), "rock"); +assert.include(Object.keys(counts), "paper"); +assert.include(Object.keys(counts), "scissors"); +``` + +You should have a function called `getHumanChoice` + +```js +assert.isFunction(getHumanChoice); +``` + +You should have two variables named `humanScore` and `computerScore` in the global scope. + +```js +assert.exists(humanScore); +assert.exists(computerScore); +``` + +You should have a function called `playRound` + +```js +assert.isFunction(playRound); +``` + +Your `playRound` function should take the human and computer player choices as arguments with the parameters `humanChoice` and `computerChoice`. + +```js +assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/); +``` + +Your `playRound` function should be case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +```js +assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/); +``` + +Your `playRound` function should return the string `"It's a tie!"` if the human and computer choices are the same. + +```js +assert.equal(playRound("rock", "rock"), "It's a tie!"); +``` + +Your `playRound` function should return the string `"You win! [player choice] beats [computer choice]"` if the player wins. + +```js +assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors"); +``` + +Your `playRound` function should return the string `"You lose! [computer choice] beats [player choice]"` if the computer wins. + +```js +assert.equal(playRound("rock", "paper"), "You lose! paper beats rock"); +``` + +Your `playRound` function should increment the `humanScore` or `computerScore` variable based on the round winner. + +```js +humanScore = 0; +computerScore = 0; +playRound("rock", "scissors"); +assert.equal(humanScore, 1); +``` + +You should have a function called `playGame`. + +```js +assert.isFunction(playGame); +``` + +You should use a loop to play 3 rounds. + +```js +assert.match(playGame.toString(), /\bfor\s*\(/); +``` + +You should return the winner of the game based on who won the most rounds. + +```js +window.prompt = () => "rock"; +assert.match(playGame(), /You (win|lose) the game!/); +``` + +# --seed-- + +## --seed-contents-- + +```js +const hand = ['rock', 'paper', 'scissor']; +``` + +```html + + + + + +``` + +# --solutions-- + +```html + + + + + +``` + +```js +const hand = ['rock', 'paper', 'scissors']; + + +let computerScore = 0; +let humanScore = 0; + +const getComputerChoice = () => { + return hand[Math.floor(Math.random() * hand.length)]; +} + +const getHumanChoice = () => { + return prompt(); +} + +const playRound = (humanChoice, computerChoice) => { + humanChoice = humanChoice.toLowerCase() + + const tie = "It's a tie!" + const win = `You win! ${humanChoice} beats ${computerChoice}` + const lose = `You lose! ${computerChoice} beats ${humanChoice}` + + + if (humanChoice == 'rock') { + if (computerChoice == 'rock') { + computerScore++; + humanScore++; + return tie; + } else if (computerChoice == 'paper') { + computerScore++; + return lose; + } else { + humanScore++; + return win; + } + } else if (humanChoice == 'paper') { + if (computerChoice == 'rock') { + humanScore++; + return win; + } else if (computerChoice == 'paper') { + computerScore++; + humanScore++; + return tie; + } else { + computerScore++; + return lose; + } + } else if (humanChoice == 'scissors') { + if (computerChoice == 'rock') { + computerScore++; + return lose; + } else if (computerChoice == 'paper') { + humanScore++; + return win; + } else { + computerScore++; + humanScore++; + return tie; + } + } +} + +const playGame = () => { + for(let i = 0; i < 3; i++){ + playRound(getHumanChoice(), getComputerChoice()) + } + + return humanScore > computerScore ? "You win the game!" : "You lose the game!" +} + +``` + diff --git a/curriculum/challenges/chinese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/chinese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md new file mode 100644 index 00000000000..28af96694df --- /dev/null +++ b/curriculum/challenges/chinese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md @@ -0,0 +1,20 @@ +--- +id: 645147516c245de4d11eb7ba +title: Front End Development Certification Exam +challengeType: 17 +dashedName: front-end-development-certification-exam +--- + +# --description-- + +Here are some rules: + +- click start + +# --instructions-- + +# --hints-- + +# --seed-- + +# --solutions-- diff --git a/curriculum/challenges/chinese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/chinese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md new file mode 100644 index 00000000000..2b1a9d0a9de --- /dev/null +++ b/curriculum/challenges/chinese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md @@ -0,0 +1,28 @@ +--- +id: 66731cd027ef3acb155669f5 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +step 1 instructions + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/espanol/00-certifications/front-end-development-certification/front-end-development.yml new file mode 100644 index 00000000000..25d1e081292 --- /dev/null +++ b/curriculum/challenges/espanol/00-certifications/front-end-development-certification/front-end-development.yml @@ -0,0 +1,10 @@ +--- +id: 64514fda6c245de4d11eb7bb +title: Front End Development Certification +certification: front-end-development +challengeType: 7 +isPrivate: true +tests: + - + id: 645147516c245de4d11eb7ba + title: Front End Development Certification Exam diff --git a/curriculum/challenges/espanol/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/espanol/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md index 3773580f8f7..4e7044c92ee 100644 --- a/curriculum/challenges/espanol/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/espanol/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md @@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins # --description-- -En Sass, un mixin es un grupo de declaraciones de CSS que pueden reutilizarse a través de la hoja de estilo. - -Las nuevas funciones de CSS tardan en ser adoptadas por completo y estar listas para su uso en todos los navegadores. A medida que se agregan funciones a los navegadores, las reglas CSS que las utilizan pueden necesitar prefijos de proveedor. Consideremos `box-shadow`: +In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule. ```scss -div { - -webkit-box-shadow: 0px 0px 4px #fff; - -moz-box-shadow: 0px 0px 4px #fff; - -ms-box-shadow: 0px 0px 4px #fff; - box-shadow: 0px 0px 4px #fff; +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +nav ul { + @include reset-list; } ``` -Es mucho teclear para reescribir esta regla para todos los elementos que tienen un `box-shadow`, o para cambiar cada valor para probar diferentes efectos. Mixins son como funciones para CSS. Aquí está cómo escribir una: +Compiles to: -```scss -@mixin box-shadow($x, $y, $blur, $c){ - -webkit-box-shadow: $x $y $blur $c; - -moz-box-shadow: $x $y $blur $c; - -ms-box-shadow: $x $y $blur $c; - box-shadow: $x $y $blur $c; +```css +nav ul { + margin: 0; + padding: 0; + list-style: none; } ``` -La definición empieza con `@mixin` seguido de un nombre personalizado. Los parámetros ( `$x`, `$y`, `$blur`, y `$c` en el ejemplo anterior) son opcionales. Ahora cada vez que se necesite una regla `box-shadow`, una sola línea llamando al mixin reemplaza el tener que escribir todos los prefijos del proveedor. Se llama a un mixin con la directiva `@include`: +Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin. ```scss -div { - @include box-shadow(0px, 0px, 4px, #fff); +@mixin prose($font-size, $spacing) { + font-size: $font-size; + margin: 0; + margin-block-end: $spacing; +} + +p { + @include prose(1.25rem, 1rem); +} + +h2 { + @include prose(2.4rem, 1.5rem); +} +``` + +You can make arguments optional by giving the parameters default values. + +```scss +@mixin text-color($color: black) { + color: $color; +} + +p { + @include text-color(); /* color: black */ +} + +nav a { + @include text-color(orange); } ``` # --instructions-- -Escribe un mixin para `border-radius` y dale un parámetro `$radius`. Debe utilizar todos los prefijos de proveedor del ejemplo. Luego usa el mixin `border-radius` para dar al elemento `#awesome` un border radius de `15px`. +Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`. + +Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`. # --hints-- -Tu código debe declarar un mixin llamado `border-radius` que tiene un parámetro llamado `$radius`. +You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`. ```js -assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); +assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi); ``` -Tu código debe incluir el prefijo de proveedor `-webkit-border-radius` que utiliza el parámetro `$radius`. +Your mixin should include a `width` property that uses the `$w` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi); ``` -Tu código debe incluir el prefijo de proveedor `-moz-border-radius` que utiliza el parámetro `$radius`. +Your mixin should include a `height` property that uses the `$h` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi); ``` -Tu código debe incluir el prefijo de proveedor `-ms-border-radius` que utiliza el parámetro `$radius`. +Your mixin should include a `background-color` property that uses the `$bg-color` parameter. ```js -assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi)); +assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi); ``` -Tu código debe incluir la regla general `border-radius` que utiliza el parámetro `$radius`. +You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length == - 4 -); +assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi); ``` -Tu código debe llamar al `border-radius mixin` usando la palabra clave `@include`, configurándolo a `15px`. +You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`. ```js -assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); +assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi); +``` + +You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`. + +```js +assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi); ``` # --seed-- @@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); ```html -
+
+
+
``` # --solutions-- ```html -
+
+
+
``` diff --git a/curriculum/challenges/espanol/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/espanol/09-information-security/information-security-projects/stock-price-checker.md index 02f7a3d8a7e..ac0aebce8d2 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-projects/stock-price-checker.md @@ -20,7 +20,7 @@ Trabajar en este proyecto implicará escribir tu código utilizando uno de los s # --instructions-- -1. SET `NODE_ENV` to `test` without quotes and set `DB` to your MongoDB connection string +1. Set the `NODE_ENV` environment variable to `test`, without quotes 2. Completa el proyecto en `routes/api.js` o creando un manejador/controlador 3. Añadirás cualquier característica de seguridad a `server.js` 4. Crearás todas las pruebas funcionales en `tests/2_functional-tests.js` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md index 57eef0884fb..8fdce01599d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -Ahora tienes que vincular el archivo `styles.css` para que los estilos se apliquen de nuevo. Anida el elemento de cierre automático `link` dentro del elemento `head`. Dale un atributo `rel` con el valor `stylesheet` y un atributo `href` con el valor `styles.css`. +Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`. # --hints-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md index ae57f6bc623..2cc79afadae 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md @@ -7,9 +7,9 @@ dashedName: step-10 # --description-- -You can link to another page with the anchor (`a`) element. +Puedes enlazar a otra página con el elemento de anclaje (`a`). -Here is an example linking to `https://www.freecodecamp.org`: +Este es un ejemplo de enlace a `https://www.freecodecamp.org`: ```html diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md index 77def24d5e6..a4e18e5c5d7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md @@ -7,13 +7,13 @@ dashedName: step-12 # --description-- -You can turn any text into a link, such as the text inside of a `p` element. +Puedes convertir cualquier texto en un enlace, como el texto dentro de un elemento `p`. ``` html

I think freeCodeCamp is great.

``` -In the text of your `p` element, turn the words `cat photos` into a link by adding opening and closing anchor (`a`) tags around these words. Then set the `href` attribute to `https://freecatphotoapp.com` +En el texto de su elemento `p`, convierta las palabras `fotos de gatos` en un enlace agregando etiquetas de anclaje de apertura y cierre (`a`) alrededor de estas palabras.. Luego establece el atributo `href` en `https://freecatphotoapp.com` # --hints-- @@ -41,7 +41,7 @@ const innerContent = nestedAnchor.innerHTML; assert.isTrue(innerContent.trim() === 'cat photos'); ``` -The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`. +El texto dentro de tu elemento anchor tiene espacio en blanco extra inicial o final. El único espacio en el texto del elemento anchor debería estar entre la palabra `cat` y la palabra `photos`. ```js const nestedAnchor = document.querySelector('p > a'); @@ -49,7 +49,7 @@ const innerContent = nestedAnchor.innerHTML; assert.isNotTrue(/^\s+|\s+$/.test(innerContent)); ``` -After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element. +Después de anidar el elemento anchor (`a`), el único contenido visible del elemento `p` en el navegador debería ser `See more cat photos in our gallery.` Verifica el texto, el espaciado o la puntuación tanto del elemento `p` como del elemento anchor anidado. ```js assert.match(code, /

see more ]*>cat photos<\/a> in our gallery\.?<\/p>/i) diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md index 2577a934b0c..55685f7f087 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md @@ -7,9 +7,9 @@ dashedName: step-15 # --description-- -In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags. +En los pasos anteriores usaste un elemento anchor para convertir un texto a un enlace. Otros tipos de contenido también se pueden convertir en un enlace envolviéndolos en etiquetas anchor. -Here is an example of turning an image into a link: +Este es un ejemplo de cómo convertir una imagen en un enlace: ```html @@ -17,11 +17,11 @@ Here is an example of turning an image into a link: ``` -Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value. +Convierte la imagen a un enlace rodeándola con las etiquetas correctas. Utiliza `https://freecatphotoapp.com` como el valor del atributo `href` del elemento anchor. # --hints-- -You should have an `img` element with a `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it. +Debes tener un elemento `img` con un valor `src` de `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. Puede que lo hayas borrado accidentalmente. ```js assert( @@ -31,37 +31,37 @@ assert( ); ``` -Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. +Tu elemento anchor (`a`) debe tener una etiqueta de apertura. Las etiquetas de apertura tienen esta sintaxis: ``. ```js assert(document.querySelectorAll('a').length >= 2); ``` -You are missing a closing (`a`) tag after the image. +Te falta una etiqueta (`a`) de cierre después de la imagen. ```js assert(document.querySelectorAll('a').length === 2); ``` -Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. +Tu elemento anchor (`a`) debe tener una etiqueta de cierre. Las etiquetas de cierre tiene una `/` después del carácter `<`. ```js assert(code.match(/<\/a>/g).length >= 2); ``` -You should only add one closing anchor (`a`) tag. Please remove any extras. +Solo debes añadir una etiqueta anchor (`a`) de cierre. Elimina cualquier extra. ```js assert(code.match(/<\/a>/g).length === 2); ``` -Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. +Tu elemento anchor (`a`) no tiene atributo `href`. Comprueba que hay un espacio después del nombre de la etiqueta de apertura y/o que hay espacios antes de los nombres de los atributos. ```js assert(document.querySelector('a').hasAttribute('href')); ``` -Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo. +Tu elemento anchor (`a`) te debe de llevar a `https://freecatphotoapp.com`. Probablemente no has añadido la URL o tienes un error tipográfico. ```js assert( @@ -70,7 +70,7 @@ assert( ); ``` -Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element. +Tu elemento `img` debe estar anidado dentro del elemento anchor (`a`). Todo el elemento `img` debe estar entre las etiquetas de apertura y cierre del elemento anchor (`a`). ```js assert(document.querySelector('img').parentNode.nodeName === 'A'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md index 9e4a650b1ca..9f35563c7a6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md @@ -7,7 +7,7 @@ dashedName: step-20 # --description-- -To create an unordered list of items, you can use the `ul` element. +Para crear una lista no ordenada de elementos, puedes usar el elemento `ul`. Después del elemento `h3` con el texto `Things cats love:`, añade una lista desordenada, unordered list - (`ul`). Ten en cuenta que nada será mostrado aún. diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md index 1ff83adf887..5e01a198dfe 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md @@ -7,9 +7,9 @@ dashedName: step-24 # --description-- -A figure caption (`figcaption`) element is used to add a caption to describe the image contained within the `figure` element. +El elemento de leyenda de figura (`figcaption`) se usa para agregar una leyenda que describe la imagen contenida en el elemento `figure`. -Here is an example of a `figcaption` element with the caption of `A cute cat`: +Aquí hay un ejemplo de un elemento `figcaption` con la leyenda `A cute cat`: ```html

diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md index ef1c2a6eefc..3bb3afb3fc6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md @@ -7,7 +7,7 @@ dashedName: step-25 # --description-- -To place emphasis on a specific word or phrase, you can use the `em` element. +Para poner énfasis en una palabra o frase específica, puedes utilizar el elemento `em`. Enfatiza la palabra `love` en el elemento `figcaption` envolviendola en un elemento énfasis `em`. diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md index f4a8e714f02..edd84e8727e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md @@ -55,7 +55,7 @@ assert.deepStrictEqual( ); ``` -You should only have one `ol` element. +Solo debes tener un elemento `ol`. ```js assert([...document.querySelectorAll('ol')].length == 1); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md index 799f63c4035..43d3ca32618 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md @@ -9,7 +9,7 @@ dashedName: step-35 Ahora añadirás un formulario web para recolectar información de los usuarios. -The `form` element is used to get information from a user like their name, email, and other details. +El elemento `form` se utiliza para obtener información de un usuario, como su nombre, correo electrónico y otros detalles. Después del título `Cat Form`, añade un elemento `form`. diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md index 6130ef9eda3..9dbe7b78d7a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md @@ -7,7 +7,7 @@ dashedName: step-42 # --description-- -The `button` element is used to create a clickable button. +El elemento `button` se utiliza para crear un botón cliqueable. Añade un elemento `button` con el texto `Submit` debajo del elemento `input`. El comportamiento predeterminado de un botón sin atributos en un formulario es enviar la información a la ubicación especificada en el atributo `action` del formulario. diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md index b9a7366dd42..a597df61e92 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md @@ -7,15 +7,15 @@ dashedName: step-45 # --description-- -`label` elements are used to help associate the text for an `input` element with the `input` element itself (especially for assistive technologies like screen readers). +Los elementos `label` se utilizan para ayudar a asociar el texto de un elemento `input` con el propio elemento `input` (especialmente para tecnologías de asistencia como lectores de pantalla). -Here is an example of a `label` element with a `radio` button: +Aquí tienes un ejemplo de un elemento `label` con un botón `radio`: ```html ``` -In the example, clicking on the word `"cat"` will also select the `radio` button. +En el ejemplo, hacer clic en la palabra `"cat"` también seleccionará el botón de `radio`. Anida tu `radio` button dentro de un elemento `label`. diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md index e25495cac2e..6ec860c38ad 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md @@ -9,7 +9,7 @@ dashedName: step-48 Puedes observar que ambos elementos radio button pueden ser seleccionados al mismo tiempo. Para hacer que al seleccionar un radio button, el otro sé deseleccione automáticamente, ambos botones deben tener un atributo `name` con el mismo valor. -Here is an example of two radio buttons with the same `name` attribute: +Aquí tienes como ejemplo dos botones de radio que tienen el mismo atributo `name`: ```html Breakfast diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md index e2337734518..92d483af241 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md @@ -9,7 +9,7 @@ dashedName: step-46 El atributo `id` se utiliza para identificar elementos HTML específicos. Cada atributo `id` debe tener un valor único, diferente a los demás valores `id` de la página. -Here is an example of an `input` element with an `id` attribute: +Aquí tienes un ejemplo de un elemento `input` con un atributo `id`: ```html diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md index 275b739e1c9..9f514c9862c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md @@ -7,7 +7,7 @@ dashedName: step-54 # --description-- -Los formularios Usualmente usan casillas de verificación (checkboxes-checkbox) para preguntas que puedan tener más de una respuesta. The `input` element with a `type` attribute set to `checkbox` creates a checkbox. +Los formularios Usualmente usan casillas de verificación (checkboxes-checkbox) para preguntas que puedan tener más de una respuesta. El elemento `input` con un atributo `type` establecido en `checkbox` crea una casilla de verificación. Bajo el elemento `legend` que acabas de añadir, agrega un elemento `input` con un atributo `type` con el valor `checkbox` y dale la opción: diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md index e9f665a1a8e..b01865202e6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md @@ -7,9 +7,9 @@ dashedName: step-61 # --description-- -In order to make a checkbox checked or radio button selected by default, you need to add the `checked` attribute to it. +Para hacer que una casilla de verificación o un botón de radio este seleccionado de forma predeterminada, necesitas añadirle el atributo `checked`. -Here is an example of a radio button with the `checked` attribute: +Aquí tienes un ejemplo de un botón de radio con atributo `checked`: ```html Breakfast @@ -30,7 +30,7 @@ assert( ); ``` -Your first radio button, with the `id` set to `indoor`, should have the `checked` attribute. +Tu primer radio button, con un `id` con el valor `indoor`, debería tener el atributo `checked`. ```js assert($('input[type="radio"]')[0].hasAttribute('checked')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md index a270a411906..92703ea06af 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md @@ -7,7 +7,7 @@ dashedName: step-62 # --description-- -The `footer` element is used to define a footer for a document or section. A footer typically contains information about the author of the document, copyright data, links to terms of use, contact information, and more. +El elemento `footer` se usa para definir el pie de página de un documento o sección. Un pie de página normalmente contiene información sobre el autor del documento, datos de copyright, enlaces a términos de uso, información de contacto, etcétera. Después del elemento `main` añade un elemento `footer`. diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md index 4d2b70e0c26..b7cac9f7120 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md @@ -9,7 +9,7 @@ dashedName: step-65 Puedes notar que todo lo que has añadido hasta ahora, está dentro del elemento `body`. Todos los elementos que deben ser renderizados o mostrados en la página, deben ir dentro del elemento `body`. Sin embargo, otro tipo información que también es importante va dentro del elemento `head`. -The `head` element is used to contain metadata about the document, such as its title, links to stylesheets, and scripts. Metadata is information about the page that isn't displayed directly on the page. +El elemento `head` se utiliza para contener metadatos sobre el documento, como su título, enlaces a hojas de estilo y scripts. Los metadatos son información sobre la página que no se muestra directamente en la página. Agregue un elemento `head` sobre el elemento `body`. diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md index 45e6002b625..0fe41a8c7d3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md @@ -7,9 +7,9 @@ dashedName: step-67 # --description-- -Puedes ver que todo el contenido de la página está anidado dentro de un elemento `html`. The `html` element is the root element of an HTML page and wraps all content on the page. +Puedes ver que todo el contenido de la página está anidado dentro de un elemento `html`. El elemento `html` es elemento esencial de una página HTML y envuelve todo el contenido en la página. -You can also specify the language of your page by adding the `lang` attribute to the `html` element. +Tu también puedes especificar el lenguaje de tu página agregando el atributo `lang` a el elemento `html`. Añade un atributo `lang` con el valor `en` a la etiqueta de apertura del elemento `html` para especificar que el lenguaje de la página es el inglés. diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md index e7456cc45d0..40c0a1647b9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md @@ -38,7 +38,7 @@ assert( ); ``` -The third image should have a `src` attribute set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`. +La tercera imagen debe tener un atributo `src` configurado a `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`. ```js const catsImg = document.querySelectorAll('figure > img')[1]; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md index 5539cddd371..78c62081aee 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md @@ -9,14 +9,14 @@ dashedName: step-56 Hay otra manera de asociar un texto con el elemento `input`. Puedes anidar un texto dentro de un elemento `label` y añadirle un atributo `for` con el mismo valor del atributo `id` del elemento `input`. -Here is an example of using the `for` attribute to associate a `label` with an `input` element: +Aquí está un ejemplo usando el atributo `for` a asociar un `label` con un elemento `input`: ```html ``` -Associate the text `Loving` with the checkbox by nesting only the text `Loving` in a `label` element and giving it an appropriate `for` attribute. +Asocia el texto `Loving` al checkbox, anidando solo el texto `Loving` en un elemento `label` y dándole el correcto atributo `for`. # --hints-- @@ -32,7 +32,7 @@ Tu checkbox, aún debe tener un atributo `id` con el valor `loving`. Se esperab assert.equal($('input[type="checkbox"]')[0].id, 'loving'); ``` -The text `Loving` should be wrapped in a `label` element. +El texto `Loving` debe estar dentro de un elemento `label`. ```js const checkboxInputElem = $('input[type="checkbox"]')[0]; @@ -78,7 +78,7 @@ const labelElem = document.querySelector('label[for="loving"]'); assert(labelElem.textContent.replace(/\s/g, '').match(/Loving/i)); ``` -There should be a space between your checkbox and your new `label` element. +Debe haber un espacio entre tu checkbox y tu nuevo elemento `label`. ```js assert.match(code, />\s+ diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md index 189ae01ca70..8ea9d677417 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md @@ -13,11 +13,11 @@ Puede configurar el comportamiento del navegador agregando elementos `meta` de c ``` -Inside the `head` element, nest a `meta` element with an attribute named `charset`. Set to the value to `utf-8` which tells the browser how to encode characters for the page. +Dentro del elemento `head`, anida un elemento `meta` con un atributo `charset`. Con el valor `utf-8` que le dirá al navegador cómo codificar los caracteres en la página. -Note that `meta` elements are self-closing. +Ten en cuenta que los elementos `meta` son de autocierre. -With that last change, you have completed the Cat Photo App project. Congratulations! +Con este último cambio, has coompletado el proyecto de la aplicación de fotos de gatos. ¡Felicidades! # --hints-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md index b5e85bb2f2f..737520b40f9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md @@ -11,7 +11,7 @@ Ahora que has convertido el texto `cat photos` dentro del elemento `p` en un enl # --hints-- -Your code should only have one paragraph (`p`) element. +Tu código solo debe tener un párrafo (`p`). ```js assert.isTrue(document.querySelectorAll('p').length === 1); @@ -23,7 +23,7 @@ Tu código solo debe tener un elemto de ancla (`a`). assert.isTrue(document.querySelectorAll('a').length === 1); ``` -Do not make any changes to the elements you created in the previous step. +No hagas cambios a los elementos creados en el paso anterior. ```js assert.strictEqual(document.querySelector('p').innerHTML, 'See more cat photos in our gallery.') diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md index bb3473d98b8..eea08a88900 100644 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md @@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID **User Stories:** 1. You should have an `input` element with an `id` of `"search-input"` -1. You should have a `button` element with an `id` of `"search-button` +1. You should have a `button` element with an `id` of `"search-button"` 1. You should have an element with an `id` of `"pokemon-name"` 1. You should have an element with an `id` of `"pokemon-id"` 1. You should have an element with an `id` of `"weight"` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md index 6040d1028d3..c2bbf7a9cf9 100644 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -Now you need to modify your display text. Change the `innerText` property of the `text` to be `"You enter the store."`. +Now you need to modify your display text. Change the `innerText` property of the `text` variable to be `"You enter the store."`. # --hints-- @@ -153,6 +153,7 @@ function goStore() { button1.onclick = buyHealth; button2.onclick = buyWeapon; button3.onclick = goTown; + } --fcc-editable-region-- diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md index 7e389b0a832..b0e53680056 100644 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md @@ -17,7 +17,7 @@ You should call the `.push()` method of `rows` in your `else` block. assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/); ``` -You should pass a `padRow()` call as the argument for your `.unshift()` method. +You should pass a `padRow()` call as the argument for your `.push()` method. ```js assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/); diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md index 6b367e9eeb5..c1d7266147d 100644 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md @@ -23,10 +23,16 @@ Add a `case` where the value is `"yyyy-mm-dd"`. Inside the `case`, set the text # --hints-- -You should add a `case` where the condition is `"yyyy-mm-dd"`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`. +You should add a `case` with the value `"yyyy-mm-dd"`. ```js -assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/); +``` + +You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case. + +```js +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/); ``` # --seed-- diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md index ec2be7c5c0b..f90f4e48115 100644 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md @@ -13,16 +13,22 @@ Also, make sure to include a `break` statement to terminate the `switch` stateme # --hints-- -You should add a `case` where the condition is `"mm-dd-yyyy-h-mm"`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals. +You should add a `case` with the value `"mm-dd-yyyy-h-mm"`. ```js -assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/); ``` -You should include a `break` statement within the `case` after your logic. +You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case. ```js -assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/); +``` + +You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic. + +```js +assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/); ``` # --seed-- diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md index eb5bd1f1e0e..e71983853d1 100644 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md @@ -31,10 +31,16 @@ And with that, your date formatter is complete! You can now format the current d # --hints-- -You should use the `default` case to set the `textContent` property of `currentDateParagraph` to the value of `formattedDate`. +You should have a `default` case after the existing cases. ```js -assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /default\s*:\s*/) +``` + +In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`. + +```js +assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g); ``` # --seed-- diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/espanol/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md new file mode 100644 index 00000000000..d31a63c9495 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md @@ -0,0 +1,261 @@ +--- +id: 66629f407d679d3105e8317f +title: Build a Rock Paper Scissors Game +challengeType: 14 +dashedName: top-build-a-rock-paper-scissors-game +--- + +# --description-- +Your game will be played against the computer. You will write a function that randomly returns `"rock"`, `"paper"` or `"scissors"`. + +You do not need to worry about the front-end part of the game. You will only write the logic for the game. Open the `script.js` and start following the instructions. + +**User stories:** + +1. You should have a function named `getComputerChoice`. + +1. Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +**Hint:** The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. + +Your game will be played by a human player. You will write a function that takes the user's choice and returns it. + +1. Create a function named `getHumanChoice`. + +1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs. + +**Hint:** Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user’s input. + +Your game will keep track of the player's score. You will write variables to keep track of the player's score. + +1. Create two new variables named `humanScore` and `computerScore` in the global scope. + +1. Initialize those variables with the value of `0`. + +Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement. + +1. Create a new function named `playRound`. + +1. Define two parameters for `playRound`. Parameter one `humanChoice` and parameter two `computerChoice`. Use these two parameters to take the human and computer choices as arguments. + +1. Make your function’s `humanChoice` parameter case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +1. Write the code for your `playRound` function that returns a string value representing the round winner. + +- If it is a tie, it should return `"It's a tie!"`. + +- If the player wins, it should return `"You win! [player choice] beats [computer choice]"`. + +- If the computer wins, it should return `"You lose! [computer choice] beats [player choice]"`. + +1. Increment the `humanScore` or `computerScore` variable based on the round winner. + +Your game will play 3 rounds. You will write a function named `playGame` that calls `playRound` to play 3 rounds, keeps track of the scores, and declares a winner at the end. + +1. Create a new function named `playGame`. + +1. Create a loop that plays 3 rounds and calls the `playRound` function each time with the human's choice and the computer's choice functions as arguments. + +1. At the end of the game, return the winner of the game based on who won the most rounds. + +- If the human player wins more rounds than the computer player, return a message that says `"You win the game!"`. + +- If the computer player wins more rounds than the human player, return a message that says `"You lose the game!"`. + +# --hints-- + +You should have a function called `getComputerChoice` + +```js +assert.isFunction(getComputerChoice); +``` + +Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +```js +const counts = {} +for (let i = 0; i < 100; i++) { + const result = getComputerChoice(); + counts[result] = (counts[result] ?? 0) + 1; +} +assert.lengthOf(Object.keys(counts), 3); +assert.include(Object.keys(counts), "rock"); +assert.include(Object.keys(counts), "paper"); +assert.include(Object.keys(counts), "scissors"); +``` + +You should have a function called `getHumanChoice` + +```js +assert.isFunction(getHumanChoice); +``` + +You should have two variables named `humanScore` and `computerScore` in the global scope. + +```js +assert.exists(humanScore); +assert.exists(computerScore); +``` + +You should have a function called `playRound` + +```js +assert.isFunction(playRound); +``` + +Your `playRound` function should take the human and computer player choices as arguments with the parameters `humanChoice` and `computerChoice`. + +```js +assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/); +``` + +Your `playRound` function should be case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +```js +assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/); +``` + +Your `playRound` function should return the string `"It's a tie!"` if the human and computer choices are the same. + +```js +assert.equal(playRound("rock", "rock"), "It's a tie!"); +``` + +Your `playRound` function should return the string `"You win! [player choice] beats [computer choice]"` if the player wins. + +```js +assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors"); +``` + +Your `playRound` function should return the string `"You lose! [computer choice] beats [player choice]"` if the computer wins. + +```js +assert.equal(playRound("rock", "paper"), "You lose! paper beats rock"); +``` + +Your `playRound` function should increment the `humanScore` or `computerScore` variable based on the round winner. + +```js +humanScore = 0; +computerScore = 0; +playRound("rock", "scissors"); +assert.equal(humanScore, 1); +``` + +You should have a function called `playGame`. + +```js +assert.isFunction(playGame); +``` + +You should use a loop to play 3 rounds. + +```js +assert.match(playGame.toString(), /\bfor\s*\(/); +``` + +You should return the winner of the game based on who won the most rounds. + +```js +window.prompt = () => "rock"; +assert.match(playGame(), /You (win|lose) the game!/); +``` + +# --seed-- + +## --seed-contents-- + +```js +const hand = ['rock', 'paper', 'scissor']; +``` + +```html + + + + + +``` + +# --solutions-- + +```html + + + + + +``` + +```js +const hand = ['rock', 'paper', 'scissors']; + + +let computerScore = 0; +let humanScore = 0; + +const getComputerChoice = () => { + return hand[Math.floor(Math.random() * hand.length)]; +} + +const getHumanChoice = () => { + return prompt(); +} + +const playRound = (humanChoice, computerChoice) => { + humanChoice = humanChoice.toLowerCase() + + const tie = "It's a tie!" + const win = `You win! ${humanChoice} beats ${computerChoice}` + const lose = `You lose! ${computerChoice} beats ${humanChoice}` + + + if (humanChoice == 'rock') { + if (computerChoice == 'rock') { + computerScore++; + humanScore++; + return tie; + } else if (computerChoice == 'paper') { + computerScore++; + return lose; + } else { + humanScore++; + return win; + } + } else if (humanChoice == 'paper') { + if (computerChoice == 'rock') { + humanScore++; + return win; + } else if (computerChoice == 'paper') { + computerScore++; + humanScore++; + return tie; + } else { + computerScore++; + return lose; + } + } else if (humanChoice == 'scissors') { + if (computerChoice == 'rock') { + computerScore++; + return lose; + } else if (computerChoice == 'paper') { + humanScore++; + return win; + } else { + computerScore++; + humanScore++; + return tie; + } + } +} + +const playGame = () => { + for(let i = 0; i < 3; i++){ + playRound(getHumanChoice(), getComputerChoice()) + } + + return humanScore > computerScore ? "You win the game!" : "You lose the game!" +} + +``` + diff --git a/curriculum/challenges/espanol/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/espanol/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md new file mode 100644 index 00000000000..28af96694df --- /dev/null +++ b/curriculum/challenges/espanol/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md @@ -0,0 +1,20 @@ +--- +id: 645147516c245de4d11eb7ba +title: Front End Development Certification Exam +challengeType: 17 +dashedName: front-end-development-certification-exam +--- + +# --description-- + +Here are some rules: + +- click start + +# --instructions-- + +# --hints-- + +# --seed-- + +# --solutions-- diff --git a/curriculum/challenges/espanol/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/espanol/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md new file mode 100644 index 00000000000..2b1a9d0a9de --- /dev/null +++ b/curriculum/challenges/espanol/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md @@ -0,0 +1,28 @@ +--- +id: 66731cd027ef3acb155669f5 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +step 1 instructions + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/german/00-certifications/front-end-development-certification/front-end-development.yml new file mode 100644 index 00000000000..25d1e081292 --- /dev/null +++ b/curriculum/challenges/german/00-certifications/front-end-development-certification/front-end-development.yml @@ -0,0 +1,10 @@ +--- +id: 64514fda6c245de4d11eb7bb +title: Front End Development Certification +certification: front-end-development +challengeType: 7 +isPrivate: true +tests: + - + id: 645147516c245de4d11eb7ba + title: Front End Development Certification Exam diff --git a/curriculum/challenges/german/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md b/curriculum/challenges/german/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md index 1d8cf591404..991d124edb0 100644 --- a/curriculum/challenges/german/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md +++ b/curriculum/challenges/german/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md @@ -19,7 +19,7 @@ Schreibe eine weitere CSS-Klasse namens `blue-text`, die ein Element blau färbt Wende die Klasse `blue-text` auf dein `h1`-Element zusätzlich zu deiner Klasse `pink-text` an und lass uns sehen, wer gewinnt. -Applying multiple class attributes to an HTML element is done with a space between them like this: +Man kann mehrere Klassenattribute auf ein HTML-Element anwenden, indem man sie mit einem Leerzeichen trennt: ```html class="class1 class2" diff --git a/curriculum/challenges/german/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md b/curriculum/challenges/german/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md index b2559eb4908..043f8b4456d 100644 --- a/curriculum/challenges/german/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md +++ b/curriculum/challenges/german/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md @@ -33,7 +33,7 @@ Das vorhandene `img` Element sollte innerhalb eines `a` Elements eingebettet sei assert($('a').children('img').length > 0); ``` -Your `a` element should be a dead link with an `href` attribute set to `#`. +Dein `a`-Element sollte ein toter Link mit einem `href`-Attribut sein, das auf `#` gesetzt ist. ```js assert(new RegExp('#').test($('a').children('img').parent().attr('href'))); diff --git a/curriculum/challenges/german/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/german/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md index 73807cc37a9..3e11b24b151 100644 --- a/curriculum/challenges/german/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/german/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md @@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins # --description-- -In Sass ist ein Mixin eine Gruppe von CSS-Deklarationen, die im gesamten Stylesheet wiederverwendet werden können. - -Neuere CSS-Funktionen brauchen Zeit, bis sie vollständig übernommen werden und in allen Browsern einsatzbereit sind. Wenn neue Funktionen zu den Browsern hinzugefügt werden, benötigen CSS-Regeln, die diese nutzen, möglicherweise Herstellerpräfixe. Schau dir `box-shadow` an: +In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule. ```scss -div { - -webkit-box-shadow: 0px 0px 4px #fff; - -moz-box-shadow: 0px 0px 4px #fff; - -ms-box-shadow: 0px 0px 4px #fff; - box-shadow: 0px 0px 4px #fff; +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +nav ul { + @include reset-list; } ``` -Es ist eine Menge Tipparbeit, diese Regel für alle Elemente, die einen `box-shadow` haben, neu zu schreiben oder jeden Wert zu ändern, um verschiedene Effekte zu testen. Mixins sind wie Funktionen für CSS. Hier erfährst du, wie du eines schreiben kannst: +Compiles to: -```scss -@mixin box-shadow($x, $y, $blur, $c){ - -webkit-box-shadow: $x $y $blur $c; - -moz-box-shadow: $x $y $blur $c; - -ms-box-shadow: $x $y $blur $c; - box-shadow: $x $y $blur $c; +```css +nav ul { + margin: 0; + padding: 0; + list-style: none; } ``` -Die Definition beginnt mit `@mixin`, gefolgt von einem eigenen Namen. Die Parameter (`$x`, `$y`, `$blur` und `$c` im obigen Beispiel) sind optional. Jedes Mal, wenn eine `box-shadow`-Regel benötigt wird, reicht jetzt eine einzige Zeile, die das Mixin aufruft, um alle Präfixe der Hersteller zu ersetzen. Ein Mixin wird mit der `@include` Direktive aufgerufen: +Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin. ```scss -div { - @include box-shadow(0px, 0px, 4px, #fff); +@mixin prose($font-size, $spacing) { + font-size: $font-size; + margin: 0; + margin-block-end: $spacing; +} + +p { + @include prose(1.25rem, 1rem); +} + +h2 { + @include prose(2.4rem, 1.5rem); +} +``` + +You can make arguments optional by giving the parameters default values. + +```scss +@mixin text-color($color: black) { + color: $color; +} + +p { + @include text-color(); /* color: black */ +} + +nav a { + @include text-color(orange); } ``` # --instructions-- -Schreibe ein Mixin für `border-radius` und gib ihm einen Parameter `$radius`. Es sollte alle Anbieter-Präfixe aus dem Beispiel verwenden. Dann benutze das Mixin `border-radius`, um dem Element `#awesome` einen border-radius von `15px` zu geben. +Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`. + +Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`. # --hints-- -Dein Code sollte ein Mixin namens `border-radius` deklarieren, das einen Parameter mit dem Namen `$radius` hat. +You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`. ```js -assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); +assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi); ``` -Dein Code sollte das Präfix `-webkit-border-radius` enthalten, das den Parameter `$radius` verwendet. +Your mixin should include a `width` property that uses the `$w` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi); ``` -Dein Code sollte das Präfix `-moz-border-radius` enthalten, das den Parameter `$radius` verwendet. +Your mixin should include a `height` property that uses the `$h` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi); ``` -Dein Code sollte das Präfix `-ms-border-radius` enthalten, das den Parameter `$radius` verwendet. +Your mixin should include a `background-color` property that uses the `$bg-color` parameter. ```js -assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi)); +assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi); ``` -Dein Code sollte die allgemeine `border-radius`-Regel enthalten, die den `$radius` Parameter verwendet. +You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length == - 4 -); +assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi); ``` -Dein Code sollte das `border-radius mixin` mit dem Schlüsselwort `@include` aufrufen und es auf `15px` setzen. +You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`. ```js -assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); +assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi); +``` + +You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`. + +```js +assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi); ``` # --seed-- @@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); ```html -
+
+
+
``` # --solutions-- ```html -
+
+
+
``` diff --git a/curriculum/challenges/german/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/german/09-information-security/information-security-projects/stock-price-checker.md index 289d82e4baf..6fd5f6fa3db 100644 --- a/curriculum/challenges/german/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/german/09-information-security/information-security-projects/stock-price-checker.md @@ -20,7 +20,7 @@ Bei der Arbeit an diesem Projekt musst du deinen Code mit einer der folgenden Me # --instructions-- -1. SET `NODE_ENV` to `test` without quotes and set `DB` to your MongoDB connection string +1. Set the `NODE_ENV` environment variable to `test`, without quotes 2. Complete the project in `routes/api.js` or by creating a handler/controller 3. You will add any security features to `server.js` 4. Du wirst alle funktionalen Tests in `tests/2_functional-tests.js` erstellen diff --git a/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md index 6f686ff1d62..ff54d9fee50 100644 --- a/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md +++ b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md @@ -11,7 +11,7 @@ dashedName: install-and-require-helmet Bei der Arbeit an diesen Aufgaben wirst du deinen Code mithilfe folgender Methoden schreiben: - Klone diese GitHub-Repo und schließe dein Projekt lokal ab. -- Use our Gitpod starter project to complete these challenges. +- Verwende our Gitpod starter project um diese Challenge abzuschließen. - Verwende einen Site-Builder deiner Wahl, um das Projekt abzuschließen. Achte darauf, alle Dateien von unserem GitHub-Repo zu integrieren. Helmet hilft dir, deine Express-Anwendungen durch die Einstellung verschiedener HTTP-Header zu sichern. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md index 4f873f2d368..0c982b10e56 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md @@ -9,7 +9,7 @@ dashedName: step-7 Verschachtele die Elemente `img`, `h1` und `nav` im `header`, um deiner Seite Kontext zu verleihen. -The `img` should point to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`, have an `id` of `logo`, and have an `alt` text of `freeCodeCamp`. +Das `img` sollte auf `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg` verweisen. Dazu eine `id` von `logo`, und haben einen `alt` Text mit `freeCodeCamp`. Das Element `h1` sollte den Text `HTML/CSS Quiz` enthalten. @@ -51,7 +51,7 @@ Du solltest dem Element `img` ein `id`-Attribut mit dem Wert `logo` zuweisen. assert.equal(document.querySelector('img')?.id, 'logo'); ``` -You should give the `img` element an `alt` attribute of `freeCodeCamp`. +Du solltest dem `img`-Element ein `alt`-Attribut mit dem Wert `freeCodeCamp` zuweisen. ```js assert.equal(document.querySelector('img')?.alt, 'freeCodeCamp'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index a7db1a49893..11f903e3576 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -17,9 +17,9 @@ img { } ``` -In the above example, the width of the image will be 250px if the viewport width is less than 1000 pixels. If the viewport width is greater than 1000 pixels, the width of the image will be 25vw. This is because 25vw is equal to 25% of the viewport width. +Im obigen Beispiel wird die Breite des Bildes 250px sein, falls die Breite des Viewports kleiner als 1000 Pixel ist. Falls die Breite des Viewports größer als 1000 Pixel ist, wird die Breite des Bildes 25vw betragen. Das liegt daran, dass 25vw 25% der Breite des Viewports entspricht. -Scale the image using its `id` as a selector, and setting the `width` to be the maximum of `10rem` or `18vw`. +Skaliere das Bild mit seiner `id` als Selektor und setzte die `width` (Breite) auf das Maximum von `10rem` oder `18vw`. # --hints-- @@ -29,7 +29,7 @@ Du solltest den `#logo`-Selektor verwenden, um das `img`-Element auszuwählen. assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -You should give the `img` a `width` of `max(10rem, 18vw)`. +Du solltest dem `img` eine `width` von `max(10rem, 18vw)` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(10rem, 18vw)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md index 49308e8b00d..47300b63e92 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md @@ -13,14 +13,14 @@ Geht es um visuelle Barrierefreiheit, ist der Kontrast zwischen Elementen ein Sc # --hints-- -Your selector should target links inside list items. +Dein Selektor sollte Links innerhalb von Listenelementen anvisieren. ```js const anchors = document.querySelectorAll('li > a'); anchors.forEach(a => assert.exists(getComputedStyle(a))); ``` -You should give the `a` elements inside list items a `color` property. +Du solltest den `a`-Elementen innerhalb der Listenelemente eine `color`-Eigenschaft geben. ```js const helper = new __helpers.CSSHelp(document); @@ -29,7 +29,7 @@ const usedSelector = code.match(/^\s*?(.*?a)\s*?{/m)[1]; assert.notEmpty(helper.getStyle(usedSelector.replaceAll(/\s+/g, ' ').trim())?.color); ``` -You should only change the color of `a` elements inside list elements. +Du solltest nur die Farbe der `a`-Elemente innerhalb deiner Listenelemente ändern. ```js const footerAnchor = document.querySelector('footer a'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md index 28ddce8ffdd..841909c5e79 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md @@ -7,9 +7,9 @@ dashedName: step-1 # --description-- -In this project, you will learn the basics of CSS (Cascading Style Sheets) by building a cafe menu. CSS is the language used to style an HTML document. It describes how HTML elements should be displayed on the screen. +In diesem Projekt lernst du die Grundlagen von CSS (Cascading Style Sheets) indem du eine Speisekarte für ein Café erstellst. CSS ist die Sprache, die verwendet wird, um ein HTML-Dokument zu gestalten. Es beschreibt, wie HTML-Elemente auf dem Bildschirm angezeigt werden sollen. -Wie du in den letzten Schritten der Katzenfoto-App bereits gelernt hast, ist eine grundlegende Struktur erforderlich, um deine Webseite zu erstellen. Every HTML document should have a `DOCTYPE` declaration and `html` element. The `DOCTYPE` tells the browser which version of HTML the document is in. And the `html` element represents the root element which contains all other elements. +Wie du in den letzten Schritten der Katzenfoto-App bereits gelernt hast, ist eine grundlegende Struktur erforderlich, um deine Webseite zu erstellen. Jedes HTML-Dokument sollte eine `DOCTYPE` Deklaration und ein `HTML-` Element enthalten. Der `DOCTYPE` teilt dem Browser mit, in welcher HTML-Version das Dokument verfasst ist. Und das `HTML-` Element stellt das Wurzelelement dar, das alle anderen Elemente enthält. ```html @@ -22,19 +22,19 @@ Füge das ``-Tag und ein `html`-Element mit einem `lang`-Element # --hints-- -You should have the `` declaration. +Du solltest eine ``-Deklaration haben. ```js assert(code.match(//i)); ``` -You should have an opening `` with the language set to english. +Du solltest ein öffnendes `` Element haben, das die Sprache auf Englisch stellt. ```js assert(code.match(//gi)); ``` -You should have a closing `` tag. +Du solltest ein abschließendes ``-Tag haben. ```js assert(code.match(/<\/html>/i)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md index 153655523cb..b9a6f1be12c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md @@ -15,7 +15,7 @@ element { } ``` -Center the content of the `h1` element by setting its `text-align` property to the value `center`. +Zentriere den Inhalt des `h1`-Elements, indem du die `text-align`-Eigenschaft auf den Wert `center` setzt. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md index d02f0b7efa5..0f4369b95c6 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Im vorherigen Schritt hast du einen type selector verwendet, um das `h1`-Element zu gestalten. Center the content of the `h2` and the `p` elements by adding a new type selector for each one to the existing `style` element. +Im vorherigen Schritt hast du einen type selector verwendet, um das `h1`-Element zu gestalten. Zentriere die `h2`- und `p`-Elemente, indem du einen neuen Typselektor für jedes vorhandene `style`-Element hinzufügst. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md index 7e72e1fc0f8..fe4c69be3f1 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -Jetzt musst du die `styles.css`-Datei verknüpfen, damit die Formate wieder angewendet werden. Füge ein sich selbst schließendes `link`-Element in das `head`-Element ein. Gib ihm einen `rel`-Attributwert von `stylesheet` und einen `href`-Attributwert von `styles.css`. +Jetzt musst du die `styles.css`-Datei wieder verknüpfen, damit die Styles wieder angewendet werden. Füge innerhalb des `head`-Elements ein `link`-Element hinzu. Gib dem `link`-Element das `rel`-Attribut mit dem Wert `"stylesheet"` und das `href`-Attribut mit dem Wert `"styles.css"`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md index 9ca0b1a6079..c7d856e3135 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md @@ -9,7 +9,7 @@ dashedName: step-58 Es ist ein bisschen langweilig, dass alle Texte in der gleichen `font-family` sind. Du kannst trotzdem den Großteil des Textes `sans-serif` formatieren und nur die `h1`- und `h2`-Elemente mit einem anderen Selektor versehen. -Style both the `h1` and the `h2` elements using a single selector so that these elements' text use `Impact` font. +Formatiere beide `h1`- und `h2`-Elemente mit Hilfe eines einzigen Selektors so, dass nur die Texte dieser Elemente die `Impact`-Schriftart verwenden. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md index fba87192d06..c557a8fb25c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md @@ -9,7 +9,7 @@ dashedName: step-15 Während du drei separate `div`-Markierungselemente hast, sehen sie wie ein einziges großes Rechteck aus. Du solltes etwas Abstand zwischen ihnen hinzufügen, um es einfacher zu machen, jedes Element zu erkennen. -When the shorthand `margin` property has two values, it sets `margin-top` and `margin-bottom` to the first value, and `margin-left` and `margin-right` to the second value. +Wenn die `margin`-Kurzschrift-Eigenschaft zwei Werte enthält, setzt sie `margin-top` und `margin-bottom` auf den ersten Wert sowie `margin-left` und `margin-right` auf den zweiten Wert. Setze in deiner `.marker`-CSS-Regel die `margin`-Eigenschaft auf `10px auto`. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md index f1458bdece1..f5b47444961 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md @@ -7,7 +7,7 @@ dashedName: step-46 # --description-- -A very common way to apply color to an element with CSS is with hexadecimal or hex values. Während Hex-Werte kompliziert klingen, sind sie in Wirklichkeit nur eine andere Form von RGB-Werten. +Eine sehr gebräuchliche Methode, einem Element mit CSS eine Farbe zuzuweisen, ist die Verwendung von hexadezimalen oder Hex-Werten. Während Hex-Werte kompliziert klingen, sind sie in Wirklichkeit nur eine andere Form von RGB-Werten. Hex-Farbwerte beginnen mit einem `#`-Zeichen und enden mit sechs Zeichen in Form von 0-9 und A-F. Das erste Zeichenpaar repräsentiert rot, das zweite Paar grün und das dritte blau. Zum Beispiel: `#4B5320`. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md index d851201b88f..94aba2e510f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md @@ -9,7 +9,7 @@ dashedName: step-5 HTML5 hat einige Elemente, die unterschiedliche Inhaltsbereiche identifizieren. Diese Elemente machen dein HTML leichter lesbar und helfen bei der Suchmaschinenoptimierung (SEO) und der Barrierefreiheit. -The `main` element is used to represent the main content of the body of an HTML document. Content inside the `main` element should be unique to the document and should not be repeated in other parts of the document. +Das `main`-Element wird verwendet, um den Hauptinhalt des Hauptteils eines HTML-Dokuments darzustellen. Der Inhalt des `main`-Elements sollte für das Dokument einzigartig sein und nicht in anderen Teilen des Dokuments wiederholt werden. ```html
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md index 1341b293b3b..76c49670daa 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md @@ -9,7 +9,7 @@ dashedName: step-6 Im vorherigen Schritt hast du die `h1`-, `h2`-, Kommentar- und `p`-Elemente in das `main`-Element hinzugefügt. Dies nennt man *nesting*. Verschachtelte Elemente sollten zwei Leerzeichen weiter rechts von dem Element, in dem sie verschachtelt sind, platziert werden. Diesen Abstand nennt man Einrückung und wird verwendet, um HTML leichter lesen zu können. -Here is an example of nesting and indentation: +Hier ist ein Beispiel zum Thema Verschachteln und Einrücken: ```html
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md index 00994f44fcf..f692da28dfb 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md @@ -15,7 +15,7 @@ Hier ist ein Beispiel für ein `img`-Element mit einem `src`-Attribut, das auf d ``` -Inside the existing `img` element, add a `src` attribute with this URL: +Füge innerhalb des vorhandenen `img`-Elements ein `src`-Attribut mit dieser URL hinzu: `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg` @@ -27,7 +27,7 @@ Dein Code sollte ein `img`-Element enthalten. Möglicherweise hast du das `img`- assert(document.querySelector('img')); ``` -Your `img` element should have a `src` attribute. Du hast entweder das Attribut weggelassen oder einen Tippfehler gemacht. Stelle sicher, dass zwischen dem Namen des Elements und dem Namen des Attributs ein Leerzeichen vorhanden ist. +Dein `img` Element sollte ein `src` Attribut haben. Du hast entweder das Attribut weggelassen oder einen Tippfehler gemacht. Stelle sicher, dass zwischen dem Namen des Elements und dem Namen des Attributs ein Leerzeichen vorhanden ist. ```js assert(document.querySelector('img').src); @@ -45,7 +45,7 @@ Obwohl du die `src` des `img`-Elements auf die richtige URL gesetzt hast, wird e assert(!/\` or `/>`. +Deine `img`-Element sollte entweder mit `>` oder `/>` geschlossen werden. ```js assert(//.test(code)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md index 2f0b641538e..ae74e72fb14 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md @@ -9,7 +9,7 @@ dashedName: step-9 Alle `img`-Elemente sollten ein `alt`-Attribut haben. Der Text des `alt`-Attributs wird für Screenreader verwendet, um die Zugänglichkeit zu verbessern und wird angezeigt, wenn das Bild nicht geladen wird. -Here is an example of an `img` element with an `alt` attribute: +Hier ist ein Beispiel für ein `img`-Element mit einem `alt`-Attribut: ```html A cat diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md index 7dae2681590..41a4283267a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md @@ -7,9 +7,9 @@ dashedName: step-10 # --description-- -You can link to another page with the anchor (`a`) element. +Mit dem (`a`)-Ankerelement kannst du auf eine andere Seite verlinken. -Here is an example linking to `https://www.freecodecamp.org`: +Hier ist ein Beispiel zum Verlinken auf `https://www.freecodecamp.org`: ```html diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md index 2e50e7812df..48cda6ba8c2 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md @@ -7,9 +7,9 @@ dashedName: step-11 # --description-- -A link's text must be placed between the opening and closing tags of an anchor (`a`) element. +Der Text eines Links muss zwischen den öffnenden und schließenden Tags eines Ankerelements (`a`) platziert werden. -Here is an example of a link with the text `click here to go to freeCodeCamp.org`: +Hier ist ein Beispiel für einen Link mit dem Text `click here to go to freeCodeCamp.org`: ```html click here to go to freeCodeCamp.org diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md index 201c44c56a9..0fa8f58dd7d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md @@ -9,7 +9,7 @@ dashedName: step-15 In den vorherigen Schritten hast du ein Ankerelement verwendet, um Text in einen Link zu umwandeln. Auch andere Arten von Inhalten können in einen Link umgewandelt werden, indem sie mit Anker-Tags umschlossen werden. -Here is an example of turning an image into a link: +Hier ist ein Beispiel für die Umwandlung eines Bildes in einen Link: ```html @@ -21,7 +21,7 @@ Umwandle das Bild in einen Link, indem du es mit den notwendigen Tags der Elemen # --hints-- -You should have an `img` element with a `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. Möglicherweise hast du es versehentlich gelöscht. +Du solltest ein `img`-Element mit einem `src` von `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg` haben. Möglicherweise hast du es versehentlich gelöscht. ```js assert( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md index 204f3679db5..6a52e7d039b 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md @@ -7,7 +7,7 @@ dashedName: step-20 # --description-- -To create an unordered list of items, you can use the `ul` element. +Um eine ungeordnete Liste von Elementen zu erstellen, können Sie das `ul`-Element verwenden. Füge nach dem `h3`-Element mit dem `Things cats love:` Text ein ungeordnetes (`ul`)-Listenelement hinzu. Beachte, dass an diesem Punkt nichts angezeigt wird. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md index e55ca29b422..d28cd826208 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md @@ -7,9 +7,9 @@ dashedName: step-24 # --description-- -A figure caption (`figcaption`) element is used to add a caption to describe the image contained within the `figure` element. +Ein (`figcaption`)-Element für die Beschriftung der Abbildung wird verwendet, um eine Beschriftung hinzuzufügen, die das Bild im `figure`-Element beschreibt. -Here is an example of a `figcaption` element with the caption of `A cute cat`: +Hier ist ein Beispiel für ein `figcaption`-Element mit der Beschriftung von `A cute cat`: ```html
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md index c3c71986683..c71f5394bcc 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md @@ -7,7 +7,7 @@ dashedName: step-25 # --description-- -To place emphasis on a specific word or phrase, you can use the `em` element. +Um die Betonung auf ein bestimmtes Wort oder eine bestimmte Phrase zu legen, kannst Du das Element `em` verwenden. Hebe das Wort `love` im `figcaption`-Element hervor, indem du es in ein `em`-Element, das betont wird, umbrichst. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md index 55365d613ca..cf69c7576e8 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md @@ -9,7 +9,7 @@ dashedName: step-35 Nun wirst du ein Webformular hinzufügen, um Informationen von Benutzern zu sammeln. -The `form` element is used to get information from a user like their name, email, and other details. +Das `form`-Element wird verwendet, um Informationen von einem Benutzer wie seinem Namen, E-Mail und anderen Details zu erhalten. Füge nach der `Cat Form`-Überschrift ein `form`-Element hinzu. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md index 9c845d4adcc..f24b58101d7 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md @@ -7,15 +7,15 @@ dashedName: step-36 # --description-- -The `action` attribute indicates where form data should be sent. +Das `action`-Attribut gibt an, wohin Daten gesendet werden sollten. -Here is an example of a `form` element with an `action` attribute: +Hier ist ein Beispiel für ein `form`-Element mit einem `action`-Attribut: ```html
``` -In the example, `action="/submit-url"` tells the browser that the form data should be sent to the path `/submit-url`. +In dem Beispiel, teilt `action="/submit-url"` dem Browser mit, das die Formulardaten an den Pfad `/submit-url` gesendet werden sollten. Füge ein `action`-Attribut mit dem Wert `https://freecatphotoapp.com/submit-cat-photo` zum `form`-Element hinzu. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md index 4ddbf8f348d..96f744ed60a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md @@ -9,7 +9,7 @@ dashedName: step-40 Platzhaltertext wird verwendet, um Personen einen Hinweis darauf zu geben, welche Art von Informationen sie in das Eingabefeld eintragen sollen. -Hier ist ein Beispiel für ein `input`-Element mit einem Platzhalter auf `Ex. Jane Doe`: +Hier ist ein Beispiel für ein `input`-Element mit einem Platzhalter auf `Ex. Jane Doe` gesetzt haben: ```html diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md index 4f780a1d4ca..3f54b1b2fe7 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md @@ -7,7 +7,7 @@ dashedName: step-42 # --description-- -The `button` element is used to create a clickable button. +Mit dem `button`-Element wird eine anklickbare Schaltfläche erstellt. Füge ein `button`-Element mit dem Text `Submit` unter dem `input`-Element hinzu. Standardmäßig wird nach dem Klicken auf eine Formularschaltfläche ohne Attribute das Formular an das im `action`-Attribut des Formulars angegebene Ziel gesendet. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md index 5492b47e393..84079d761d8 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md @@ -7,15 +7,15 @@ dashedName: step-45 # --description-- -`label` elements are used to help associate the text for an `input` element with the `input` element itself (especially for assistive technologies like screen readers). +`label`-Elemente werden verwendet, um den Text für ein `input`-Element mit dem `input`-Element selbst zu verknüpfen (speziell für unterstützende Technologien wie Screenreader). -Here is an example of a `label` element with a `radio` button: +Hier ist ein Beispiel für ein `label`-Element mit einem `radio`-Schaltfläche: ```html ``` -In the example, clicking on the word `"cat"` will also select the `radio` button. +Klicken Sie im Beispiel auf das Wort `"cat"` und wählen Sie die `radio`-Schaltfläche. Bette deinen `radio`-Button in einem `label`-Element ein. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md index 4d99ca97179..64981c3d19e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md @@ -7,7 +7,7 @@ dashedName: step-54 # --description-- -In Formularen werden häufig Kontrollkästchen für Fragen verwendet, die mehr als eine Antwort haben können. The `input` element with a `type` attribute set to `checkbox` creates a checkbox. +In Formularen werden häufig Kontrollkästchen für Fragen verwendet, die mehr als eine Antwort haben können. Das `input`-Element mit einem `type`-Attribut, das auf `checkbox` gesetzt ist, erstellt eine Checkbox. Füge unter das `legend`-Element, dass du eben hinzugefügt hast, einen `input` mit seinem `type`-Attribut gesetzt auf `checkbox` und gib ihm eine Option von: diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md index 6b0c3bc5785..f83c2d82eeb 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md @@ -7,9 +7,9 @@ dashedName: step-61 # --description-- -In order to make a checkbox checked or radio button selected by default, you need to add the `checked` attribute to it. +Damit standardmäßig das Kontrollkästchen angekreuzt oder der Radio-Button ausgewählt ist, musst du das `checked`-Attribut zu ihm hinzufügen. -Here is an example of a radio button with the `checked` attribute: +Hier ist ein Beispiel für ein Radio-Button mit dem `checked`-Attribut: ```html Breakfast diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md index 3063cd7a4f5..37d15ed4418 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md @@ -7,7 +7,7 @@ dashedName: step-62 # --description-- -The `footer` element is used to define a footer for a document or section. A footer typically contains information about the author of the document, copyright data, links to terms of use, contact information, and more. +Das `footer`-Element wird verwendet, um eine "Footer" für ein Dokument oder eine Sektion zu definieren. Eine Fußzeile enthält in der Regel Informationen über den Autor des Dokuments, Urheberinformationen, Links zu Nutzungsbedingungen, Kontaktinformationen und mehr. Füge nach dem `main`-Element ein `footer`-Element hinzu. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md index a40a233ef4b..bb1dba22bd7 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md @@ -9,7 +9,7 @@ dashedName: step-65 Beachte, dass sich alles, was du der Seite bisher hinzugefügt hast, innerhalb des `body`-Elements befindet. Alle Seiteninhaltselemente, die auf Seite wiedergegeben werden sollen, gehören in das `body`-Element. Andere wichtige Informationen findet man jedoch im `head`-Element. -The `head` element is used to contain metadata about the document, such as its title, links to stylesheets, and scripts. Metadata is information about the page that isn't displayed directly on the page. +Das `head` Element wird verwendet, um Metadaten über das Dokument wie Titel, Links zu Stylesheets und Skripts zu enthalten. Metadaten sind Informationen über die Seite, die nicht direkt auf der Seite angezeigt wird. Füge ein `head`-Element oberhalb des `body`-Elements hinzu. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md index da79988e3ee..eee01451b73 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md @@ -7,9 +7,9 @@ dashedName: step-67 # --description-- -Beachte, dass der gesamte Inhalt der Seite innerhalb eines `html`-Elements eingebettet ist. The `html` element is the root element of an HTML page and wraps all content on the page. +Beachte, dass der gesamte Inhalt der Seite innerhalb eines `html`-Elements eingebettet ist. Das `html`-Element ist der Grundbaustein einer HTML-Seite und umhüllt den gesamten Inhalt der Seite. -You can also specify the language of your page by adding the `lang` attribute to the `html` element. +Du kannst auch die Sprache deiner Seite angeben, indem du das `lang`-Attribut zum `html`-Element hinzufügst. Füge das `lang`-Attribut mit dem Wert `en` zum öffnenden `html`-Tag hinzu, um anzugeben, dass die Sprache der Seite Englisch ist. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md index e3d99a3f0d8..a8def704436 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md @@ -9,7 +9,7 @@ dashedName: step-68 Alle Seiten sollten mit `` beginnen. Dieser spezielle String wird als eine declaration bezeichnet und stellt sicher, dass der Browser versucht die branchenweiten Vorgaben zu erfüllen. -`` tells browsers that the document is an HTML5 document which is the latest version of HTML. +`` teilt Browsern mit, dass das Dokument ein HTML5-Dokument ist, welches die neueste Version von HTML ist. Füge diese Deklaration als erste Zeile des Codes hinzu. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md index 9ad7225a52b..cf6961b2288 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md @@ -38,7 +38,7 @@ assert( ); ``` -The third image should have a `src` attribute set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`. +Beim dritten Bild sollte das `src` Attribut auf `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg` gesetzt sein. ```js const catsImg = document.querySelectorAll('figure > img')[1]; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md index d93700960f7..6dd3594dc9f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md @@ -9,7 +9,7 @@ dashedName: step-56 Es gibt eine andere Möglichkeit, den Text eines `input`-Elements mit dem Element selbst zu verknüpfen. Du kannst den Text innerhalb eines `label`-Elements verschachteln und ein `for`-Attribut mit dem gleichen Wert wie das `id`-Attribut des `input`-Elements hinzufügen. -Here is an example of using the `for` attribute to associate a `label` with an `input` element: +Hier ist ein Beispiel für die Verwendung des `for`-Attributs um ein `label` mit einem `input`-Element zu verknüpfen: ```html diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md index cece5d5b03f..568899d935a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md @@ -9,7 +9,7 @@ dashedName: step-16 Bevor du neuen Inhalt hinzufügst, solltest du von einem `section`-Element Gebrauch machen, um die Katzenfotos vom zukünftigen Inhalt zu trennen. -The `section` element is used to define sections in a document, such as chapters, headers, footers, or any other sections of the document. It is a semantic element that helps with SEO and accessibility. +Das `section`-Element wird verwendet, um Abschnitte in einem Dokument zu definieren, wie Kapitel, Kopfzeilen, Fußzeilen oder andere Abschnitte des Dokuments. Das `section`-Element ist ein semantisches Element, das bei SEO und Barrierefreiheit hilft. ```html
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md index dbc64e75a76..7948f47fcfb 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md @@ -13,11 +13,11 @@ Du kannst das Browserverhalten einstellen, indem du selbstschließende `meta`-El ``` -Inside the `head` element, nest a `meta` element with an attribute named `charset`. Set to the value to `utf-8` which tells the browser how to encode characters for the page. +Bette innerhalb des `head`-Elements ein `meta`-Element mit einem `charset`-Attribut. Setze den Wert auf `utf-8`, damit der Browser weiß, wie Zeichen für die Seite kodiert werden sollen. -Note that `meta` elements are self-closing. +Beachte, dass `meta`-Elemente selbstschließend sind. -With that last change, you have completed the Cat Photo App project. Congratulations! +Mit dieser letzten Änderung hast du das Cat Photo App Projekt abgeschlossen. Glückwunsch! # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md index 5ee0af8882e..cf4b3ef0d25 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md @@ -7,9 +7,9 @@ dashedName: step-39 # --description-- -In order for a form's data to be accessed by the location specified in the `action` attribute, you must give the text field a `name` attribute and assign it a value to represent the data being submitted. +Damit auf die Daten eines Formulars in der `action`-Attribut, angegebenen Position zugegriffen werden kann, musst du dem Textfeld ein `name`-Attribut zuweisen und ihm einen Wert verleihen, um die übermittelten Daten zu repräsentieren. -Here is an example of an `input` element with a `name` attribute: +Hier ist ein Beispiel für ein `input`-Element mit einem `name`-Attribut: ```html diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md index 6a633d9c5e7..42c3b075083 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md @@ -6,7 +6,7 @@ dashedName: step-8 --- # --description-- -The `vh` unit stands for viewport height, and is equal to 1% of the `height` of the viewport. Dies macht es relativ zur Höhe des Viewports. +Die `vh`-Einheit steht für die Höhe des Ansichtsfensters (viewport height) und bezieht sich auf 1% der `height` des Ansichtsfensters. Dies macht es relativ zur Höhe des Viewports. Jetzt ist es an der Zeit, das Projekt mit etwas CSS aufzupeppen. Beginne, indem du dem `body` eine `width` von `100%` und eine `height` von `100vh` zuweist. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md index a2cbdbcf44c..b93468d9fba 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md @@ -9,7 +9,7 @@ dashedName: step-28 Derzeit können die Benutzer das Formular abschicken, ohne die Radioeingaben zu überprüfen. Obwohl Du zuvor das `required` Attribut verwendet hast, um anzugeben, dass eine Eingabe erforderlich ist es funktioniert in diesem Fall nicht, da das Hinzufügen von `required` zu beiden Eingaben den Benutzern die falschen Informationen übermitteln wird. -To solve this, you can provide context of what is needed by adding a `legend` element with text `Account type (required)` before the `label` elements within the second `fieldset`. Füge dann das `checked`-Attribut zur `Personal`-Eingabe hinzu, um sicherzustellen, dass das Formular mit den erforderlichen Daten übermittelt wird. +Um dieses Problem zu lösen, kannst du den Kontext für das, was benötigt wird, ergänzen, indem du ein `legend`-Element mit dem Text `Account type (required)` vor den `label`-Elementen im zweiten `fieldset` hinzufügst. Füge dann das `checked`-Attribut zur `Personal`-Eingabe hinzu, um sicherzustellen, dass das Formular mit den erforderlichen Daten übermittelt wird. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md index c6be696f65f..8f1545f636d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md @@ -7,7 +7,7 @@ dashedName: step-31 # --description-- -Add the text `I accept the terms and conditions` immediately after the `input` element in the newly added `label`. Verknüpfe dann den Text `terms and conditions` mit der folgenden Seite: +Füge den Text `I accept the terms and conditions` direkt nach dem `input`-Element in das neu hinzugefügte `label` ein. Verknüpfe dann den Text `terms and conditions` mit der folgenden Seite: ```md https://www.freecodecamp.org/news/terms-of-service/ @@ -15,7 +15,7 @@ https://www.freecodecamp.org/news/terms-of-service/ # --hints-- -You should add `I accept the terms and conditions` text to the `label` following the third `fieldset`. +Du solltest den Text `I accept the terms and conditions` in das `label` neben dem dritten `fieldset` hinzufügen. ```js assert.equal(document.querySelector('fieldset:nth-child(3) + label')?.innerText.trim(), 'I accept the terms and conditions'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md index 3748b2997aa..d2e6872f1c3 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md @@ -9,7 +9,7 @@ dashedName: step-42 Bei der Übermittlung von Formularen ist es sinnvoll und eine bewährte Praxis, jedes übermittelbare Element mit einem `name`-Attribut zu versehen. Dieses Attribut wird verwendet, um das Element in der Formularübermittlung zu identifizieren. -Except for the two `radio` inputs (which you have already named), give each submittable element a unique `name` attribute of your choosing. +Gib jedem einreichbaren Element (außer den zwei `radio`-Inputs, die du bereits benannt hast) ein eindeutiges `name`-Attribut deiner Wahl. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md index 8301b3fff1f..d492be32746 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md @@ -7,7 +7,7 @@ dashedName: step-30 # --description-- -You need to confirm that the user has read the terms and conditions. +Du musst bestätigen, dass der Nutzer die AGB's gelesen hat. Füge ein `label`-Element hinzu. Füge innerhalb des neu erstellten `label`-Elements ein `input`-Element hinzu und setze das `type`-Attribut auf `checkbox`. Stelle dieses `input`-Element auf `required` ein, so dass Nutzer sich nicht registrieren können, ohne die Nutzungsbedingung zu akzeptieren. @@ -15,13 +15,13 @@ Füge ein `id`- und `for`-Attribut mit dem Wert `terms-and-conditions` bei den E # --hints-- -You should add an `label` after the third `fieldset` element. +Du solltest nach dem dritten `fieldset`-Element ein `label` hinzufügen. ```js assert.exists(document.querySelector('fieldset:nth-child(3) + label')); ``` -You should add an `input` to the `label` element. +Du solltest zu dem `label`-Element ein `input`-Element hinzufügen. ```js assert.exists(document.querySelector('fieldset:nth-child(3) + label > input')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md index 71c25f57b1a..54c0f738653 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md @@ -7,7 +7,7 @@ dashedName: step-8 # --description-- -To see the `.cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`. +Damit du das `.cat-head`-Element sehen kannst, gib ihm einen linearen Farbverlauf mit `#5e5e5e` bei `85%` und `#45454f` bei `100%`. Vielleicht fällt dir der Unterschied zwischen den beiden Farben nicht auf, aber er ist dennoch vorhanden. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md index baebc219a98..15434d4c7d4 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md @@ -18,19 +18,19 @@ Weise `.cat-head` eine `position`-Eigenschaft mit dem Wert `static` zu und setze # --hints-- -Dein `.cat-head`-Selektor sollte eine `position`-Eigenschaft auf `static` gesetzt haben. Make sure you add a semicolon. +Dein `.cat-head`-Selektor sollte eine `position`-Eigenschaft auf `static` gesetzt haben. Vergiss das Semikolon nicht. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'static') ``` -Dein `.cat-head`-Selektor sollte eine `top`-Eigenschaft auf `100px` gesetzt haben. Make sure you add a semicolon. +Dein `.cat-head`-Selektor sollte eine `top`-Eigenschaft auf `100px` gesetzt haben. Vergiss das Semikolon nicht. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') ``` -Dein `.cat-head`-Selektor sollte eine `left`-Eigenschaft auf `100px` gesetzt haben. Make sure you add a semicolon. +Dein `.cat-head`-Selektor sollte eine `left`-Eigenschaft auf `100px` gesetzt haben. Vergiss das Semikolon nicht. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md index 07a986b1ace..ae13ba7b3e2 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md @@ -11,7 +11,7 @@ Erstelle innerhalb deines `.cat-ears`-Elements zwei `div`-Elemente mit der Klass # --hints-- -You should not change the existing `div` element with the class `cat-ears`. +Du solltest das vorhandene `div`-Element mit der `cat-ears`-Klasse nicht verändern. ```js assert(document.querySelectorAll('div.cat-ears').length === 1); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md index 6245402518e..364781a22e4 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md @@ -7,41 +7,41 @@ dashedName: step-21 # --description-- -Create two `div` elements, the first inside the `.cat-left-ear` element with a class of `cat-left-inner-ear`, and the second inside the `.cat-right-ear` element with a class of `cat-right-inner-ear`. +Erstelle zwei `div`-Elemente, das erste innerhalb des `cat-left-ear`-Elements und gib ihm die Klasse `cat-left-inner-ear`. Füge das zweite `div`-Element innerhalb des `cat-right-ear`-Elements und gib ihm die Klasse `cat-right-inner-ear`. # --hints-- -You should not change the existing `div` element with the class `cat-left-ear`. +Du solltest dein vorhandenes `div`-Element mit der Klasse `cat-left-ear` nicht verändern. ```js assert(document.querySelectorAll('div.cat-left-ear').length === 1); ``` -You should not change the existing `div` element with the class `cat-right-ear`. +Du solltest dein vorhandenes `div`-Element mit der Klasse `cat-right-ear` nicht verändern. ```js assert(document.querySelectorAll('div.cat-right-ear').length === 1); ``` -You should have one `div` element inside your `.cat-left-ear` element. +Du solltest ein `div`-Element innerhalb deines `.cat-left-ear`-Elementes haben. ```js assert(document.querySelectorAll('.cat-left-ear div').length === 1); ``` -You should have one `div` element inside your `.cat-right-ear` element. +Du solltest ein `div`- "rock"; +assert.match(playGame(), /You (win|lose) the game!/); +``` + +# --seed-- + +## --seed-contents-- + +```js +const hand = ['rock', 'paper', 'scissor']; +``` + +```html + + + + + +``` + +# --solutions-- + +```html + + + + + +``` + +```js +const hand = ['rock', 'paper', 'scissors']; + + +let computerScore = 0; +let humanScore = 0; + +const getComputerChoice = () => { + return hand[Math.floor(Math.random() * hand.length)]; +} + +const getHumanChoice = () => { + return prompt(); +} + +const playRound = (humanChoice, computerChoice) => { + humanChoice = humanChoice.toLowerCase() + + const tie = "It's a tie!" + const win = `You win! ${humanChoice} beats ${computerChoice}` + const lose = `You lose! ${computerChoice} beats ${humanChoice}` + + + if (humanChoice == 'rock') { + if (computerChoice == 'rock') { + computerScore++; + humanScore++; + return tie; + } else if (computerChoice == 'paper') { + computerScore++; + return lose; + } else { + humanScore++; + return win; + } + } else if (humanChoice == 'paper') { + if (computerChoice == 'rock') { + humanScore++; + return win; + } else if (computerChoice == 'paper') { + computerScore++; + humanScore++; + return tie; + } else { + computerScore++; + return lose; + } + } else if (humanChoice == 'scissors') { + if (computerChoice == 'rock') { + computerScore++; + return lose; + } else if (computerChoice == 'paper') { + humanScore++; + return win; + } else { + computerScore++; + humanScore++; + return tie; + } + } +} + +const playGame = () => { + for(let i = 0; i < 3; i++){ + playRound(getHumanChoice(), getComputerChoice()) + } + + return humanScore > computerScore ? "You win the game!" : "You lose the game!" +} + +``` + diff --git a/curriculum/challenges/german/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/german/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md new file mode 100644 index 00000000000..28af96694df --- /dev/null +++ b/curriculum/challenges/german/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md @@ -0,0 +1,20 @@ +--- +id: 645147516c245de4d11eb7ba +title: Front End Development Certification Exam +challengeType: 17 +dashedName: front-end-development-certification-exam +--- + +# --description-- + +Here are some rules: + +- click start + +# --instructions-- + +# --hints-- + +# --seed-- + +# --solutions-- diff --git a/curriculum/challenges/german/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/german/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md new file mode 100644 index 00000000000..2b1a9d0a9de --- /dev/null +++ b/curriculum/challenges/german/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md @@ -0,0 +1,28 @@ +--- +id: 66731cd027ef3acb155669f5 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +step 1 instructions + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/italian/00-certifications/front-end-development-certification/front-end-development.yml new file mode 100644 index 00000000000..25d1e081292 --- /dev/null +++ b/curriculum/challenges/italian/00-certifications/front-end-development-certification/front-end-development.yml @@ -0,0 +1,10 @@ +--- +id: 64514fda6c245de4d11eb7bb +title: Front End Development Certification +certification: front-end-development +challengeType: 7 +isPrivate: true +tests: + - + id: 645147516c245de4d11eb7ba + title: Front End Development Certification Exam diff --git a/curriculum/challenges/italian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/italian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md index b8b21f60736..43de4048cc6 100644 --- a/curriculum/challenges/italian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/italian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md @@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins # --description-- -In Sass, un mixin è un gruppo di dichiarazioni CSS che possono essere riutilizzate in tutto il foglio di stile. - -Ci vuole tempo prima che le nuove funzionalità di CSS siano completamente adottate e utilizzabili in tutti i browser. Poiché le funzionalità vengono inizialmente aggiunte ai singoli browser, le regole CSS che le utilizzano potrebbero avere bisogno di prefissi del fornitore. Considera `box-shadow`: +In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule. ```scss -div { - -webkit-box-shadow: 0px 0px 4px #fff; - -moz-box-shadow: 0px 0px 4px #fff; - -ms-box-shadow: 0px 0px 4px #fff; - box-shadow: 0px 0px 4px #fff; +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +nav ul { + @include reset-list; } ``` -Ci sarebbe molto da digitare per riscrivere questa regola per tutti gli elementi che hanno una `box-shadow`, o per modificare ogni valore per testare effetti differenti. I mixin sono come funzioni per il CSS. Ecco come scriverne uno: +Compiles to: -```scss -@mixin box-shadow($x, $y, $blur, $c){ - -webkit-box-shadow: $x $y $blur $c; - -moz-box-shadow: $x $y $blur $c; - -ms-box-shadow: $x $y $blur $c; - box-shadow: $x $y $blur $c; +```css +nav ul { + margin: 0; + padding: 0; + list-style: none; } ``` -La definizione inizia con `@mixin` seguito da un nome personalizzato. I parametri ( `$x`, `$y`, `$blur`e `$c` nell'esempio sopra) sono opzionali. Ora ogni volta che è necessaria una regola `box-shadow`, invece di dover digitare tutti i prefissi dei venditori dovremo scrivere una singola linea che chiama il mixin. Un mixin è chiamato con la direttiva `@include`: +Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin. ```scss -div { - @include box-shadow(0px, 0px, 4px, #fff); +@mixin prose($font-size, $spacing) { + font-size: $font-size; + margin: 0; + margin-block-end: $spacing; +} + +p { + @include prose(1.25rem, 1rem); +} + +h2 { + @include prose(2.4rem, 1.5rem); +} +``` + +You can make arguments optional by giving the parameters default values. + +```scss +@mixin text-color($color: black) { + color: $color; +} + +p { + @include text-color(); /* color: black */ +} + +nav a { + @include text-color(orange); } ``` # --instructions-- -Scrivi un mixin per `border-radius` e dagli un parametro `$radius`. Dovrebbe usare tutti i prefissi del fornitore dell'esempio. Quindi usa il mixin `border-radius` per dare all'elemento `#awesome` un raggio di curvatura di `15px`. +Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`. + +Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`. # --hints-- -Il tuo codice dovrebbe dichiarare un mixin chiamato `border-radius` che ha un parametro denominato `$radius`. +You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`. ```js -assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); +assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi); ``` -Il tuo codice dovrebbe includere il prefisso del fornitore `-webkit-border-radius` che utilizza il parametro `$radius`. +Your mixin should include a `width` property that uses the `$w` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi); ``` -Il tuo codice dovrebbe includere il prefisso del fornitore `-moz-border-radius` che utilizza il parametro `$radius`. +Your mixin should include a `height` property that uses the `$h` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi); ``` -Il tuo codice dovrebbe includere il prefisso del fornitore `-ms-border-radius` che utilizza il parametro `$radius`. +Your mixin should include a `background-color` property that uses the `$bg-color` parameter. ```js -assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi)); +assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi); ``` -Il tuo codice dovrebbe includere la regola generale `border-radius` che utilizza il parametro `$radius`. +You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length == - 4 -); +assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi); ``` -Il tuo codice dovrebbe chiamare il `border-radius mixin` usando la parola chiave `@include`, con un raggio di `15px`. +You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`. ```js -assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); +assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi); +``` + +You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`. + +```js +assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi); ``` # --seed-- @@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); ```html -
+
+
+
``` # --solutions-- ```html -
+
+
+
``` diff --git a/curriculum/challenges/italian/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/italian/09-information-security/information-security-projects/stock-price-checker.md index e496ae0244f..8edcff8dc20 100644 --- a/curriculum/challenges/italian/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/italian/09-information-security/information-security-projects/stock-price-checker.md @@ -20,7 +20,7 @@ Lavorare su questo progetto ti porterà a scrivere il tuo codice utilizzando uno # --instructions-- -1. Imposta `NODE_ENV` a `test` senza virgolette e imposta `DB` alla tua stringa di connessione a MongoDB +1. Set the `NODE_ENV` environment variable to `test`, without quotes 2. Completa il progetto in `routes/api.js` o creando un handler/controller 3. Aggiungerai tutte le funzionalità di sicurezza a `server.js` 4. Creerai tutti i test funzionali in `tests/2_functional-tests.js` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md index 5d7f7b70610..856e4aa4044 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -Ora è necessario collegare il file `styles.css` in modo che gli stili vengano applicati di nuovo. Annida un elemento `link` autoconcludente nell'elemento `head`. Dagli un attributo `rel` con valore di `stylesheet` e un attributo `href` con valore di `styles.css`. +Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`. # --hints-- diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md index 1cf20a868b1..ae39386a0ef 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md @@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID **User Stories:** 1. You should have an `input` element with an `id` of `"search-input"` -1. You should have a `button` element with an `id` of `"search-button` +1. You should have a `button` element with an `id` of `"search-button"` 1. You should have an element with an `id` of `"pokemon-name"` 1. You should have an element with an `id` of `"pokemon-id"` 1. You should have an element with an `id` of `"weight"` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md index 11b801e653e..09d8d0d1fc1 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -Ora devi modificare il testo mostrato. Change the `innerText` property of the `text` to be `"You enter the store."`. +Ora devi modificare il testo mostrato. Change the `innerText` property of the `text` variable to be `"You enter the store."`. # --hints-- @@ -153,6 +153,7 @@ function goStore() { button1.onclick = buyHealth; button2.onclick = buyWeapon; button3.onclick = goTown; + } --fcc-editable-region-- diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md index 7e389b0a832..b0e53680056 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md @@ -17,7 +17,7 @@ You should call the `.push()` method of `rows` in your `else` block. assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/); ``` -You should pass a `padRow()` call as the argument for your `.unshift()` method. +You should pass a `padRow()` call as the argument for your `.push()` method. ```js assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md index 95817266274..15946da26ef 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md @@ -23,10 +23,16 @@ Add a `case` where the value is `"yyyy-mm-dd"`. Inside the `case`, set the text # --hints-- -You should add a `case` where the condition is `"yyyy-mm-dd"`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`. +You should add a `case` with the value `"yyyy-mm-dd"`. ```js -assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/); +``` + +You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case. + +```js +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/); ``` # --seed-- diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md index ec2be7c5c0b..f90f4e48115 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md @@ -13,16 +13,22 @@ Also, make sure to include a `break` statement to terminate the `switch` stateme # --hints-- -You should add a `case` where the condition is `"mm-dd-yyyy-h-mm"`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals. +You should add a `case` with the value `"mm-dd-yyyy-h-mm"`. ```js -assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/); ``` -You should include a `break` statement within the `case` after your logic. +You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case. ```js -assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/); +``` + +You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic. + +```js +assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/); ``` # --seed-- diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md index eb5bd1f1e0e..e71983853d1 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md @@ -31,10 +31,16 @@ And with that, your date formatter is complete! You can now format the current d # --hints-- -You should use the `default` case to set the `textContent` property of `currentDateParagraph` to the value of `formattedDate`. +You should have a `default` case after the existing cases. ```js -assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /default\s*:\s*/) +``` + +In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`. + +```js +assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g); ``` # --seed-- diff --git a/curriculum/challenges/italian/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/italian/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md new file mode 100644 index 00000000000..d31a63c9495 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md @@ -0,0 +1,261 @@ +--- +id: 66629f407d679d3105e8317f +title: Build a Rock Paper Scissors Game +challengeType: 14 +dashedName: top-build-a-rock-paper-scissors-game +--- + +# --description-- +Your game will be played against the computer. You will write a function that randomly returns `"rock"`, `"paper"` or `"scissors"`. + +You do not need to worry about the front-end part of the game. You will only write the logic for the game. Open the `script.js` and start following the instructions. + +**User stories:** + +1. You should have a function named `getComputerChoice`. + +1. Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +**Hint:** The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. + +Your game will be played by a human player. You will write a function that takes the user's choice and returns it. + +1. Create a function named `getHumanChoice`. + +1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs. + +**Hint:** Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user’s input. + +Your game will keep track of the player's score. You will write variables to keep track of the player's score. + +1. Create two new variables named `humanScore` and `computerScore` in the global scope. + +1. Initialize those variables with the value of `0`. + +Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement. + +1. Create a new function named `playRound`. + +1. Define two parameters for `playRound`. Parameter one `humanChoice` and parameter two `computerChoice`. Use these two parameters to take the human and computer choices as arguments. + +1. Make your function’s `humanChoice` parameter case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +1. Write the code for your `playRound` function that returns a string value representing the round winner. + +- If it is a tie, it should return `"It's a tie!"`. + +- If the player wins, it should return `"You win! [player choice] beats [computer choice]"`. + +- If the computer wins, it should return `"You lose! [computer choice] beats [player choice]"`. + +1. Increment the `humanScore` or `computerScore` variable based on the round winner. + +Your game will play 3 rounds. You will write a function named `playGame` that calls `playRound` to play 3 rounds, keeps track of the scores, and declares a winner at the end. + +1. Create a new function named `playGame`. + +1. Create a loop that plays 3 rounds and calls the `playRound` function each time with the human's choice and the computer's choice functions as arguments. + +1. At the end of the game, return the winner of the game based on who won the most rounds. + +- If the human player wins more rounds than the computer player, return a message that says `"You win the game!"`. + +- If the computer player wins more rounds than the human player, return a message that says `"You lose the game!"`. + +# --hints-- + +You should have a function called `getComputerChoice` + +```js +assert.isFunction(getComputerChoice); +``` + +Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +```js +const counts = {} +for (let i = 0; i < 100; i++) { + const result = getComputerChoice(); + counts[result] = (counts[result] ?? 0) + 1; +} +assert.lengthOf(Object.keys(counts), 3); +assert.include(Object.keys(counts), "rock"); +assert.include(Object.keys(counts), "paper"); +assert.include(Object.keys(counts), "scissors"); +``` + +You should have a function called `getHumanChoice` + +```js +assert.isFunction(getHumanChoice); +``` + +You should have two variables named `humanScore` and `computerScore` in the global scope. + +```js +assert.exists(humanScore); +assert.exists(computerScore); +``` + +You should have a function called `playRound` + +```js +assert.isFunction(playRound); +``` + +Your `playRound` function should take the human and computer player choices as arguments with the parameters `humanChoice` and `computerChoice`. + +```js +assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/); +``` + +Your `playRound` function should be case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +```js +assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/); +``` + +Your `playRound` function should return the string `"It's a tie!"` if the human and computer choices are the same. + +```js +assert.equal(playRound("rock", "rock"), "It's a tie!"); +``` + +Your `playRound` function should return the string `"You win! [player choice] beats [computer choice]"` if the player wins. + +```js +assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors"); +``` + +Your `playRound` function should return the string `"You lose! [computer choice] beats [player choice]"` if the computer wins. + +```js +assert.equal(playRound("rock", "paper"), "You lose! paper beats rock"); +``` + +Your `playRound` function should increment the `humanScore` or `computerScore` variable based on the round winner. + +```js +humanScore = 0; +computerScore = 0; +playRound("rock", "scissors"); +assert.equal(humanScore, 1); +``` + +You should have a function called `playGame`. + +```js +assert.isFunction(playGame); +``` + +You should use a loop to play 3 rounds. + +```js +assert.match(playGame.toString(), /\bfor\s*\(/); +``` + +You should return the winner of the game based on who won the most rounds. + +```js +window.prompt = () => "rock"; +assert.match(playGame(), /You (win|lose) the game!/); +``` + +# --seed-- + +## --seed-contents-- + +```js +const hand = ['rock', 'paper', 'scissor']; +``` + +```html + + + + + +``` + +# --solutions-- + +```html + + + + + +``` + +```js +const hand = ['rock', 'paper', 'scissors']; + + +let computerScore = 0; +let humanScore = 0; + +const getComputerChoice = () => { + return hand[Math.floor(Math.random() * hand.length)]; +} + +const getHumanChoice = () => { + return prompt(); +} + +const playRound = (humanChoice, computerChoice) => { + humanChoice = humanChoice.toLowerCase() + + const tie = "It's a tie!" + const win = `You win! ${humanChoice} beats ${computerChoice}` + const lose = `You lose! ${computerChoice} beats ${humanChoice}` + + + if (humanChoice == 'rock') { + if (computerChoice == 'rock') { + computerScore++; + humanScore++; + return tie; + } else if (computerChoice == 'paper') { + computerScore++; + return lose; + } else { + humanScore++; + return win; + } + } else if (humanChoice == 'paper') { + if (computerChoice == 'rock') { + humanScore++; + return win; + } else if (computerChoice == 'paper') { + computerScore++; + humanScore++; + return tie; + } else { + computerScore++; + return lose; + } + } else if (humanChoice == 'scissors') { + if (computerChoice == 'rock') { + computerScore++; + return lose; + } else if (computerChoice == 'paper') { + humanScore++; + return win; + } else { + computerScore++; + humanScore++; + return tie; + } + } +} + +const playGame = () => { + for(let i = 0; i < 3; i++){ + playRound(getHumanChoice(), getComputerChoice()) + } + + return humanScore > computerScore ? "You win the game!" : "You lose the game!" +} + +``` + diff --git a/curriculum/challenges/italian/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/italian/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md new file mode 100644 index 00000000000..28af96694df --- /dev/null +++ b/curriculum/challenges/italian/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md @@ -0,0 +1,20 @@ +--- +id: 645147516c245de4d11eb7ba +title: Front End Development Certification Exam +challengeType: 17 +dashedName: front-end-development-certification-exam +--- + +# --description-- + +Here are some rules: + +- click start + +# --instructions-- + +# --hints-- + +# --seed-- + +# --solutions-- diff --git a/curriculum/challenges/italian/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/italian/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md new file mode 100644 index 00000000000..2b1a9d0a9de --- /dev/null +++ b/curriculum/challenges/italian/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md @@ -0,0 +1,28 @@ +--- +id: 66731cd027ef3acb155669f5 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +step 1 instructions + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/japanese/00-certifications/front-end-development-certification/front-end-development.yml new file mode 100644 index 00000000000..25d1e081292 --- /dev/null +++ b/curriculum/challenges/japanese/00-certifications/front-end-development-certification/front-end-development.yml @@ -0,0 +1,10 @@ +--- +id: 64514fda6c245de4d11eb7bb +title: Front End Development Certification +certification: front-end-development +challengeType: 7 +isPrivate: true +tests: + - + id: 645147516c245de4d11eb7ba + title: Front End Development Certification Exam diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/japanese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md index c909e36f69f..d8a13c09ed4 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md @@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins # --description-- -Sass のミックスインは、スタイルシート全体で再利用できる CSS 宣言のグループです。 - -新しい CSS 機能ほど、完全に採用されてすべてのブラウザーで使用できるようになるまでに時間がかかります。 機能がブラウザーに追加されるまでの間、それらの機能を使用している CSS ルールではベンダープレフィックスが必要になる場合があります。 たとえば `box-shadow` を考えてみましょう。 +In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule. ```scss -div { - -webkit-box-shadow: 0px 0px 4px #fff; - -moz-box-shadow: 0px 0px 4px #fff; - -ms-box-shadow: 0px 0px 4px #fff; - box-shadow: 0px 0px 4px #fff; +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +nav ul { + @include reset-list; } ``` -`box-shadow` のあるすべての要素でこのルールを書き直したり、それぞれの値を変えてさまざまな効果をテストしたりするには、たくさんの入力が必要になります。 ミックスインは CSS 版の関数のようなもので、 次のように記述します。 +Compiles to: -```scss -@mixin box-shadow($x, $y, $blur, $c){ - -webkit-box-shadow: $x $y $blur $c; - -moz-box-shadow: $x $y $blur $c; - -ms-box-shadow: $x $y $blur $c; - box-shadow: $x $y $blur $c; +```css +nav ul { + margin: 0; + padding: 0; + list-style: none; } ``` -定義は `@mixin` で始まり、その後にカスタム名を付けます。 パラメーター (前の例では `$x`、`$y`、`$blur`、`$c`) は任意です。 これで、`box-shadow` ルールが必要になったときはいつでも、ミックスインを呼び出す 1 行だけで済み、すべてのベンダープレフィックスを入力する必要がなくなります。 ミックスインは `@include` ディレクティブを使用して呼び出します。 +Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin. ```scss -div { - @include box-shadow(0px, 0px, 4px, #fff); +@mixin prose($font-size, $spacing) { + font-size: $font-size; + margin: 0; + margin-block-end: $spacing; +} + +p { + @include prose(1.25rem, 1rem); +} + +h2 { + @include prose(2.4rem, 1.5rem); +} +``` + +You can make arguments optional by giving the parameters default values. + +```scss +@mixin text-color($color: black) { + color: $color; +} + +p { + @include text-color(); /* color: black */ +} + +nav a { + @include text-color(orange); } ``` # --instructions-- -`border-radius` のミックスインを記述して、`$radius` パラメーターを設定してください。 前述の例にあるすべてのベンダープレフィックスを使用してください。 そして、`border-radius` ミックスインを使用して、`#awesome` 要素に `15px` の境界線半径を設定してください。 +Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`. + +Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`. # --hints-- -`$radius` というパラメーターを持つ `border-radius` というミックスインをコードで宣言します。 +You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`. ```js -assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); +assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi); ``` -`$radius` パラメーターを使用する `-webkit-border-radius` ベンダープレフィックスをコードに含めます。 +Your mixin should include a `width` property that uses the `$w` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi); ``` -`$radius` パラメーターを使用する `-moz-border-radius` ベンダープレフィックスをコードに含めます。 +Your mixin should include a `height` property that uses the `$h` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi); ``` -`$radius` パラメーターを使用する `-ms-border-radius` ベンダープレフィックスをコードに含めます。 +Your mixin should include a `background-color` property that uses the `$bg-color` parameter. ```js -assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi)); +assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi); ``` -`$radius` パラメーターを使用する汎用の `border-radius` ルールをコードに含めます。 +You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length == - 4 -); +assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi); ``` -`@include` キーワードを使用して `border-radius mixin` を呼び出し、`15px` に設定します。 +You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`. ```js -assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); +assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi); +``` + +You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`. + +```js +assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi); ``` # --seed-- @@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); ```html -
+
+
+
``` # --solutions-- ```html -
+
+
+
``` diff --git a/curriculum/challenges/japanese/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/japanese/09-information-security/information-security-projects/stock-price-checker.md index ee40a904722..7311ca62770 100644 --- a/curriculum/challenges/japanese/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/japanese/09-information-security/information-security-projects/stock-price-checker.md @@ -20,7 +20,7 @@ dashedName: stock-price-checker # --instructions-- -1. `NODE_ENV` を引用符なしの `test` に設定し、`DB` を MongoDB 接続文字列に設定します。 +1. Set the `NODE_ENV` environment variable to `test`, without quotes 2. `routes/api.js` でプロジェクトを完成させるか、ハンドラー/コントローラーを作成します。 3. `server.js` にセキュリティ機能を追加します。 4. `tests/2_functional-tests.js` にすべての機能テストを作成します。 diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index 93b3f74f6b0..5ad214c4270 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -19,7 +19,7 @@ img { 上記の例では、ビューポートの幅が 1000 ピクセル未満の場合には、画像の幅は 250px となります。 ビューポートの幅が 1000 ピクセルより大きくなると、画像の幅は 25vw となります。 なぜかというと、25vw はビューポートの幅の 25% だからです。 -Scale the image using its `id` as a selector, and setting the `width` to be the maximum of `10rem` or `18vw`. +画像の `id` をセレクターとして使用して、画像を拡大縮小させましょう。`width` には `10rem` または `18vw` のうち、大きい方の値が使用されるように設定してください。 # --hints-- @@ -29,7 +29,7 @@ Scale the image using its `id` as a selector, and setting the `width` to be the assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -You should give the `img` a `width` of `max(10rem, 18vw)`. +`img` の `width` を `max(10rem, 18vw)` に設定する必要があります。 ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(10rem, 18vw)'); diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md index cf28d3091ca..b3366fa863f 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -スタイルを再度適用するためには `styles.css` ファイルをリンクする必要があります。 自己終了要素の `link` を 1 つ `head` 要素内にネストしてください。 その `rel` 属性を `stylesheet` に、`href` 属性を `styles.css` に設定してください。 +Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`. # --hints-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md index 17ed9904429..40bf7ce1685 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md @@ -7,7 +7,7 @@ dashedName: step-31 # --description-- -Add the text `I accept the terms and conditions` immediately after the `input` element in the newly added `label`. そして、テキストの `terms and conditions` の部分を次の場所へリンクさせてください: +新しく追加した `label` 要素内の、`input` 要素の直後に、`I accept the terms and conditions` というテキストを追加してください。 そして、テキストの `terms and conditions` の部分を次の場所へリンクさせてください: ```md https://www.freecodecamp.org/news/terms-of-service/ @@ -15,7 +15,7 @@ https://www.freecodecamp.org/news/terms-of-service/ # --hints-- -You should add `I accept the terms and conditions` text to the `label` following the third `fieldset`. +3 つ目の `fieldset` の後にある `label` 要素内に、`I accept the terms and conditions` というテキストを追加してください。 ```js assert.equal(document.querySelector('fieldset:nth-child(3) + label')?.innerText.trim(), 'I accept the terms and conditions'); diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md index 3d4bef099ce..665fbf6f692 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md @@ -18,19 +18,19 @@ CSS の位置指定を使うと、要素をブラウザー内でどのように # --hints-- -`.cat-head` セレクターの `position` プロパティを `static` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `position` プロパティを `static` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'static') ``` -`.cat-head` セレクターの `top` プロパティを `100px` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `top` プロパティを `100px` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') ``` -`.cat-head` セレクターの `left` プロパティを `100px` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `left` プロパティを `100px` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md index 4892426c918..739a6fc2bdc 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md @@ -11,7 +11,7 @@ position を `absolute` に、`top` を `-26px` に、`left` を `-31px` に設 # --hints-- -`.cat-left-ear` セレクターの `position` プロパティを `absolute` に設定してください。 Don't forget to add a semicolon. +`.cat-left-ear` セレクターの `position` プロパティを `absolute` に設定してください。 セミコロンを忘れないようにしましょう。 ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.position === 'absolute') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md index c72b683749c..dbdb38245ea 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md @@ -15,7 +15,7 @@ dashedName: step-25 # --hints-- -`.cat-left-ear` の要素の `transform` プロパティを `rotate(-45deg)`に設定してください。 Don't forget to add a semicolon. +`.cat-left-ear` の要素の `transform` プロパティを `rotate(-45deg)`に設定してください。 セミコロンを忘れないようにしましょう。 ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.transform === 'rotate(-45deg)') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md index 1c861899440..df610a9a39f 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md @@ -11,7 +11,7 @@ dashedName: step-27 # --hints-- -`.cat-right-ear` セレクターの `position` プロパティを `absolute` に設定してください。 Don't forget to add a semicolon. +`.cat-right-ear` セレクターの `position` プロパティを `absolute` に設定してください。 セミコロンを忘れないようにしましょう。 ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.position === 'absolute') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md index 7a70bc5849a..fbbcc5c56a1 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md @@ -11,7 +11,7 @@ dashedName: step-28 # --hints-- -`.cat-right-ear` の要素の `transform` プロパティを `rotate(45deg)` に設定してください。 Don't forget to add a semicolon. +`.cat-right-ear` の要素の `transform` プロパティを `rotate(45deg)` に設定してください。 セミコロンを忘れないようにしましょう。 ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.transform === 'rotate(45deg)') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md index eb6f8a34456..999998d5213 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md @@ -11,13 +11,13 @@ dashedName: step-29 # --hints-- -`.cat-right-ear` セレクターの `border-top-left-radius` プロパティを `90px` に設定してください。 Don't forget to add a semicolon. +`.cat-right-ear` セレクターの `border-top-left-radius` プロパティを `90px` に設定してください。 セミコロンを忘れないようにしましょう。 ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopLeftRadius === '90px') ``` -`.cat-right-ear` セレクターの `border-top-right-radius` プロパティを `10px` に設定してください。 Don't forget to add a semicolon. +`.cat-right-ear` セレクターの `border-top-right-radius` プロパティを `10px` に設定してください。 セミコロンを忘れないようにしましょう。 ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopRightRadius === '10px') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md index deee127b23f..6a3891cd20e 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md @@ -15,7 +15,7 @@ dashedName: step-30 # --hints-- -`.cat-left-ear` セレクターの `z-index` を `-1` に設定してください。 Don't forget to add a semicolon. +`.cat-left-ear` セレクターの `z-index` を `-1` に設定してください。 セミコロンを忘れないようにしましょう。 ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '-1') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md index 08386f134ea..970ba878939 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md @@ -13,7 +13,7 @@ dashedName: step-31 # --hints-- -`.cat-left-ear` セレクターの `z-index` を `1` に設定してください。 Don't forget to add a semicolon. +`.cat-left-ear` セレクターの `z-index` を `1` に設定してください。 セミコロンを忘れないようにしましょう。 ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '1') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md index 91644547589..ffbdaa97c55 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md @@ -11,7 +11,7 @@ dashedName: step-32 # --hints-- -`.cat-right-ear` セレクターの `z-index` を `1` に設定してください。 Don't forget to add a semicolon. +`.cat-right-ear` セレクターの `z-index` を `1` に設定してください。 セミコロンを忘れないようにしましょう。 ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.zIndex === '1') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md index fa8abdd0b4e..5ccc7ada3b9 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md @@ -7,7 +7,7 @@ dashedName: step-43 # --description-- -左目が目の形に見えるように、境界の角の半径 (border radius) を `60%` に設定しましょう。 Also, using the `transform` property, rotate it at `25` degrees. +左目が目の形に見えるように、境界の角の半径 (border radius) を `60%` に設定しましょう。 加えて、`transform` プロパティを使用して `25` 度回転させてください。 # --hints-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md index 7a2d6301e12..64c7e9d455b 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md @@ -7,7 +7,7 @@ dashedName: step-46 # --description-- -右目が目の形に見えるように、境界の角の半径 (border radius) を `60%` に設定しましょう。 Also, using the `transform` property, rotate it at `-25` degrees. +右目が目の形に見えるように、境界の角の半径 (border radius) を `60%` に設定しましょう。 加えて、`transform` プロパティを使用して `-25` 度回転させてください。 # --hints-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md index db6df3f8be6..e8d24dec4a8 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md @@ -15,19 +15,19 @@ dashedName: step-10 # --hints-- -`.cat-head` セレクターの `position` プロパティを `relative` に設定する必要があります。 Make sure you add a semicolon. +`.cat-head` セレクターの `position` プロパティを `relative` に設定する必要があります。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'relative') ``` -`.cat-head` セレクターの `top` プロパティを `100px` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `top` プロパティを `100px` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') ``` -`.cat-head` セレクターの `left` プロパティを `100px` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `left` プロパティを `100px` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md index b7120f8992c..a4141201eed 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md @@ -15,20 +15,20 @@ dashedName: step-11 # --hints-- -`.cat-head` セレクターの `position` プロパティを `absolute` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `position` プロパティを `absolute` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') ``` -`.cat-head` セレクターの `top` プロパティを、単位が `px` の数値に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `top` プロパティを、単位が `px` の数値に設定してください。 必ずセミコロンを追加してください。 ```js // assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '300px') assert.match(code, /top:\s*\d{1,4}px;/) ``` -`.cat-head` セレクターの `left` プロパティを、単位が `px` の数値に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `left` プロパティを、単位が `px` の数値に設定してください。 必ずセミコロンを追加してください。 ```js // assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '400px') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md index a2a19e30135..f457fa74ba9 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md @@ -13,19 +13,19 @@ dashedName: step-14 # --hints-- -`.cat-head` セレクターの `position` プロパティを `fixed` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `position` プロパティを `fixed` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'fixed') ``` -`.cat-head` セレクターの `top` プロパティは `100px` に設定されている必要があります。 Make sure you add a semicolon. +`.cat-head` セレクターの `top` プロパティは `100px` に設定されている必要があります。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') ``` -`.cat-head` セレクターの `left` プロパティは `100px` に設定されている必要があります。 Make sure you add a semicolon. +`.cat-head` セレクターの `left` プロパティは `100px` に設定されている必要があります。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md index 2f98f74c6ff..8f91b5645c3 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md @@ -15,13 +15,13 @@ dashedName: step-15 # --hints-- -`.cat-head` セレクターの `position` プロパティを `sticky` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `position` プロパティを `sticky` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'sticky') ``` -`.cat-head` セレクターの `top` プロパティを `0` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `top` プロパティを `0` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md index 72c574a330b..383cfb8c74c 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md @@ -13,37 +13,37 @@ dashedName: step-16 # --hints-- -`.cat-head` セレクターの `position` プロパティを `absolute` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `position` プロパティを `absolute` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') ``` -`.cat-head` セレクターの `top` プロパティを `0` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `top` プロパティを `0` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') ``` -`.cat-head` セレクターの `left` プロパティを `0` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `left` プロパティを `0` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '0px') ``` -`.cat-head` セレクターの `right` プロパティを `0` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `right` プロパティを `0` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.right === '0px') ``` -`.cat-head` セレクターの `bottom` プロパティを `0` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `bottom` プロパティを `0` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.bottom === '0px') ``` -`.cat-head` セレクターの `margin` プロパティを `auto` に設定してください。 Make sure you add a semicolon. +`.cat-head` セレクターの `margin` プロパティを `auto` に設定してください。 必ずセミコロンを追加してください。 ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.margin === 'auto') diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md index 33a7ef95149..b157bce8a0f 100644 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md @@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID **User Stories:** 1. You should have an `input` element with an `id` of `"search-input"` -1. You should have a `button` element with an `id` of `"search-button` +1. You should have a `button` element with an `id` of `"search-button"` 1. You should have an element with an `id` of `"pokemon-name"` 1. You should have an element with an `id` of `"pokemon-id"` 1. You should have an element with an `id` of `"weight"` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md index 6040d1028d3..c2bbf7a9cf9 100644 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -Now you need to modify your display text. Change the `innerText` property of the `text` to be `"You enter the store."`. +Now you need to modify your display text. Change the `innerText` property of the `text` variable to be `"You enter the store."`. # --hints-- @@ -153,6 +153,7 @@ function goStore() { button1.onclick = buyHealth; button2.onclick = buyWeapon; button3.onclick = goTown; + } --fcc-editable-region-- diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md index 7e389b0a832..b0e53680056 100644 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md @@ -17,7 +17,7 @@ You should call the `.push()` method of `rows` in your `else` block. assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/); ``` -You should pass a `padRow()` call as the argument for your `.unshift()` method. +You should pass a `padRow()` call as the argument for your `.push()` method. ```js assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/); diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md index 95817266274..15946da26ef 100644 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md @@ -23,10 +23,16 @@ Add a `case` where the value is `"yyyy-mm-dd"`. Inside the `case`, set the text # --hints-- -You should add a `case` where the condition is `"yyyy-mm-dd"`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`. +You should add a `case` with the value `"yyyy-mm-dd"`. ```js -assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/); +``` + +You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case. + +```js +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/); ``` # --seed-- diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md index ec2be7c5c0b..f90f4e48115 100644 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md @@ -13,16 +13,22 @@ Also, make sure to include a `break` statement to terminate the `switch` stateme # --hints-- -You should add a `case` where the condition is `"mm-dd-yyyy-h-mm"`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals. +You should add a `case` with the value `"mm-dd-yyyy-h-mm"`. ```js -assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/); ``` -You should include a `break` statement within the `case` after your logic. +You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case. ```js -assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/); +``` + +You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic. + +```js +assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/); ``` # --seed-- diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md index eb5bd1f1e0e..e71983853d1 100644 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md @@ -31,10 +31,16 @@ And with that, your date formatter is complete! You can now format the current d # --hints-- -You should use the `default` case to set the `textContent` property of `currentDateParagraph` to the value of `formattedDate`. +You should have a `default` case after the existing cases. ```js -assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /default\s*:\s*/) +``` + +In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`. + +```js +assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g); ``` # --seed-- diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/japanese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md new file mode 100644 index 00000000000..d31a63c9495 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md @@ -0,0 +1,261 @@ +--- +id: 66629f407d679d3105e8317f +title: Build a Rock Paper Scissors Game +challengeType: 14 +dashedName: top-build-a-rock-paper-scissors-game +--- + +# --description-- +Your game will be played against the computer. You will write a function that randomly returns `"rock"`, `"paper"` or `"scissors"`. + +You do not need to worry about the front-end part of the game. You will only write the logic for the game. Open the `script.js` and start following the instructions. + +**User stories:** + +1. You should have a function named `getComputerChoice`. + +1. Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +**Hint:** The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. + +Your game will be played by a human player. You will write a function that takes the user's choice and returns it. + +1. Create a function named `getHumanChoice`. + +1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs. + +**Hint:** Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user’s input. + +Your game will keep track of the player's score. You will write variables to keep track of the player's score. + +1. Create two new variables named `humanScore` and `computerScore` in the global scope. + +1. Initialize those variables with the value of `0`. + +Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement. + +1. Create a new function named `playRound`. + +1. Define two parameters for `playRound`. Parameter one `humanChoice` and parameter two `computerChoice`. Use these two parameters to take the human and computer choices as arguments. + +1. Make your function’s `humanChoice` parameter case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +1. Write the code for your `playRound` function that returns a string value representing the round winner. + +- If it is a tie, it should return `"It's a tie!"`. + +- If the player wins, it should return `"You win! [player choice] beats [computer choice]"`. + +- If the computer wins, it should return `"You lose! [computer choice] beats [player choice]"`. + +1. Increment the `humanScore` or `computerScore` variable based on the round winner. + +Your game will play 3 rounds. You will write a function named `playGame` that calls `playRound` to play 3 rounds, keeps track of the scores, and declares a winner at the end. + +1. Create a new function named `playGame`. + +1. Create a loop that plays 3 rounds and calls the `playRound` function each time with the human's choice and the computer's choice functions as arguments. + +1. At the end of the game, return the winner of the game based on who won the most rounds. + +- If the human player wins more rounds than the computer player, return a message that says `"You win the game!"`. + +- If the computer player wins more rounds than the human player, return a message that says `"You lose the game!"`. + +# --hints-- + +You should have a function called `getComputerChoice` + +```js +assert.isFunction(getComputerChoice); +``` + +Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +```js +const counts = {} +for (let i = 0; i < 100; i++) { + const result = getComputerChoice(); + counts[result] = (counts[result] ?? 0) + 1; +} +assert.lengthOf(Object.keys(counts), 3); +assert.include(Object.keys(counts), "rock"); +assert.include(Object.keys(counts), "paper"); +assert.include(Object.keys(counts), "scissors"); +``` + +You should have a function called `getHumanChoice` + +```js +assert.isFunction(getHumanChoice); +``` + +You should have two variables named `humanScore` and `computerScore` in the global scope. + +```js +assert.exists(humanScore); +assert.exists(computerScore); +``` + +You should have a function called `playRound` + +```js +assert.isFunction(playRound); +``` + +Your `playRound` function should take the human and computer player choices as arguments with the parameters `humanChoice` and `computerChoice`. + +```js +assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/); +``` + +Your `playRound` function should be case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +```js +assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/); +``` + +Your `playRound` function should return the string `"It's a tie!"` if the human and computer choices are the same. + +```js +assert.equal(playRound("rock", "rock"), "It's a tie!"); +``` + +Your `playRound` function should return the string `"You win! [player choice] beats [computer choice]"` if the player wins. + +```js +assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors"); +``` + +Your `playRound` function should return the string `"You lose! [computer choice] beats [player choice]"` if the computer wins. + +```js +assert.equal(playRound("rock", "paper"), "You lose! paper beats rock"); +``` + +Your `playRound` function should increment the `humanScore` or `computerScore` variable based on the round winner. + +```js +humanScore = 0; +computerScore = 0; +playRound("rock", "scissors"); +assert.equal(humanScore, 1); +``` + +You should have a function called `playGame`. + +```js +assert.isFunction(playGame); +``` + +You should use a loop to play 3 rounds. + +```js +assert.match(playGame.toString(), /\bfor\s*\(/); +``` + +You should return the winner of the game based on who won the most rounds. + +```js +window.prompt = () => "rock"; +assert.match(playGame(), /You (win|lose) the game!/); +``` + +# --seed-- + +## --seed-contents-- + +```js +const hand = ['rock', 'paper', 'scissor']; +``` + +```html + + + + + +``` + +# --solutions-- + +```html + + + + + +``` + +```js +const hand = ['rock', 'paper', 'scissors']; + + +let computerScore = 0; +let humanScore = 0; + +const getComputerChoice = () => { + return hand[Math.floor(Math.random() * hand.length)]; +} + +const getHumanChoice = () => { + return prompt(); +} + +const playRound = (humanChoice, computerChoice) => { + humanChoice = humanChoice.toLowerCase() + + const tie = "It's a tie!" + const win = `You win! ${humanChoice} beats ${computerChoice}` + const lose = `You lose! ${computerChoice} beats ${humanChoice}` + + + if (humanChoice == 'rock') { + if (computerChoice == 'rock') { + computerScore++; + humanScore++; + return tie; + } else if (computerChoice == 'paper') { + computerScore++; + return lose; + } else { + humanScore++; + return win; + } + } else if (humanChoice == 'paper') { + if (computerChoice == 'rock') { + humanScore++; + return win; + } else if (computerChoice == 'paper') { + computerScore++; + humanScore++; + return tie; + } else { + computerScore++; + return lose; + } + } else if (humanChoice == 'scissors') { + if (computerChoice == 'rock') { + computerScore++; + return lose; + } else if (computerChoice == 'paper') { + humanScore++; + return win; + } else { + computerScore++; + humanScore++; + return tie; + } + } +} + +const playGame = () => { + for(let i = 0; i < 3; i++){ + playRound(getHumanChoice(), getComputerChoice()) + } + + return humanScore > computerScore ? "You win the game!" : "You lose the game!" +} + +``` + diff --git a/curriculum/challenges/japanese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/japanese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md new file mode 100644 index 00000000000..28af96694df --- /dev/null +++ b/curriculum/challenges/japanese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md @@ -0,0 +1,20 @@ +--- +id: 645147516c245de4d11eb7ba +title: Front End Development Certification Exam +challengeType: 17 +dashedName: front-end-development-certification-exam +--- + +# --description-- + +Here are some rules: + +- click start + +# --instructions-- + +# --hints-- + +# --seed-- + +# --solutions-- diff --git a/curriculum/challenges/japanese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/japanese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md new file mode 100644 index 00000000000..2b1a9d0a9de --- /dev/null +++ b/curriculum/challenges/japanese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md @@ -0,0 +1,28 @@ +--- +id: 66731cd027ef3acb155669f5 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +step 1 instructions + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/korean/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/korean/00-certifications/front-end-development-certification/front-end-development.yml new file mode 100644 index 00000000000..25d1e081292 --- /dev/null +++ b/curriculum/challenges/korean/00-certifications/front-end-development-certification/front-end-development.yml @@ -0,0 +1,10 @@ +--- +id: 64514fda6c245de4d11eb7bb +title: Front End Development Certification +certification: front-end-development +challengeType: 7 +isPrivate: true +tests: + - + id: 645147516c245de4d11eb7ba + title: Front End Development Certification Exam diff --git a/curriculum/challenges/korean/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/korean/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md index 0d9d13c6f0b..94fb146dd4b 100644 --- a/curriculum/challenges/korean/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/korean/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md @@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins # --description-- -In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. - -Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider `box-shadow`: +In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule. ```scss -div { - -webkit-box-shadow: 0px 0px 4px #fff; - -moz-box-shadow: 0px 0px 4px #fff; - -ms-box-shadow: 0px 0px 4px #fff; - box-shadow: 0px 0px 4px #fff; +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +nav ul { + @include reset-list; } ``` -It's a lot of typing to re-write this rule for all the elements that have a `box-shadow`, or to change each value to test different effects. Mixins are like functions for CSS. Here is how to write one: +Compiles to: -```scss -@mixin box-shadow($x, $y, $blur, $c){ - -webkit-box-shadow: $x $y $blur $c; - -moz-box-shadow: $x $y $blur $c; - -ms-box-shadow: $x $y $blur $c; - box-shadow: $x $y $blur $c; +```css +nav ul { + margin: 0; + padding: 0; + list-style: none; } ``` -The definition starts with `@mixin` followed by a custom name. The parameters (the `$x`, `$y`, `$blur`, and `$c` in the example above) are optional. Now any time a `box-shadow` rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the `@include` directive: +Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin. ```scss -div { - @include box-shadow(0px, 0px, 4px, #fff); +@mixin prose($font-size, $spacing) { + font-size: $font-size; + margin: 0; + margin-block-end: $spacing; +} + +p { + @include prose(1.25rem, 1rem); +} + +h2 { + @include prose(2.4rem, 1.5rem); +} +``` + +You can make arguments optional by giving the parameters default values. + +```scss +@mixin text-color($color: black) { + color: $color; +} + +p { + @include text-color(); /* color: black */ +} + +nav a { + @include text-color(orange); } ``` # --instructions-- -Write a mixin for `border-radius` and give it a `$radius` parameter. It should use all the vendor prefixes from the example. Then use the `border-radius` mixin to give the `#awesome` element a border radius of `15px`. +Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`. + +Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`. # --hints-- -Your code should declare a mixin named `border-radius` which has a parameter named `$radius`. +You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`. ```js -assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); +assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi); ``` -Your code should include the `-webkit-border-radius` vendor prefix that uses the `$radius` parameter. +Your mixin should include a `width` property that uses the `$w` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi); ``` -Your code should include the `-moz-border-radius` vendor prefix that uses the `$radius` parameter. +Your mixin should include a `height` property that uses the `$h` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi); ``` -Your code should include the `-ms-border-radius` vendor prefix that uses the `$radius` parameter. +Your mixin should include a `background-color` property that uses the `$bg-color` parameter. ```js -assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi)); +assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi); ``` -Your code should include the general `border-radius` rule that uses the `$radius` parameter. +You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length == - 4 -); +assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi); ``` -Your code should call the `border-radius mixin` using the `@include` keyword, setting it to `15px`. +You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`. ```js -assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); +assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi); +``` + +You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`. + +```js +assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi); ``` # --seed-- @@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); ```html -
+
+
+
``` # --solutions-- ```html -
+
+
+
``` diff --git a/curriculum/challenges/korean/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/korean/09-information-security/information-security-projects/stock-price-checker.md index 0991de6abe6..db759056aec 100644 --- a/curriculum/challenges/korean/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/korean/09-information-security/information-security-projects/stock-price-checker.md @@ -20,7 +20,7 @@ Working on this project will involve you writing your code using one of the foll # --instructions-- -1. SET `NODE_ENV` to `test` without quotes and set `DB` to your MongoDB connection string +1. Set the `NODE_ENV` environment variable to `test`, without quotes 2. Complete the project in `routes/api.js` or by creating a handler/controller 3. You will add any security features to `server.js` 4. You will create all of the functional tests in `tests/2_functional-tests.js` diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md index 0602428ef85..0b481a3d272 100644 --- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -Now you need to link the `styles.css` file so the styles will be applied again. Nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value `stylesheet` and an `href` attribute value of `styles.css`. +Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`. # --hints-- diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md index bb3473d98b8..eea08a88900 100644 --- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md +++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md @@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID **User Stories:** 1. You should have an `input` element with an `id` of `"search-input"` -1. You should have a `button` element with an `id` of `"search-button` +1. You should have a `button` element with an `id` of `"search-button"` 1. You should have an element with an `id` of `"pokemon-name"` 1. You should have an element with an `id` of `"pokemon-id"` 1. You should have an element with an `id` of `"weight"` diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md index 6040d1028d3..c2bbf7a9cf9 100644 --- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md +++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -Now you need to modify your display text. Change the `innerText` property of the `text` to be `"You enter the store."`. +Now you need to modify your display text. Change the `innerText` property of the `text` variable to be `"You enter the store."`. # --hints-- @@ -153,6 +153,7 @@ function goStore() { button1.onclick = buyHealth; button2.onclick = buyWeapon; button3.onclick = goTown; + } --fcc-editable-region-- diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md index 7e389b0a832..b0e53680056 100644 --- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md +++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md @@ -17,7 +17,7 @@ You should call the `.push()` method of `rows` in your `else` block. assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/); ``` -You should pass a `padRow()` call as the argument for your `.unshift()` method. +You should pass a `padRow()` call as the argument for your `.push()` method. ```js assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/); diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md index 95817266274..15946da26ef 100644 --- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md +++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md @@ -23,10 +23,16 @@ Add a `case` where the value is `"yyyy-mm-dd"`. Inside the `case`, set the text # --hints-- -You should add a `case` where the condition is `"yyyy-mm-dd"`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`. +You should add a `case` with the value `"yyyy-mm-dd"`. ```js -assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/); +``` + +You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case. + +```js +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/); ``` # --seed-- diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md index ec2be7c5c0b..f90f4e48115 100644 --- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md +++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md @@ -13,16 +13,22 @@ Also, make sure to include a `break` statement to terminate the `switch` stateme # --hints-- -You should add a `case` where the condition is `"mm-dd-yyyy-h-mm"`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals. +You should add a `case` with the value `"mm-dd-yyyy-h-mm"`. ```js -assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/); ``` -You should include a `break` statement within the `case` after your logic. +You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case. ```js -assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/); +``` + +You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic. + +```js +assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/); ``` # --seed-- diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md index eb5bd1f1e0e..e71983853d1 100644 --- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md +++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md @@ -31,10 +31,16 @@ And with that, your date formatter is complete! You can now format the current d # --hints-- -You should use the `default` case to set the `textContent` property of `currentDateParagraph` to the value of `formattedDate`. +You should have a `default` case after the existing cases. ```js -assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /default\s*:\s*/) +``` + +In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`. + +```js +assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g); ``` # --seed-- diff --git a/curriculum/challenges/korean/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/korean/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md new file mode 100644 index 00000000000..d31a63c9495 --- /dev/null +++ b/curriculum/challenges/korean/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md @@ -0,0 +1,261 @@ +--- +id: 66629f407d679d3105e8317f +title: Build a Rock Paper Scissors Game +challengeType: 14 +dashedName: top-build-a-rock-paper-scissors-game +--- + +# --description-- +Your game will be played against the computer. You will write a function that randomly returns `"rock"`, `"paper"` or `"scissors"`. + +You do not need to worry about the front-end part of the game. You will only write the logic for the game. Open the `script.js` and start following the instructions. + +**User stories:** + +1. You should have a function named `getComputerChoice`. + +1. Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +**Hint:** The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. + +Your game will be played by a human player. You will write a function that takes the user's choice and returns it. + +1. Create a function named `getHumanChoice`. + +1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs. + +**Hint:** Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user’s input. + +Your game will keep track of the player's score. You will write variables to keep track of the player's score. + +1. Create two new variables named `humanScore` and `computerScore` in the global scope. + +1. Initialize those variables with the value of `0`. + +Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement. + +1. Create a new function named `playRound`. + +1. Define two parameters for `playRound`. Parameter one `humanChoice` and parameter two `computerChoice`. Use these two parameters to take the human and computer choices as arguments. + +1. Make your function’s `humanChoice` parameter case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +1. Write the code for your `playRound` function that returns a string value representing the round winner. + +- If it is a tie, it should return `"It's a tie!"`. + +- If the player wins, it should return `"You win! [player choice] beats [computer choice]"`. + +- If the computer wins, it should return `"You lose! [computer choice] beats [player choice]"`. + +1. Increment the `humanScore` or `computerScore` variable based on the round winner. + +Your game will play 3 rounds. You will write a function named `playGame` that calls `playRound` to play 3 rounds, keeps track of the scores, and declares a winner at the end. + +1. Create a new function named `playGame`. + +1. Create a loop that plays 3 rounds and calls the `playRound` function each time with the human's choice and the computer's choice functions as arguments. + +1. At the end of the game, return the winner of the game based on who won the most rounds. + +- If the human player wins more rounds than the computer player, return a message that says `"You win the game!"`. + +- If the computer player wins more rounds than the human player, return a message that says `"You lose the game!"`. + +# --hints-- + +You should have a function called `getComputerChoice` + +```js +assert.isFunction(getComputerChoice); +``` + +Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +```js +const counts = {} +for (let i = 0; i < 100; i++) { + const result = getComputerChoice(); + counts[result] = (counts[result] ?? 0) + 1; +} +assert.lengthOf(Object.keys(counts), 3); +assert.include(Object.keys(counts), "rock"); +assert.include(Object.keys(counts), "paper"); +assert.include(Object.keys(counts), "scissors"); +``` + +You should have a function called `getHumanChoice` + +```js +assert.isFunction(getHumanChoice); +``` + +You should have two variables named `humanScore` and `computerScore` in the global scope. + +```js +assert.exists(humanScore); +assert.exists(computerScore); +``` + +You should have a function called `playRound` + +```js +assert.isFunction(playRound); +``` + +Your `playRound` function should take the human and computer player choices as arguments with the parameters `humanChoice` and `computerChoice`. + +```js +assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/); +``` + +Your `playRound` function should be case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +```js +assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/); +``` + +Your `playRound` function should return the string `"It's a tie!"` if the human and computer choices are the same. + +```js +assert.equal(playRound("rock", "rock"), "It's a tie!"); +``` + +Your `playRound` function should return the string `"You win! [player choice] beats [computer choice]"` if the player wins. + +```js +assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors"); +``` + +Your `playRound` function should return the string `"You lose! [computer choice] beats [player choice]"` if the computer wins. + +```js +assert.equal(playRound("rock", "paper"), "You lose! paper beats rock"); +``` + +Your `playRound` function should increment the `humanScore` or `computerScore` variable based on the round winner. + +```js +humanScore = 0; +computerScore = 0; +playRound("rock", "scissors"); +assert.equal(humanScore, 1); +``` + +You should have a function called `playGame`. + +```js +assert.isFunction(playGame); +``` + +You should use a loop to play 3 rounds. + +```js +assert.match(playGame.toString(), /\bfor\s*\(/); +``` + +You should return the winner of the game based on who won the most rounds. + +```js +window.prompt = () => "rock"; +assert.match(playGame(), /You (win|lose) the game!/); +``` + +# --seed-- + +## --seed-contents-- + +```js +const hand = ['rock', 'paper', 'scissor']; +``` + +```html + + + + + +``` + +# --solutions-- + +```html + + + + + +``` + +```js +const hand = ['rock', 'paper', 'scissors']; + + +let computerScore = 0; +let humanScore = 0; + +const getComputerChoice = () => { + return hand[Math.floor(Math.random() * hand.length)]; +} + +const getHumanChoice = () => { + return prompt(); +} + +const playRound = (humanChoice, computerChoice) => { + humanChoice = humanChoice.toLowerCase() + + const tie = "It's a tie!" + const win = `You win! ${humanChoice} beats ${computerChoice}` + const lose = `You lose! ${computerChoice} beats ${humanChoice}` + + + if (humanChoice == 'rock') { + if (computerChoice == 'rock') { + computerScore++; + humanScore++; + return tie; + } else if (computerChoice == 'paper') { + computerScore++; + return lose; + } else { + humanScore++; + return win; + } + } else if (humanChoice == 'paper') { + if (computerChoice == 'rock') { + humanScore++; + return win; + } else if (computerChoice == 'paper') { + computerScore++; + humanScore++; + return tie; + } else { + computerScore++; + return lose; + } + } else if (humanChoice == 'scissors') { + if (computerChoice == 'rock') { + computerScore++; + return lose; + } else if (computerChoice == 'paper') { + humanScore++; + return win; + } else { + computerScore++; + humanScore++; + return tie; + } + } +} + +const playGame = () => { + for(let i = 0; i < 3; i++){ + playRound(getHumanChoice(), getComputerChoice()) + } + + return humanScore > computerScore ? "You win the game!" : "You lose the game!" +} + +``` + diff --git a/curriculum/challenges/korean/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/korean/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md new file mode 100644 index 00000000000..28af96694df --- /dev/null +++ b/curriculum/challenges/korean/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md @@ -0,0 +1,20 @@ +--- +id: 645147516c245de4d11eb7ba +title: Front End Development Certification Exam +challengeType: 17 +dashedName: front-end-development-certification-exam +--- + +# --description-- + +Here are some rules: + +- click start + +# --instructions-- + +# --hints-- + +# --seed-- + +# --solutions-- diff --git a/curriculum/challenges/korean/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/korean/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md new file mode 100644 index 00000000000..2b1a9d0a9de --- /dev/null +++ b/curriculum/challenges/korean/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md @@ -0,0 +1,28 @@ +--- +id: 66731cd027ef3acb155669f5 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +step 1 instructions + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/portuguese/00-certifications/front-end-development-certification/front-end-development.yml new file mode 100644 index 00000000000..3dfbe1adb9c --- /dev/null +++ b/curriculum/challenges/portuguese/00-certifications/front-end-development-certification/front-end-development.yml @@ -0,0 +1,10 @@ +--- +id: 64514fda6c245de4d11eb7bb +title: Certificação de desenvolvimento de front-end +certification: front-end-development +challengeType: 7 +isPrivate: true +tests: + - + id: 645147516c245de4d11eb7ba + title: Exame de certificação de desenvolvimento de front-end diff --git a/curriculum/challenges/portuguese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/portuguese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md index 3fb4c2c3230..06093f5c4c4 100644 --- a/curriculum/challenges/portuguese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/portuguese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md @@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins # --description-- -Em Sass, um mixin é um grupo de declarações CSS que podem ser reutilizados em toda a folha de estilos. - -Os recursos CSS mais recentes levam tempo antes de serem totalmente adotados e prontos para uso em todos os navegadores. Como recursos são adicionados aos navegadores, as regras CSS que os usam podem precisar de prefixos de fornecedores. Considere `box-shadow`: +Em Sass, um mixin é um grupo de declarações CSS que podem ser reutilizados em toda a folha de estilos. A definição começa com a regra @ do `@mixin` seguida por um nome personalizado. Você aplica o mixin usando a regra `@include`. ```scss -div { - -webkit-box-shadow: 0px 0px 4px #fff; - -moz-box-shadow: 0px 0px 4px #fff; - -ms-box-shadow: 0px 0px 4px #fff; - box-shadow: 0px 0px 4px #fff; +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +nav ul { + @include reset-list; } ``` -É preciso muita digitação para reescrever esta regra para todos os elementos que têm uma `box-shadow`, ou para alterar cada valor para testar efeitos diferentes. Mixins são como funções para CSS. Veja como escrever um: +Compila para: -```scss -@mixin box-shadow($x, $y, $blur, $c){ - -webkit-box-shadow: $x $y $blur $c; - -moz-box-shadow: $x $y $blur $c; - -ms-box-shadow: $x $y $blur $c; - box-shadow: $x $y $blur $c; +```css +nav ul { + margin: 0; + padding: 0; + list-style: none; } ``` -A definição começa com `@mixin` seguido por um nome personalizado. Os parâmetros (o `$x`, `$y`, `$blur`, e `$c` no exemplo acima) são opcionais. Agora, a qualquer momento que uma regra `box-shadow` é necessária, apenas uma única linha que chama o mixin substitui a necessidade de digitar todos os prefixos do fornecedor. Um mixin é chamado com a diretiva `@include`: +Os mixins também podem receber argumentos, o que permite que seu comportamento seja personalizado. Os argumentos são necessários quando se utiliza o mixin. ```scss -div { - @include box-shadow(0px, 0px, 4px, #fff); +@mixin prose($font-size, $spacing) { + font-size: $font-size; + margin: 0; + margin-block-end: $spacing; +} + +p { + @include prose(1.25rem, 1rem); +} + +h2 { + @include prose(2.4rem, 1.5rem); +} +``` + +Você pode tornar os argumentos opcionais dando valores padrão aos parâmetros. + +```scss +@mixin text-color($color: black) { + color: $color; +} + +p { + @include text-color(); /* color: black */ +} + +nav a { + @include text-color(orange); } ``` # --instructions-- -Escreva um mixin para `border-radius` e dê a ele o parâmetro `$radius`. Deve usar todos os prefixos de fornecedor do exemplo. Em seguida, use o mixin de `border-radius` para dar ao elemento `#awesome` um raio de borda de `15px`. +Escreva um mixin chamado `shape` e dê a ele 3 parâmetros: `$w`, `$h` e `$bg-color`. + +Use o mixin `shape` para dar ao elemento `#square` uma largura (w) e uma altura (h) de `50px`, e a cor de fundo `red` (vermelha). Para o elemento `#rect-a`, adicione uma largura (w) de `100px`, uma altura (h) de `50px` e a cor de fundo `blue` (azul). Finalmente, para o elemento `#rect-b`, adicione uma largura (w) de `50px`, uma altura (h) de `100px` e a cor de fundo `orange` (laranja). # --hints-- -O código deve declarar um mixin nomeado `border-radius` que tem um parâmetro chamado `$radius`. +Você deve declarar um mixin chamado `shape` e dar a ele 3 parâmetros: `$w`, `$h` e `$bg-color`. ```js -assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); +assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi); ``` -O código deve incluir o prefixo do fornecedor `-webkit-border-radius` que usa o parâmetro `$radius`. +O mixin deve incluir uma propriedade `width` que usa o parâmetro `$w`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi); ``` -O código deve incluir o prefixo do fornecedor `-moz-border-radius` que usa o parâmetro `$radius`. +O mixin deve incluir uma propriedade `height` que usa o parâmetro `$h`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi); ``` -O código deve incluir o prefixo do fornecedor `-ms-border-radius` que usa o parâmetro `$radius`. +O mixin deve incluir uma propriedade `background-color` que usa o parâmetro `$bg-color`. ```js -assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi)); +assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi); ``` -O código deve incluir a regra geral `border-radius` que usa o parâmetro `$radius`. +Você deve substituir os estilos dentro do seletor `#square` por uma chamada ao mixin `shape` usando a palavra-chave `@include`. Definindo uma largura e altura de `50px` e a cor de fundo `red`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length == - 4 -); +assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi); ``` -O código deve chamar o `border-radius mixin` usando a palavra-chave `@include`, definindo-o como `15px`. +Você deve substituir os estilos dentro do seletor `#rect-a` por uma chamada ao mixin `shape` mixin usando a palavra-chave `@include`. Definindo uma largura de `100px`, uma altura de `50px` e a cor de fundo `blue`. ```js -assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); +assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi); +``` + +Você deve substituir os estilos dentro do seletor `#rect-b` por uma chamada ao mixin `shape` usando a palavra-chave `@include`. Definindo uma largura de `50px`, uma altura de `100px` e a cor de fundo `orange`. + +```js +assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi); ``` # --seed-- @@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); ```html -
+
+
+
``` # --solutions-- ```html -
+
+
+
``` diff --git a/curriculum/challenges/portuguese/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/portuguese/09-information-security/information-security-projects/stock-price-checker.md index 036fbc365a4..69c1ab44b6a 100644 --- a/curriculum/challenges/portuguese/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/portuguese/09-information-security/information-security-projects/stock-price-checker.md @@ -20,7 +20,7 @@ Trabalhar nesse projeto vai fazer com que você escreva seu código usando um do # --instructions-- -1. Defina `NODE_ENV` como `test` sem aspas e `DB` como sua string de conexão ao MongoDB +1. Defina a variável de ambiente `NODE_ENV` como `test`, sem aspas 2. Complete o projeto em `routes/api.js` ou criando um manipulador/controlador 3. Você adicionará todas as funcionalidades de segurança ao `server.js` 4. Você criará todos os testes funcionais em `tests/2_functional-tests.js` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md index 7f866c54bb4..ce02141d239 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -Agora você precisa vincular o arquivo `styles.css` para que os estilos sejam aplicados novamente. Adicione um elemento `link` de fechamento automático ao elemento `head`. Dê a ele o valor do atributo `rel` de `stylesheet` e o valor do atributo `href` de `styles.css`. +Agora, você precisa vincular o arquivo `styles.css` para que os estilos sejam aplicados novamente. Dentro do elemento `head`, adicione um elemento `link`. Dê a ele o valor do atributo `rel` de `"stylesheet"` e o valor do atributo `href` de `"styles.css"`. # --hints-- diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md index 2ce14dba83b..582681bfeb2 100644 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md @@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID **User Stories:** 1. You should have an `input` element with an `id` of `"search-input"` -1. You should have a `button` element with an `id` of `"search-button` +1. You should have a `button` element with an `id` of `"search-button"` 1. You should have an element with an `id` of `"pokemon-name"` 1. You should have an element with an `id` of `"pokemon-id"` 1. You should have an element with an `id` of `"weight"` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md index b843f1f272b..9af04c4a0e4 100644 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -Agora, você precisa modificar o texto de exibição. Change the `innerText` property of the `text` to be `"You enter the store."`. +Agora, você precisa modificar o texto de exibição. Change the `innerText` property of the `text` variable to be `"You enter the store."`. # --hints-- @@ -153,6 +153,7 @@ function goStore() { button1.onclick = buyHealth; button2.onclick = buyWeapon; button3.onclick = goTown; + } --fcc-editable-region-- diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md index 7e389b0a832..b0e53680056 100644 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md @@ -17,7 +17,7 @@ You should call the `.push()` method of `rows` in your `else` block. assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/); ``` -You should pass a `padRow()` call as the argument for your `.unshift()` method. +You should pass a `padRow()` call as the argument for your `.push()` method. ```js assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/); diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md index c00364a6d72..382d1c68d0e 100644 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md @@ -23,10 +23,16 @@ Add a `case` where the value is `"yyyy-mm-dd"`. Inside the `case`, set the text # --hints-- -You should add a `case` where the condition is `"yyyy-mm-dd"`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`. +You should add a `case` with the value `"yyyy-mm-dd"`. ```js -assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/); +``` + +You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case. + +```js +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/); ``` # --seed-- diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md index 04cc331c326..641763535c5 100644 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md @@ -13,16 +13,22 @@ Also, make sure to include a `break` statement to terminate the `switch` stateme # --hints-- -You should add a `case` where the condition is `"mm-dd-yyyy-h-mm"`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals. +You should add a `case` with the value `"mm-dd-yyyy-h-mm"`. ```js -assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/); ``` -You should include a `break` statement within the `case` after your logic. +You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case. ```js -assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/); +``` + +You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic. + +```js +assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/); ``` # --seed-- diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md index bab2b32520e..9573fd8960d 100644 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md @@ -31,10 +31,16 @@ And with that, your date formatter is complete! You can now format the current d # --hints-- -You should use the `default` case to set the `textContent` property of `currentDateParagraph` to the value of `formattedDate`. +You should have a `default` case after the existing cases. ```js -assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /default\s*:\s*/) +``` + +In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`. + +```js +assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g); ``` # --seed-- diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/portuguese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md new file mode 100644 index 00000000000..d31a63c9495 --- /dev/null +++ b/curriculum/challenges/portuguese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md @@ -0,0 +1,261 @@ +--- +id: 66629f407d679d3105e8317f +title: Build a Rock Paper Scissors Game +challengeType: 14 +dashedName: top-build-a-rock-paper-scissors-game +--- + +# --description-- +Your game will be played against the computer. You will write a function that randomly returns `"rock"`, `"paper"` or `"scissors"`. + +You do not need to worry about the front-end part of the game. You will only write the logic for the game. Open the `script.js` and start following the instructions. + +**User stories:** + +1. You should have a function named `getComputerChoice`. + +1. Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +**Hint:** The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. + +Your game will be played by a human player. You will write a function that takes the user's choice and returns it. + +1. Create a function named `getHumanChoice`. + +1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs. + +**Hint:** Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user’s input. + +Your game will keep track of the player's score. You will write variables to keep track of the player's score. + +1. Create two new variables named `humanScore` and `computerScore` in the global scope. + +1. Initialize those variables with the value of `0`. + +Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement. + +1. Create a new function named `playRound`. + +1. Define two parameters for `playRound`. Parameter one `humanChoice` and parameter two `computerChoice`. Use these two parameters to take the human and computer choices as arguments. + +1. Make your function’s `humanChoice` parameter case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +1. Write the code for your `playRound` function that returns a string value representing the round winner. + +- If it is a tie, it should return `"It's a tie!"`. + +- If the player wins, it should return `"You win! [player choice] beats [computer choice]"`. + +- If the computer wins, it should return `"You lose! [computer choice] beats [player choice]"`. + +1. Increment the `humanScore` or `computerScore` variable based on the round winner. + +Your game will play 3 rounds. You will write a function named `playGame` that calls `playRound` to play 3 rounds, keeps track of the scores, and declares a winner at the end. + +1. Create a new function named `playGame`. + +1. Create a loop that plays 3 rounds and calls the `playRound` function each time with the human's choice and the computer's choice functions as arguments. + +1. At the end of the game, return the winner of the game based on who won the most rounds. + +- If the human player wins more rounds than the computer player, return a message that says `"You win the game!"`. + +- If the computer player wins more rounds than the human player, return a message that says `"You lose the game!"`. + +# --hints-- + +You should have a function called `getComputerChoice` + +```js +assert.isFunction(getComputerChoice); +``` + +Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +```js +const counts = {} +for (let i = 0; i < 100; i++) { + const result = getComputerChoice(); + counts[result] = (counts[result] ?? 0) + 1; +} +assert.lengthOf(Object.keys(counts), 3); +assert.include(Object.keys(counts), "rock"); +assert.include(Object.keys(counts), "paper"); +assert.include(Object.keys(counts), "scissors"); +``` + +You should have a function called `getHumanChoice` + +```js +assert.isFunction(getHumanChoice); +``` + +You should have two variables named `humanScore` and `computerScore` in the global scope. + +```js +assert.exists(humanScore); +assert.exists(computerScore); +``` + +You should have a function called `playRound` + +```js +assert.isFunction(playRound); +``` + +Your `playRound` function should take the human and computer player choices as arguments with the parameters `humanChoice` and `computerChoice`. + +```js +assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/); +``` + +Your `playRound` function should be case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +```js +assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/); +``` + +Your `playRound` function should return the string `"It's a tie!"` if the human and computer choices are the same. + +```js +assert.equal(playRound("rock", "rock"), "It's a tie!"); +``` + +Your `playRound` function should return the string `"You win! [player choice] beats [computer choice]"` if the player wins. + +```js +assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors"); +``` + +Your `playRound` function should return the string `"You lose! [computer choice] beats [player choice]"` if the computer wins. + +```js +assert.equal(playRound("rock", "paper"), "You lose! paper beats rock"); +``` + +Your `playRound` function should increment the `humanScore` or `computerScore` variable based on the round winner. + +```js +humanScore = 0; +computerScore = 0; +playRound("rock", "scissors"); +assert.equal(humanScore, 1); +``` + +You should have a function called `playGame`. + +```js +assert.isFunction(playGame); +``` + +You should use a loop to play 3 rounds. + +```js +assert.match(playGame.toString(), /\bfor\s*\(/); +``` + +You should return the winner of the game based on who won the most rounds. + +```js +window.prompt = () => "rock"; +assert.match(playGame(), /You (win|lose) the game!/); +``` + +# --seed-- + +## --seed-contents-- + +```js +const hand = ['rock', 'paper', 'scissor']; +``` + +```html + + + + + +``` + +# --solutions-- + +```html + + + + + +``` + +```js +const hand = ['rock', 'paper', 'scissors']; + + +let computerScore = 0; +let humanScore = 0; + +const getComputerChoice = () => { + return hand[Math.floor(Math.random() * hand.length)]; +} + +const getHumanChoice = () => { + return prompt(); +} + +const playRound = (humanChoice, computerChoice) => { + humanChoice = humanChoice.toLowerCase() + + const tie = "It's a tie!" + const win = `You win! ${humanChoice} beats ${computerChoice}` + const lose = `You lose! ${computerChoice} beats ${humanChoice}` + + + if (humanChoice == 'rock') { + if (computerChoice == 'rock') { + computerScore++; + humanScore++; + return tie; + } else if (computerChoice == 'paper') { + computerScore++; + return lose; + } else { + humanScore++; + return win; + } + } else if (humanChoice == 'paper') { + if (computerChoice == 'rock') { + humanScore++; + return win; + } else if (computerChoice == 'paper') { + computerScore++; + humanScore++; + return tie; + } else { + computerScore++; + return lose; + } + } else if (humanChoice == 'scissors') { + if (computerChoice == 'rock') { + computerScore++; + return lose; + } else if (computerChoice == 'paper') { + humanScore++; + return win; + } else { + computerScore++; + humanScore++; + return tie; + } + } +} + +const playGame = () => { + for(let i = 0; i < 3; i++){ + playRound(getHumanChoice(), getComputerChoice()) + } + + return humanScore > computerScore ? "You win the game!" : "You lose the game!" +} + +``` + diff --git a/curriculum/challenges/portuguese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/portuguese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md new file mode 100644 index 00000000000..cee81ae797c --- /dev/null +++ b/curriculum/challenges/portuguese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md @@ -0,0 +1,20 @@ +--- +id: 645147516c245de4d11eb7ba +title: Exame de certificação de desenvolvimento de front-end +challengeType: 17 +dashedName: front-end-development-certification-exam +--- + +# --description-- + +Aqui vão algumas regras: + +- clique em Iniciar + +# --instructions-- + +# --hints-- + +# --seed-- + +# --solutions-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/portuguese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md new file mode 100644 index 00000000000..0743fe92b4d --- /dev/null +++ b/curriculum/challenges/portuguese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md @@ -0,0 +1,28 @@ +--- +id: 66731cd027ef3acb155669f5 +title: Passo 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +instruções do passo 1 + +# --hints-- + +Teste 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/swahili/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/swahili/00-certifications/front-end-development-certification/front-end-development.yml new file mode 100644 index 00000000000..25d1e081292 --- /dev/null +++ b/curriculum/challenges/swahili/00-certifications/front-end-development-certification/front-end-development.yml @@ -0,0 +1,10 @@ +--- +id: 64514fda6c245de4d11eb7bb +title: Front End Development Certification +certification: front-end-development +challengeType: 7 +isPrivate: true +tests: + - + id: 645147516c245de4d11eb7ba + title: Front End Development Certification Exam diff --git a/curriculum/challenges/swahili/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/swahili/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md index 0d9d13c6f0b..94fb146dd4b 100644 --- a/curriculum/challenges/swahili/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/swahili/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md @@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins # --description-- -In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. - -Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider `box-shadow`: +In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule. ```scss -div { - -webkit-box-shadow: 0px 0px 4px #fff; - -moz-box-shadow: 0px 0px 4px #fff; - -ms-box-shadow: 0px 0px 4px #fff; - box-shadow: 0px 0px 4px #fff; +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +nav ul { + @include reset-list; } ``` -It's a lot of typing to re-write this rule for all the elements that have a `box-shadow`, or to change each value to test different effects. Mixins are like functions for CSS. Here is how to write one: +Compiles to: -```scss -@mixin box-shadow($x, $y, $blur, $c){ - -webkit-box-shadow: $x $y $blur $c; - -moz-box-shadow: $x $y $blur $c; - -ms-box-shadow: $x $y $blur $c; - box-shadow: $x $y $blur $c; +```css +nav ul { + margin: 0; + padding: 0; + list-style: none; } ``` -The definition starts with `@mixin` followed by a custom name. The parameters (the `$x`, `$y`, `$blur`, and `$c` in the example above) are optional. Now any time a `box-shadow` rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the `@include` directive: +Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin. ```scss -div { - @include box-shadow(0px, 0px, 4px, #fff); +@mixin prose($font-size, $spacing) { + font-size: $font-size; + margin: 0; + margin-block-end: $spacing; +} + +p { + @include prose(1.25rem, 1rem); +} + +h2 { + @include prose(2.4rem, 1.5rem); +} +``` + +You can make arguments optional by giving the parameters default values. + +```scss +@mixin text-color($color: black) { + color: $color; +} + +p { + @include text-color(); /* color: black */ +} + +nav a { + @include text-color(orange); } ``` # --instructions-- -Write a mixin for `border-radius` and give it a `$radius` parameter. It should use all the vendor prefixes from the example. Then use the `border-radius` mixin to give the `#awesome` element a border radius of `15px`. +Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`. + +Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`. # --hints-- -Your code should declare a mixin named `border-radius` which has a parameter named `$radius`. +You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`. ```js -assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); +assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi); ``` -Your code should include the `-webkit-border-radius` vendor prefix that uses the `$radius` parameter. +Your mixin should include a `width` property that uses the `$w` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi); ``` -Your code should include the `-moz-border-radius` vendor prefix that uses the `$radius` parameter. +Your mixin should include a `height` property that uses the `$h` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi); ``` -Your code should include the `-ms-border-radius` vendor prefix that uses the `$radius` parameter. +Your mixin should include a `background-color` property that uses the `$bg-color` parameter. ```js -assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi)); +assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi); ``` -Your code should include the general `border-radius` rule that uses the `$radius` parameter. +You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length == - 4 -); +assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi); ``` -Your code should call the `border-radius mixin` using the `@include` keyword, setting it to `15px`. +You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`. ```js -assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); +assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi); +``` + +You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`. + +```js +assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi); ``` # --seed-- @@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); ```html -
+
+
+
``` # --solutions-- ```html -
+
+
+
``` diff --git a/curriculum/challenges/swahili/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/swahili/09-information-security/information-security-projects/stock-price-checker.md index 0991de6abe6..db759056aec 100644 --- a/curriculum/challenges/swahili/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/swahili/09-information-security/information-security-projects/stock-price-checker.md @@ -20,7 +20,7 @@ Working on this project will involve you writing your code using one of the foll # --instructions-- -1. SET `NODE_ENV` to `test` without quotes and set `DB` to your MongoDB connection string +1. Set the `NODE_ENV` environment variable to `test`, without quotes 2. Complete the project in `routes/api.js` or by creating a handler/controller 3. You will add any security features to `server.js` 4. You will create all of the functional tests in `tests/2_functional-tests.js` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md index 81a8506905d..2e944890139 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -Sasa unahitaji kuunganisha faili ya `styles.css` ili mitindo itumike tena. Weka kipengele cha kujifunga cha `link` katika kipengele cha `head`. Ipe `rel` thamani ya sifa `stylesheet` na `href` thamani ya `styles.css`. +Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`. # --hints-- diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md index bb3473d98b8..eea08a88900 100644 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md +++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md @@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID **User Stories:** 1. You should have an `input` element with an `id` of `"search-input"` -1. You should have a `button` element with an `id` of `"search-button` +1. You should have a `button` element with an `id` of `"search-button"` 1. You should have an element with an `id` of `"pokemon-name"` 1. You should have an element with an `id` of `"pokemon-id"` 1. You should have an element with an `id` of `"weight"` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md index 6040d1028d3..c2bbf7a9cf9 100644 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md +++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -Now you need to modify your display text. Change the `innerText` property of the `text` to be `"You enter the store."`. +Now you need to modify your display text. Change the `innerText` property of the `text` variable to be `"You enter the store."`. # --hints-- @@ -153,6 +153,7 @@ function goStore() { button1.onclick = buyHealth; button2.onclick = buyWeapon; button3.onclick = goTown; + } --fcc-editable-region-- diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md index 7e389b0a832..b0e53680056 100644 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md +++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md @@ -17,7 +17,7 @@ You should call the `.push()` method of `rows` in your `else` block. assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/); ``` -You should pass a `padRow()` call as the argument for your `.unshift()` method. +You should pass a `padRow()` call as the argument for your `.push()` method. ```js assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/); diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md index 745ab8f2e50..7104106569d 100644 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md +++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md @@ -23,10 +23,16 @@ Add a `case` where the value is `"yyyy-mm-dd"`. Inside the `case`, set the text # --hints-- -You should add a `case` where the condition is `"yyyy-mm-dd"`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`. +You should add a `case` with the value `"yyyy-mm-dd"`. ```js -assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/); +``` + +You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case. + +```js +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/); ``` # --seed-- diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md index ec2be7c5c0b..f90f4e48115 100644 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md +++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md @@ -13,16 +13,22 @@ Also, make sure to include a `break` statement to terminate the `switch` stateme # --hints-- -You should add a `case` where the condition is `"mm-dd-yyyy-h-mm"`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals. +You should add a `case` with the value `"mm-dd-yyyy-h-mm"`. ```js -assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/); ``` -You should include a `break` statement within the `case` after your logic. +You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case. ```js -assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/); +``` + +You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic. + +```js +assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/); ``` # --seed-- diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md index eb5bd1f1e0e..e71983853d1 100644 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md +++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md @@ -31,10 +31,16 @@ And with that, your date formatter is complete! You can now format the current d # --hints-- -You should use the `default` case to set the `textContent` property of `currentDateParagraph` to the value of `formattedDate`. +You should have a `default` case after the existing cases. ```js -assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /default\s*:\s*/) +``` + +In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`. + +```js +assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g); ``` # --seed-- diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/swahili/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md new file mode 100644 index 00000000000..d31a63c9495 --- /dev/null +++ b/curriculum/challenges/swahili/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md @@ -0,0 +1,261 @@ +--- +id: 66629f407d679d3105e8317f +title: Build a Rock Paper Scissors Game +challengeType: 14 +dashedName: top-build-a-rock-paper-scissors-game +--- + +# --description-- +Your game will be played against the computer. You will write a function that randomly returns `"rock"`, `"paper"` or `"scissors"`. + +You do not need to worry about the front-end part of the game. You will only write the logic for the game. Open the `script.js` and start following the instructions. + +**User stories:** + +1. You should have a function named `getComputerChoice`. + +1. Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +**Hint:** The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. + +Your game will be played by a human player. You will write a function that takes the user's choice and returns it. + +1. Create a function named `getHumanChoice`. + +1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs. + +**Hint:** Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user’s input. + +Your game will keep track of the player's score. You will write variables to keep track of the player's score. + +1. Create two new variables named `humanScore` and `computerScore` in the global scope. + +1. Initialize those variables with the value of `0`. + +Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement. + +1. Create a new function named `playRound`. + +1. Define two parameters for `playRound`. Parameter one `humanChoice` and parameter two `computerChoice`. Use these two parameters to take the human and computer choices as arguments. + +1. Make your function’s `humanChoice` parameter case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +1. Write the code for your `playRound` function that returns a string value representing the round winner. + +- If it is a tie, it should return `"It's a tie!"`. + +- If the player wins, it should return `"You win! [player choice] beats [computer choice]"`. + +- If the computer wins, it should return `"You lose! [computer choice] beats [player choice]"`. + +1. Increment the `humanScore` or `computerScore` variable based on the round winner. + +Your game will play 3 rounds. You will write a function named `playGame` that calls `playRound` to play 3 rounds, keeps track of the scores, and declares a winner at the end. + +1. Create a new function named `playGame`. + +1. Create a loop that plays 3 rounds and calls the `playRound` function each time with the human's choice and the computer's choice functions as arguments. + +1. At the end of the game, return the winner of the game based on who won the most rounds. + +- If the human player wins more rounds than the computer player, return a message that says `"You win the game!"`. + +- If the computer player wins more rounds than the human player, return a message that says `"You lose the game!"`. + +# --hints-- + +You should have a function called `getComputerChoice` + +```js +assert.isFunction(getComputerChoice); +``` + +Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random. + +```js +const counts = {} +for (let i = 0; i < 100; i++) { + const result = getComputerChoice(); + counts[result] = (counts[result] ?? 0) + 1; +} +assert.lengthOf(Object.keys(counts), 3); +assert.include(Object.keys(counts), "rock"); +assert.include(Object.keys(counts), "paper"); +assert.include(Object.keys(counts), "scissors"); +``` + +You should have a function called `getHumanChoice` + +```js +assert.isFunction(getHumanChoice); +``` + +You should have two variables named `humanScore` and `computerScore` in the global scope. + +```js +assert.exists(humanScore); +assert.exists(computerScore); +``` + +You should have a function called `playRound` + +```js +assert.isFunction(playRound); +``` + +Your `playRound` function should take the human and computer player choices as arguments with the parameters `humanChoice` and `computerChoice`. + +```js +assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/); +``` + +Your `playRound` function should be case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations. + +```js +assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/); +``` + +Your `playRound` function should return the string `"It's a tie!"` if the human and computer choices are the same. + +```js +assert.equal(playRound("rock", "rock"), "It's a tie!"); +``` + +Your `playRound` function should return the string `"You win! [player choice] beats [computer choice]"` if the player wins. + +```js +assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors"); +``` + +Your `playRound` function should return the string `"You lose! [computer choice] beats [player choice]"` if the computer wins. + +```js +assert.equal(playRound("rock", "paper"), "You lose! paper beats rock"); +``` + +Your `playRound` function should increment the `humanScore` or `computerScore` variable based on the round winner. + +```js +humanScore = 0; +computerScore = 0; +playRound("rock", "scissors"); +assert.equal(humanScore, 1); +``` + +You should have a function called `playGame`. + +```js +assert.isFunction(playGame); +``` + +You should use a loop to play 3 rounds. + +```js +assert.match(playGame.toString(), /\bfor\s*\(/); +``` + +You should return the winner of the game based on who won the most rounds. + +```js +window.prompt = () => "rock"; +assert.match(playGame(), /You (win|lose) the game!/); +``` + +# --seed-- + +## --seed-contents-- + +```js +const hand = ['rock', 'paper', 'scissor']; +``` + +```html + + + + + +``` + +# --solutions-- + +```html + + + + + +``` + +```js +const hand = ['rock', 'paper', 'scissors']; + + +let computerScore = 0; +let humanScore = 0; + +const getComputerChoice = () => { + return hand[Math.floor(Math.random() * hand.length)]; +} + +const getHumanChoice = () => { + return prompt(); +} + +const playRound = (humanChoice, computerChoice) => { + humanChoice = humanChoice.toLowerCase() + + const tie = "It's a tie!" + const win = `You win! ${humanChoice} beats ${computerChoice}` + const lose = `You lose! ${computerChoice} beats ${humanChoice}` + + + if (humanChoice == 'rock') { + if (computerChoice == 'rock') { + computerScore++; + humanScore++; + return tie; + } else if (computerChoice == 'paper') { + computerScore++; + return lose; + } else { + humanScore++; + return win; + } + } else if (humanChoice == 'paper') { + if (computerChoice == 'rock') { + humanScore++; + return win; + } else if (computerChoice == 'paper') { + computerScore++; + humanScore++; + return tie; + } else { + computerScore++; + return lose; + } + } else if (humanChoice == 'scissors') { + if (computerChoice == 'rock') { + computerScore++; + return lose; + } else if (computerChoice == 'paper') { + humanScore++; + return win; + } else { + computerScore++; + humanScore++; + return tie; + } + } +} + +const playGame = () => { + for(let i = 0; i < 3; i++){ + playRound(getHumanChoice(), getComputerChoice()) + } + + return humanScore > computerScore ? "You win the game!" : "You lose the game!" +} + +``` + diff --git a/curriculum/challenges/swahili/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/swahili/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md new file mode 100644 index 00000000000..28af96694df --- /dev/null +++ b/curriculum/challenges/swahili/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md @@ -0,0 +1,20 @@ +--- +id: 645147516c245de4d11eb7ba +title: Front End Development Certification Exam +challengeType: 17 +dashedName: front-end-development-certification-exam +--- + +# --description-- + +Here are some rules: + +- click start + +# --instructions-- + +# --hints-- + +# --seed-- + +# --solutions-- diff --git a/curriculum/challenges/swahili/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/swahili/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md new file mode 100644 index 00000000000..2b1a9d0a9de --- /dev/null +++ b/curriculum/challenges/swahili/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md @@ -0,0 +1,28 @@ +--- +id: 66731cd027ef3acb155669f5 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +step 1 instructions + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/ukrainian/00-certifications/front-end-development-certification/front-end-development.yml new file mode 100644 index 00000000000..35ac6d9de25 --- /dev/null +++ b/curriculum/challenges/ukrainian/00-certifications/front-end-development-certification/front-end-development.yml @@ -0,0 +1,10 @@ +--- +id: 64514fda6c245de4d11eb7bb +title: Сертифікація «Front End розробка» +certification: front-end-development +challengeType: 7 +isPrivate: true +tests: + - + id: 645147516c245de4d11eb7ba + title: Екзамен з сертифікації «Front End розробка» diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md index 9fcd91b4e40..dd186b53e19 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md @@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins # --description-- -Міксин у Sass — це група оголошень CSS, які можна повторно використовувати у таблиці стилів. - -Новіші функції CSS потребують трохи часу, перш ніж вони будуть повністю прийнятними та готовими до використання у всіх браузерах. Як тільки функції додано до браузерів, то правилам CSS, які використовують їх, можливо, знадобляться вендорні префікси. Розглянемо `box-shadow`: +In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule. ```scss -div { - -webkit-box-shadow: 0px 0px 4px #fff; - -moz-box-shadow: 0px 0px 4px #fff; - -ms-box-shadow: 0px 0px 4px #fff; - box-shadow: 0px 0px 4px #fff; +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +nav ul { + @include reset-list; } ``` -Потрібно написати багато тексту, щоб переписати правило для всіх елементів, які мають `box-shadow`, чи щоб змінити кожне значення для перевірки різних ефектів. Міксини — це як функції для CSS. Ось приклад як написати один з них: +Compiles to: -```scss -@mixin box-shadow($x, $y, $blur, $c){ - -webkit-box-shadow: $x $y $blur $c; - -moz-box-shadow: $x $y $blur $c; - -ms-box-shadow: $x $y $blur $c; - box-shadow: $x $y $blur $c; +```css +nav ul { + margin: 0; + padding: 0; + list-style: none; } ``` -Визначення починається з `@mixin`, після якого пишуть назву. Параметри (`$x`, `$y`, `$blur` та `$c` у прикладі вище) необов’язкові. Тепер, якщо нам знадобиться правило `box-shadow`, то лише один рядок, який викличе міксин, замінює необхідність написання усіх вендорних префіксів. Міксин викликається директивою `@include`: +Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin. ```scss -div { - @include box-shadow(0px, 0px, 4px, #fff); +@mixin prose($font-size, $spacing) { + font-size: $font-size; + margin: 0; + margin-block-end: $spacing; +} + +p { + @include prose(1.25rem, 1rem); +} + +h2 { + @include prose(2.4rem, 1.5rem); +} +``` + +You can make arguments optional by giving the parameters default values. + +```scss +@mixin text-color($color: black) { + color: $color; +} + +p { + @include text-color(); /* color: black */ +} + +nav a { + @include text-color(orange); } ``` # --instructions-- -Напишіть міксин для `border-radius` і надайте йому параметр `$radius`. Він має використати усі вендорні префікси з прикладу. Після цього використайте міксин `border-radius`, щоб надати елементу `#awesome` заокруглений радіус зі значенням `15px`. +Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`. + +Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`. # --hints-- -Код має оголосити міксин під назвою `border-radius`, який має параметр `$radius`. +You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`. ```js -assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); +assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi); ``` -Код має містити вендорний префікс `-webkit-border-radius`, який використовує параметр `$radius`. +Your mixin should include a `width` property that uses the `$w` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi); ``` -Код має містити вендорний префікс `-moz-border-radius`, який використовує параметр `$radius`. +Your mixin should include a `height` property that uses the `$h` parameter. ```js -assert( - __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi) -); +assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi); ``` -Код має містити вендорний префікс `-ms-border-radius`, який використовує параметр `$radius`. +Your mixin should include a `background-color` property that uses the `$bg-color` parameter. ```js -assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi)); +assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi); ``` -Код має містити загальне правило `border-radius`, яке використовує параметр `$radius`. +You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`. ```js -assert( - __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length == - 4 -); +assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi); ``` -Код має викликати `border-radius mixin` за допомогою ключового слова `@include`, встановивши його на `15px`. +You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`. ```js -assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); +assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi); +``` + +You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`. + +```js +assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi); ``` # --seed-- @@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); ```html -
+
+
+
``` # --solutions-- ```html -
+
+
+
``` diff --git a/curriculum/challenges/ukrainian/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/ukrainian/09-information-security/information-security-projects/stock-price-checker.md index 961d2be28aa..d32688a786b 100644 --- a/curriculum/challenges/ukrainian/09-information-security/information-security-projects/stock-price-checker.md +++ b/curriculum/challenges/ukrainian/09-information-security/information-security-projects/stock-price-checker.md @@ -20,7 +20,7 @@ dashedName: stock-price-checker # --instructions-- -1. Встановіть `NODE_ENV` на `test` без лапок та встановіть `DB` на свій рядок з’єднання MongoDB +1. Встановіть змінну середовища `NODE_ENV` на `test`, без лапок 2. Завершіть проєкт в `routes/api.js` або створивши обробник/контролер 3. Ви додаватимете будь-які функції безпеки до `server.js` 4. Ви створюватимете усі функціональні тести в `tests/2_functional-tests.js` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md index 102b239f67b..fcf42005eb9 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -Тепер потрібно пов'язати файл `styles.css`, щоб стилі знову були застосовані. Вкладіть самозакривний елемент `link` в елемент `head`. Надайте йому атрибут `rel` зі значенням `stylesheet` та атрибут `href` зі значенням `styles.css`. +Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`. # --hints-- diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md index bea60cf94c5..195d3ead52a 100644 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md @@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID **Історія користувача:** 1. You should have an `input` element with an `id` of `"search-input"` -1. You should have a `button` element with an `id` of `"search-button` +1. You should have a `button` element with an `id` of `"search-button"` 1. You should have an element with an `id` of `"pokemon-name"` 1. You should have an element with an `id` of `"pokemon-id"` 1. You should have an element with an `id` of `"weight"` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md index 74f8d7a80b1..81067f66923 100644 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -Тепер вам потрібно змінити показуваний текст. Change the `innerText` property of the `text` to be `"You enter the store."`. +Тепер вам потрібно змінити показуваний текст. Change the `innerText` property of the `text` variable to be `"You enter the store."`. # --hints-- @@ -153,6 +153,7 @@ function goStore() { button1.onclick = buyHealth; button2.onclick = buyWeapon; button3.onclick = goTown; + } --fcc-editable-region-- diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md index 7e389b0a832..b0e53680056 100644 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md @@ -17,7 +17,7 @@ You should call the `.push()` method of `rows` in your `else` block. assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/); ``` -You should pass a `padRow()` call as the argument for your `.unshift()` method. +You should pass a `padRow()` call as the argument for your `.push()` method. ```js assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/); diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md index 71185c062b8..b0781aa0ff3 100644 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md @@ -23,10 +23,16 @@ Add a `case` where the value is `"yyyy-mm-dd"`. Встановіть текст # --hints-- -You should add a `case` where the condition is `"yyyy-mm-dd"`. Потім встановіть властивість `textContent` змінної `currentDateParagraph` на `formattedDate`. +You should add a `case` with the value `"yyyy-mm-dd"`. ```js -assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/); +``` + +You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case. + +```js +assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/); ``` # --seed-- diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md index ad6e6754b8a..9a917b8848e 100644 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md @@ -13,16 +13,22 @@ Add another `case` with the value `"mm-dd-yyyy-h-mm"`. У цьому `case` вс # --hints-- -You should add a `case` where the condition is `"mm-dd-yyyy-h-mm"`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals. +You should add a `case` with the value `"mm-dd-yyyy-h-mm"`. ```js -assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/); ``` -Додайте інструкцію `break` в межах `case` після логіки. +You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case. ```js -assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g)); +assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/); +``` + +You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic. + +```js +assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/); ``` # --seed-- diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md index 4858e5e842c..25d2306dc2b 100644 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md @@ -31,10 +31,16 @@ switch (dayOfWeek) { # --hints-- -Використайте випадок `default`, щоб встановити властивість `textContent` змінної `currentDateParagraph` на значення змінної `formattedDate`. +You should have a `default` case after the existing cases. ```js -assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g)); +assert.match(code, /default\s*:\s*/) +``` + +In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`. + +```js +assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g); ``` # --seed-- diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md new file mode 100644 index 00000000000..acb370c791a --- /dev/null +++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md @@ -0,0 +1,261 @@ +--- +id: 66629f407d679d3105e8317f +title: Побудуйте гру «Камінь-ножиці-папір» +challengeType: 14 +dashedName: top-build-a-rock-paper-scissors-game +--- + +# --description-- +У грі буде двоє гравців: людина і комп’ютер. Ви напишете функцію, яка випадковим чином повертає `"rock"`, `"paper"` або `"scissors"`. + +Не турбуйтесь про фронт енд гри. Ви писатимете лише логіку гри. Відкрийте `script.js` та дотримуйтесь інструкцій нижче. + +**Історія користувача:** + +1. Ви повинні мати функцію під назвою `getComputerChoice`. + +1. Функція `getComputerChoice` має повернути `"rock"`, `"paper"` або `"scissors"` (випадковим чином). + +**Підказка:** метод [Math.random](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Math/random/) повертає випадкове число, яке більше або дорівнює 0, але менше за 1. Подумайте, як його можна використати, щоб умовно повернути один з декількох виборів. + +Гру гратиме людина. Ви напишете функцію, яка приймає вибір користувача та повертає його. + +1. Створіть функцію під назвою `getHumanChoice`. + +1. Напишіть такий код, щоб функція `getHumanChoice` повернула один з дійсних виборів залежно від вхідних даних користувача. + +**Підказка:** використайте метод [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt), щоб отримати вхідні дані користувача. + +Гра вестиме рахунок. Для цього ви напишете змінні. + +1. У глобальній області створіть дві змінні під назвами `humanScore` та `computerScore`. + +1. Надайте цим змінним значення `0`. + +Після кожного раунду буде інший. Ви напишете функцію, яка приймає вибори гравців як аргументи, грає один раунд, збільшує очки переможця та оголошує переможця. + +1. Створіть нову функцію під назвою `playRound`. + +1. Визначте два параметри для `playRound`: `humanChoice` та `computerChoice`. Використайте ці два параметри, щоб прийняти вибори людини та комп’ютера як аргументи. + +1. Зробіть параметр `humanChoice` нечутливим до регістру, щоб гравці могли вводити `"rock"`, `"ROCK"`, `"RocK"` чи інші варіанти. + +1. Напишіть код для функції `playRound`, що повертає рядок із переможцем раунду. + +- Якщо нічия, вона має повернути `"It's a tie!"`. + +- Якщо перемогла людина, вона має повернути `"You win! [player choice] beats [computer choice]"`. + +- Якщо переміг комп’ютер, вона має повернути `"You lose! [computer choice] beats [player choice]"`. + +1. Збільште змінну `humanScore` або `computerScore` залежно від переможця раунду. + +Гра складається з 3 раундів. Ви напишете функцію `playGame`, яка викликає `playRound`, щоб зіграти 3 раунди, веде рахунок та оголошує переможця вкінці. + +1. Створіть нову функцію під назвою `playGame`. + +1. Створіть цикл, який грає 3 раунди і кожного разу викликає функцію `playRound`, аргументами якої є вибори людини та комп’ютера. + +1. У кінці гри поверніть переможця гри на основі того, хто виграв більше раундів. + +- Якщо людина перемагає більше раундів, ніж комп’ютер, поверніть повідомлення `"You win the game!"`. + +- Якщо комп’ютер перемагає більше раундів, ніж людина, поверніть повідомлення `"You lose the game!"`. + +# --hints-- + +Ви повинні мати функцію під назвою `getComputerChoice` + +```js +assert.isFunction(getComputerChoice); +``` + +Функція `getComputerChoice` має повернути `"rock"`, `"paper"` або `"scissors"` (випадковим чином). + +```js +const counts = {} +for (let i = 0; i < 100; i++) { + const result = getComputerChoice(); + counts[result] = (counts[result] ?? 0) + 1; +} +assert.lengthOf(Object.keys(counts), 3); +assert.include(Object.keys(counts), "rock"); +assert.include(Object.keys(counts), "paper"); +assert.include(Object.keys(counts), "scissors"); +``` + +Ви повинні мати функцію під назвою `getHumanChoice` + +```js +assert.isFunction(getHumanChoice); +``` + +Ви повинні мати дві змінні (`humanScore` та `computerScore`) у глобальній області. + +```js +assert.exists(humanScore); +assert.exists(computerScore); +``` + +Ви повинні мати функцію під назвою `playRound` + +```js +assert.isFunction(playRound); +``` + +Функція `playRound` має приймати вибори людини і комп’ютера як аргументи у вигляді параметрів `humanChoice` та `computerChoice`. + +```js +assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/); +``` + +Функція `playRound` має бути нечутливою до регістру, щоб гравці могли вводити `"rock"`, `"ROCK"`, `"RocK"` чи інші варіанти. + +```js +assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/); +``` + +Функція `playRound` має повернути рядок `"It's a tie!"`, якщо вибір людини та комп’ютера однаковий. + +```js +assert.equal(playRound("rock", "rock"), "It's a tie!"); +``` + +Функція `playRound` має повернути рядок `"You win! [player choice] beats [computer choice]"`, якщо перемогла людина. + +```js +assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors"); +``` + +Функція `playRound` має повернути рядок `"You lose! [computer choice] beats [player choice]"`, якщо переміг комп’ютер. + +```js +assert.equal(playRound("rock", "paper"), "You lose! paper beats rock"); +``` + +Функція `playRound` має збільшити змінну `humanScore` або `computerScore` залежно від переможця раунду. + +```js +humanScore = 0; +computerScore = 0; +playRound("rock", "scissors"); +assert.equal(humanScore, 1); +``` + +Ви повинні мати функцію під назвою `playGame`. + +```js +assert.isFunction(playGame); +``` + +Використайте цикл, щоб зіграти 3 раунди. + +```js +assert.match(playGame.toString(), /\bfor\s*\(/); +``` + +Поверніть переможця гри на основі того, хто виграв більше раундів. + +```js +window.prompt = () => "rock"; +assert.match(playGame(), /You (win|lose) the game!/); +``` + +# --seed-- + +## --seed-contents-- + +```js +const hand = ['rock', 'paper', 'scissor']; +``` + +```html + + + + + +``` + +# --solutions-- + +```html + + + + + +``` + +```js +const hand = ['rock', 'paper', 'scissors']; + + +let computerScore = 0; +let humanScore = 0; + +const getComputerChoice = () => { + return hand[Math.floor(Math.random() * hand.length)]; +} + +const getHumanChoice = () => { + return prompt(); +} + +const playRound = (humanChoice, computerChoice) => { + humanChoice = humanChoice.toLowerCase() + + const tie = "It's a tie!" + const win = `You win! ${humanChoice} beats ${computerChoice}` + const lose = `You lose! ${computerChoice} beats ${humanChoice}` + + + if (humanChoice == 'rock') { + if (computerChoice == 'rock') { + computerScore++; + humanScore++; + return tie; + } else if (computerChoice == 'paper') { + computerScore++; + return lose; + } else { + humanScore++; + return win; + } + } else if (humanChoice == 'paper') { + if (computerChoice == 'rock') { + humanScore++; + return win; + } else if (computerChoice == 'paper') { + computerScore++; + humanScore++; + return tie; + } else { + computerScore++; + return lose; + } + } else if (humanChoice == 'scissors') { + if (computerChoice == 'rock') { + computerScore++; + return lose; + } else if (computerChoice == 'paper') { + humanScore++; + return win; + } else { + computerScore++; + humanScore++; + return tie; + } + } +} + +const playGame = () => { + for(let i = 0; i < 3; i++){ + playRound(getHumanChoice(), getComputerChoice()) + } + + return humanScore > computerScore ? "You win the game!" : "You lose the game!" +} + +``` + diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-question-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-question-a.md index ac2fed5be68..6b3cc8717f0 100644 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-question-a.md +++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-question-a.md @@ -25,7 +25,7 @@ dashedName: learn-to-solve-problems-and-understand-errors-question-a ## --assignment-- -Прочитайте статтю
«Думай як програміст: уроки розв’язання проблем» Річарда Рейса (англійською мовою). +Прочитайте статтю «Думай як програміст: уроки розв’язання проблем» Річарда Рейса. ## --text-- diff --git a/curriculum/challenges/ukrainian/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/ukrainian/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md new file mode 100644 index 00000000000..28af96694df --- /dev/null +++ b/curriculum/challenges/ukrainian/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md @@ -0,0 +1,20 @@ +--- +id: 645147516c245de4d11eb7ba +title: Front End Development Certification Exam +challengeType: 17 +dashedName: front-end-development-certification-exam +--- + +# --description-- + +Here are some rules: + +- click start + +# --instructions-- + +# --hints-- + +# --seed-- + +# --solutions-- diff --git a/curriculum/challenges/ukrainian/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/ukrainian/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md new file mode 100644 index 00000000000..2b1a9d0a9de --- /dev/null +++ b/curriculum/challenges/ukrainian/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md @@ -0,0 +1,28 @@ +--- +id: 66731cd027ef3acb155669f5 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +step 1 instructions + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +```